/* ═══════════════════════════════════════════════════════════════
   THE FUSELOOM ASSISTANT — panel styling for the "Ultimate" design.

   Colour law is the page's own: TEAL is the machine speaking, GOLD is
   the moment a person is needed. The hand-over card is the only gold
   surface in the panel, so the escalation is impossible to miss.

   Accessibility notes, because this widget is itself a sales argument:
     · the launcher and every control are real <button>s, ≥44px
     · the panel is a labelled dialog, focus moves into it on open and
       returns to the launcher on close, Escape closes it
     · replies stream into an aria-live region so a screen reader
       announces them once, when they settle
   Every class is prefixed .fa- and cannot collide with the page.
   ═══════════════════════════════════════════════════════════════ */

/* ── the widget's own palette ────────────────────────────────────
   This stylesheet is loaded by all three designs, and they do not share a
   token set: D1 has --gold/--teal, Swarm has --cyan/--yellow, Graph has --em
   on a light ground and no --gold at all. Referencing a page token directly
   meant the hand-over card — the single most important thing in the panel —
   lost its colour on two designs out of three. So the widget carries its own
   tokens, defaulted to D1, and each page states which set it wants via
   data-agent-theme on <body>.

   --fa-ai    = the machine talking      --fa-human = a person is needed
   Keep those two roles straight; the whole panel reads by them.            */
:root{
  --fa-bg-1:rgba(17,29,44,.97); --fa-bg-2:rgba(6,11,18,.97);
  --fa-field:rgba(6,11,18,.7);
  --fa-fg:#EAF2FA; --fa-mut:#8FA3B8; --fa-read:#C3D2E1;
  --fa-line:rgba(180,212,238,.13); --fa-line2:rgba(180,212,238,.24);
  --fa-deep:#060B12;
  --fa-ai:#2FE3C4; --fa-human:#F2C879; --fa-human-read:#F3E3C4;
  --fa-on-accent:#0A1219;
  --fa-t1:140ms; --fa-t2:280ms; --fa-t3:520ms; --fa-e:cubic-bezier(.22,1,.36,1);
}
/* Swarm: cyan is an agent working, yellow is a hand-off. Same law, its colours. */
[data-agent-theme="swarm"]{
  --fa-bg-1:rgba(16,27,46,.97); --fa-bg-2:rgba(6,10,20,.97);
  --fa-field:rgba(6,10,20,.7);
  --fa-fg:#E8F1F8; --fa-mut:#8296AC; --fa-read:#B4C6D8;
  --fa-line:rgba(130,150,172,.20); --fa-line2:rgba(130,150,172,.34);
  --fa-deep:#060A14;
  --fa-ai:#22D3EE; --fa-human:#F5D95B; --fa-human-read:#F6E9AE;
  --fa-on-accent:#061018;
}
/* Graph is a LIGHT page: the panel is white, and the deeper green carries the
   human moments because there is no second hue in this design. */
[data-agent-theme="graph"]{
  --fa-bg-1:#FFFFFF; --fa-bg-2:#F7F9F8;
  --fa-field:#FFFFFF;
  --fa-fg:#0F1613; --fa-mut:#5C6F68; --fa-read:#31423C;
  --fa-line:#DDE5E1; --fa-line2:#C8D6CF;
  --fa-deep:#EEF3F0;
  --fa-ai:#0E9F6E; --fa-human:#0B5F52; --fa-human-read:#123F37;
  --fa-on-accent:#FFFFFF;
}

/* ── launcher ────────────────────────────────────────────────── */
.fa-fab{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(66px,9vh,74px);z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:12px 18px 12px 14px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--fa-ai) 34%,transparent);
  background:linear-gradient(150deg,var(--fa-bg-1),var(--fa-bg-2));
  color:var(--fa-fg);font:600 14px/1 'Instrument Sans',system-ui,sans-serif;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--fa-t2) var(--fa-e),border-color var(--fa-t2) var(--fa-e),box-shadow var(--fa-t2) var(--fa-e);
}
.fa-fab:hover{transform:translateY(-2px);border-color:var(--fa-ai);
  box-shadow:0 22px 46px -18px rgba(0,0,0,.95),0 0 30px -12px color-mix(in srgb,var(--fa-ai) 50%,transparent)}
.fa-fab[aria-expanded="true"]{opacity:0;pointer-events:none;transform:translateY(8px)}
/* the live dot: the only ambient motion in the whole widget */
.fa-fab i{width:9px;height:9px;border-radius:50%;background:var(--fa-ai);flex:none;
  box-shadow:0 0 10px var(--fa-ai);animation:fa-bp 2.8s ease-in-out infinite}
@keyframes fa-bp{50%{opacity:.35;transform:scale(.72)}}

/* ── panel ─────────────────────────────────────────────────────
   NOTE: the entered state is .fa-shown, deliberately NOT .fa-in —
   .fa-in is the textarea, and a panel carrying both classes would
   inherit the input's max-height and collapse. */
[data-agent-theme="graph"] .fa-panel{box-shadow:0 30px 70px -34px rgba(15,22,19,.4)}
[data-agent-theme="graph"] .fa-fab{box-shadow:0 14px 30px -14px rgba(15,22,19,.35)}
.fa-panel{
  position:fixed;right:clamp(10px,2.4vw,26px);bottom:clamp(66px,9vh,74px);z-index:95;
  width:min(408px,calc(100vw - 20px));max-height:min(640px,calc(100svh - 120px));
  display:none;flex-direction:column;overflow:hidden;
  border:1px solid var(--fa-line2);border-radius:20px;
  background:linear-gradient(180deg,var(--fa-bg-1),var(--fa-bg-2));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity var(--fa-t2) var(--fa-e),transform var(--fa-t2) var(--fa-e);
}
.fa-panel.fa-open{display:flex}
.fa-panel.fa-shown{opacity:1;transform:none}

/* head: who this is, and what it is allowed to do */
.fa-head{display:flex;align-items:center;gap:11px;padding:13px 14px;border-bottom:1px solid var(--fa-line);
  background:color-mix(in srgb,var(--fa-fg) 30%,transparent)}
.fa-mark{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--fa-deep);border:1px solid var(--fa-line2);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14px;letter-spacing:-.04em;color:var(--fa-fg)}
.fa-mark em{font-style:normal;background:linear-gradient(180deg,var(--fa-human),var(--fa-ai));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fa-who{min-width:0;flex:1}
.fa-who b{display:block;font:600 14px/1.25 'Instrument Sans',sans-serif;color:var(--fa-fg)}
.fa-who span{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fa-mut);margin-top:3px}
.fa-x{width:44px;height:44px;flex:none;margin:-6px -6px -6px 0;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--fa-mut);border-radius:10px;
  transition:color var(--fa-t1) var(--fa-e),background var(--fa-t1) var(--fa-e)}
.fa-x:hover{color:var(--fa-fg);background:color-mix(in srgb,var(--fa-fg) 70%,transparent)}

/* the grounding note — permanent, because it is the point */
.fa-note{padding:10px 15px;border-bottom:1px solid var(--fa-line);
  font-family:'Space Mono',monospace;font-size:9.5px;line-height:1.55;letter-spacing:.05em;color:var(--fa-mut)}
.fa-note b{color:var(--fa-read);font-weight:400}

/* ── log ─────────────────────────────────────────────────────── */
.fa-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:15px;display:flex;flex-direction:column;gap:13px;
  scrollbar-width:thin;scrollbar-color:var(--fa-line2) transparent}
.fa-log::-webkit-scrollbar{width:8px}
.fa-log::-webkit-scrollbar-thumb{background:var(--fa-line2);border-radius:8px}

.fa-msg{max-width:88%;font-size:14.4px;line-height:1.58;white-space:pre-wrap;word-wrap:break-word}
.fa-msg a{color:var(--fa-ai);text-underline-offset:2px}
.fa-msg--you{align-self:flex-end;padding:9px 13px;border-radius:14px 14px 4px 14px;
  background:color-mix(in srgb,var(--fa-fg) 80%,transparent);border:1px solid var(--fa-line);color:var(--fa-fg)}
.fa-msg--ai{align-self:flex-start;padding:11px 14px;border-radius:14px 14px 14px 4px;
  background:color-mix(in srgb,var(--fa-ai) 55%,transparent);border:1px solid color-mix(in srgb,var(--fa-ai) 20%,transparent);color:var(--fa-read)}
/* Kept for a future streaming build. The endpoint returns a whole answer today
   (see the note in functions/designs/api/chat.js), so nothing sets this class. */
.fa-msg--live::after{content:"";display:inline-block;width:7px;height:15px;margin-left:2px;
  vertical-align:-2px;background:var(--fa-ai);animation:fa-cur 1s steps(2) infinite}
@keyframes fa-cur{50%{opacity:0}}

/* reading indicator, shown before the first token lands */
.fa-think{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;
  border-radius:14px 14px 14px 4px;background:color-mix(in srgb,var(--fa-ai) 55%,transparent);border:1px solid color-mix(in srgb,var(--fa-ai) 20%,transparent)}
.fa-think i{width:6px;height:6px;border-radius:50%;background:var(--fa-ai);opacity:.35;
  animation:fa-dot 1.25s ease-in-out infinite}
.fa-think i:nth-child(2){animation-delay:.16s}.fa-think i:nth-child(3){animation-delay:.32s}
@keyframes fa-dot{30%{opacity:1;transform:translateY(-3px)}}

/* ── the hand-over card: the whole reason this thing is credible ── */
.fa-hand{align-self:stretch;border:1px solid color-mix(in srgb,var(--fa-human) 45%,transparent);border-radius:13px;padding:13px 14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fa-human) 10%,transparent),color-mix(in srgb,var(--fa-human) 20%,transparent));
  box-shadow:0 0 34px -14px color-mix(in srgb,var(--fa-human) 50%,transparent)}
.fa-hand .fa-hk{display:flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fa-human);margin-bottom:8px}
.fa-hand .fa-hk i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.fa-hand p{font-size:13.8px;line-height:1.55;color:var(--fa-human-read);margin-bottom:11px}
.fa-hand .fa-acts,.fa-err .fa-acts{display:flex;gap:9px;flex-wrap:wrap}
.fa-hand a,.fa-hand button,
.fa-err .fa-acts a,.fa-err .fa-acts button{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border-radius:999px;cursor:pointer;
  font:600 13px/1 'Instrument Sans',sans-serif;border:1px solid transparent;text-decoration:none;
  transition:transform var(--fa-t1) var(--fa-e),filter var(--fa-t1) var(--fa-e)}
.fa-hand .fa-p,.fa-err .fa-p{background:linear-gradient(96deg,var(--fa-human),var(--fa-ai));color:var(--fa-on-accent)}
.fa-hand .fa-s,.fa-err .fa-s{background:transparent;border-color:color-mix(in srgb,var(--fa-human) 40%,transparent);color:var(--fa-human-read)}
.fa-hand a:hover,.fa-hand button:hover,
.fa-err .fa-acts a:hover,.fa-err .fa-acts button:hover{transform:translateY(-1px);filter:brightness(1.06)}

/* ── suggestions: real buttons, so a keyboard can reach them ───── */
.fa-sugg{display:flex;flex-wrap:wrap;gap:7px;padding:0 15px 12px}
.fa-chip{min-height:36px;padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid var(--fa-line2);background:color-mix(in srgb,var(--fa-fg) 40%,transparent);color:var(--fa-read);
  font:500 12.8px/1.2 'Instrument Sans',sans-serif;text-align:left;
  transition:background var(--fa-t1) var(--fa-e),border-color var(--fa-t1) var(--fa-e),color var(--fa-t1) var(--fa-e)}
.fa-chip:hover{background:color-mix(in srgb,var(--fa-ai) 10%,transparent);border-color:var(--fa-ai);color:var(--fa-fg)}

/* ── composer ────────────────────────────────────────────────── */
.fa-form{display:flex;gap:9px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--fa-line);
  background:color-mix(in srgb,var(--fa-fg) 20%,transparent)}
.fa-in{flex:1;min-height:44px;max-height:120px;resize:none;padding:12px 13px;border-radius:12px;
  border:1px solid var(--fa-line2);background:var(--fa-field);color:var(--fa-fg);
  font:400 14.2px/1.45 'Instrument Sans',sans-serif}
.fa-in::placeholder{color:var(--fa-mut)}
.fa-in:focus{outline:none;border-color:var(--fa-ai);box-shadow:0 0 0 3px color-mix(in srgb,var(--fa-ai) 13%,transparent)}
.fa-send{width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;border:0;border-radius:12px;
  background:linear-gradient(140deg,var(--fa-human),var(--fa-ai));color:var(--fa-on-accent);
  transition:filter var(--fa-t1) var(--fa-e),transform var(--fa-t1) var(--fa-e)}
.fa-send:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.fa-send:disabled{opacity:.4;cursor:not-allowed}

/* ── the honest failure state ────────────────────────────────── */
.fa-err{align-self:stretch;border:1px dashed color-mix(in srgb,var(--fa-human) 40%,transparent);border-radius:12px;padding:12px 13px;
  background:color-mix(in srgb,var(--fa-human) 50%,transparent);font-size:13.4px;line-height:1.55;color:var(--fa-human-read)}
.fa-err b{color:var(--fa-human);font-weight:600}
.fa-err code{font-family:'Space Mono',monospace;font-size:12px;color:var(--fa-human-read)}
/* Every failure now carries the same two ways on that a deliberate hand-over
   does, so the buttons are shared with .fa-hand rather than restyled here —
   a dead end and an escalation should not look like different products. */
.fa-errp{margin-top:9px;font-size:12.2px;line-height:1.5;opacity:.8}

/* ── focus is always visible: a keyboard user must never be lost ── */
.fa-fab:focus-visible,.fa-x:focus-visible,.fa-chip:focus-visible,
.fa-send:focus-visible,.fa-in:focus-visible,.fa-hand a:focus-visible,.fa-hand button:focus-visible,
.fa-err a:focus-visible,.fa-err button:focus-visible{
  outline:2px solid var(--fa-ai);outline-offset:3px}

/* ── phones: the panel takes the screen, the launcher shrinks ──── */
@media(max-width:520px){
  .fa-panel{left:8px;right:8px;width:auto;bottom:60px;max-height:calc(100svh - 96px)}
  .fa-fab{padding:12px 15px;bottom:60px}
  .fa-fab b{display:none}
  .fa-msg{max-width:94%}
}

/* ── reduced motion: everything still works, nothing moves ────── */
@media (prefers-reduced-motion:reduce){
  .fa-panel{transition:none;opacity:1;transform:none}
  .fa-fab{transition:none}
  .fa-fab i,.fa-think i,.fa-msg--live::after{animation:none}
  .fa-msg--live::after{opacity:.6}
}
