:root {
  /* Orob — clean white + slate accent */
  --obsidian: #ffffff;
  --bg: #ffffff;
  --bg1: #f8fafc;
  --bg2: #f1f5f9;
  --sf: #f8fafc;
  --sf2: #f1f5f9;
  --sf3: #e2e8f0;
  --bdr: rgba(15, 23, 42, 0.06);
  --bdr2: rgba(15, 23, 42, 0.1);
  --t1: #0f172a;
  --t2: #334155;
  --t3: #64748b;
  --t4: #94a3b8;
  --ac: #0f766e;
  --ac-deep: #0d9488;
  --ac-rgb: 15, 118, 110;
  --acD: rgba(15, 118, 110, 0.06);
  --acB: rgba(15, 118, 110, 0.14);
  --ac-glow: rgba(15, 118, 110, 0.12);
  --glass: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(15, 23, 42, 0.08);
  --ink-on-ac: #ffffff;
  --base: #64748b;
  --neg: #dc2626;
  --negD: rgba(220, 38, 38, 0.06);
  --pos: #16a34a;
  --warn: #ca8a04;
  --ff: 'Space Grotesk', system-ui, sans-serif;
  --fm: 'JetBrains Mono', monospace;
  --r: 8px;
  --sidebar-w: 260px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; min-height:100dvh; background:#fff; color:var(--t1); font-family:var(--ff); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:rgba(var(--ac-rgb), 0.15); color:var(--t1); }
::-moz-selection { background:rgba(var(--ac-rgb), 0.15); color:var(--t1); }
:focus-visible { outline:2px solid rgba(var(--ac-rgb), 0.4); outline-offset:2px; }

body::before { display:none; }

/* ═══ APP SHELL ═══ */
.app { display:flex; min-height:100dvh; height:100%; overflow:hidden; position:relative; z-index:1; }

/* ═══ SIDEBAR ═══ */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w); height:100%;
  display:flex; flex-direction:column;
  background:#fff;
  border-right:1px solid #e2e8f0;
  box-shadow:1px 0 8px rgba(0,0,0,0.04);
  transition:margin-left .25s cubic-bezier(.16,1,.3,1), width .25s;
}
.sidebar.collapsed { margin-left:calc(-1 * var(--sidebar-w)); }

.sb-head {
  padding:14px 16px 10px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid #f1f5f9;
}
.sb-brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.sb-logo-mark {
  width:22px; height:22px; border-radius:7px; flex-shrink:0;
  background:linear-gradient(145deg, var(--ac) 0%, var(--ac-deep) 100%);
}
.sb-brand-stack { display:flex; flex-direction:column; gap:0; line-height:1.15; min-width:0; }
.sb-brand-name { font-size:14px; font-weight:700; letter-spacing:-0.4px; color:var(--t1); }
.sb-brand-tag { font-size:9px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ac); opacity:0.9; }
.sb-status {
  display:flex; align-items:center; gap:4px; padding:1px 7px;
  border-radius:8px; background:var(--acD); border:1px solid var(--acB);
  font:700 7px var(--ff); color:var(--ac); text-transform:uppercase; letter-spacing:1.2px;
}
.sb-status-dot { width:3px; height:3px; border-radius:50%; background:var(--ac); animation:blinker 2.5s ease-in-out infinite; }
@keyframes blinker { 0%,100%{opacity:1} 50%{opacity:0.3} }

.sb-new {
  margin:12px 12px 8px; padding:8px 12px; border-radius:6px;
  border:1px solid #e2e8f0; background:#fff;
  color:var(--t3); font:500 11px var(--ff); cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:all .15s;
}
.sb-new:hover { border-color:var(--acB); color:var(--t1); background:var(--acD); }
.sb-new svg { width:12px; height:12px; opacity:.5; }

.sb-list { flex:1; overflow-y:auto; padding:4px 8px; scrollbar-width:thin; scrollbar-color:#e2e8f0 transparent; }
.sb-list::-webkit-scrollbar { width:3px; }
.sb-list::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }

.sb-item {
  padding:8px 10px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; gap:8px; margin-bottom:2px;
  transition:background .12s;
}
.sb-item:hover { background:#f8fafc; }
.sb-item.active { background:#f1f5f9; }
.sb-item-text { flex:1; min-width:0; }
.sb-item-title { font:500 11px var(--ff); color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-item-time { font:400 9px var(--fm); color:var(--t4); margin-top:1px; }
.sb-item-del {
  width:20px; height:20px; border-radius:4px; border:none;
  background:transparent; cursor:pointer; display:none;
  align-items:center; justify-content:center; color:var(--t4); transition:all .12s;
}
.sb-item:hover .sb-item-del { display:flex; }
.sb-item-del:hover { background:var(--negD); color:var(--neg); }

.sb-footer {
  padding:10px 14px; border-top:1px solid #f1f5f9;
  font:500 9px var(--fm); color:var(--t4); display:flex; align-items:center; gap:6px;
}
.sb-footer b { color:var(--t3); font-weight:600; }

/* ═══ MAIN AREA ═══ */
.main { flex:1; display:flex; flex-direction:column; min-width:0; }

.content-area { display:flex; flex:1; overflow:hidden; }

/* Top bar */
.topbar {
  display:flex; align-items:center; padding:0 20px; height:52px; gap:14px;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
  flex-shrink:0;
}
.tb-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.tb-logo-mark {
  width:28px; height:28px; border-radius:9px;
  background:linear-gradient(145deg, var(--ac) 0%, var(--ac-deep) 100%);
  transition:box-shadow 0.3s ease;
}
.tb-brand:hover .tb-logo-mark { box-shadow:0 0 16px var(--ac-glow); }
.tb-brand-text { display:flex; flex-direction:column; line-height:1.1; }
.tb-brand-name { font:700 15px var(--ff); color:var(--t1); letter-spacing:-0.4px; }
.tb-brand-sub { font:600 8.5px var(--ff); color:var(--ac); letter-spacing:0.14em; text-transform:uppercase; opacity:0.85; }
.tb-toggle {
  width:30px; height:30px; border-radius:8px; border:1px solid #e2e8f0;
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--t3); transition:all .2s var(--ease-out-expo); margin-right:12px;
}
.tb-toggle:hover { border-color:var(--acB); color:var(--t1); background:var(--acD); transform:scale(1.04); }
.tb-toggle:active { transform:scale(0.96); }
.tb-model { font:500 12px var(--ff); color:var(--t2); flex:1; display:flex; align-items:center; gap:8px; }
.tb-model-badge {
  font:600 7.5px var(--fm); padding:2px 8px; border-radius:4px;
  background:var(--acD); color:var(--ac); border:1px solid var(--acB);
  letter-spacing:0.5px;
}
.tb-right { display:flex; align-items:center; gap:10px; }
.tb-panel-btn {
  background:none; border:1px solid #e2e8f0; border-radius:6px;
  color:var(--t3); cursor:pointer; padding:5px 8px;
  display:flex; align-items:center; transition:all .2s var(--ease-out-expo);
}
.tb-panel-btn:hover { border-color:var(--acB); color:var(--t1); background:var(--acD); }

/* Auth + API keys */
.auth-bar { font:500 11px var(--ff); color:var(--t3); display:flex; align-items:center; gap:8px; position:relative; }
.auth-trigger {
  padding:6px 14px; border-radius:8px; border:1px solid #e2e8f0; background:#fff;
  color:var(--t2); font:600 11px var(--ff); cursor:pointer; transition:all .2s var(--ease-out-expo);
}
.auth-trigger:hover { border-color:var(--acB); color:var(--ac); transform:translateY(-1px); }
.auth-trigger:active { transform:translateY(0); }
.auth-trigger-ghost { background:transparent; color:var(--t2); }
.auth-trigger-primary { border-color:var(--acB); background:var(--acD); color:var(--ac); }
.auth-trigger-primary:hover { background:rgba(var(--ac-rgb), 0.1); }
.auth-trigger-user {
  display:flex; align-items:center; gap:6px; max-width:min(220px, 46vw);
  padding-inline:8px 10px;
}
.auth-avatar {
  width:22px; height:22px; border-radius:6px; background:var(--acD); border:1px solid var(--acB);
  color:var(--ac); font:700 10px var(--ff); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.auth-trigger-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-menu-caret { font-size:9px; opacity:.7; flex-shrink:0; }
.auth-menu-wrap { position:relative; }
.sb-signout { color:var(--t4); }
.sb-signout:hover { color:var(--neg); background:var(--negD); }
.auth-dropdown {
  position:absolute; top:calc(100% + 6px); right:0; min-width:280px; max-width:min(340px, 92vw);
  padding:10px 12px; border-radius:8px; border:1px solid #e2e8f0;
  background:#fff; box-shadow:0 12px 40px rgba(0,0,0,.1); z-index:200;
}
.auth-dd-head { padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #f1f5f9; }
.auth-dd-email { font:500 11px var(--ff); color:var(--t2); word-break:break-all; }
.auth-dd-item {
  width:100%; text-align:left; padding:8px 10px; margin:0 0 8px 0;
  border-radius:6px; border:1px solid #e2e8f0; background:transparent; color:var(--t3);
  font:600 11px var(--ff); cursor:pointer;
}
.auth-dd-item:hover { border-color:var(--acB); color:var(--t2); }
.auth-dd-section { font:600 9px var(--fm); color:var(--t3); text-transform:uppercase; letter-spacing:.04em; margin:4px 0 6px; }
.auth-dd-btn {
  width:100%; padding:6px 10px; margin-bottom:8px; border-radius:6px; border:1px solid var(--acB);
  background:var(--acD); color:var(--ac); font:600 10px var(--ff); cursor:pointer;
}
.btn-auth {
  padding:4px 10px; border-radius:4px; border:1px solid var(--acB);
  background:var(--acD); color:var(--ac); font:600 10px var(--ff); cursor:pointer;
}
.btn-auth:hover { filter:brightness(1.08); }
.keys-list { margin:0; padding-left:16px; font:500 10px var(--fm); color:var(--t3); max-height:140px; overflow-y:auto; }
.keys-li { margin:2px 0; }
.keys-rev { font:500 9px var(--ff); padding:1px 6px; margin-left:4px; cursor:pointer; border:1px solid #e2e8f0; border-radius:3px; background:transparent; color:var(--t3); }
.key-reveal { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; padding:8px; border-radius:6px; border:1px solid var(--acB); background:var(--acD); }
.key-reveal-lbl { flex:1 1 100%; font-size:10px; color:var(--t3); }
.key-reveal-code { font:500 10px var(--fm); word-break:break-all; color:var(--ac); }

/* Auth modal */
body.auth-modal-open { overflow:hidden; }
.auth-modal-overlay {
  position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px;
  background:rgba(0,0,0,.25); backdrop-filter:blur(4px);
}
.auth-modal {
  width:100%; max-width:420px; padding:28px 32px; border-radius:20px;
  border:1px solid #e2e8f0;
  background:#fff;
  box-shadow:0 24px 64px rgba(0,0,0,.12);
  animation:modalSlideIn 0.35s var(--ease-out-expo);
}
@keyframes modalSlideIn { from{opacity:0;transform:translateY(16px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.auth-modal-close {
  float:right; width:32px; height:32px; margin:-8px -8px 0 0; border:none; border-radius:6px;
  background:transparent; color:var(--t3); font:24px/1.4 monospace; cursor:pointer; line-height:1;
}
.auth-modal-close:hover { color:var(--t2); background:#f8fafc; }
.auth-modal-title { font:700 18px var(--ff); color:var(--t1); margin:0 0 16px; clear:both; }
.auth-tabs { display:flex; gap:4px; margin-bottom:12px; }
.auth-tab {
  flex:1; padding:8px 12px; border-radius:6px; border:1px solid #e2e8f0; background:transparent;
  color:var(--t3); font:600 12px var(--ff); cursor:pointer;
}
.auth-tab.active { border-color:var(--acB); background:var(--acD); color:var(--ac); }
.auth-hint { font:500 11px var(--ff); color:var(--t3); line-height:1.45; margin:0 0 16px; }
.auth-field { margin-bottom:12px; }
.auth-field label { display:block; font:600 10px var(--fm); color:var(--t3); margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.auth-modal-input {
  width:100%; box-sizing:border-box; padding:10px 12px; border-radius:6px; border:1px solid #e2e8f0;
  background:#f8fafc; color:var(--t1); font:500 13px var(--ff);
}
.auth-modal-input:focus { outline:none; border-color:var(--acB); }
.auth-msg { font:500 12px var(--ff); margin:0 0 12px; line-height:1.4; }
.auth-msg-err { color:var(--neg); }
.auth-msg-ok { color:var(--ac); }
.auth-submit {
  width:100%; margin-top:8px; padding:12px 16px; border-radius:10px; border:1px solid var(--ac);
  background:var(--ac); color:#fff; font:700 13px var(--ff); cursor:pointer;
  transition:all .2s var(--ease-out-expo);
}
.auth-submit:hover { background:var(--ac-deep); transform:translateY(-1px); box-shadow:0 4px 16px rgba(var(--ac-rgb), 0.2); }
.auth-submit:active { transform:translateY(0); }
.auth-submit:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

/* ═══ CHAT AREA ═══ */
.chat-wrap {
  flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; position:relative;
  margin:0;
  border-radius:0;
  border:none;
  background:#fff;
  box-shadow:none;
}

.chat { flex:1; overflow-y:auto; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#e2e8f0 transparent; max-width:760px; margin:0 auto; padding:20px 24px 20px; width:100%; }
.chat::-webkit-scrollbar { width:3px; }
.chat::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }

/* Empty state */
.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center;
}
@keyframes emptyFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.empty-brand {
  font:700 32px var(--ff); color:var(--t1); letter-spacing:-0.04em;
}
.empty-presets { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.empty-preset {
  padding:8px 18px; border-radius:999px; border:1px solid #e2e8f0;
  background:#fff; color:var(--t3); font:500 12px var(--ff);
  cursor:pointer; transition:all .2s var(--ease-out-expo);
}
.empty-preset:hover { border-color:var(--acB); color:var(--ac); background:var(--acD); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.06); }
.empty-preset:active { transform:translateY(0); }

/* Message bubbles */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.msg { margin-bottom:22px; animation:fadeUp .35s var(--ease-out-expo); max-width:760px; margin-left:auto; margin-right:auto; width:100%; }
.msg-user { display:flex; justify-content:flex-end; }
.msg-user-bubble {
  max-width:80%; padding:11px 18px; border-radius:18px 18px 4px 18px;
  background:#f1f5f9; border:1px solid #e2e8f0;
  font:400 13.5px/1.65 var(--ff); color:var(--t1); white-space:pre-wrap; word-break:break-word;
  transition:box-shadow 0.2s;
}
.msg-user-bubble:hover { box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.msg-user-files { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.msg-file-pill {
  display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:4px;
  background:#f8fafc; border:1px solid #e2e8f0; font:500 9px var(--fm); color:var(--t3);
}
.msg-file-pill img { width:24px; height:24px; border-radius:3px; object-fit:cover; }

.msg-images { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.msg-inline-img {
  max-width:280px; max-height:200px; border-radius:10px; object-fit:cover;
  cursor:pointer; border:1px solid #e2e8f0; transition:all .2s var(--ease-out-expo);
}
.msg-inline-img:hover { opacity:.9; transform:scale(1.02); box-shadow:0 4px 16px rgba(0,0,0,0.08); }

.msg-assistant { display:flex; flex-direction:column; gap:0; }

/* Assistant response body */
.msg-body {
  padding:14px 18px; border-radius:18px 18px 18px 4px;
  background:#fff; border:1px solid #f1f5f9;
  font:400 13.5px/1.7 var(--ff); color:var(--t1);
  word-break:break-word;
  transition:box-shadow 0.2s;
}
.msg-body:empty { display:none; }
.msg-body:hover { box-shadow:0 2px 12px rgba(0,0,0,0.04); }
/* Markdown tables */
.msg-body .md-table { width:100%; border-collapse:collapse; margin:10px 0; font-size:12px; }
.msg-body .md-table th { padding:6px 10px; background:#f8fafc; border:1px solid #e2e8f0; font-weight:600; color:var(--t1); }
.msg-body .md-table td { padding:6px 10px; border:1px solid #e2e8f0; color:var(--t2); }
.msg-body .md-table tr:nth-child(even) { background:#f8fafc; }
.msg-body .md-table tr:hover { background:#f1f5f9; }
/* Inline code */
.msg-body code { font-family:var(--fm); font-size:12px; background:#f1f5f9; padding:2px 5px; border-radius:4px; color:var(--t1); }

/* Code blocks */
.msg-body pre {
  margin:12px 0; padding:0; border-radius:10px;
  background:#1e293b; border:1px solid #334155;
  overflow:hidden; position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.msg-body pre code {
  display:block; padding:14px 16px; background:transparent;
  font-family:var(--fm); font-size:12px; line-height:1.6;
  color:#e2e8f0; overflow-x:auto; white-space:pre;
}
/* Code block language label */
.msg-body pre::before {
  content:attr(data-lang);
  display:block; padding:4px 14px;
  font:600 10px var(--fm); color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px;
  background:#0f172a; border-bottom:1px solid #334155;
}
.msg-body pre:not([data-lang])::before { display:none; }
.msg-body pre[data-is-filename]::before { text-transform:none; letter-spacing:0; }
/* Copy button */
.code-copy-btn {
  position:absolute; top:4px; right:8px; z-index:1;
  background:rgba(255,255,255,0.1); border:1px solid #475569; border-radius:4px;
  color:#94a3b8; font:500 10px var(--fm); padding:3px 8px; cursor:pointer;
  opacity:0; transition:opacity 0.15s;
}
.msg-body pre:hover .code-copy-btn { opacity:1; }
.code-copy-btn:hover { background:rgba(255,255,255,0.2); color:#e2e8f0; }

/* Syntax highlighting */
.msg-body pre code .kw { color:#fb923c; }
.msg-body pre code .fn { color:#c084fc; }
.msg-body pre code .str { color:#86efac; }
.msg-body pre code .num { color:#7dd3fc; }
.msg-body pre code .cm { color:#64748b; font-style:italic; }
.msg-body pre code .dec { color:#fbbf24; }
.msg-body pre code .cls { color:#86efac; }
.msg-body pre code .op { color:#fb923c; }
.msg-body pre code .bi { color:#fbbf24; }
.msg-body pre code .punc { color:#e2e8f0; }
.msg-body p { margin:0 0 8px 0; }
.msg-body p:last-child { margin-bottom:0; }
.msg-body ul, .msg-body ol { margin:4px 0 8px 20px; padding:0; }
.msg-body li { margin-bottom:2px; }
.msg-body strong { font-weight:600; color:var(--t1); }
.msg-body em { font-style:italic; }
.msg-body h1,.msg-body h2,.msg-body h3,.msg-body h4 { font-weight:600; margin:12px 0 4px 0; color:var(--t1); }
.msg-body h1 { font-size:16px; } .msg-body h2 { font-size:14px; } .msg-body h3 { font-size:13px; }
.msg-body blockquote { border-left:3px solid var(--ac); margin:6px 0; padding:4px 12px; color:var(--t2); }
.msg-body hr { border:none; border-top:1px solid #e2e8f0; margin:10px 0; }
.msg-body .cur {
  display:inline-block; width:2px; height:14px; margin-left:2px;
  background:var(--ac); vertical-align:text-bottom;
  animation: cursorPulse 0.8s ease-in-out infinite;
}
@keyframes cursorPulse { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* Generated Image Display */
.msg-images { display:flex; flex-wrap:wrap; gap:10px; }
.msg-image-wrap {
  position:relative; border-radius:10px; overflow:hidden;
  background:#f8fafc; border:1px solid #e2e8f0;
  max-width:512px;
}
.msg-generated-img { display:block; max-width:100%; height:auto; border-radius:10px 10px 0 0; }
.msg-image-meta {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; font:400 10px var(--ff); color:var(--t3);
}
.msg-image-model { opacity:0.7; }
.msg-image-dl {
  font-size:14px; text-decoration:none; color:var(--ac);
  cursor:pointer; padding:2px 6px; border-radius:4px;
  transition:background 0.15s;
}
.msg-image-dl:hover { background:var(--acD); }

/* Generated Video Display */
.msg-video-wrap {
  margin:8px 0; max-width:480px; border-radius:10px; overflow:hidden;
  background:#f8fafc; border:1px solid #e2e8f0;
}
.msg-generated-video { display:block; width:100%; background:#000; border-radius:10px 10px 0 0; }
.msg-video-meta {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; font:400 10px var(--ff); color:var(--t3);
}
.video-model-badge {
  background:#f1f5f9; padding:2px 8px; border-radius:4px;
  font-family:var(--fm); font-size:10px;
}
.video-duration-badge { opacity:0.7; }
.video-download-btn {
  margin-left:auto; color:var(--ac); text-decoration:none;
  font-weight:500; font-size:12px; padding:2px 6px; border-radius:4px;
  transition:background 0.15s;
}
.video-download-btn:hover { background:var(--acD); }
.video-progress {
  display:flex; align-items:center; gap:10px; padding:16px;
  color:var(--t2); font:400 13px var(--ff);
}
.video-progress-bar { flex:1; height:4px; background:#e2e8f0; border-radius:2px; overflow:hidden; }
.video-progress-fill { height:100%; background:var(--ac); border-radius:2px; transition:width 0.3s ease; }
@keyframes videoPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.video-progress-text { animation:videoPulse 1.5s infinite; }

/* Audio Player */
.msg-audio-wrap {
  margin:8px 0; max-width:480px; border-radius:10px; overflow:hidden;
  background:#f8fafc; border:1px solid #e2e8f0; padding:12px 16px;
}
.msg-audio-wrap audio { width:100%; height:36px; outline:none; border-radius:6px; }
.msg-audio-meta {
  display:flex; align-items:center; gap:8px;
  padding:6px 0 0; font:400 10px var(--ff); color:var(--t3);
}
.audio-model-badge {
  background:#f1f5f9; padding:2px 8px; border-radius:4px;
  font-family:var(--fm); font-size:10px;
}
.audio-download-btn {
  margin-left:auto; color:var(--ac); text-decoration:none;
  font-weight:500; font-size:12px; padding:2px 6px; border-radius:4px;
  transition:background 0.15s;
}
.audio-download-btn:hover { background:var(--acD); }

/* SVG Inline Rendering */
.msg-svg-wrap {
  margin:8px 0; max-width:512px; border-radius:10px; overflow:hidden;
  background:#f8fafc; border:1px solid #e2e8f0; padding:16px;
  display:flex; flex-direction:column; align-items:center;
}
.msg-svg-wrap svg { max-width:100%; height:auto; }
.msg-svg-meta {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:8px 0 0; font:400 10px var(--ff); color:var(--t3);
}
.msg-svg-dl {
  color:var(--ac); text-decoration:none; font-weight:500; font-size:12px;
  padding:2px 6px; border-radius:4px; cursor:pointer; transition:background 0.15s;
}
.msg-svg-dl:hover { background:var(--acD); }

/* Generated File Download Card */
.msg-file-card {
  display:flex; align-items:flex-start; gap:14px; padding:16px 20px;
  border-radius:14px; background:#fff; border:1px solid #e2e8f0;
  max-width:460px; margin:8px 0; transition:all 0.25s var(--ease-out-expo);
}
.msg-file-card:hover { border-color:var(--acB); box-shadow:0 4px 16px rgba(0,0,0,0.06); transform:translateY(-1px); }
.msg-file-card.prominent { border-color:rgba(22,163,74,0.3); }
.msg-file-icon {
  font-size:24px; flex-shrink:0; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(99,179,237,0.08); border-radius:10px;
}
.msg-file-icon.pdf { background:rgba(220,38,38,0.08); }
.msg-file-icon.pptx { background:rgba(202,138,4,0.08); }
.msg-file-icon.docx { background:rgba(59,130,246,0.08); }
.msg-file-icon.zip { background:rgba(139,92,246,0.08); }
.msg-file-icon.html { background:rgba(249,115,22,0.08); }
.msg-file-list {
  list-style:none; padding:0; margin:4px 0 0; font:400 10px var(--fm); color:var(--t3);
}
.msg-file-list li { padding:1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-list li::before { content:'\2022'; margin-right:6px; color:var(--t4); }
.msg-file-info { flex:1; min-width:0; }
.msg-file-name { font:600 13px var(--ff); color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-type-desc { font:400 11px var(--ff); color:var(--t3); margin-top:3px; }
.msg-file-quality-badge {
  display:inline-flex; align-items:center; gap:3px;
  font:600 10px var(--fm); padding:2px 6px; border-radius:4px;
  background:rgba(22,163,74,0.08); margin-left:6px;
}
.msg-file-quality-badge.warn { background:rgba(202,138,4,0.08); }
.msg-file-quality-badge.low { background:rgba(220,38,38,0.08); }
.msg-file-meta { font:400 10px var(--ff); color:var(--t4); margin-top:2px; }
.msg-file-actions { flex-shrink:0; display:flex; gap:6px; align-items:flex-start; margin-top:2px; }
.msg-file-download-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px; border-radius:10px; font:500 11px var(--ff);
  color:var(--ac); background:var(--acD); border:none;
  cursor:pointer; text-decoration:none; transition:all 0.2s var(--ease-out-expo);
}
.msg-file-download-btn:hover { background:rgba(var(--ac-rgb),0.12); transform:translateY(-1px); }
.msg-file-download-btn:active { transform:translateY(0); }
.msg-file-preview-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 16px; border-radius:10px; font:500 11px var(--ff);
  color:var(--t2); background:#f8fafc; border:none;
  cursor:pointer; text-decoration:none; transition:all 0.2s var(--ease-out-expo);
}
.msg-file-preview-btn:hover { background:#f1f5f9; color:var(--t1); transform:translateY(-1px); }
.msg-file-preview-btn:active { transform:translateY(0); }
.msg-file-cards { margin-bottom:12px; }
/* Code preview tabs */
.cp-tabs { display:flex; gap:2px; margin-top:10px; }
.cp-tab { padding:6px 16px; border-radius:8px 8px 0 0; cursor:pointer; font:500 12px var(--ff); color:var(--t3); background:#fff; border:1px solid #e2e8f0; border-bottom:none; transition:all 0.15s; }
.cp-tab.active { color:var(--t1); background:#f8fafc; border-color:#e2e8f0; }
.cp-tab:hover:not(.active) { color:var(--t2); background:#f8fafc; }
.cp-pane { display:none; border:1px solid #e2e8f0; border-radius:0 8px 8px 8px; overflow:hidden; }
.cp-pane.active { display:block; }
.cp-pane-code { max-height:500px; overflow:auto; }
.cp-pane-code pre { margin:0; padding:14px; font:12px/1.5 'SF Mono',Consolas,monospace; color:var(--t2); white-space:pre; overflow-x:auto; background:#f8fafc; }
.cp-pane-preview iframe { width:100%; height:480px; border:none; background:#fff; }
.msg-file-summary-text { font:400 13px/1.6 var(--ff); color:var(--t2); margin-top:4px; white-space:pre-wrap; }
.msg-file-summary-text strong { color:var(--t1); font-weight:600; }

/* Slide generation progress */
.slide-progress {
  display:flex; align-items:center; gap:8px;
  font:500 13px var(--ff); color:var(--ac); padding:8px 0;
}
.slide-progress-icon { display:inline-block; animation:spin 1.5s linear infinite; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* Overflow warning */
.msg-overflow {
  display:flex; align-items:center; gap:6px; padding:5px 10px; margin-bottom:4px;
  border-radius:6px; background:rgba(202,138,4,.06); border:1px solid rgba(202,138,4,.15);
  font:500 9px var(--ff); color:var(--warn); animation:fadeUp .25s ease;
}

/* ═══ ROUTING PANEL ═══ */
.route-panel {
  width:280px; min-width:280px; height:100%;
  border-left:1px solid #f1f5f9;
  background:#fff;
  display:flex; flex-direction:column;
  overflow-y:auto;
  transition:width .25s cubic-bezier(.16,1,.3,1), min-width .25s, opacity .15s;
  scrollbar-width:thin; scrollbar-color:#e2e8f0 transparent;
}
.route-panel::-webkit-scrollbar { width:3px; }
.route-panel::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }
.route-panel.collapsed { width:0; min-width:0; opacity:0; overflow:hidden; border:none; }

.rp-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid #f1f5f9;
  font:600 11px var(--ff); color:var(--t2); flex-shrink:0;
}
.rp-head-title { display:flex; align-items:center; gap:6px; }
.rp-status-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--t4); transition: background 0.3s;
}
.rp-status-dot.active { background:var(--ac); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.rp-toggle {
  background:none; border:none; color:var(--t4); cursor:pointer;
  padding:2px; display:flex; align-items:center; transition:color .15s;
}
.rp-toggle:hover { color:var(--t2); }

.rp-body {
  flex:1; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#e2e8f0 transparent;
}
.rp-body::-webkit-scrollbar { width:3px; }
.rp-body::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }

.rp-empty {
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center;
  font:400 11px var(--ff); color:var(--t4); line-height:1.5;
}

.rp-section {
  padding:12px 16px; border-bottom:1px solid #f1f5f9;
  animation: fadeUp 0.25s var(--ease-out-expo); overflow:hidden;
}
.rp-section-label {
  font:600 8.5px var(--fm); color:var(--t4); text-transform:uppercase;
  letter-spacing:0.8px; margin-bottom:8px;
}
.rp-section-content { font:400 11.5px var(--ff); color:var(--t2); line-height:1.55; overflow:hidden; }

/* Category badge */
.rp-cat {
  display:inline-block; padding:2px 6px; border-radius:4px;
  font:500 9px var(--fm);
  background:var(--acD); color:var(--ac); border:1px solid var(--acB);
}
.rp-confidence { font:600 8px var(--fm); text-transform:uppercase; margin-left:4px; }
.rp-confidence.high { color:var(--pos); }
.rp-confidence.medium { color:var(--warn); }
.rp-confidence.learning { color:var(--t3); }

/* Model info */
.rp-model-name { font:600 14px var(--ff); color:var(--t1); margin-bottom:3px; letter-spacing:-0.2px; }
.rp-model-provider { font:400 9.5px var(--fm); color:var(--t3); }
.rp-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.rp-stat-box {
  padding:8px 10px; border-radius:8px;
  background:#f8fafc; border:1px solid #e2e8f0;
  transition:border-color 0.2s, background 0.2s;
}
.rp-stat-box:hover { border-color:var(--acB); background:#f1f5f9; }
.rp-stat-val { font:600 13px var(--fm); color:var(--t1); }
.rp-stat-lbl { font:400 8.5px var(--ff); color:var(--t4); margin-top:2px; }

/* Execution spinner */
.rp-spinner {
  display:inline-block; width:12px; height:12px;
  border:2px solid #e2e8f0; border-top-color:var(--ac);
  border-radius:50%; animation: spin 0.8s linear infinite;
}

/* Quality checks */
.rp-check { display:flex; align-items:flex-start; gap:6px; margin-bottom:6px; }
.rp-check-icon {
  width:14px; height:14px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
}
.rp-check-icon.pass { background:var(--pos); }
.rp-check-icon.fail { background:var(--neg); }
.rp-check-icon svg { width:7px; height:7px; }
.rp-check-name { font:500 10px var(--ff); color:var(--t2); }
.rp-check-detail { font:400 9px var(--ff); color:var(--t4); margin-top:1px; }
.rp-check-method { font:400 8px var(--fm); color:var(--t4); font-style:italic; margin-top:1px; }

/* Compare result */
.rp-result { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; margin-top:4px; }
.rp-result.win { background:rgba(22,163,74,.06); border:1px solid rgba(22,163,74,.12); }
.rp-result.loss { background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.12); }
.rp-result-icon { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.rp-result.win .rp-result-icon { background:var(--pos); }
.rp-result.loss .rp-result-icon { background:var(--neg); }
.rp-result-icon svg { width:8px; height:8px; }
.rp-result-text { font:600 11px var(--ff); }
.rp-result.win .rp-result-text { color:var(--pos); }
.rp-result.loss .rp-result-text { color:var(--neg); }

/* Methodology toggle */
.rp-method-btn {
  display:flex; align-items:center; gap:4px;
  background:none; border:none; cursor:pointer;
  font:400 9px var(--ff); color:var(--t4); padding:4px 0;
  transition:color .15s;
}
.rp-method-btn:hover { color:var(--t3); }
.rp-method-btn .arrow { font-size:7px; transition:transform 0.2s; }
.rp-method-btn.open .arrow { transform:rotate(90deg); }
.rp-method-content {
  display:none; padding:8px; margin-top:4px; border-radius:6px;
  background:#f8fafc; border:1px solid #e2e8f0;
  font:400 9px var(--ff); color:var(--t3); line-height:1.6;
}
.rp-method-content.show { display:block; }
.rp-method-content strong { color:var(--t2); }

/* ═══ INPUT AREA ═══ */
.input-wrap {
  padding:12px 20px 18px;
  background:transparent;
  border-top:1px solid #f1f5f9;
  max-width:808px; margin:0 auto; width:100%;
  flex-shrink:0;
}
.input-box {
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  padding:12px 16px 10px;
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
  transition:border-color .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo);
}
.input-box:focus-within {
  border-color:rgba(var(--ac-rgb), 0.35);
  box-shadow:0 0 0 3px rgba(var(--ac-rgb), 0.06), 0 2px 8px rgba(0,0,0,0.04);
}

.input-top { display:flex; align-items:flex-end; gap:8px; }
.input-attach {
  width:32px; height:32px; border-radius:8px; border:1px solid #e2e8f0;
  background:transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  color:var(--t3); transition:all .2s var(--ease-out-expo); flex-shrink:0;
  margin:0; padding:0; box-sizing:border-box; font:inherit; line-height:0;
}
.input-attach:hover { border-color:var(--acB); color:var(--t1); background:var(--acD); transform:scale(1.05); }
.input-attach:active { transform:scale(0.95); }
.input-ta {
  flex:1; border:none; background:transparent; color:var(--t1);
  font:400 14px var(--ff); resize:none; outline:none;
  max-height:180px; line-height:1.5;
}
.input-ta::placeholder { color:#94a3b8; font-weight:400; }
.input-send {
  width:34px; height:34px; border-radius:12px; border:none;
  background:#0f172a;
  color:#fff;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s var(--ease-out-expo); flex-shrink:0;
}
.input-send:hover { transform:scale(1.06); background:#1e293b; }
.input-send:active { transform:scale(0.95); }
.input-send:disabled { opacity:.2; cursor:default; transform:none; background:#94a3b8; }
.input-send svg { width:14px; height:14px; fill:currentColor; }

/* File previews */
.input-files { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.input-file-pill {
  display:flex; align-items:center; gap:5px; padding:3px 8px; border-radius:5px;
  background:#f8fafc; border:1px solid #e2e8f0; font:500 9px var(--fm); color:var(--t3);
  animation:fadeUp .2s ease;
}
.input-file-pill img { width:28px; height:28px; border-radius:3px; object-fit:cover; }
.input-file-rm {
  width:14px; height:14px; border-radius:3px; border:none; background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--t4); font-size:10px; transition:all .12s;
}
.input-file-rm:hover { background:var(--negD); color:var(--neg); }

/* Token bar */
.input-meta { display:flex; align-items:center; gap:8px; margin-top:6px; padding:0 2px; }
.token-bar-wrap { flex:1; height:3px; border-radius:2px; background:#e2e8f0; overflow:hidden; }
.token-bar { height:100%; border-radius:2px; background:var(--ac); transition:width .3s, background .3s; }
.token-bar.warn { background:var(--warn); }
.token-bar.danger { background:var(--neg); }
.token-lbl { font:500 8px var(--fm); color:var(--t4); white-space:nowrap; }

/* Typing indicator */
.typing { display:flex; align-items:center; gap:4px; padding:8px 0; animation:fadeUp .2s ease; }
.typing-dot {
  width:5px; height:5px; border-radius:50%; background:var(--ac);
  animation:typingBounce .8s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes typingBounce { 0%,80%,100%{opacity:.25;transform:scale(.7)} 40%{opacity:1;transform:scale(1)} }

/* Scroll-to-bottom button */
.scroll-btn {
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%) translateY(8px);
  z-index:50; padding:6px 16px; border-radius:20px;
  background:#fff; border:1px solid #e2e8f0;
  color:var(--t3); font:500 10px var(--ff);
  cursor:pointer; display:none; align-items:center; gap:5px;
  opacity:0; transition:all .25s var(--ease-out-expo);
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
}
.scroll-btn.show { display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
.scroll-btn:hover { border-color:var(--acB); color:var(--t1); box-shadow:0 6px 24px rgba(0,0,0,0.1); }

/* Stop button state */
.input-send.stopping { background:var(--neg); color:#fff; }
.input-send.stopping svg { fill:currentColor; }

/* Retry button */
.msg-retry {
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  padding:6px 14px; border-radius:8px; border:1px solid #e2e8f0;
  background:#fff; color:var(--t3); font:500 10px var(--ff);
  cursor:pointer; transition:all .2s var(--ease-out-expo);
}
.msg-retry:hover { border-color:var(--acB); color:var(--t1); background:var(--acD); transform:translateY(-1px); }
.msg-retry:active { transform:translateY(0); }

/* Network disconnect banner */
.net-banner {
  display:none; align-items:center; justify-content:center; gap:8px;
  padding:6px 16px; background:rgba(220,38,38,0.04); border-bottom:1px solid rgba(220,38,38,0.1);
  font:400 11px var(--ff); color:var(--neg);
}
.net-banner.show { display:flex; }
.net-banner button {
  background:none; border:1px solid rgba(220,38,38,0.15); border-radius:4px;
  color:var(--neg); font:500 9px var(--ff); padding:2px 8px; cursor:pointer;
}

/* ═══ COMPARE OVERLAY ═══ */
.overlay {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.25); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.overlay.on { opacity:1; pointer-events:auto; }

.ov-card {
  width:min(920px,95vw); padding:40px 44px 32px;
  background:#fff; border:1px solid #e2e8f0; border-radius:18px;
  transform:translateY(16px) scale(.96); transition:transform .45s var(--ease-out-expo);
  position:relative;
  box-shadow:0 24px 64px rgba(0,0,0,.1);
}
.overlay.on .ov-card { transform:translateY(0) scale(1); }

.ov-close {
  position:absolute; top:12px; right:14px;
  width:26px; height:26px; border-radius:6px; border:1px solid #e2e8f0;
  background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .12s;
}
.ov-close:hover { border-color:var(--t4); background:#f8fafc; }
.ov-close svg { width:10px; height:10px; }

.ov-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:5px; margin-bottom:16px;
  background:var(--acD); border:1px solid var(--acB);
  font:700 8px var(--ff); text-transform:uppercase; letter-spacing:1.4px; color:var(--ac);
}

.ov-metrics { display:flex; gap:12px; margin-bottom:20px; }
.ov-metric {
  flex:1; padding:20px 14px 16px; border-radius:8px;
  background:#f8fafc; border:1px solid #e2e8f0; text-align:center;
  opacity:0; transform:translateY(8px); animation:ovSlide .35s cubic-bezier(.16,1,.3,1) forwards;
}
.ov-metric:nth-child(1){animation-delay:.08s}
.ov-metric:nth-child(2){animation-delay:.16s}
.ov-metric:nth-child(3){animation-delay:.24s}
@keyframes ovSlide { to{opacity:1;transform:translateY(0)} }

.ov-m-label { font:700 8px var(--ff); text-transform:uppercase; letter-spacing:1.4px; color:var(--t4); margin-bottom:10px; }
.ov-m-vals { display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap; }
.ov-m-vr { font:700 20px var(--fm); color:var(--ac); }
.ov-m-vs { font:600 9px var(--fm); color:var(--t4); }
.ov-m-vb { font:600 14px var(--fm); color:var(--t3); text-decoration:line-through; text-decoration-color:var(--neg); opacity:0.6; }
.ov-m-delta {
  display:inline-block; margin-top:6px; padding:3px 10px; border-radius:4px;
  background:rgba(22,163,74,0.06); border:1px solid rgba(22,163,74,0.1);
  font:700 14px var(--fm); color:var(--pos);
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .sidebar { position:fixed; z-index:500; height:100%; }
  .sidebar.collapsed { margin-left:calc(-1 * var(--sidebar-w)); }
  :root { --sidebar-w:240px; }
  .route-panel { display:none; position:fixed; right:0; top:0; height:100vh; z-index:600; width:280px; min-width:280px; }
  .route-panel.mobile-open { display:flex; }
  .route-panel.collapsed { display:none; }
  .chat-wrap { margin:0; }
  .chat { padding:12px 14px; }
  .input-wrap { padding:8px 12px 12px; }
  .msg-user-bubble { max-width:92%; }
  .msg-inline-img { max-width:200px; max-height:140px; }
}
@media(max-width:520px){
  .tb-brand-sub { display:none; }
}

/* Floating panel toggle button for mobile */
.mobile-panel-fab {
  display:none; position:fixed; bottom:80px; right:14px; z-index:550;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--acB);
  background:#fff; color:var(--ac); cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,0.1); transition:all .2s var(--ease-out-expo);
}
.mobile-panel-fab:hover { background:var(--ac); color:#fff; transform:scale(1.08); }
.mobile-panel-fab:active { transform:scale(0.95); }
@media(max-width:768px) {
  .mobile-panel-fab { display:flex; }
}

/* Tablet */
@media(min-width:769px) and (max-width:1024px) {
  .sidebar { width:52px; min-width:52px; }
  .sidebar .sb-brand-name,
  .sidebar .sb-status,
  .sidebar .sb-new span,
  .sidebar .sb-item-text,
  .sidebar .sb-footer { display:none; }
  .sidebar .sb-new { padding:8px; justify-content:center; }
  .sidebar .sb-new svg { margin:0; }
  .sidebar .sb-item { justify-content:center; padding:8px; }
  .sidebar .sb-item::before { content:attr(data-initial); font:600 11px var(--ff); color:var(--t2); }
  .sidebar .sb-item-del { display:none !important; }
  .sidebar .sb-head { padding:14px 8px 10px; justify-content:center; }
  .route-panel { width:220px; min-width:220px; }
}

/* ═══ DRAG DROP OVERLAY ═══ */
.drop-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(var(--ac-rgb),0.04); border:3px dashed rgba(var(--ac-rgb), 0.3);
  display:none; align-items:center; justify-content:center;
  font:600 16px var(--ff); color:var(--ac); pointer-events:none;
  backdrop-filter:blur(4px);
  animation:dropFadeIn 0.2s ease;
}
@keyframes dropFadeIn { from{opacity:0} to{opacity:1} }
.drop-overlay.show { display:flex; }

/* ═══ PIPELINE CARD ═══ */
.pipeline-card {
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:16px 18px;
  margin:10px 0;
  font-family:var(--ff);
  transition:border-color 0.2s, box-shadow 0.2s;
}
.pipeline-card:hover { box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.pipeline-card-header {
  font:500 11px var(--ff); color:var(--t2);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.pipeline-card-header .pc-count { color:var(--ac); font-weight:600; }
.pipeline-step {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; border-top:1px solid #f1f5f9;
}
.pipeline-step:first-of-type { border-top:none; }
.pipeline-step-num {
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:600 10px var(--fm); flex-shrink:0; margin-top:1px;
}
.pipeline-step-num.pending { background:#f1f5f9; color:var(--t4); }
.pipeline-step-num.running { background:var(--acD); color:var(--ac); }
.pipeline-step-num.done { background:rgba(22,163,74,0.08); color:var(--pos); }
.pipeline-step-num.failed { background:rgba(220,38,38,0.08); color:var(--neg); }
.pipeline-step-num.skipped { background:#f1f5f9; color:var(--t4); }
.pipeline-step-num.retrying { background:rgba(202,138,4,0.08); color:var(--warn); }
.pipeline-step-body { flex:1; min-width:0; }
.pipeline-step-desc { font:500 11px var(--ff); color:var(--t1); margin-bottom:2px; }
.pipeline-step.pending .pipeline-step-desc { color:var(--t3); }
.pipeline-step.skipped .pipeline-step-desc { color:var(--t4); text-decoration:line-through; }
.pipeline-step-meta {
  font:400 9px var(--fm); color:var(--t3);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.pipeline-step-meta .ps-model { color:var(--t2); }
.pipeline-step-meta .ps-time { color:var(--t3); }
.pipeline-step-meta .ps-qual { color:var(--ac); }
.pipeline-step-meta .ps-error { color:var(--neg); font-size:9px; }
.pipeline-step-status {
  font:500 9px var(--ff); margin-left:auto; flex-shrink:0;
  display:flex; align-items:center; gap:4px;
}
.pipeline-step-status .ps-dot {
  width:6px; height:6px; border-radius:50%; display:inline-block;
}
.pipeline-step-status .ps-dot.running {
  background:var(--ac); animation:pc-pulse 1.4s ease-in-out infinite;
}
.pipeline-step-status .ps-dot.pending { background:var(--t4); }
@keyframes pc-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.85)} }
.pipeline-card-summary {
  font:400 10px var(--fm); color:var(--t3);
  margin-top:10px; padding-top:8px; border-top:1px solid #f1f5f9;
}
.pipeline-card.collapsed { padding:10px 16px; }
.pipeline-card.collapsed .pipeline-card-header { margin-bottom:0; cursor:pointer; user-select:none; }
.pipeline-card.collapsed .pipeline-card-header:hover { color:var(--t1); }
.pipeline-card-expand-icon { margin-left:auto; font-size:8px; color:var(--t4); transition:transform 0.2s; }
.pipeline-card.collapsed.expanded .pipeline-card-expand-icon { transform:rotate(180deg); }
.pipeline-steps-detail { margin-top:10px; border-top:1px solid #f1f5f9; padding-top:6px; }
.pipeline-attribution { font:400 9px var(--ff); color:var(--t4); margin-top:8px; padding-top:6px; border-top:1px solid #f1f5f9; }

/* ═══ GENERATING INDICATOR ═══ */
.gen-indicator { display:flex; align-items:center; gap:8px; padding:10px 14px; margin:6px 0; }
.gen-indicator .gen-dot { width:8px; height:8px; border-radius:50%; background:var(--ac); animation:pc-pulse 1.4s ease-in-out infinite; flex-shrink:0; }
.gen-indicator .gen-text { font:500 11px var(--ff); color:var(--t2); }
.gen-indicator .gen-time { font:400 10px var(--fm); color:var(--t3); margin-left:auto; }