/* ============================================================================
   First Cutt — 24/7 assistant (launcher + panel + inline stage) styles.
   ----------------------------------------------------------------------------
   Loads AFTER fc.css and consumes its tokens ONLY — no raw hex in here, so a
   token refresh restyles the assistant for free.

   PLACEMENT & Z-ORDER (deliberate, measured against what already exists):
     bottom-RIGHT is taken: toasts (.fc-toasts, z 300, right 16 bottom 16) and
     the compete name-ask card (.fc-nameask, z 310) both live there, and on a
     390px phone a bottom-right FAB sits square on most pages' primary CTA.
     The launcher therefore docks bottom-LEFT, above the iOS safe area.
       launcher  z 290  (under toasts — a toast must never be hidden)
       panel     z 315  (over the name-ask card, UNDER the compete modal's 320:
                         that modal is focus-trapped and must stay on top)
   ========================================================================== */

/* ================================================================ launcher == */
.fca-launcher {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 290;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--fc-line-2);
  border-radius: 999px;
  background: var(--fc-surface-2);
  color: var(--fc-text);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--fc-shadow-2);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.fca-launcher:hover { border-color: var(--fc-lime); box-shadow: var(--fc-glow); transform: translateY(-1px); }
.fca-launcher__face {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--fc-bg);
  border: 2px solid var(--fc-lime);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.fca-launcher__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fc-lime);
}
.fca-launcher--live .fca-launcher__dot { background: var(--fc-orange); }
/* While the panel is open the launcher gets out of the way entirely. */
body.fca-open .fca-launcher { display: none; }

/* On narrow phones collapse to a compact circle — smallest possible footprint
   over content, and any full-width CTA is only ever partially and briefly
   behind it while that exact strip is scrolled into view. */
@media (max-width: 480px) {
  .fca-launcher { padding: 6px; }
  .fca-launcher__label { display: none; }
}

/* =================================================================== panel == */
.fca-panel {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 315;
  width: min(394px, calc(100vw - 32px));
  height: min(660px, calc(100dvh - 90px));
  display: flex;
  flex-direction: column;
  background: var(--fc-surface);
  border: 1px solid var(--fc-line-2);
  border-radius: var(--fc-radius);
  box-shadow: var(--fc-shadow-2);
  overflow: hidden;
}
.fca-panel[hidden] { display: none; }

/* Phone: the panel is a full sheet — no fiddly floating card at 390px. */
@media (max-width: 719px) {
  .fca-panel:not(.fca-panel--inline) {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  /* the page behind the sheet must not scroll (floating mode only — the
     inline stage never sets .fca-open) */
  body.fca-open { overflow: hidden; }
}

/* Inline stage (the concierge showcase) — same panel, in the page flow. */
.fca-panel--inline {
  position: static;
  width: 100%;
  max-width: 760px;
  height: min(680px, 82dvh);
  box-shadow: var(--fc-shadow-1);
}

/* ==================================================================== head == */
.fca-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fc-line);
  background: var(--fc-surface-2);
  flex: none;
  min-width: 0;
}
.fca-facewrap {
  border: 0; padding: 0; background: none; cursor: pointer;
  border-radius: 50%; flex: none; line-height: 0;
}
.fca-face { width: 58px; height: 58px; display: block; }
.fca-panel--inline .fca-face { width: 92px; height: 92px; }

.fca-headtxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fca-name { font-size: .98rem; letter-spacing: -.01em; }
.fca-status {
  font-size: .78rem; color: var(--fc-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fca-ttsbtn, .fca-closebtn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--fc-line-2);
  background: transparent;
  color: var(--fc-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.fca-ttsbtn:hover, .fca-closebtn:hover { color: var(--fc-text); border-color: var(--fc-lime); }
.fca-ttsbtn--on {
  color: var(--fc-lime);
  border-color: var(--fc-lime);
  background: rgba(162,230,26,.10);
}

/* ===================================================================== log == */
.fca-log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  scrollbar-width: thin;
}
.fca-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: .93rem;
  line-height: 1.55;
  overflow-wrap: anywhere;      /* 390px guarantee — long tokens wrap, never scroll */
}
.fca-msg--bot {
  align-self: flex-start;
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-line);
  border-bottom-left-radius: 5px;
  color: var(--fc-text);
}
.fca-msg--user {
  align-self: flex-end;
  background: rgba(162,230,26,.13);
  border: 1px solid rgba(162,230,26,.3);
  border-bottom-right-radius: 5px;
  color: var(--fc-text);
}
/* Rich (parsed-markdown) content inside a bubble */
.fca-msg p { margin: 0 0 8px; }
.fca-msg p:last-child { margin-bottom: 0; }
.fca-msg ul, .fca-msg ol { margin: 4px 0 8px; padding-left: 1.25em; }
.fca-msg ul:last-child, .fca-msg ol:last-child { margin-bottom: 0; }
.fca-msg li { margin-bottom: 3px; }
.fca-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: rgba(133,170,173,.14);
  border-radius: 5px;
  padding: 1px 5px;
}
.fca-msg strong { color: var(--fc-lime); font-weight: 700; }

/* thinking dots */
.fca-typing { display: inline-flex; gap: 5px; padding: 12px 14px; }
.fca-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fc-muted);
  animation: fca-bounce 1.1s infinite ease-in-out;
}
.fca-typing span:nth-child(2) { animation-delay: .15s; }
.fca-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes fca-bounce {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ======================================================== consent + notice == */
.fca-consent, .fca-esc {
  flex: none;
  margin: 0 14px 10px;
  padding: 13px 15px;
  background: var(--fc-surface-2);
  border: 1px solid var(--fc-line-2);
  border-left: 4px solid var(--fc-lime);
  border-radius: var(--fc-radius-sm);
}
.fca-consent[hidden], .fca-esc[hidden] { display: none; }
.fca-consent p { font-size: .84rem; color: var(--fc-muted); margin: 6px 0 10px; }
.fca-consent__row, .fca-esc__row { display: flex; flex-wrap: wrap; gap: 8px; }

.fca-notice {
  flex: none;
  margin: 0 14px 8px;
  font-size: .8rem;
  color: var(--fc-caution);
}
.fca-notice[hidden] { display: none; }

/* ============================================================== escalation == */
.fca-esc { border-left-color: var(--fc-orange); }
.fca-esc__lead { display: block; font-size: .95rem; }
.fca-esc__sub { font-size: .82rem; color: var(--fc-muted); margin: 4px 0 10px; }
.fca-field { margin-bottom: 9px; }
.fca-field label {
  display: block;
  font-size: .78rem; font-weight: 700;
  margin-bottom: 4px; color: var(--fc-text);
}
.fca-field input { padding: 9px 12px; font-size: .9rem; }
.fca-err { display: block; font-size: .76rem; color: var(--fc-caution); min-height: 0; }
.fca-esc__err { margin: 8px 0 0; }

/* ================================================================ composer == */
.fca-hearing {
  flex: none;
  margin: 0 14px 6px;
  font-size: .82rem;
  font-style: italic;
  color: var(--fc-muted);
  overflow-wrap: anywhere;
}
.fca-hearing[hidden] { display: none; }

.fca-chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 10px;
}
.fca-chip {
  border: 1px solid var(--fc-line-2);
  background: transparent;
  color: var(--fc-muted);
  font: inherit; font-size: .8rem; font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.fca-chip:hover { color: var(--fc-lime); border-color: var(--fc-lime); }

.fca-composer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--fc-line);
  background: var(--fc-surface-2);
  min-width: 0;
}
.fca-input { flex: 1; min-width: 0; }   /* min-width:0 = no 390px overflow, ever */
.fca-send { flex: none; padding: 10px 18px; font-size: .88rem; }

.fca-micbtn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--fc-line-2);
  background: transparent;
  color: var(--fc-text);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.fca-micbtn:hover { border-color: var(--fc-lime); color: var(--fc-lime); }
.fca-micbtn--live {
  background: var(--fc-lime);
  border-color: var(--fc-lime);
  color: var(--fc-bg);
  animation: fca-miclive 1.6s infinite ease-in-out;
}
@keyframes fca-miclive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(162,230,26,.45); }
  55%      { box-shadow: 0 0 0 9px rgba(162,230,26,0); }
}
/* fc.css already flattens all animation under prefers-reduced-motion; this
   keeps the live state legible there via colour alone (solid lime = mic on). */

/* ==================================================================== foot == */
.fca-foot {
  flex: none;
  margin: 0;
  padding: 7px 14px 10px;
  font-size: .72rem;
  color: var(--fc-muted);
  background: var(--fc-surface-2);
}
.fca-foot--dim { padding-top: 0; opacity: .8; }
.fca-composer + .fca-foot { border-top: 0; }