/*!
 * chat-widget.css — shared SHELL styling for the standard KMS chat widget.
 *
 * The go-forward standard, extracted from the Grace Haven (discipleship_project)
 * pattern: a floating launcher → panel with a per-page "Next Steps" router tab
 * + an "Ask" chat tab (SSE). Pairs with chat-widget.js (behavior) and the shared
 * chat-content.js/.css (assistant-message markdown via `.chat-md` + `--chat-*`).
 *
 * THEME VIA TOKENS, NOT FORKS. A template skins the widget by setting the
 * `--cw-*` custom properties on the `.cw` root (the partial writes them from a
 * passed-in theme map). Every rule reads a token with a sensible fallback, so
 * the stylesheet also works unstyled. No per-template `if` branches live here.
 *
 *   Palette      --cw-accent / --cw-accent-2 (hover) / --cw-on-accent
 *                --cw-bg / --cw-fg / --cw-muted / --cw-border / --cw-rule
 *                --cw-user-bg / --cw-user-fg / --cw-asst-fg
 *                --cw-fab-bg / --cw-fab-fg
 *                --cw-input-bg / --cw-input-border
 *   Shape/space  --cw-radius / --cw-panel-w / --cw-panel-h
 *                --cw-pos-side (right|left inset) / --cw-pos-bottom
 *   Type         --cw-font (UI) / --cw-font-head (titles) / --cw-font-mono
 *   Source spine --cw-type-article / --cw-type-publication / --cw-type-media
 *
 * Layout: `data-layout="tabs"` (default — router + ask) or `"single"` (chat only).
 * Position: `data-pos="bottom-right"` (default) | `"bottom-left"`.
 */

.cw{
  /* ---- default theme (override any of these on the root to re-skin) ---- */
  --cw-accent:#b5532b; --cw-accent-2:#8f3c1e; --cw-on-accent:#fff;
  --cw-bg:#fcf8f1; --cw-fg:#241f1a; --cw-muted:#6b6055; --cw-border:#e3d8c5; --cw-rule:#ece2d2;
  --cw-user-bg:var(--cw-accent); --cw-user-fg:var(--cw-on-accent); --cw-asst-fg:var(--cw-fg);
  --cw-fab-bg:#1f1b16; --cw-fab-fg:#d8a86a;
  --cw-input-bg:#fff; --cw-input-border:var(--cw-border);
  --cw-radius:16px; --cw-panel-w:430px; --cw-panel-h:600px;
  --cw-pos-side:24px; --cw-pos-bottom:24px;
  --cw-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cw-font-head:var(--cw-font);
  --cw-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --cw-type-article:var(--cw-accent); --cw-type-publication:#1c6b58; --cw-type-media:#9c5a2a;

  /* feed the shared message renderer (chat-content.css) from our tokens */
  --chat-fg:var(--cw-asst-fg); --chat-accent:var(--cw-accent); --chat-cite:var(--cw-accent);
  --chat-border:var(--cw-border); --chat-font:var(--cw-font); --chat-font-mono:var(--cw-font-mono);

  font-family:var(--cw-font);
}
.cw, .cw *{box-sizing:border-box}

/* ── Floating launcher (FAB) ─────────────────────────────────────────────── */
.cw__fab{
  position:fixed; z-index:2147483000; bottom:var(--cw-pos-bottom); right:var(--cw-pos-side);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--cw-fab-bg); color:var(--cw-fab-fg);
  border:0; border-radius:var(--cw-pill,999px); width:56px; height:56px; justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.45); transition:transform .12s ease, opacity .15s ease;
}
.cw__fab svg{width:24px;height:24px}
.cw__fab:hover{transform:translateY(-2px)}
.cw[data-pos="bottom-left"] .cw__fab{right:auto; left:var(--cw-pos-side)}
.cw--fab-labeled .cw__fab{width:auto; height:52px; padding:0 20px; border-radius:999px; font:700 15px var(--cw-font)}
.cw__panel.is-open ~ .cw__fab, .cw.is-open .cw__fab{opacity:0; pointer-events:none}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.cw__panel{
  position:fixed; z-index:2147483001; bottom:var(--cw-pos-bottom); right:var(--cw-pos-side);
  width:min(var(--cw-panel-w), calc(100vw - 2*var(--cw-pos-side)));
  height:min(var(--cw-panel-h), calc(100vh - 2*var(--cw-pos-bottom)));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cw-bg); color:var(--cw-fg);
  border:1px solid var(--cw-border); border-radius:var(--cw-radius);
  box-shadow:0 40px 80px -28px rgba(0,0,0,.5);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
.cw[data-pos="bottom-left"] .cw__panel{right:auto; left:var(--cw-pos-side)}
.cw__panel.is-open{opacity:1; transform:none; pointer-events:auto}

/* header */
.cw__header{display:flex; align-items:center; gap:8px; padding:14px 14px 12px 18px; border-bottom:1px solid var(--cw-rule)}
.cw__title{font:700 16.5px var(--cw-font-head); color:var(--cw-fg); margin:0; line-height:1.2}
.cw__sub{font:500 12.5px var(--cw-font); color:var(--cw-muted); margin:2px 0 0}
.cw__htools{margin-left:auto; display:flex; align-items:center; gap:4px}
.cw__hbtn{display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:34px; height:34px; padding:0 8px;
  background:transparent; border:1px solid transparent; border-radius:9px; color:var(--cw-muted); cursor:pointer; font:600 12.5px var(--cw-font)}
.cw__hbtn:hover{background:color-mix(in srgb,var(--cw-fg) 7%, transparent); color:var(--cw-fg)}
.cw__hbtn svg{width:14px;height:14px}

/* ── Tabs (router + ask) ─────────────────────────────────────────────────── */
.cw__tab{flex:1 1 auto; overflow-y:auto; padding:18px}
.cw__tab[hidden]{display:none}
.cw[data-layout="single"] .cw__tab--next,
.cw[data-layout="single"] .cw__tabbar{display:none}
.cw[data-layout="single"] .cw__tab--ask{display:block !important}

/* Next-Steps (router) tab */
.cw__next-title{font:700 21px var(--cw-font-head); color:var(--cw-fg); margin:0 0 6px; line-height:1.15}
.cw__next-sub{font:400 14.5px var(--cw-font); color:var(--cw-muted); margin:0 0 16px; line-height:1.5}
.cw__cards{display:flex; flex-direction:column}
.cw__card{display:flex; align-items:center; gap:14px; padding:14px 4px; text-decoration:none; color:var(--cw-fg);
  border-top:1px solid var(--cw-rule); transition:padding-left .12s ease}
.cw__card:first-child{border-top:0}
.cw__card:hover{padding-left:8px}
.cw__card-text{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.cw__card-title{font:600 16px var(--cw-font-head); line-height:1.2}
.cw__card-sub{font:400 13.5px var(--cw-font); color:var(--cw-muted); line-height:1.4}
.cw__card-arrow{color:var(--cw-accent); font-size:18px; flex:0 0 auto; transition:transform .12s ease}
.cw__card:hover .cw__card-arrow{transform:translateX(3px)}
.cw__notice{margin-top:16px; font-size:13.5px; color:var(--cw-muted); background:color-mix(in srgb,var(--cw-accent) 7%, transparent);
  border-radius:10px; padding:10px 13px}
.cw__foot{margin-top:14px; font:600 11px var(--cw-font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--cw-muted)}

/* Ask (chat) tab */
.cw__messages{display:flex; flex-direction:column; gap:14px}
.cw__msg{max-width:88%; font-size:15px; line-height:1.55; word-wrap:break-word}
.cw__msg--user{align-self:flex-end; background:var(--cw-user-bg); color:var(--cw-user-fg);
  padding:10px 14px; border-radius:14px 14px 4px 14px}
.cw__msg--assistant{align-self:flex-start; color:var(--cw-asst-fg); max-width:100%}
.cw__msg--thinking{align-self:flex-start; display:inline-flex; align-items:center; gap:10px; color:var(--cw-muted); font-size:14px}
.cw__msg--thinking.is-fading{opacity:0; transition:opacity .2s ease}
.cw__think-dots{display:inline-flex; gap:4px}
.cw__think-dots span{width:6px;height:6px;border-radius:50%;background:var(--cw-muted);animation:cw-bounce 1.2s infinite ease-in-out}
.cw__think-dots span:nth-child(2){animation-delay:.18s}
.cw__think-dots span:nth-child(3){animation-delay:.36s}
.cw__think-label.is-changing{opacity:.3; transition:opacity .15s ease}
@keyframes cw-bounce{0%,80%,100%{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}

/* ── Sources (spine cards) + related ─────────────────────────────────────── */
.cw__sources{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.cw__source{display:grid; grid-template-columns:40px 1fr; border:1px solid var(--cw-border); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--cw-fg)}
.cw__source:hover, .cw__source.is-active{background:color-mix(in srgb,var(--cw-accent) 5%, transparent)}
.cw__source-spine{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; color:#fff; font:700 11px var(--cw-font-mono);
  background:var(--cw-type-article)}
.cw__source[data-type="publication"] .cw__source-spine{background:var(--cw-type-publication)}
.cw__source[data-type="media"] .cw__source-spine{background:var(--cw-type-media)}
.cw__source-spine svg{width:15px;height:15px}
.cw__source-body{padding:9px 12px; min-width:0}
.cw__source-meta{font:600 10.5px var(--cw-font-mono); letter-spacing:.04em; color:var(--cw-muted); text-transform:uppercase; margin-bottom:2px}
.cw__source-title{font:600 14px var(--cw-font); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cw__source-excerpt{font-size:12.5px; color:var(--cw-muted); line-height:1.4; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.cw__related{margin-top:12px; padding-top:12px; border-top:1px dashed var(--cw-rule); display:flex; flex-direction:column; gap:6px}
.cw__related-lab{font:600 10.5px var(--cw-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--cw-muted)}
.cw__related a{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--cw-fg); text-decoration:none; padding:5px 0}
.cw__related a:hover{color:var(--cw-accent)}
.cw__related svg{width:15px;height:15px;color:var(--cw-muted);flex:0 0 auto}

/* citation superscripts (chat-content.css styles the base; we add the type tint + active) */
.cw__msg .cw-cite{cursor:pointer}
.cw__msg .cw-cite.is-active{background:color-mix(in srgb,var(--cw-accent) 18%, transparent); border-radius:4px}

/* ── Composer ────────────────────────────────────────────────────────────── */
.cw__composer{display:flex; align-items:center; gap:9px; padding:12px 14px; border-top:1px solid var(--cw-rule)}
.cw__input{flex:1; min-height:44px; border:1px solid var(--cw-input-border); background:var(--cw-input-bg); color:var(--cw-fg);
  border-radius:999px; padding:0 16px; font:400 15px var(--cw-font)}
.cw__input::placeholder{color:color-mix(in srgb,var(--cw-fg) 40%, transparent)}
.cw__input:focus{outline:2px solid var(--cw-accent); outline-offset:1px}
.cw__send{flex:0 0 auto; width:44px; height:44px; border:0; border-radius:50%; background:var(--cw-accent); color:var(--cw-on-accent);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.cw__send:hover{background:var(--cw-accent-2)}
.cw__send:disabled{opacity:.5; cursor:default}
.cw__send svg{width:20px;height:20px}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.cw__tabbar{display:flex; border-top:1px solid var(--cw-rule)}
.cw__tabbtn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  background:transparent; border:0; border-top:2px solid transparent; margin-top:-1px; color:var(--cw-muted);
  font:600 13px var(--cw-font); cursor:pointer}
.cw__tabbtn svg{width:17px;height:17px}
.cw__tabbtn.is-active{color:var(--cw-accent); border-top-color:var(--cw-accent)}

/* ── Responsive (full-screen on phones) ──────────────────────────────────── */
@media (max-width:560px){
  .cw__panel{width:100vw; height:100dvh; bottom:0; right:0; left:0; border-radius:0; border:0}
  .cw[data-pos="bottom-left"] .cw__panel{left:0}
}
@media (prefers-reduced-motion:reduce){
  .cw__fab,.cw__panel,.cw__card,.cw__card-arrow,.cw__think-dots span{transition:none!important;animation:none!important}
}