/* KEVOS® AI assistant — widget styles.                      (AI module v1.0)

   Deliberately self-contained. Every colour is a namespaced --ai-* custom
   property defined here, with light and dark values, so the widget renders
   identically on the main site (assets/style.css) and on poster pages
   (assets/reader.css) without depending on either file's variables — and
   without any chance of colliding with the --kj-* or bare tokens they own.

   Theme resolution mirrors the site's own: [data-theme] wins when the theme
   bootstrap has run, and prefers-color-scheme is honoured when it has not
   (scripts off), so the widget can never be light-on-light or dark-on-dark. */

:root,
[data-theme="light"] {
  --ai-bg:#F7F5EF; --ai-bg2:#ECE9E0;
  --ai-ink:#1B232B; --ai-ink2:#46505B; --ai-muted:#5F6874;
  --ai-line:#D7D2C4;
  --ai-accent:#1F5AA8; --ai-accent-ink:#FFFFFF;
  --ai-bubble-user:#1F5AA8; --ai-bubble-user-ink:#FFFFFF;
  --ai-bubble-bot:#FFFFFF;
  --ai-shadow:0 18px 48px rgba(20,28,36,.18);
  --ai-fab-shadow:0 6px 20px rgba(20,28,36,.24);
}
[data-theme="dark"] {
  --ai-bg:#171F27; --ai-bg2:#0F1318;
  --ai-ink:#ECEAE2; --ai-ink2:#AAB2BB; --ai-muted:#828B95;
  --ai-line:#2A343E;
  --ai-accent:#5B7CFF; --ai-accent-ink:#0A1024;
  --ai-bubble-user:#3B5BD0; --ai-bubble-user-ink:#F2F4FF;
  --ai-bubble-bot:#1D2731;
  --ai-shadow:0 18px 48px rgba(0,0,0,.55);
  --ai-fab-shadow:0 6px 20px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ai-bg:#171F27; --ai-bg2:#0F1318;
    --ai-ink:#ECEAE2; --ai-ink2:#AAB2BB; --ai-muted:#828B95;
    --ai-line:#2A343E;
    --ai-accent:#5B7CFF; --ai-accent-ink:#0A1024;
    --ai-bubble-user:#3B5BD0; --ai-bubble-user-ink:#F2F4FF;
    --ai-bubble-bot:#1D2731;
    --ai-shadow:0 18px 48px rgba(0,0,0,.55);
    --ai-fab-shadow:0 6px 20px rgba(0,0,0,.45);
  }
}

/* ------------------------------------------------------------ screen-reader */
.ai-sr {
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------- launcher */
.ai-fab {
  position:fixed; right:20px; bottom:20px; z-index:9998;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px 12px 15px;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.2px;
  color:var(--ai-accent-ink); background:var(--ai-accent);
  border:0; border-radius:999px; cursor:pointer;
  box-shadow:var(--ai-fab-shadow);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.ai-fab:hover  { transform:translateY(-2px); box-shadow:0 10px 26px rgba(20,28,36,.3); }
.ai-fab:active { transform:translateY(0); }
.ai-fab:focus-visible { outline:3px solid var(--ai-accent); outline-offset:3px; }
.ai-fab-i { flex:none; }
.ai-fab[aria-expanded="true"] { opacity:0; pointer-events:none; }

/* -------------------------------------------------------------------- panel */
/* Three sizes, cycled by the header control and remembered between visits:
   compact (corner panel) -> wide (roomier, for long answers) -> full (the
   whole viewport). Dimensions live here so the JS only ever swaps an
   attribute — no inline styles, nothing for the CSP to object to. */
.ai-panel {
  position:fixed; right:20px; bottom:20px; z-index:9999;
  isolation:isolate;
  width:min(408px, calc(100vw - 40px));
  height:min(620px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--ai-bg); color:var(--ai-ink);
  border:1px solid var(--ai-line); border-radius:16px;
  box-shadow:var(--ai-shadow);
  font:400 15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  animation:ai-in .2s ease both;
}
.ai-panel[hidden] { display:none; }
@keyframes ai-in { from { opacity:0; transform:translateY(10px) scale(.985); } }

.ai-panel[data-size="wide"] {
  width:min(760px, calc(100vw - 40px));
  height:min(86vh, calc(100vh - 40px));
}
.ai-panel[data-size="full"] {
  right:0; bottom:0; left:0; top:0;
  width:100%; height:100%; max-width:none; max-height:none;
  border-radius:0; border:0;
}
/* The transcript is centred and column-width when the panel is large, so long
   answers stay readable instead of stretching into full-width lines. */
.ai-panel[data-size="wide"] .ai-log > *,
.ai-panel[data-size="full"] .ai-log > * { max-width:min(78ch, 100%); }
.ai-panel[data-size="wide"] .ai-log,
.ai-panel[data-size="full"] .ai-log { padding:22px clamp(16px, 6vw, 64px); gap:14px; }
.ai-panel[data-size="wide"] .ai-msg,
.ai-panel[data-size="full"] .ai-msg { max-width:min(72ch, 88%); }
.ai-panel[data-size="wide"] .ai-compose,
.ai-panel[data-size="full"] .ai-compose { padding:14px clamp(16px, 6vw, 64px); }
.ai-panel[data-size="wide"] .ai-input,
.ai-panel[data-size="full"] .ai-input { max-height:200px; }

/* The control shows the action it will perform, not the current state. */
.ai-i-shrink { display:none; }
.ai-panel[data-size="full"] .ai-i-grow   { display:none; }
.ai-panel[data-size="full"] .ai-i-shrink { display:block; }

/* ------------------------------------------------------------------- header */
.ai-head {
  display:flex; align-items:center; gap:10px;
  padding:13px 12px 13px 16px;
  background:var(--ai-bg2); border-bottom:1px solid var(--ai-line);
}
.ai-dot {
  width:8px; height:8px; border-radius:50%; flex:none;
  background:#2E7D4F; box-shadow:0 0 0 3px rgba(46,125,79,.18);
}
.ai-title { flex:1; margin:0; font-size:15px; font-weight:650; letter-spacing:.2px; color:var(--ai-ink); }
.ai-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:none;
  color:var(--ai-ink2); background:transparent;
  border:0; border-radius:8px; cursor:pointer;
}
.ai-icon:hover { background:rgba(127,127,127,.16); color:var(--ai-ink); }
.ai-icon:focus-visible { outline:2px solid var(--ai-accent); outline-offset:1px; }

/* ---------------------------------------------------------------- topic bar */
.ai-topicbar {
  display:flex; align-items:center; gap:9px;
  padding:9px 16px;
  background:var(--ai-bg); border-bottom:1px solid var(--ai-line);
}
.ai-topicbar[hidden] { display:none; }
.ai-topic-l {
  font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--ai-muted); flex:none;
}
.ai-topic {
  flex:1; min-width:0; max-width:280px;
  padding:6px 28px 6px 10px;
  font:500 13px/1.3 inherit; color:var(--ai-ink);
  background:var(--ai-bubble-bot);
  border:1px solid var(--ai-line); border-radius:8px;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:12px;
}
.ai-topic:focus { outline:none; border-color:var(--ai-accent); box-shadow:0 0 0 3px rgba(49,96,251,.16); }
.ai-panel[data-size="wide"] .ai-topicbar,
.ai-panel[data-size="full"] .ai-topicbar { padding:11px clamp(16px, 6vw, 64px); }

/* --------------------------------------------------------------- transcript */
/* Wrapper for the transcript + the subject gate that overlays it. */
.ai-body {
  position:relative; flex:1; min-height:0; display:flex; flex-direction:column;
}
.ai-log {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin;
}
.ai-msg { max-width:88%; padding:10px 13px; border-radius:14px; white-space:pre-wrap; word-wrap:break-word; }
.ai-msg.user {
  align-self:flex-end;
  background:var(--ai-bubble-user); color:var(--ai-bubble-user-ink);
  border-bottom-right-radius:5px;
}
.ai-msg.bot {
  align-self:flex-start;
  background:var(--ai-bubble-bot); color:var(--ai-ink);
  border:1px solid var(--ai-line); border-bottom-left-radius:5px;
}
.ai-msg.err {
  align-self:stretch; max-width:100%;
  background:transparent; color:#B23A3A;
  border:1px dashed rgba(178,58,58,.5); font-size:14px;
}
[data-theme="dark"] .ai-msg.err { color:#E58C86; border-color:rgba(229,140,134,.45); }
.ai-msg a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ------------------------------------------------------------------ sources */
.ai-src { align-self:flex-start; max-width:88%; margin-top:-4px; }
.ai-src-h {
  display:block; margin:0 0 5px 2px;
  font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
  color:var(--ai-muted);
}
.ai-src a {
  display:block; margin-bottom:5px; padding:7px 11px;
  font-size:13px; line-height:1.35; color:var(--ai-ink2);
  background:var(--ai-bubble-bot); border:1px solid var(--ai-line);
  border-left:3px solid var(--ai-accent); border-radius:8px;
  text-decoration:none;
}
.ai-src a:hover { color:var(--ai-ink); border-color:var(--ai-accent); }
.ai-src a:focus-visible { outline:2px solid var(--ai-accent); outline-offset:1px; }

/* ------------------------------------------------------------------- typing */
.ai-typing { align-self:flex-start; display:flex; gap:4px; padding:13px 15px;
  background:var(--ai-bubble-bot); border:1px solid var(--ai-line);
  border-radius:14px; border-bottom-left-radius:5px; }
.ai-typing i { width:6px; height:6px; border-radius:50%; background:var(--ai-muted);
  animation:ai-blink 1.3s infinite ease-in-out both; }
.ai-typing i:nth-child(2) { animation-delay:.18s; }
.ai-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes ai-blink { 0%,80%,100% { opacity:.28; transform:translateY(0); }
                      40% { opacity:1; transform:translateY(-3px); } }

/* ------------------------------------------------------- subject gate */
/* Sits over the transcript on first open. It is a panel rather than a modal:
   the header, topic bar and composer all stay visible behind it, so the gate
   reads as a first step rather than an interruption. */
.ai-gate {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:26px 22px;
  background:var(--ai-bg);
  animation:ai-in .22s ease both;
}
.ai-gate[hidden] { display:none; }
.ai-gate-in { width:100%; max-width:420px; text-align:left; }

.ai-gate-k {
  margin:0 0 7px; font-size:11px; font-weight:700;
  letter-spacing:1.3px; text-transform:uppercase; color:var(--ai-accent);
}
.ai-gate-h {
  margin:0 0 9px; font-size:21px; font-weight:650;
  letter-spacing:-.2px; line-height:1.2; color:var(--ai-ink);
}
.ai-gate-p {
  margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--ai-ink2);
}

.ai-gate-opts { display:flex; flex-wrap:wrap; gap:8px; }
.ai-gate-opt {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px;
  font:600 13.5px/1.2 inherit; color:var(--ai-ink);
  background:var(--ai-bubble-bot);
  border:1px solid var(--ai-line); border-radius:10px;
  cursor:pointer; text-align:left;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.ai-gate-opt::before {
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--ai-accent); opacity:.45; transition:opacity .15s ease;
}
.ai-gate-opt:hover {
  border-color:var(--ai-accent); transform:translateY(-1px);
}
.ai-gate-opt:hover::before { opacity:1; }
.ai-gate-opt:focus-visible { outline:2px solid var(--ai-accent); outline-offset:2px; }

.ai-panel[data-size="wide"] .ai-gate-in,
.ai-panel[data-size="full"] .ai-gate-in { max-width:560px; }
.ai-panel[data-size="wide"] .ai-gate-h,
.ai-panel[data-size="full"] .ai-gate-h { font-size:25px; }

/* ------------------------------------------------------------------ compose */
.ai-compose {
  display:flex; align-items:flex-end; gap:8px;
  padding:11px 12px; border-top:1px solid var(--ai-line); background:var(--ai-bg2);
}
.ai-input {
  flex:1; max-height:132px; min-height:40px; padding:10px 12px; resize:none;
  font:400 15px/1.45 inherit; color:var(--ai-ink);
  background:var(--ai-bubble-bot);
  border:1px solid var(--ai-line); border-radius:10px;
}
.ai-input:focus { outline:none; border-color:var(--ai-accent); box-shadow:0 0 0 3px rgba(49,96,251,.16); }
.ai-input::placeholder { color:var(--ai-muted); }
.ai-send {
  flex:none; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ai-accent-ink); background:var(--ai-accent);
  border:0; border-radius:10px; cursor:pointer;
  transition:opacity .15s ease;
}
.ai-send:disabled { opacity:.3; cursor:not-allowed; box-shadow:none; }

/* Locked: the composer is visibly out of play until a subject is chosen. */
.ai-compose.is-locked .ai-input {
  color:var(--ai-muted); background:transparent;
  border-style:dashed; cursor:not-allowed;
}
.ai-compose.is-locked .ai-input::placeholder { color:var(--ai-muted); opacity:.85; }

/* Armed: once a subject is chosen AND there is something to send, the button
   lifts out of its resting state so the next action is unmistakable. */
.ai-send.is-armed {
  box-shadow:0 0 0 3px rgba(49,96,251,.22);
}
[data-theme="dark"] .ai-send.is-armed { box-shadow:0 0 0 3px rgba(91,124,255,.3); }
.ai-send:focus-visible { outline:2px solid var(--ai-accent); outline-offset:2px; }

.ai-foot {
  margin:0; padding:0 14px 10px; text-align:center;
  font-size:11px; line-height:1.4; color:var(--ai-muted); background:var(--ai-bg2);
}

/* -------------------------------------------------------------- small screens */
@media (max-width:520px) {
  .ai-fab { right:14px; bottom:14px; padding:12px 16px 12px 14px; }
  .ai-fab-t { display:none; }
  /* On a phone every size is full screen, so the control has nothing to do. */
  .ai-panel,
  .ai-panel[data-size="wide"],
  .ai-panel[data-size="full"] {
    right:0; bottom:0; left:0; top:0;
    width:100%; height:100%; max-height:100%; border-radius:0; border:0;
  }
  .ai-panel[data-size="wide"] .ai-log,
  .ai-panel[data-size="full"] .ai-log { padding:16px; }
  .ai-panel[data-size="wide"] .ai-compose,
  .ai-panel[data-size="full"] .ai-compose { padding:11px 12px; }
  #aiSize { display:none; }
  .ai-gate { padding:20px 16px; align-items:flex-start; padding-top:28px; }
  .ai-gate-h { font-size:20px; }
  .ai-gate-opt { width:100%; }
  .ai-msg, .ai-src { max-width:92%; }
}

/* ------------------------------------------------------------ accessibility */
@media (prefers-reduced-motion: reduce) {
  .ai-panel { animation:none; }
  .ai-fab { transition:none; }
  .ai-typing i { animation:none; opacity:.6; }
}
@media print { .ai-fab, .ai-panel { display:none !important; } }