/* Scoped copy of design-system/components.css. Import after tokens.scoped.css. */
html.th-workspace {
/* TokenHub components v1.0 — depends on tokens.css */
*,*::before,*::after{box-sizing:border-box}
&,body{height:100%;margin:0}
body{font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--lh-md);color:var(--fg);background:var(--bg);
  letter-spacing:var(--tracking-tight);-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring);border-radius:var(--radius-sm)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--hit);padding:0 var(--space-4);
  border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);font-size:var(--text-sm);font-weight:var(--weight-medium);
  transition:background var(--dur-fast),border-color var(--dur-fast)}
.btn:hover{background:var(--bg-muted)}
.btn-primary{background:var(--primary-btn-bg);color:var(--primary-btn-fg);border-color:transparent}
.btn-primary:hover{background:var(--primary-btn-hover)}
.btn-accent{background:var(--accent);color:var(--fg-on-accent);border-color:transparent}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--fg-muted)}
.btn-ghost:hover{background:var(--bg-muted);color:var(--fg)}
.icon-btn{display:inline-grid;place-items:center;width:var(--hit);height:var(--hit);border-radius:var(--radius-sm);border:0;background:transparent;color:var(--fg-muted);
  transition:background var(--dur-fast),color var(--dur-fast)}
.icon-btn:hover{background:var(--bg-muted);color:var(--fg)}
.icon-btn[aria-pressed="true"]{background:var(--bg-muted);color:var(--fg)}
.kbd{font-family:var(--font-mono);font-size:11px;padding:1px 5px;border-radius:var(--radius-xs);border:1px solid var(--border);color:var(--fg-subtle);background:var(--bg-subtle)}
.badge{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);
  background:var(--bg-muted);color:var(--fg-muted)}
.badge-accent{background:var(--accent-soft);color:var(--accent-fg)}
.badge-success{background:var(--success-soft);color:var(--success)}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);height:100vh;overflow:hidden}
.app.panel-open{grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--panel-w)}

/* ---------- Sidebar / conversation list ---------- */
.sidebar{display:flex;flex-direction:column;background:var(--bg-subtle);border-right:1px solid var(--border);min-width:0;z-index:var(--z-sidebar)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);padding:0 var(--space-3) 0 var(--space-4)}
.logo{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);font-size:var(--text-md);letter-spacing:var(--tracking-display)}
.logo img,.logo svg{width:22px;height:22px}
.new-chat{margin:var(--space-1) var(--space-3) var(--space-2);justify-content:flex-start;gap:var(--space-2);width:calc(100% - var(--space-6))}
.new-chat .kbd{margin-left:auto}
.search{position:relative;margin:0 var(--space-3) var(--space-3)}
.search input{width:100%;height:32px;padding:0 var(--space-3) 0 32px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--bg-muted);font-size:var(--text-sm)}
.search input::placeholder{color:var(--fg-subtle)}
.search input:focus{outline:none;border-color:var(--border-strong);background:var(--surface)}
.search svg{position:absolute;left:10px;top:8px;width:16px;height:16px;color:var(--fg-subtle)}
.conv-list{flex:1;overflow:auto;padding:0 var(--space-2) var(--space-3)}
.conv-group{padding:var(--space-4) var(--space-2) var(--space-1);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--fg-subtle);text-transform:none}
.conv{position:relative;display:flex;align-items:center;gap:var(--space-2);height:var(--hit);padding:0 var(--space-2) 0 var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--text-sm);color:var(--fg-muted);text-decoration:none;cursor:pointer}
.conv span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.conv:hover{background:var(--bg-muted);color:var(--fg)}
.conv[aria-current="page"]{background:var(--surface);color:var(--fg);font-weight:var(--weight-medium);box-shadow:var(--shadow-sm)}
.conv .more{opacity:0;width:28px;height:28px}
.conv:hover .more,.conv[aria-current="page"] .more{opacity:1}
.conv .pin{width:14px;height:14px;color:var(--fg-subtle)}

/* ---------- Avatar menu ---------- */
.sidebar-foot{position:relative;padding:var(--space-2) var(--space-3) var(--space-3);border-top:1px solid var(--border)}
.account{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2);border:0;border-radius:var(--radius-sm);background:transparent;text-align:left}
.account:hover{background:var(--bg-muted)}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--brand-ink);color:#fff;font-size:var(--text-sm);font-weight:var(--weight-semibold);flex:none}

.account b{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:18px}
.account small{display:block;font-size:var(--text-xs);color:var(--fg-subtle);line-height:16px}
.menu{position:absolute;min-width:240px;padding:var(--space-1);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-raised);box-shadow:var(--shadow-lg);z-index:var(--z-menu);
  opacity:0;transform:translateY(4px) scale(.98);pointer-events:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.menu.open{opacity:1;transform:none;pointer-events:auto}
.avatar-menu{left:var(--space-3);right:var(--space-3);bottom:calc(100% - 4px)}
.menu-head{padding:var(--space-3);border-bottom:1px solid var(--border);margin-bottom:var(--space-1)}
.menu-head b{display:block;font-size:var(--text-sm)}
.menu-head small{color:var(--fg-subtle);font-size:var(--text-xs)}
.credit{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2);font-size:var(--text-xs);color:var(--fg-muted)}
.meter{height:4px;border-radius:var(--radius-full);background:var(--bg-muted);margin-top:6px;overflow:hidden}
.meter i{display:block;height:100%;width:62%;background:var(--fg)}
.menu-item{display:flex;align-items:center;gap:var(--space-3);width:100%;height:34px;padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;font-size:var(--text-sm);text-align:left;color:var(--fg)}
.menu-item:hover{background:var(--bg-muted)}
.menu-item .kbd{margin-left:auto}
.menu-item svg{color:var(--fg-muted);width:16px;height:16px}
.menu-sep{height:1px;background:var(--border);margin:var(--space-1) 0}
.seg{display:flex;margin-left:auto;padding:2px;border-radius:var(--radius-sm);background:var(--bg-muted)}
.seg button{border:0;background:transparent;height:24px;padding:0 8px;border-radius:6px;font-size:var(--text-xs);color:var(--fg-muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}

/* ---------- Main ---------- */
.main{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{display:flex;align-items:center;gap:var(--space-2);height:var(--topbar-h);padding:0 var(--space-4);border-bottom:1px solid transparent}
.topbar h1{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.route-pill{display:inline-flex;white-space:nowrap;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--radius-full);border:1px solid var(--border);font-size:var(--text-xs);color:var(--fg-muted);background:var(--surface)}
.route-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.thread{flex:1;overflow:auto;padding:var(--space-6) var(--space-6) 0}
.thread-inner{max-width:var(--thread-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-8);padding-bottom:var(--space-8)}

/* messages */
.msg-user{align-self:flex-end;max-width:78%;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);background:var(--bg-muted)}
.msg-user .files{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}
.msg-ai{display:flex;flex-direction:column;gap:var(--space-3)}
.msg-meta{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--fg-subtle)}
.msg-meta .mark{width:20px;height:20px;display:grid;place-items:center;border-radius:6px;background:var(--brand-ink)}

.msg-meta b{color:var(--fg-muted);font-weight:var(--weight-medium)}
.prose p{margin:0 0 var(--space-3)}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 var(--space-3);padding-left:var(--space-5)}
.prose li{margin:var(--space-1) 0}
.prose code{font-family:var(--font-mono);font-size:.88em;padding:1px 5px;border-radius:var(--radius-xs);background:var(--bg-inset);border:1px solid var(--border)}
sup.cite{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;margin:0 1px;border-radius:var(--radius-xs);background:var(--bg-muted);
  color:var(--fg-muted);font-size:10px;font-weight:var(--weight-semibold);vertical-align:2px;cursor:pointer}
sup.cite:hover{background:var(--accent-soft);color:var(--accent-fg)}
.msg-actions{display:flex;gap:2px;margin-left:-8px}
.msg-actions .icon-btn{width:30px;height:30px}
.msg-actions svg{width:16px;height:16px}

/* thinking / agent steps */
.steps{display:inline-flex;align-items:center;gap:var(--space-2);align-self:flex-start;height:28px;padding:0 10px;border-radius:var(--radius-full);border:1px solid var(--border);
  font-size:var(--text-xs);color:var(--fg-muted);background:transparent}
.steps:hover{background:var(--bg-subtle)}

/* ---------- Citation cards ---------- */
.cites{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--space-2)}
.cite-card{display:flex;flex-direction:column;gap:6px;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.cite-card:hover{border-color:var(--border-strong);background:var(--bg-subtle)}
.cite-src{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--fg-subtle)}
.cite-src .fav{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-size:9px;font-weight:700;color:#fff}
.cite-src .n{margin-left:auto;font-weight:var(--weight-semibold);color:var(--fg-muted)}
.cite-title{font-size:var(--text-sm);line-height:18px;font-weight:var(--weight-medium);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* file chip */
.file-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 var(--space-3) 0 var(--space-2);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);font-size:var(--text-sm)}
.file-chip .ft{display:grid;place-items:center;width:28px;height:28px;border-radius:6px;font-size:10px;font-weight:700;color:#fff;background:var(--brand-red)}
.file-chip .ft.doc{background:#2457C5}
.file-chip small{display:block;font-size:var(--text-xs);color:var(--fg-subtle);line-height:14px}
.file-chip b{display:block;font-weight:var(--weight-medium);line-height:16px;max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.file-chip .x{width:22px;height:22px;margin-left:var(--space-1)}
.file-chip .x svg{width:14px;height:14px}

/* ---------- Composer ---------- */
.composer-wrap{padding:var(--space-2) var(--space-6) var(--space-4)}
.composer{max-width:var(--composer-max);margin:0 auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-composer);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.composer:focus-within{border-color:var(--border-strong)}
.composer .attachments{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-3) var(--space-3) 0}
.composer textarea{display:block;width:100%;min-height:52px;max-height:240px;resize:none;border:0;outline:none;background:transparent;padding:var(--space-4) var(--space-4) var(--space-2);font-size:var(--text-md);line-height:var(--lh-md)}
.composer textarea::placeholder{color:var(--fg-subtle)}
.composer-bar{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2)}
.composer-bar .spacer{flex:1}
.chip-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:var(--radius-full);border:1px solid var(--border);background:transparent;font-size:var(--text-xs);color:var(--fg-muted)}
.chip-toggle:hover{background:var(--bg-muted);color:var(--fg)}
.chip-toggle[aria-pressed="true"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-fg)}
.chip-toggle svg{width:14px;height:14px}
.send{display:grid;place-items:center;width:var(--hit);height:var(--hit);border-radius:var(--radius-full);border:0;background:var(--primary-btn-bg);color:var(--primary-btn-fg);transition:opacity var(--dur-fast),transform var(--dur-fast)}
.send:hover{background:var(--primary-btn-hover)}
.send:active{transform:scale(.94)}
.send:disabled{opacity:.28;cursor:default}
.composer-hint{max-width:var(--composer-max);margin:var(--space-2) auto 0;text-align:center;font-size:var(--text-xs);color:var(--fg-subtle)}

/* ---------- Drop zone ---------- */
.dropzone{position:absolute;inset:var(--space-3);z-index:var(--z-dropzone);display:grid;place-items:center;border:2px dashed var(--accent);border-radius:var(--radius-lg);background:var(--dropzone-bg);
  backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.dropzone.show{opacity:1}
.dropzone-card{text-align:center;color:var(--fg)}
.dropzone-card .ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-md);color:var(--accent)}
.dropzone-card b{display:block;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.dropzone-card small{color:var(--fg-muted);font-size:var(--text-sm)}

/* ---------- Empty state ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);gap:var(--space-6)}
.empty h2{margin:0;font-size:var(--text-2xl);line-height:var(--lh-2xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-display)}
.empty .composer{width:100%}
.suggest{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);max-width:var(--composer-max)}
.suggest button{height:34px;padding:0 var(--space-4);border-radius:var(--radius-full);border:1px solid var(--border);background:transparent;font-size:var(--text-sm);color:var(--fg-muted)}
.suggest button:hover{background:var(--bg-subtle);color:var(--fg)}

/* ---------- Advanced panel ---------- */
.panel{display:none;flex-direction:column;border-left:1px solid var(--border);background:var(--surface);min-width:0;z-index:var(--z-panel)}
.app.panel-open .panel{display:flex}
.panel-head{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);padding:0 var(--space-3) 0 var(--space-5);border-bottom:1px solid var(--border)}
.panel-head h2{margin:0;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.panel-body{flex:1;overflow:auto;padding:var(--space-5)}
.field{margin-bottom:var(--space-6)}
.field-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-medium)}
.field-label small{font-weight:var(--weight-regular);color:var(--fg-subtle);font-size:var(--text-xs)}
.field-help{margin-top:6px;font-size:var(--text-xs);line-height:var(--lh-xs);color:var(--fg-subtle)}
.select{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--hit);padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);font-size:var(--text-sm);text-align:left}
.select:hover{border-color:var(--border-strong)}
.radio-cards{display:grid;gap:var(--space-2)}
.radio-card{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);cursor:pointer}
.radio-card:hover{background:var(--bg-subtle)}
.radio-card.on{border-color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.radio-card .r{width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none}
.radio-card.on .r{border:5px solid var(--fg)}
.radio-card b{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:18px}
.radio-card small{display:block;font-size:var(--text-xs);color:var(--fg-muted);line-height:16px;margin-top:2px}
input[type=range]{width:100%;accent-color:var(--fg)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--border);font-size:var(--text-sm)}
.toggle-row small{display:block;color:var(--fg-subtle);font-size:var(--text-xs)}
.switch{position:relative;width:34px;height:20px;flex:none;border:0;border-radius:var(--radius-full);background:var(--border-strong);transition:background var(--dur-fast)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease)}
.switch[aria-checked="true"]{background:var(--fg)}

.switch[aria-checked="true"]::after{transform:translateX(14px)}
.usage{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.usage div{padding:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-subtle)}
.usage small{display:block;font-size:var(--text-xs);color:var(--fg-subtle)}
.usage b{font-size:var(--text-md);font-variant-numeric:tabular-nums}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){ .app.panel-open{grid-template-columns:var(--sidebar-w) minmax(0,1fr)} .app.panel-open .panel{position:fixed;right:0;top:0;bottom:0;width:var(--panel-w);box-shadow:var(--shadow-lg)} }
@media (max-width: 760px){
  .app,.app.panel-open{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .thread{padding:var(--space-4) var(--space-4) 0}
  .composer-wrap{padding:var(--space-2) var(--space-3) var(--space-3)}
  .icon-btn,.send{width:var(--hit-touch);height:var(--hit-touch)}
  .app.panel-open .panel{width:100%}
}

/* grid children must be allowed to shrink so the thread scrolls, not the page */
.sidebar,.main,.panel{min-height:0;overflow:hidden}
.thread,.conv-list,.panel-body{min-height:0}

}

/* Dark-theme overrides must target html.th-workspace[data-theme="dark"], not a nested html. */
html.th-workspace[data-theme="dark"] .avatar{background:#3A3A43}
html.th-workspace[data-theme="dark"] .msg-meta .mark{background:#2A2A31}
html.th-workspace[data-theme="dark"] .switch[aria-checked="true"]::after{background:#111114}