/* Kairos chat — pixel-matched to ChatGPT 2025-2026.
   Backgrounds: light #f7f7f8 (not white), dark #000000 (pure black).
   Font: Inter tuned to approximate Söhne via feature-settings + tracking.
   All chat-specific rules below. */

/* ── Token (ChatGPT-matched palette) ────────────────────────────────── */
.kc-app{
  --ink:#0d0d0d;--paper:#f7f7f8;--gray-1:#ececf1;--gray-2:#e3e3e3;--gray-3:#d9d9e3;--gray-4:#b4b4b4;--gray-5:#6e6e80;--gray-6:#353535;
  --sidebar-bg:#f9f9f9;--code-head-bg:#1e1e1e;--code-head-text:#f5f5f5;
  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,"JetBrains Mono","Menlo","Consolas",monospace;
}
[data-theme="dark"] .kc-app{
  --ink:#ececf1;--paper:#000000;--gray-1:#1e1e20;--gray-2:#2a2a2e;--gray-3:#3a3a3e;--gray-4:#6e6e80;--gray-5:#8e8ea0;--gray-6:#c4c4d0;
  --sidebar-bg:#171717;--code-head-bg:#0d0d0d;--code-head-text:#f5f5f5;
}
.kc-app{font-family:var(--font-sans);font-feature-settings:"cv02","cv03","cv04","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* ── Gate (invite screen) ───────────────────────────────────────────── */
.kc-gate-card{max-width:420px;width:100%;text-align:center}
.kc-gate-icon{color:var(--gray-4);font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:0.05em;margin:0 0 16px}
.kc-gate-card h1{font-size:32px;font-weight:600;letter-spacing:-0.02em;margin:0 0 12px;color:var(--ink)}
.kc-gate-card p{color:var(--gray-5);font-size:15px;line-height:1.6;margin:0 0 24px}
.kc-input{display:block;width:100%;min-width:0;color:var(--ink);background:var(--paper);border:1px solid var(--gray-3);border-radius:10px;outline:none;transition:border-color 0.15s;padding:12px 14px;font-family:var(--font-mono);font-size:14px;margin:0 0 16px}
.kc-input:focus{border-color:var(--ink)}
.kc-input::placeholder{color:var(--gray-4)}
.kc-err{display:none;margin:0 0 16px;padding:8px 12px;color:#b66a5d;background:rgba(182,106,93,0.1);border-left:2px solid #b66a5d;font-size:13px;line-height:1.45;border-radius:4px;text-align:left}
.kc-err.show{display:block}
.kc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:9999px;padding:11px 22px;font-family:inherit;font-size:14px;font-weight:500;line-height:1;cursor:pointer;transition:opacity 0.15s}
.kc-btn:hover{opacity:0.85}
.kc-btn:disabled{cursor:progress;opacity:0.5}
[data-theme="dark"] .kc-btn{color:var(--ink);background:var(--paper);border-color:var(--paper)}

/* ── Shell: sidebar + main (full viewport, no header) ───────────────── */
.kc-shell{display:flex;height:100vh;overflow:hidden}
.kc-sidebar{width:260px;flex-shrink:0;border-right:1px solid var(--gray-2);background:var(--sidebar-bg);display:flex;flex-direction:column;overflow:hidden;transition:width 0.2s ease}
/* Collapsed: narrow icon strip (not fully hidden) */
.kc-shell.kc-collapsed .kc-sidebar{width:48px;border-right:1px solid var(--gray-2)}
/* Collapsed: E logo visible, collapse button hidden (JS toggles on hover) */
.kc-shell.kc-collapsed .kc-collapse-btn{left:8px;top:10px;opacity:0;pointer-events:none;transition:opacity 0.15s}
.kc-shell.kc-collapsed .kc-collapsed-logo{opacity:1;cursor:pointer;transition:opacity 0.15s}
.kc-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;background:var(--paper)}

/* ── Messages scroll area ───────────────────────────────────────────── */
.kc-messages{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.kc-thread{max-width:768px;margin:0 auto;padding:24px 24px 200px}

/* ── Composer (sticky bottom) ───────────────────────────────────────── */
.kc-composer-wrap{position:absolute;left:0;right:0;bottom:0;padding:0 24px 16px;background:linear-gradient(to top,var(--paper) 60%,transparent)}
.kc-composer{max-width:768px;margin:0 auto;background:var(--paper);border:1px solid var(--gray-3);border-radius:28px;padding:8px 8px 8px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color 0.15s,box-shadow 0.15s}
.kc-composer:focus-within{border-color:var(--gray-4);box-shadow:0 0 0 3px var(--gray-1)}
[data-theme="dark"] .kc-composer:focus-within{box-shadow:0 0 0 3px var(--gray-2)}
.kc-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.kc-chips:empty{display:none}
.kc-input-area{width:100%;min-width:0;border:0;outline:none;resize:none;background:transparent;color:var(--ink);font-family:inherit;font-size:16px;line-height:1.5;padding:8px 0;max-height:200px;overflow-y:auto}
.kc-input-area::placeholder{color:var(--gray-4)}
.kc-composer-bottom{display:flex;justify-content:flex-end;align-items:center}
.kc-send{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity 0.15s,background 0.15s}
.kc-send:disabled{background:var(--gray-3);cursor:not-allowed}
.kc-send:not(:disabled):hover{opacity:0.85}
[data-theme="dark"] .kc-send{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .kc-send:disabled{background:var(--gray-3);color:var(--gray-5)}
.kc-send::before{content:"↑";font-size:18px;font-weight:600;line-height:1}
.kc-send.kc-stop{background:var(--ink);color:var(--paper)}
.kc-send.kc-stop::before{content:"";width:12px;height:12px;background:currentColor;border-radius:2px}
[data-theme="dark"] .kc-send.kc-stop{background:var(--paper);color:var(--ink)}

/* ── Sidebar content (populated by Task 5) ──────────────────────────── */
.kc-sidebar-top{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.kc-sidebar-top-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kc-new-btn{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;border:0;background:transparent;color:var(--ink);border-radius:8px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background 0.15s}
.kc-new-btn:hover{background:var(--gray-2)}
.kc-collapse-btn{position:absolute;top:10px;left:220px;z-index:30;width:32px;height:32px;border:0;background:transparent;color:var(--gray-5);cursor:pointer;line-height:1;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:color 0.15s,background 0.15s,left 0.2s ease}
.kc-collapse-btn svg{width:20px;height:20px}
/* Collapsed: button moves into the narrow sidebar strip */
.kc-shell.kc-collapsed .kc-collapse-btn{left:8px}
/* Hide sidebar content when collapsed (button is at shell level, stays visible) */
.kc-shell.kc-collapsed .kc-sidebar{position:relative}
.kc-shell.kc-collapsed .kc-sidebar-top-row{visibility:hidden}
/* Collapsed: show icon-only column — E logo + new chat icon */
.kc-shell.kc-collapsed .kc-sidebar-top{padding:10px 0;align-items:center}
.kc-shell.kc-collapsed .kc-sidebar-top-row{display:none}
.kc-shell.kc-collapsed .kc-new-btn{width:32px;height:32px;padding:0;justify-content:center;margin:0 auto;border:0}
.kc-shell.kc-collapsed .kc-new-btn svg{margin:0}
.kc-shell.kc-collapsed .kc-new-text{display:none}
.kc-shell.kc-collapsed .kc-convo-list{display:none}
.kc-shell.kc-collapsed .kc-sidebar-footer{flex-direction:column;align-items:center;gap:2px;padding:8px 0;margin-top:auto;border-top:0}
.kc-shell.kc-collapsed .kc-foot-btn{padding:6px 8px;justify-content:center;font-size:12px;width:auto}
/* Collapsed: E logo badge at top */
.kc-collapsed-logo{display:none;width:32px;height:32px;align-items:center;justify-content:center;font-weight:700;font-size:18px;color:var(--ink);font-family:var(--font-sans);margin:2px auto 8px;position:relative}
.kc-shell.kc-collapsed .kc-collapsed-logo{display:flex}
.kc-shell.kc-collapsed .kc-logo{display:none}
.kc-collapse-btn:hover{color:var(--ink);background:var(--gray-2)}
.kc-sidebar.kc-has-toggle .kc-collapse-btn{display:flex}
.kc-convo-list{flex:1;overflow-y:auto;padding:8px}
.kc-convo{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--gray-6);font-size:14px;line-height:1.4;position:relative;transition:background 0.15s}
.kc-convo:hover{background:var(--gray-2)}
.kc-convo.kc-active{background:var(--gray-2);color:var(--ink)}
.kc-convo-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-convo-actions{display:none;gap:2px;flex-shrink:0}
.kc-convo:hover .kc-convo-actions{display:flex}
.kc-convo-act{width:24px;height:24px;border:0;background:transparent;color:var(--gray-5);cursor:pointer;border-radius:4px;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.kc-convo-act:hover{background:var(--gray-3);color:var(--ink)}
.kc-sidebar-footer{padding:12px;border-top:1px solid var(--gray-2);font-size:12px;color:var(--gray-5)}

/* ── Message rows ───────────────────────────────────────────────────── */
.kc-msg{margin:0 0 24px}
.kc-msg-role-user{display:flex;gap:16px;padding-left:0}
.kc-msg-role-assistant{display:flex;gap:16px;padding-left:0}
.kc-msg-avatar{width:28px;height:28px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gray-1)}
.kc-user-avatar{font-size:11px;font-weight:600;color:var(--gray-5);background:var(--gray-2);text-transform:uppercase;letter-spacing:0.02em}
[data-theme="dark"] .kc-user-avatar{background:var(--gray-2);color:var(--gray-5)}
.kc-msg-avatar svg{width:18px;height:18px}
[data-theme="dark"] .kc-msg-avatar svg path{fill:var(--paper)}
/* user message: no bubble, left-aligned, avatar distinguishes role (ChatGPT 2024+) */
.kc-user-body{flex:1;min-width:0;color:var(--ink);font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.kc-user-body .kc-user-param{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:2px 8px;background:var(--gray-1);border-radius:8px;font-family:var(--font-mono);font-size:12px;color:var(--gray-6)}
[data-theme="dark"] .kc-user-body .kc-user-param{background:var(--gray-2)}
.kc-user-body .kc-user-param:first-child{margin-top:0}
.kc-user-body .kc-user-param-group{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
/* legacy user bubble class kept for backward-compat but unused now */
.kc-user-bubble{display:none}
.kc-assistant-body{flex:1;min-width:0;color:var(--ink);font-size:16px;line-height:1.75}
.kc-assistant-body>:first-child{margin-top:0}
.kc-assistant-body p{margin:0 0 16px}
.kc-assistant-body h1,.kc-assistant-body h2,.kc-assistant-body h3{color:var(--ink);font-weight:600;line-height:1.3;margin:32px 0 12px;letter-spacing:-0.01em}
.kc-assistant-body h1{font-size:24px}
.kc-assistant-body h2{font-size:20px}
.kc-assistant-body h3{font-size:17px}
.kc-assistant-body ul,.kc-assistant-body ol{margin:0 0 16px;padding-left:1.5em}
.kc-assistant-body li{margin-bottom:6px}
.kc-assistant-body code{color:var(--ink);background:var(--gray-1);border-radius:5px;padding:1px 6px;font-family:var(--font-mono);font-size:0.88em}
.kc-assistant-body pre{margin:0 0 20px;padding:0;background:var(--code-head-bg);border:1px solid var(--gray-2);border-radius:8px;overflow:hidden}
.kc-assistant-body pre .kc-code-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--gray-2);font-family:var(--font-mono);font-size:12px;color:var(--code-head-text);background:rgba(255,255,255,0.03)}
.kc-assistant-body pre .kc-code-copy{border:0;background:transparent;color:var(--code-head-text);cursor:pointer;font-family:inherit;font-size:12px;padding:2px 6px;border-radius:4px;opacity:0.7}
.kc-assistant-body pre .kc-code-copy:hover{opacity:1;background:rgba(255,255,255,0.1)}
.kc-assistant-body pre code{display:block;background:none;padding:14px 16px;overflow-x:auto;border-radius:0;color:#f5f5f5}
.kc-assistant-body strong{color:var(--ink);font-weight:600}
.kc-assistant-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.kc-assistant-body th,.kc-assistant-body td{padding:10px 14px;border:1px solid var(--gray-2);text-align:left;vertical-align:top}
.kc-assistant-body th{color:var(--ink);background:var(--gray-1);font-weight:600}
.kc-assistant-body blockquote{margin:0 0 20px;padding-left:16px;color:var(--gray-5);border-left:2px solid var(--gray-3)}

/* ── Reasoning indicator (shown during LLM token stream, not content) ─ */
.kc-reasoning-indicator{color:var(--gray-5);font-size:15px;line-height:1.6;display:flex;align-items:center;gap:6px}

/* ── Streaming cursor ───────────────────────────────────────────────── */
.kc-cursor{display:inline-block;width:8px;height:1.1em;background:var(--ink);margin-left:1px;vertical-align:text-bottom;animation:kc-blink 1s steps(2) infinite}
[data-theme="dark"] .kc-cursor{background:var(--paper)}
@keyframes kc-blink{50%{opacity:0}}

/* ── Trace (collapsed inside assistant) ─────────────────────────────── */
.kc-trace-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--gray-1);border:1px solid var(--gray-2);border-radius:8px;color:var(--gray-5);font-family:var(--font-mono);font-size:12px;cursor:pointer;margin-bottom:12px}
.kc-trace-toggle:hover{color:var(--ink)}
.kc-trace-toggle .kc-trace-arrow{transition:transform 0.15s}
.kc-trace-toggle.kc-open .kc-trace-arrow{transform:rotate(90deg)}
.kc-trace-body{display:none;margin-bottom:16px;padding:12px 14px;background:var(--gray-1);border:1px solid var(--gray-2);border-radius:8px}
.kc-trace-body.kc-open{display:block}
.kc-trace-step{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;border-bottom:1px solid var(--gray-2)}
.kc-trace-step:last-child{border-bottom:0}
.kc-trace-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;border:1px solid var(--gray-3)}
.kc-trace-step[data-state=active] .kc-trace-dot{border-color:var(--ink);border-top-color:transparent;animation:kc-spin .85s linear infinite}
.kc-trace-step[data-state=done] .kc-trace-dot{border-color:var(--ink);background:var(--ink)}
.kc-trace-step[data-state=error] .kc-trace-dot{border-color:#b66a5d;background:#b66a5d}
@keyframes kc-spin{to{transform:rotate(360deg)}}
.kc-trace-label{color:var(--ink);font-size:13px;font-weight:600;line-height:1.3}
.kc-trace-detail{margin-top:2px;color:var(--gray-5);font-size:12px;overflow-wrap:anywhere;font-family:var(--font-mono)}

/* ── Message actions (hover) ────────────────────────────────────────── */
.kc-msg-actions{display:flex;gap:4px;margin-top:8px;opacity:0;transition:opacity 0.15s}
.kc-msg-role-user .kc-msg-actions{justify-content:flex-end}
.kc-msg:hover .kc-msg-actions{opacity:1}
.kc-act-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:0;background:transparent;color:var(--gray-5);cursor:pointer;border-radius:6px;font-family:inherit;font-size:13px;line-height:1}
.kc-act-btn:hover{background:var(--gray-2);color:var(--ink)}
.kc-act-btn.kc-active{color:var(--ink);font-weight:600}

/* ── Empty state: title above composer, everything centered ─────────── */
.kc-empty-state .kc-main{justify-content:center;align-items:center}
.kc-empty-state .kc-messages{flex:0 0 auto;overflow:visible}
.kc-empty{max-width:768px;width:100%;margin:0 auto;padding:0 24px;text-align:center}
.kc-empty-title{font-size:28px;font-weight:600;letter-spacing:-0.02em;margin:0 0 8px;color:var(--ink);line-height:1.2}
.kc-empty-subtitle{font-size:15px;color:var(--gray-5);line-height:1.5;margin:0 0 12px;max-width:480px}
/* Empty state: composer sits right below title, not stuck to bottom */
.kc-empty-state .kc-composer-wrap{position:relative;padding:0 24px;background:none}
.kc-empty-state .kc-composer{margin-top:0}
/* Pills row below composer */
.kc-empty-pills{max-width:768px;margin:12px auto 0;padding:0 24px;display:none;flex-wrap:wrap;gap:8px;justify-content:center}
.kc-empty-state .kc-empty-pills{display:flex}
.kc-pill{padding:7px 14px;border:1px solid var(--gray-3);border-radius:9999px;background:var(--paper);color:var(--gray-6);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:border-color 0.15s,background 0.15s,color 0.15s;line-height:1}
.kc-pill:hover{border-color:var(--gray-4);background:var(--gray-1);color:var(--ink)}
/* legacy card prompts removed */
.kc-prompt,.kc-prompts{display:none}

/* ── Sidebar: logo + footer buttons ─────────────────────────────────── */
.kc-logo{display:block;color:var(--ink);font-weight:700;font-family:var(--font-sans);font-size:1.15rem;letter-spacing:-0.01em;text-decoration:none;margin-bottom:4px}
.kc-sidebar-footer{padding:10px 12px;border-top:1px solid var(--gray-2);display:flex;flex-direction:row;align-items:center;gap:4px}
.kc-foot-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;background:transparent;color:var(--gray-6);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;text-decoration:none;transition:color 0.15s,background 0.15s}
.kc-foot-btn:hover{color:var(--ink);background:var(--gray-2)}

/* ── Gate: with logo ────────────────────────────────────────────────── */
.kc-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.kc-gate-logo{display:block;color:var(--ink);font-weight:700;font-family:var(--font-sans);font-size:1.15rem;letter-spacing:-0.01em;text-decoration:none;margin-bottom:16px}

/* ── Seqviz sequence viewer containers ──────────────────────────────── */
.kc-assistant-body .seqviz-host{margin:0 0 20px;border:1px solid var(--gray-2);border-radius:8px;overflow:hidden;background:var(--paper)}
.kc-assistant-body .seqviz-inner{min-height:60px;overflow-x:auto}
.kc-assistant-body .seqviz-host .labels,.kc-assistant-body .seqviz-host .linear{font-family:var(--font-mono);font-size:12px}
.kc-assistant-body .seqviz-fallback{padding:14px 16px;background:var(--code-head-bg);color:#f5f5f5;overflow-x:auto}
.kc-assistant-body .seqviz-fallback code{font-family:var(--font-mono);font-size:13px;line-height:1.6;word-break:break-all}

/* ── 3Dmol structure viewer containers ──────────────────────────────── */
.kc-assistant-body .structure-host{margin:0 0 20px;border:1px solid var(--gray-2);border-radius:8px;overflow:hidden;height:400px;position:relative;background:#f7f7f8}
[data-theme="dark"] .kc-assistant-body .structure-host{background:#0d0d0d}
.kc-assistant-body .structure-host canvas{width:100% !important;height:100% !important}
.kc-assistant-body .structure-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--gray-5);font-size:14px}
.kc-assistant-body .structure-label{position:absolute;top:8px;right:12px;padding:4px 8px;background:rgba(255,255,255,0.85);border-radius:6px;font-family:var(--font-mono);font-size:11px;color:var(--gray-6);pointer-events:none}
[data-theme="dark"] .kc-assistant-body .structure-label{background:rgba(0,0,0,0.7);color:var(--gray-5)}
.kc-assistant-body .structure-error{padding:16px;color:#b66a5d;font-size:13px}
.kc-assistant-body .structure-fallback{padding:14px 16px;background:var(--code-head-bg);color:#f5f5f5;overflow-x:auto;max-height:300px}
.kc-assistant-body .structure-fallback code{font-family:var(--font-mono);font-size:12px;line-height:1.5}

/* ── highlight.js minimal theme (dark code blocks) ──────────────────── */
.kc-assistant-body pre code.hljs{display:block;padding:14px 16px;overflow-x:auto;background:none;color:#e8e8e8}
.kc-assistant-body .hljs-keyword,.kc-assistant-body .hljs-selector-tag{color:#c678dd;font-weight:500}
.kc-assistant-body .hljs-string,.kc-assistant-body .hljs-attr{color:#98c379}
.kc-assistant-body .hljs-number,.kc-assistant-body .hljs-literal{color:#d19a66}
.kc-assistant-body .hljs-comment{color:#7f7f7f;font-style:italic}
.kc-assistant-body .hljs-title,.kc-assistant-body .hljs-function .hljs-title{color:#61afef}
.kc-assistant-body .hljs-built_in,.kc-assistant-body .hljs-type{color:#e5c07b}
.kc-assistant-body .hljs-meta{color:#56b6c2}

/* ── No-chrome mode: full-viewport chat, no header/footer ───────────── */
.kc-no-chrome .ev-page,.kc-no-chrome{min-height:100vh}
.kc-no-chrome .ev-header,.kc-no-chrome .ev-footer{display:none}

/* ── Protein sequence input area ────────────────────────────────────── */
.kc-protein-input{margin-top:4px}
.kc-protein-input textarea{width:100%;min-width:0;border:0;outline:none;resize:none;background:var(--gray-1);border-radius:8px;color:var(--ink);font-family:var(--font-mono);font-size:13px;line-height:1.5;padding:8px 10px;max-height:120px;overflow-y:auto}
.kc-protein-input textarea::placeholder{color:var(--gray-4);font-family:var(--font-sans);font-size:12px}
.kc-protein-toggle{cursor:pointer}
[data-theme="dark"] .kc-protein-input textarea{background:var(--gray-2)}

/* ── Chip (composer attachment) ─────────────────────────────────────── */
.kc-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 10px;background:var(--gray-1);border:1px solid var(--gray-3);border-radius:8px;font-size:13px;color:var(--ink);line-height:1}
[data-theme="dark"] .kc-chip{background:var(--gray-2)}
.kc-chip-x{width:18px;height:18px;border:0;background:transparent;color:var(--gray-5);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.kc-chip-x:hover{background:var(--gray-3);color:var(--ink)}
.kc-chip select{border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:13px;outline:none;cursor:pointer;padding:0;margin:0}

/* ── Responsive: mobile ────────────────────────────────────────────── */
@media(max-width:720px){
  /* Sidebar: overlay mode (not flex column), slides off-screen when collapsed */
  .kc-sidebar{position:absolute;z-index:20;height:100%;width:260px !important;box-shadow:2px 0 16px rgba(0,0,0,0.15);transition:transform 0.2s ease}
  .kc-shell.kc-collapsed .kc-sidebar{position:absolute;transform:translateX(-100%);width:260px !important}
  /* Collapse button: always fixed top-left on mobile (sidebar slides away) */
  .kc-collapse-btn{left:12px !important}
  .kc-shell.kc-collapsed .kc-collapse-btn{left:12px}
  /* Collapsed icon column not needed on mobile (sidebar fully hidden) */
  .kc-shell.kc-collapsed .kc-collapsed-logo{display:none}
  .kc-shell.kc-collapsed .kc-new-btn{width:auto;height:auto;padding:10px 12px;justify-content:flex-start}
  .kc-shell.kc-collapsed .kc-new-text{display:inline}
  .kc-shell.kc-collapsed .kc-logo{display:block}
  .kc-shell.kc-collapsed .kc-sidebar-top-row{display:flex;visibility:visible}
  .kc-shell.kc-collapsed .kc-convo-list{display:block}
  .kc-shell.kc-collapsed .kc-sidebar-footer{flex-direction:column}

  /* Thread + messages: tighter padding */
  .kc-thread{padding:16px 16px 180px}
  .kc-msg{margin:0 0 20px}
  .kc-assistant-body{font-size:15px}
  .kc-assistant-body h1{font-size:22px}
  .kc-assistant-body h2{font-size:18px}
  .kc-assistant-body h3{font-size:16px}
  .kc-assistant-body pre{font-size:13px}

  /* User message: wider on mobile */
  .kc-user-body{font-size:15px}

  /* Composer: full width, slightly smaller */
  .kc-composer-wrap{padding:0 12px 12px}
  .kc-composer{border-radius:24px;padding:6px 6px 6px 14px}
  .kc-input-area{font-size:16px}  /* 16px prevents iOS zoom on focus */
  .kc-send{width:32px;height:32px}

  /* Empty state: smaller title, less padding */
  .kc-empty{padding:0 16px}
  .kc-empty-title{font-size:24px}
  .kc-empty-subtitle{font-size:14px}
  .kc-empty-pills{padding:0 12px}

  /* Structure viewer: shorter on mobile */
  .kc-assistant-body .structure-host{height:300px}

  /* Trace: more compact */
  .kc-trace-step{padding:6px 0}
  .kc-trace-label{font-size:12px}
  .kc-trace-detail{font-size:11px}

  /* Code blocks: smaller padding */
  .kc-assistant-body pre code{padding:10px 12px;font-size:12px}
  .kc-assistant-body pre .kc-code-head{padding:6px 10px;font-size:11px}
}
