/* Live chat widget. Uses the site's own tokens so it inherits light and dark
   automatically rather than being a bolted on box in someone else's colours. */

.gfc { position: fixed; right: 20px; bottom: 20px; z-index: 9000; }

/* a labelled pill, not a bare icon: a visitor should never have to guess what
   the button does */
.gfc-launch {
  position: relative;
  height: 54px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 20px 0 16px;
  border: none; border-radius: 999px;
  background: var(--accent, #ff6b4a);
  color: #fff;
  cursor: pointer;
  font: 600 14.5px/1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gfc-launch svg { flex: 0 0 auto; }
.gfc-launch:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.5); }
/* while the panel is open the pill shrinks back to a quiet circle under it */
.gfc-launch.on { width: 54px; padding: 0; justify-content: center; transform: scale(0.96); }
.gfc-launch.on .gfc-label { display: none; }

/* unread marker, shown when a reply lands while the panel is shut */
.gfc-dot {
  position: absolute; top: 4px; right: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}

.gfc-panel {
  position: absolute; right: 0; bottom: 70px;
  width: min(360px, calc(100vw - 40px));
  height: min(520px, calc(100vh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel, #fff);
  color: var(--text, #12313a);
  border: 1px solid var(--line, rgba(18,49,58,0.12));
  border-radius: 18px;
  box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.5);
  animation: gfc-rise 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gfc-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gfc-panel { animation: none; }
  .gfc-launch { transition: none; }
}

.gfc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: var(--primary, #0e5a6b); color: #fff;
}
.gfc-head strong { display: block; font-size: 14.5px; }
.gfc-sub { display: block; font-size: 11.5px; opacity: 0.75; margin-top: 2px; }
.gfc-close {
  background: none; border: none; color: #fff; opacity: 0.8;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.gfc-close:hover { opacity: 1; }

.gfc-log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg, #f4f7f7);
}
.gfc-msg { display: flex; flex-direction: column; max-width: 82%; }
.gfc-msg.me { align-self: flex-end; align-items: flex-end; }
.gfc-msg.them { align-self: flex-start; align-items: flex-start; }
.gfc-bubble {
  padding: 9px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.gfc-msg.me .gfc-bubble { background: var(--accent, #ff6b4a); color: #fff; border-bottom-right-radius: 5px; }
.gfc-msg.them .gfc-bubble {
  background: var(--panel, #fff); color: var(--text, #12313a);
  border: 1px solid var(--line, rgba(18,49,58,0.12)); border-bottom-left-radius: 5px;
}
.gfc-time { font-size: 10.5px; color: var(--faint, #8aa0a3); margin-top: 3px; }

.gfc-form { border-top: 1px solid var(--line, rgba(18,49,58,0.12)); padding: 10px 12px 12px; background: var(--panel, #fff); }
.gfc-intro { display: grid; gap: 7px; margin-bottom: 8px; }
.gfc-row { display: flex; gap: 8px; align-items: flex-end; }

.gfc input, .gfc textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg, #f4f7f7);
  border: 1px solid var(--line, rgba(18,49,58,0.14));
  color: var(--text, #12313a);
  border-radius: 10px; padding: 9px 11px;
  font: inherit; font-size: 13.5px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gfc textarea { resize: none; max-height: 110px; }
.gfc input:focus, .gfc textarea:focus {
  border-color: var(--accent, #ff6b4a);
  box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.16);
}
.gfc input::placeholder, .gfc textarea::placeholder { color: var(--faint, #8aa0a3); }

.gfc-send {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none; border-radius: 10px;
  background: var(--accent, #ff6b4a); color: #fff; cursor: pointer;
}
.gfc-send:hover { filter: brightness(1.05); }

.gfc-note { margin: 7px 2px 0; font-size: 11.5px; color: var(--faint, #8aa0a3); }

/* ---- pictures ------------------------------------------------------------ */
.gfc-clip {
  flex: 0 0 auto; width: 34px; height: 38px;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--faint, #8aa0a3);
}
.gfc-clip:hover { color: var(--accent, #ff6b4a); }
.gfc-shot { display: block; max-width: 210px; border-radius: 14px; overflow: hidden; }
.gfc-shot img { display: block; width: 100%; height: auto; }
.gfc-shot a { display: block; }
.gfc-dl {
  display: block; padding: 6px 10px; font-size: 11px; font-weight: 600;
  color: var(--faint, #8aa0a3); text-decoration: none;
  background: var(--panel-2, #f7fafb); border-top: 1px solid var(--line, #e3ecee);
}
.gfc-dl:hover { color: var(--accent, #ff6b4a); }
.gfc-msg.me .gfc-shot { border-bottom-right-radius: 5px; }
.gfc-msg.them .gfc-shot { border-bottom-left-radius: 5px; }

/* ---- who is replying ----------------------------------------------------- */
.gfc-from {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--muted, #5c7075);
  margin: 0 0 3px 2px;
}
.gfc-avatar {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--primary, #0e5a6b); color: #fff;
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em;
}

/* ---- sent and read ------------------------------------------------------- */
.gfc-receipt { margin-left: 6px; opacity: 0.85; }

/* ---- typing dots --------------------------------------------------------- */
.gfc-typing .gfc-bubble { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.gfc-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--faint, #8aa0a3); display: block;
  animation: gfc-bounce 1.25s infinite ease-in-out;
}
.gfc-typing i:nth-child(2) { animation-delay: 0.16s; }
.gfc-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes gfc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gfc-typing i { animation: none; opacity: 0.7; }
}

/* ---- rating -------------------------------------------------------------- */
.gfc-rate {
  display: flex; align-items: center; gap: 3px;
  padding: 9px 14px; border-top: 1px solid var(--line, rgba(18,49,58,0.12));
  font-size: 12px; color: var(--muted, #5c7075);
}
.gfc-rate > span { margin-right: 5px; }
.gfc-rate button {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 17px; line-height: 1; color: var(--faint, #8aa0a3);
}

/* Hovering the third star should light one, two and three. A sibling selector
   only reaches forward, so the stars are laid out in reverse and the row is
   flipped back visually. */
.gfc-stars { display: inline-flex; flex-direction: row-reverse; }
.gfc-stars button:hover,
.gfc-stars button:hover ~ button { color: var(--accent, #ff6b4a); }

/* ---- proactive greeting -------------------------------------------------- */
.gfc-greet {
  position: absolute; right: 0; bottom: 62px; width: 250px;
  background: var(--panel, #fff); color: var(--text, #12313a);
  border: 1px solid var(--line, rgba(18,49,58,0.12)); border-radius: 14px;
  padding: 13px 15px; cursor: pointer;
  box-shadow: 0 14px 34px rgba(6, 22, 28, 0.18);
  animation: gfc-rise 0.32s ease-out both;
}
.gfc-greet p { margin: 0; font-size: 13px; line-height: 1.5; padding-right: 12px; }
.gfc-greet-x {
  position: absolute; top: 5px; right: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--faint, #8aa0a3); font-size: 16px; line-height: 1; padding: 2px 4px;
}
@keyframes gfc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .gfc-greet { animation: none; } }

@media (max-width: 480px) {
  .gfc { right: 14px; bottom: 14px; }
  .gfc-panel { bottom: 66px; height: min(70vh, calc(100vh - 110px)); }
  .gfc-greet { width: min(250px, calc(100vw - 40px)); }
}