/* ── chat drawer ─────────────────────────────────────────────────────────── */
#chat-fab { position:fixed; bottom:24px; right:24px; z-index:200; background:var(--accent); color:#fff; border:none; border-radius:50px; padding:10px 18px; font-family:var(--font-display); font-size:.75rem; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(2,132,199,.4); display:flex; align-items:center; gap:7px; letter-spacing:.02em; transition:background .15s,box-shadow .15s; }
#chat-fab:hover { background:#0369a1; box-shadow:0 6px 20px rgba(2,132,199,.5); }
.chat-fab-dot { width:8px; height:8px; background:#4ade80; border-radius:50%; flex-shrink:0; transition:background .3s; }
.chat-fab-dot.off { background:#f87171; }
#chat-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:210; opacity:0; pointer-events:none; transition:opacity .25s; }
#chat-backdrop.open { opacity:1; pointer-events:all; }
#chat-drawer { position:fixed; top:0; right:0; bottom:0; width:560px; max-width:100vw; background:var(--surface); z-index:220; display:flex; flex-direction:column; box-shadow:-4px 0 32px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
#chat-drawer.open { transform:translateX(0); }
.ch-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:#fafcff; flex-shrink:0; }
.ch-title { font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--text); }
.ch-status { font-size:.62rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:3px; }
.ch-sdot { width:6px; height:6px; border-radius:50%; background:#f87171; transition:background .3s; flex-shrink:0; }
.ch-sdot.on { background:#4ade80; }
.ch-close { background:none; border:none; cursor:pointer; color:var(--muted); font-size:1.1rem; line-height:1; padding:4px 7px; border-radius:4px; flex-shrink:0; }
.ch-close:hover { background:var(--bg); }
.ch-presets { padding:10px 14px 8px; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.ch-preset { padding:4px 11px; border:1px solid var(--border); border-radius:20px; font-size:.65rem; font-weight:600; color:var(--muted); background:var(--bg); cursor:pointer; transition:border-color .15s,color .15s,background .15s; white-space:nowrap; }
.ch-preset:hover { border-color:var(--accent); color:var(--accent); background:#f0f9ff; }
.ch-msgs { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.ch-msgs::-webkit-scrollbar { width:4px; } .ch-msgs::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.ch-msg { display:flex; flex-direction:column; gap:3px; max-width:92%; }
.ch-msg.user { align-self:flex-end; align-items:flex-end; }
.ch-msg.bot  { align-self:flex-start; align-items:flex-start; }
.ch-bubble { padding:9px 13px; border-radius:10px; font-size:.73rem; line-height:1.65; word-break:break-word; white-space:pre-wrap; }
.ch-msg.user .ch-bubble { background:var(--accent); color:#fff; border-bottom-right-radius:3px; }
.ch-msg.bot  .ch-bubble { background:var(--bg); border:1px solid var(--border); color:var(--text); border-bottom-left-radius:3px; }
.ch-bubble.streaming::after { content:'▋'; animation:ch-blink .7s steps(1) infinite; }
@keyframes ch-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.ch-time { font-size:.58rem; color:var(--muted); }
.ch-cites { margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.ch-cite { font-size:.62rem; color:var(--accent); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ch-cite:hover { text-decoration:underline; }
.ch-err { background:#fee2e2; color:#dc2626; border-radius:8px; padding:8px 12px; font-size:.7rem; align-self:center; text-align:center; max-width:90%; }
/* ── markdown rendering inside bot bubbles ───────────────────────────────── */
.ch-bubble.md { white-space:normal; }
.ch-bubble.md p { margin:0 0 .55em; }
.ch-bubble.md p:last-child { margin-bottom:0; }
.ch-bubble.md h1,.ch-bubble.md h2,.ch-bubble.md h3,.ch-bubble.md h4 { font-size:.78rem; font-weight:700; margin:.6em 0 .25em; line-height:1.3; }
.ch-bubble.md ul,.ch-bubble.md ol { padding-left:1.3em; margin:.3em 0; }
.ch-bubble.md li { margin:.15em 0; }
.ch-bubble.md code { background:rgba(0,0,0,.08); border-radius:3px; padding:1px 5px; font-family:monospace; font-size:.88em; }
.ch-bubble.md pre { background:rgba(0,0,0,.07); border-radius:6px; padding:9px 11px; overflow-x:auto; margin:.45em 0; }
.ch-bubble.md pre code { background:none; padding:0; }
.ch-bubble.md a { color:var(--accent); text-decoration:underline; }
.ch-bubble.md blockquote { border-left:3px solid var(--accent); padding-left:9px; margin:.4em 0; opacity:.8; }
.ch-bubble.md strong { font-weight:700; }
.ch-bubble.md em { font-style:italic; }
.ch-bubble.md hr { border:none; border-top:1px solid var(--border); margin:.6em 0; }
.ch-bubble.md table { border-collapse:collapse; font-size:.88em; margin:.45em 0; width:100%; }
.ch-bubble.md th,.ch-bubble.md td { border:1px solid var(--border); padding:4px 8px; text-align:left; }
.ch-bubble.md th { background:rgba(0,0,0,.04); font-weight:600; }
.ch-input-wrap { padding:10px 14px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:flex-end; flex-shrink:0; }
#ch-input { flex:1; resize:none; border:1px solid var(--border); border-radius:8px; padding:8px 11px; font-family:var(--font-ui); font-size:.73rem; line-height:1.5; outline:none; max-height:100px; overflow-y:auto; background:var(--surface); color:var(--text); }
#ch-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(2,132,199,.1); }
#ch-send { padding:8px 14px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-family:var(--font-display); font-size:.7rem; font-weight:700; cursor:pointer; flex-shrink:0; transition:background .15s; }
#ch-send:hover { background:#0369a1; } #ch-send:disabled { background:var(--flat); cursor:not-allowed; }
@media (max-width:640px) { #chat-drawer { width:100vw; } #chat-fab { bottom:16px; right:16px; padding:9px 15px; } }