/* Site agent + command palette — floating overlays, hand-written (no build step).
   Every colour here resolves through the design tokens in site.css: the overlays
   keep the dark "instrument" surface of the guardrail console even on the light
   page, so they use the --console-* scale plus the single page accent. Fallbacks
   keep the components usable if this file is ever loaded without site.css. */
:root{
  --ja-ink:      rgb(var(--console-rgb,   14 16 22));
  --ja-ink2:     rgb(var(--console-2-rgb, 23 26 34));
  --ja-ink3:     rgb(var(--console-3-rgb, 31 35 48));
  --ja-paper:    rgb(var(--console-ink-rgb,   232 234 242));
  --ja-muted:    rgb(var(--console-muted-rgb, 142 150 171));
  --ja-accent-rgb: var(--console-accent-rgb, 169 139 255);
  --ja-accent:   rgb(var(--ja-accent-rgb));
  /* the launcher sits on the light page, so it uses the page accent + its on-colour */
  --ja-cobalt:   rgb(var(--accent-rgb,    83 38 217));
  --ja-oncobalt: rgb(var(--on-accent-rgb, 255 255 255));
  --ja-cobalt2:  var(--ja-accent);
  --ja-lime:     var(--ja-accent);
  --ja-rec:      #E0576B;                 /* recording state — signal colour, not brand */
  --ja-line:rgb(var(--console-ink-rgb, 232 234 242) / .10);
  --ja-shadow:0 20px 60px -12px rgb(var(--console-rgb, 14 16 22) / .55);
  --ja-font:'Inter',system-ui,sans-serif;
  --ja-mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* The `hidden` attribute must win over the class-level display rules below —
   a class `display` otherwise overrides the UA `[hidden]{display:none}` and the
   overlays render on page load. Specificity (0,2,0) beats the class rules (0,1,0). */
.ja-panel[hidden], .ja-modal[hidden], .cmdk[hidden], .ja-mic[hidden]{ display:none !important; }

/* ---------- FAB ---------- */
.ja-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.05rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--ja-cobalt); color:var(--ja-oncobalt); font:600 .86rem/1 var(--ja-font);
  box-shadow:var(--ja-shadow); transition:background .25s ease, transform .25s ease;
}
.ja-fab:hover{ background:var(--ja-lime); color:var(--ja-ink); transform:translateY(-2px); }
.ja-fab-dot{ width:8px; height:8px; border-radius:50%; background:var(--ja-lime); box-shadow:0 0 0 0 rgb(var(--ja-accent-rgb) / .6); animation:jaPulse 2.4s infinite; }
.ja-fab:hover .ja-fab-dot{ background:var(--ja-ink); }
@keyframes jaPulse{ 0%{box-shadow:0 0 0 0 rgb(var(--ja-accent-rgb) / .55)} 70%{box-shadow:0 0 0 9px rgb(var(--ja-accent-rgb) / 0)} 100%{box-shadow:0 0 0 0 rgb(var(--ja-accent-rgb) / 0)} }

/* ---------- panel ---------- */
.ja-panel{
  position:fixed; right:20px; bottom:20px; z-index:61;
  width:min(390px,calc(100vw - 32px)); height:min(560px,calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ja-ink2); color:var(--ja-paper);
  border:1px solid var(--ja-line); border-radius:20px; box-shadow:var(--ja-shadow);
  font:400 .9rem/1.5 var(--ja-font);
}
.ja-head{ display:flex; align-items:center; gap:.5rem; padding:.85rem 1rem; border-bottom:1px solid var(--ja-line); background:var(--ja-ink); }
.ja-head-t{ display:flex; flex-direction:column; margin-right:auto; }
.ja-title{ font-weight:600; font-size:.95rem; }
.ja-sub{ font-size:.7rem; color:var(--ja-muted); }
.ja-icon{ background:transparent; border:0; color:var(--ja-muted); cursor:pointer; font-size:1rem; padding:.25rem .4rem; border-radius:8px; line-height:1; }
.ja-icon:hover{ color:var(--ja-paper); background:rgb(var(--console-ink-rgb, 232 234 242) / .06); }

.ja-log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.ja-b{ max-width:85%; padding:.6rem .8rem; border-radius:14px; font-size:.86rem; }
.ja-b-agent{ align-self:flex-start; background:var(--ja-ink3); border:1px solid var(--ja-line); border-bottom-left-radius:4px; }
.ja-b-user{ align-self:flex-end; background:var(--ja-cobalt); color:var(--ja-oncobalt); border-bottom-right-radius:4px; }
.ja-b-refusal{ border-color:rgb(var(--ja-accent-rgb) / .35); }
.ja-typing{ display:inline-flex; gap:4px; align-items:center; }
.ja-dot{ width:6px; height:6px; border-radius:50%; background:var(--ja-muted); animation:jaBlink 1.2s infinite both; }
.ja-dot:nth-child(2){ animation-delay:.2s; } .ja-dot:nth-child(3){ animation-delay:.4s; }
@keyframes jaBlink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .ja-dot{ animation:none; opacity:.6 } }

.ja-suggest{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .5rem; }
.ja-chip{ font:500 .74rem/1 var(--ja-font); color:var(--ja-paper); background:rgb(var(--console-ink-rgb, 232 234 242) / .05); border:1px solid var(--ja-line); border-radius:999px; padding:.4rem .65rem; cursor:pointer; transition:background .2s, border-color .2s; }
.ja-chip:hover{ background:rgb(var(--ja-accent-rgb) / .12); border-color:rgb(var(--ja-accent-rgb) / .4); }

.ja-form{ display:flex; align-items:center; gap:.5rem; padding:.65rem .8rem; border-top:1px solid var(--ja-line); }
.ja-input{ flex:1; background:var(--ja-ink3); border:1px solid var(--ja-line); border-radius:12px; padding:.6rem .8rem; color:var(--ja-paper); font:400 .88rem var(--ja-font); outline:none; }
.ja-input::placeholder{ color:var(--ja-muted); }
.ja-input:focus{ border-color:var(--ja-lime); }
.ja-send,.ja-mic{ display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border:0; border-radius:11px; cursor:pointer; color:var(--ja-oncobalt); background:var(--ja-cobalt); transition:background .2s, transform .1s; }
.ja-send:hover,.ja-mic:hover{ background:var(--ja-lime); color:var(--ja-ink); }
.ja-mic{ background:var(--ja-ink3); color:var(--ja-paper); border:1px solid var(--ja-line); }
.ja-mic.rec{ background:var(--ja-rec); color:#fff; animation:jaRec 1s infinite; }
@keyframes jaRec{ 50%{ opacity:.55 } }

.ja-foot{ display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-top:1px solid var(--ja-line); background:var(--ja-ink); }
.ja-voicebtn{ font:600 .74rem/1 var(--ja-font); color:var(--ja-paper); background:rgb(var(--console-ink-rgb, 232 234 242) / .06); border:1px solid var(--ja-line); border-radius:999px; padding:.4rem .7rem; cursor:pointer; white-space:nowrap; }
.ja-voicebtn:hover{ border-color:rgb(var(--ja-accent-rgb) / .5); }
.ja-voicebtn.on{ color:var(--ja-lime); border-color:rgb(var(--ja-accent-rgb) / .5); }
.ja-foot-note{ font-size:.68rem; color:var(--ja-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- safety modal ---------- */
.ja-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:1.2rem; background:rgb(var(--console-rgb, 14 16 22) / .68); backdrop-filter:blur(3px); }
.ja-modal-card{ position:relative; width:min(460px,100%); max-height:85vh; overflow-y:auto; background:var(--ja-ink2); color:var(--ja-paper); border:1px solid var(--ja-line); border-radius:18px; padding:1.6rem; box-shadow:var(--ja-shadow); }
.ja-modal-x{ position:absolute; top:.8rem; right:.8rem; }
.ja-modal-card h3{ font:600 1.15rem var(--ja-font); margin-bottom:.5rem; }
.ja-modal-lead{ color:var(--ja-muted); font-size:.85rem; margin-bottom:1rem; }
.ja-modal-list{ list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.ja-modal-list li{ font-size:.83rem; line-height:1.5; padding-left:1rem; border-left:2px solid rgb(var(--ja-accent-rgb) / .4); }
.ja-modal-list strong{ color:var(--ja-lime); font-weight:600; }

/* ---------- command palette ---------- */
.cmdk{ position:fixed; inset:0; z-index:80; display:grid; align-items:start; justify-items:center; padding:12vh 1rem 1rem; background:rgb(var(--console-rgb, 14 16 22) / .62); backdrop-filter:blur(3px); }
.cmdk-card{ width:min(560px,100%); background:var(--ja-ink2); color:var(--ja-paper); border:1px solid var(--ja-line); border-radius:16px; box-shadow:var(--ja-shadow); overflow:hidden; }
.cmdk-row{ display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--ja-line); }
.cmdk-search{ font:600 .7rem var(--ja-mono); color:var(--ja-muted); border:1px solid var(--ja-line); border-radius:6px; padding:.2rem .35rem; }
.cmdk-input{ flex:1; background:transparent; border:0; outline:none; color:var(--ja-paper); font:400 1rem var(--ja-font); }
.cmdk-input::placeholder{ color:var(--ja-muted); }
.cmdk-esc{ font:500 .68rem var(--ja-mono); color:var(--ja-muted); border:1px solid var(--ja-line); border-radius:5px; padding:.15rem .35rem; }
.cmdk-list{ list-style:none; max-height:52vh; overflow-y:auto; padding:.4rem; }
.cmdk-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:10px; cursor:pointer; }
.cmdk-item.active{ background:rgb(var(--ja-accent-rgb) / .12); }
.cmdk-ic{ width:1.2rem; text-align:center; color:var(--ja-cobalt2); font-weight:600; }
.cmdk-lbl{ font-size:.9rem; }
.cmdk-hint{ margin-left:auto; font:400 .72rem var(--ja-mono); color:var(--ja-muted); }
.cmdk-empty{ padding:1rem; text-align:center; color:var(--ja-muted); font-size:.85rem; }

/* motion + responsive */
@media (prefers-reduced-motion:reduce){
  .ja-fab,.ja-fab-dot,.ja-mic.rec,.ja-send,.ja-mic{ animation:none !important; transition:none !important; }
}
@media (max-width:480px){
  .ja-panel{ right:8px; left:8px; bottom:8px; width:auto; height:min(80vh,560px); }
  .ja-fab{ right:12px; bottom:12px; }
}