:root {
  /* surfaces */
  --bg:#0a0a0a; --surface:#1a1a1a; --surface-2:#222;        /* surface-2 = raised: cards, menus, modals (today's #1e1e2e/#222 drift) */
  --chat-bg:#0a0a0a; --app-bg:#0a0a0a;                      /* chat-area vs app-panel backgrounds — default to --bg, settable independently */
  --border:#2a2a2a; --border-strong:#444;                    /* border-strong = hover borders (today's hardcoded #444) */
  --overlay-1:rgba(255,255,255,.04); --overlay-2:rgba(255,255,255,.08); --overlay-3:rgba(255,255,255,.13); /* hover/active lifts — replaces ~440 rgba(255,255,255,…) */
  /* text */
  --text:#e0e0e0; --text-dim:#888; --text-faint:#666; --text-on-accent:#fff;
  /* brand + semantic (settle the two-blues war: accent stays #3b7dd8 everywhere; #3b82f6 maps to it) */
  --accent:#3b7dd8; --accent-hover:#4a8de8; --accent-tint:rgba(59,125,216,.12);
  --success:#22c55e; --warning:#f59e0b; --danger:#ef4444; --info:#3b82f6;
  --success-tint:rgba(34,197,94,.12); --warning-tint:rgba(245,158,11,.12); --danger-tint:rgba(239,68,68,.12); --info-tint:rgba(59,130,246,.12);
  /* categorical palette (kanban lanes, project dots, speakers, graph types) */
  --c1:#3b82f6; --c2:#22c55e; --c3:#f59e0b; --c4:#a855f7; --c5:#ec4899; --c6:#06b6d4; --c7:#6366f1; --c8:#10b981; --c9:#ef4444; --c10:#6b7280;
  /* shape & space */
  --radius-sm:4px; --radius:6px; --radius-lg:10px; --radius-pill:999px;   /* map: 2,3,4→sm; 6,8→radius; 10,12,14→lg; 20px/50%→pill */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --shadow-1:0 2px 8px rgba(0,0,0,.3); --shadow-2:0 8px 30px rgba(0,0,0,.45);
  /* type */
  --font-size:15px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:15px; --fs-xl:18px;  /* map 9-22px spread to nearest */
  --font-mono:'JetBrains Mono',monospace;
  --font-display:inherit;   /* display/heading font — themes may override (Paper = serif) */
  /* existing, kept */
  --header-h: 52px;
  --user-bg: #1a3a5c; --bot-bg: #222222;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THEMES — light + paper override the same token names on [data-theme="x"].
   Tuned against scripts/ui-theme-check.js (WCAG contrast gate). Overlays flip to
   black-based on light themes. Semantic colours darkened for contrast on white.
   ───────────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* surfaces */
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#eef0f3;
  --chat-bg:#f5f6f8; --app-bg:#f5f6f8;
  --border:#d8dce2; --border-strong:#b0b7c3;
  --overlay-1:rgba(0,0,0,.04); --overlay-2:rgba(0,0,0,.07); --overlay-3:rgba(0,0,0,.12);
  /* text */
  --text:#1a1d21; --text-dim:#545d6b; --text-faint:#7b8494; --text-on-accent:#ffffff;
  /* brand + semantic (darkened for contrast on white) */
  --accent:#2f6cc4; --accent-hover:#275ba8; --accent-tint:rgba(47,108,196,.10);
  --success:#15803d; --warning:#a16207; --danger:#dc2626; --info:#2563eb;
  --success-tint:rgba(21,128,61,.10); --warning-tint:rgba(161,98,7,.10); --danger-tint:rgba(220,38,38,.10); --info-tint:rgba(37,99,235,.10);
  /* categorical palette (~15% darker for white-bg legibility) */
  --c1:#2563eb; --c2:#16a34a; --c3:#d97706; --c4:#9333ea; --c5:#db2777; --c6:#0891b2; --c7:#4f46e5; --c8:#059669; --c9:#dc2626; --c10:#4b5563;
  /* shadow */
  --shadow-1:0 2px 8px rgba(0,0,0,.10); --shadow-2:0 8px 30px rgba(0,0,0,.18);
  /* chat bubbles — must flip light or --text (dark) is invisible on dark bubbles */
  --user-bg:#dbe7f7; --bot-bg:#ffffff;
}

[data-theme="paper"] {
  /* surfaces — warm paper */
  --bg:#f6f1e7; --surface:#fdfaf3; --surface-2:#efe8da;
  --chat-bg:#f6f1e7; --app-bg:#f6f1e7;
  --border:#ddd3c0; --border-strong:#c2b59c;
  --overlay-1:rgba(60,45,20,.05); --overlay-2:rgba(60,45,20,.08); --overlay-3:rgba(60,45,20,.13);
  /* text — warm ink */
  --text:#2c261d; --text-dim:#6b6151; --text-faint:#95897a; --text-on-accent:#ffffff;
  /* brand + semantic (muted slate-ink accent, warm-adjusted semantics) */
  --accent:#5a6e8f; --accent-hover:#4a5d7c; --accent-tint:rgba(90,110,143,.12);
  --success:#3f6f3f; --warning:#9a6a1f; --danger:#b3402e; --info:#4a6e8f;
  --success-tint:rgba(63,111,63,.12); --warning-tint:rgba(154,106,31,.12); --danger-tint:rgba(179,64,46,.12); --info-tint:rgba(74,110,143,.12);
  /* categorical palette — softened warm variants */
  --c1:#4a6e8f; --c2:#3f6f3f; --c3:#9a6a1f; --c4:#7a5a8f; --c5:#a85a6e; --c6:#3f7d8c; --c7:#5a5a8f; --c8:#3f7d6a; --c9:#b3402e; --c10:#6b6151;
  /* rounder shapes */
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  /* soft warm shadows */
  --shadow-1:0 2px 8px rgba(80,60,30,.10); --shadow-2:0 8px 30px rgba(80,60,30,.18);
  /* serif display font — system stack, zero downloads, GDPR-clean */
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  /* chat bubbles — warm light variants (dark defaults are invisible under warm ink text) */
  --user-bg:#e6ddc9; --bot-bg:#fdfaf3;
}

[data-theme="paper-dark"] {
  /* surfaces — warm dark paper (ink on parchment at night) */
  --bg:#221d16; --surface:#2b251c; --surface-2:#352e23;
  --chat-bg:#221d16; --app-bg:#221d16;
  --border:#3d3526; --border-strong:#5a4f3a;
  --overlay-1:rgba(255,248,230,.05); --overlay-2:rgba(255,248,230,.08); --overlay-3:rgba(255,248,230,.13);
  /* text — warm parchment ink, lightened for dark bg */
  --text:#ece3d2; --text-dim:#a99e88; --text-faint:#80755f; --text-on-accent:#ffffff;
  /* brand + semantic — slate accent darkened so white labels pass; semantics lightened for dark */
  --accent:#6b81a6; --accent-hover:#7e93b8; --accent-tint:rgba(107,129,166,.16);
  --success:#5fae5f; --warning:#d39a3f; --danger:#e4715f; --info:#6b81a6;
  --success-tint:rgba(95,174,95,.16); --warning-tint:rgba(211,154,63,.16); --danger-tint:rgba(228,113,95,.16); --info-tint:rgba(107,129,166,.16);
  /* categorical palette — warm, lightened for dark bg */
  --c1:#6b81a6; --c2:#5fae5f; --c3:#d39a3f; --c4:#a98fc4; --c5:#cc8298; --c6:#5fa8b8; --c7:#9090c4; --c8:#5fb494; --c9:#e4715f; --c10:#a99e88;
  /* rounder shapes — inherit paper roundness */
  --radius-sm:6px; --radius:10px; --radius-lg:16px;
  /* deep warm shadows */
  --shadow-1:0 2px 8px rgba(0,0,0,.40); --shadow-2:0 8px 30px rgba(0,0,0,.55);
  /* serif display font — same stack as paper */
  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  /* chat bubbles — warm dark variants */
  --user-bg:#2f3b4d; --bot-bg:#2b251c;
}

/* Display/heading font application (all themes — no-op unless --font-display set) */
.pf-header-title,
.ou-subheader-title,
.ou-card-title,
.ou-section-title,
.ou-modal-title,
.wf-card-title,
.billing-balance-amount,
.login-box h2,
h1, h2 { font-family: var(--font-display); }
* { margin:0; padding:0; box-sizing:border-box; }
html { height:100vh; height:100dvh; background:var(--bg); }
body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background: var(--bg); color: var(--text);
  min-height:100vh; min-height:100dvh; height:100vh; height:100dvh;
  display: flex; flex-direction: column; overflow: hidden;
  position:fixed; top:0; left:0; right:0; bottom:0;
}

/* Header */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0px));
  border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0; position:relative; z-index:200;
}
.header-left { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-center { display:flex; align-items:center; gap:8px; flex:1; justify-content:center; min-width:0; }
.header-right { display:flex; gap:0; align-items:center; overflow:hidden; flex-shrink:0; }

#globalBusinessSelect {
  padding:5px 10px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none;
  flex-shrink:0; cursor:pointer; transition:border-color .2s;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
  padding-right:24px;
}
#globalBusinessSelect:hover { border-color:#444; }
#globalBusinessSelect:focus { border-color:var(--accent); }
.header h1 { font-size:18px; font-weight:500; }
@media(max-width:600px){
  /* Move input area closer to bottom */
  .input-area { padding:4px 10px 2px; padding-bottom:env(safe-area-inset-bottom, 2px); }
  .input-container { padding:10px 12px 6px; border-radius:16px; }
  /* Taller textarea */
  .input-container textarea { min-height:44px; font-size:16px; }
  /* Mic and send buttons */
  .tb-btn { width:62px; height:62px; }
  .tb-btn svg { width:20px; height:20px; }
  .tb-btn.primary { width:62px; height:62px; }
  .tb-btn.primary svg { width:18px; height:18px; }
  #micBtn { margin-right:5px; border:1px solid var(--border); }
  #sendBtn svg { position:relative; left:-1px; top:1px; }
  /* Bigger + attach button */
  #attachBtn { width:44px; height:44px; }
  #attachBtn svg { width:20px; height:20px; }
  /* Checkboxes — breathing room */
  .auto-send-wrap { transform:scale(1.15); transform-origin:center; margin:0 4px; }
  .auto-send-wrap input[type="checkbox"] { width:18px; height:18px; }
  /* Reduce toolbar gap */
  .input-toolbar { margin-top:6px; }
  .tb-right { gap:10px; }
  .header { flex-wrap:wrap; padding:8px 12px; padding-top:calc(8px + env(safe-area-inset-top, 0px)); gap:6px; }
  .header-left { flex-shrink:0; }
  .header-center { position:static; transform:none; flex:1; justify-content:center; }
  .header-right { width:100%; }
  .header h1 .oscar-title-text { display:none; }
  #globalBusinessSelect { max-width:100px !important; font-size:11px !important; padding:4px 20px 4px 6px !important; }

  /* TTS button to far right on mobile */
  #ttsHeaderBtn { display:none !important; }
  /* App bar: icons spread evenly, app manager pinned right */
  .header-right { display:flex; flex-wrap:nowrap; gap:0; overflow:hidden; width:100%; }
  #appBar { display:flex; flex:1; justify-content:flex-end; gap:0; }
  #appBar .menu-btn { flex:0 0 auto; }
  .menu-btn { padding:8px 10px; }
  .email-panel,.todo-panel,.memory-panel,.subscriptions-panel,.calendar-panel,.files-panel,.cronjobs-panel,.usage-panel,.health-panel,.settings-panel,.appmanager-panel,.accounting-panel,.terminal-panel,.vpsstats-panel,.crm-panel,.meetings-panel,.campaigns-panel,.sb-panel { z-index:150 !important; max-width:100% !important; width:100% !important; }
}
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); transition:background .3s; }
.status-dot.reconnecting { animation:reconnect-pulse 1s infinite; }
@keyframes reconnect-pulse { 0%,100%{opacity:1;background:var(--warning)} 50%{opacity:.3} }
.status-dot.connected { background:var(--success); }
.is-hidden { display:none !important; }
.node-status { display:flex; align-items:center; gap:8px; margin-left:6px; padding-left:8px; border-left:1px solid var(--overlay-2); }
.node-status .node-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); flex-shrink:0; transition:background .3s; }
.node-status .node-dot.online { background:var(--success); }
.node-status .node-label { font-size:13px; font-weight:300; display:flex; align-items:center; gap:6px; }
/* node-label font-size on mobile handled by header-left media query (font-size:0 to hide text) */
.menu-btn {
  background:none; border:1px solid var(--border); color:var(--text-dim);
  padding:10px 14px; border-radius:10px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition: color .15s, border-color .15s, background .15s;
}
.menu-btn svg { width:20px; height:20px; }
.menu-btn:hover { color:var(--text); border-color:#444; }
.menu-btn.active { color:var(--accent); border-color:var(--accent); background:var(--accent-tint); }

/* App Bar (dynamic top bar) */
/* ttsHeaderBtn removed — TTS toggle in input toolbar only */
#ttsInputBtn { color:var(--text-dim); transition:color .15s; }
#ttsInputBtn.tts-on { color:var(--accent); background:rgba(59,125,216,.12); }
#ttsInputBtn.tts-on svg { filter:drop-shadow(0 0 4px rgba(59,125,216,.4)); }
#appBar { display:flex; gap:6px; align-items:center; overflow:hidden; flex-shrink:1; min-width:0; }
#appBar .menu-btn, #appBarPinned .menu-btn { position:relative; }
.app-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#ff4757; color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; pointer-events:none; box-sizing:border-box; }
#appBarPinned { display:flex; gap:6px; align-items:center; flex-shrink:0; margin-left:4px; }
.app-bar-divider { width:1px; height:24px; background:var(--border); flex-shrink:0; margin:0 2px; }
.menu-btn.app-manager-btn { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.menu-btn.app-manager-btn:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
/* (edit mode handled via JS) */
/* Reorder buttons */
.app-reorder { display:flex; gap:4px; margin-top:2px; }
.app-reorder-btn { background:rgba(255,255,255,.1); border:1px solid var(--border); color:var(--text); width:28px; height:24px; border-radius:6px; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.app-reorder-btn:active { background:var(--accent); color:#000; }

/* App Manager Panel */
.appmanager-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:420px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.appmanager-panel.open { right:0; }
.appmanager-panel-backdrop {
  display:none; position:fixed; inset:0; z-index:145; background:rgba(0,0,0,.4);
}
.appmanager-panel-backdrop.open { display:block; }
.appmanager-grid {
  padding:12px 16px; overflow-y:auto; flex:1;
}
.appmanager-grid:not(:has(.app-section-grid)) {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  grid-auto-rows:min-content; gap:10px; align-content:start;
}
.appmanager-panel { -webkit-user-select:none; user-select:none; }
.app-grid-item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px; border-radius:12px; cursor:pointer; user-select:none;
  -webkit-user-select:none; -webkit-touch-callout:none;
  border:2px solid transparent; transition: border-color .15s, background .15s;
  height:auto; min-height:0;
}
.app-grid-item * { user-select:none; -webkit-user-select:none; }
.app-grid-item:hover { background:rgba(255,255,255,.04); }
.app-grid-item.in-bar { border-color:var(--accent); background:rgba(59,125,216,.06); }
.app-grid-item .app-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
.app-grid-item .app-icon svg { width:28px; height:28px; }
.app-grid-item .app-label { font-size:11px; color:var(--text-dim); text-align:center; line-height:1.2; }
.app-grid-item.in-bar .app-label { color:var(--accent); }
.app-grid-item { position:relative; }

/* App Manager sections (edit mode) */
.app-section-label { font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:.05em; padding:4px 0; display:flex; align-items:center; gap:8px; }
.app-section-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:10px; padding:8px; border-radius:12px; min-height:60px;
}
.app-section-divider { height:1px; background:var(--border); margin:8px 0; }
.app-section-empty { grid-column:1/-1; text-align:center; color:var(--text-dim); padding:16px; font-size:12px; opacity:.6; }
.app-category-label { font-size:10px; font-weight:700; color:var(--text-dim); letter-spacing:.08em; padding:8px 8px 2px; opacity:.6; }
.app-category-label--business { color:var(--accent); opacity:.85; }
.app-category-divider { height:1px; background:var(--border); margin:4px 8px; opacity:.5; }

/* Menu */
.menu-overlay { display:none; position:fixed; inset:0; z-index:200; }
.menu-overlay.open { display:block; }
/* Settings Sub-Navigation */
.settings-nav { display:flex; flex-direction:column; gap:2px; padding:4px 0; }
.settings-nav-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; cursor:pointer; transition:background .15s; color:var(--text); }
.settings-nav-item:hover { background:var(--surface); }
.settings-nav-item:active { background:var(--border); }
.settings-nav-item svg:first-child { flex-shrink:0; color:var(--text-dim); }
.settings-nav-label { flex:1; display:flex; flex-direction:column; gap:1px; }
.settings-nav-label span:first-child { font-size:14px; font-weight:600; }
.settings-nav-desc { font-size:11px; color:var(--text-dim); }
.settings-nav-arrow { flex-shrink:0; color:var(--text-dim); }
.settings-section { display:none; flex-direction:column; }
.settings-back-btn { display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--accent); font-size:14px; font-weight:600; cursor:pointer; padding:8px 4px 12px; font-family:inherit; }
.settings-back-btn:hover { opacity:0.8; }
.settings-back-btn svg { flex-shrink:0; }

/* Settings Panel (full tab) */
.settings-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:480px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.settings-panel.open { right:0; }
.settings-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.settings-panel-backdrop.open { display:block; }
.settings-content { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:0; }
/* Keep old menu styling classes for the content inside */
.menu-panel { display:none; }
.menu-section { margin-bottom:16px; }
.menu-section:last-child { margin-bottom:0; }
.menu-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:8px; }
.menu-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }

/* Appearance theme cards (settings → Display) */
.theme-cards { display:flex; gap:var(--space-3); }
.theme-card {
  flex:1; min-width:0; cursor:pointer; padding:var(--space-2);
  border:2px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); transition:border-color .15s, transform .1s;
  display:flex; flex-direction:column; gap:var(--space-2); text-align:center;
}
.theme-card:hover { border-color:var(--border-strong); }
.theme-card.active { border-color:var(--accent); }
.theme-card-preview {
  height:54px; border-radius:var(--radius); overflow:hidden; position:relative;
  border:1px solid var(--border); display:flex; flex-direction:column;
}
.theme-card-preview-top { flex:1; display:flex; align-items:center; padding:0 6px; gap:5px; }
.theme-card-preview-card {
  flex:1; height:60%; border-radius:3px; display:flex; align-items:center; padding:0 5px; gap:4px;
}
.theme-card-preview-line { height:4px; border-radius:2px; }
.theme-card-preview-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.theme-card-name { font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.theme-card.active .theme-card-name { color:var(--accent); }
/* Two-axis appearance picker (brand × mode) */
.theme-cards.theme-cards-2axis { display:block; }
.theme-mode-row { display:flex; gap:var(--space-1); margin-bottom:var(--space-3); }
.theme-mode-btn {
  flex:0 0 auto; cursor:pointer; padding:var(--space-1) var(--space-3);
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--text-dim);
  font-size:var(--fs-sm); font-weight:600; transition:border-color .15s, color .15s, background .15s;
}
.theme-mode-btn:hover { border-color:var(--border-strong); color:var(--text); }
.theme-mode-btn.active { border-color:var(--accent); color:var(--text-on-accent); background:var(--accent); }
.theme-card-grid { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.theme-cards-2axis .theme-card { flex:1 1 120px; max-width:200px; }
.menu-row span { font-size:14px; }
.toggle-switch {
  width:44px; height:24px; border-radius:12px; background:var(--border);
  position:relative; cursor:pointer; transition:background .2s;
  -webkit-tap-highlight-color:transparent;
}
.toggle-switch.on { background:var(--accent); }
.toggle-switch::after {
  content:''; position:absolute; top:2px; left:2px;
  width:20px; height:20px; border-radius:50%; background:white; transition:transform .2s;
}
.toggle-switch.on::after { transform:translateX(20px); }
.slider-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.slider-row input[type=range] { flex:1; accent-color:var(--accent); height:4px; }
.slider-val { font-size:13px; color:var(--accent); min-width:32px; text-align:right; }
.menu-divider { height:1px; background:var(--border); margin:12px 0; }

/* Messages */
.messages {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
  align-items:center;
  -webkit-overflow-scrolling:touch;
  will-change:scroll-position;
  overflow-x:hidden;
}
.msg-wrap { width:100%; max-width:min(720px, calc(100% - 32px)); display:flex; }
.msg-wrap.user { justify-content:flex-end; }
.msg-wrap.user .msg-body { display:flex; flex-direction:column; align-items:flex-end; }
.msg-wrap.assistant { justify-content:flex-start; }
.msg-wrap.system { justify-content:center; }
.msg-row { display:flex; gap:8px; align-items:flex-start; max-width:92%; }
.msg-meta {
  font-size:11px; color:var(--text-dim); margin-top:3px;
}
.msg-wrap.user .msg-meta { text-align:right; }
.msg-body { min-width:0; flex-shrink:1; }
.msg-wrap.user .msg-body .msg { min-width:min-content; }
.msg a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(59,125,216,.4); }
.msg a:hover { text-decoration-color:var(--accent); }
.msg {
  max-width:min(100%, 92cqi, 662px); padding:10px 14px; border-radius:16px;
  font-size:var(--font-size); line-height:1.5; word-break:normal; overflow-wrap:break-word; white-space:pre-wrap;
  width:max-content;
}
.msg.user { background:var(--user-bg); border-bottom-right-radius:4px; overflow-wrap:anywhere; }
.msg.assistant { background:var(--bot-bg); border:1px solid var(--border); border-bottom-left-radius:4px; position:relative; padding-bottom:14px; }
.msg.assistant:has(.play-btn) { padding-bottom:38px; }
.msg.system { color:var(--text-dim); font-size:calc(var(--font-size) - 2px); font-style:italic; }
.heartbeat-indicator { display:flex; flex-direction:column; align-items:center; margin:6px 0; width:100%; max-width:720px; padding:0 12px; box-sizing:border-box; }
.heartbeat-pill { cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 14px; border-radius:16px; background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.12); transition:all .2s; }
.heartbeat-pill:hover { background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.25); }
.heartbeat-pill svg { flex-shrink:0; }
.heartbeat-time { font-size:11px; color:rgba(168,85,247,.6); font-weight:500; }
.heartbeat-detail { display:none; width:100%; margin-top:6px; padding:10px 14px; background:rgba(168,85,247,.06); border:1px solid rgba(168,85,247,.1); border-radius:10px; font-size:11px; color:var(--text-dim); word-break:break-word; line-height:1.5; box-sizing:border-box; }
.heartbeat-detail.open { display:block; }
.heartbeat-req,.heartbeat-res { margin:6px 0; white-space:pre-wrap; }
.heartbeat-req strong,.heartbeat-res strong { color:rgba(168,85,247,.7); }
.heartbeat-req span,.heartbeat-res span { opacity:.7; }
.msg-with-image { display:flex; gap:10px; align-items:flex-start; }
.msg-with-image .msg-text { flex:1; min-width:0; }
/* Chat markdown styles */
.chat-code-block { background:rgba(0,0,0,.4); border:1px solid var(--border); border-radius:8px; padding:10px 12px; overflow-x:auto; font-size:13px; line-height:1.5; margin:6px 0; }
.chat-code-block code { background:none; padding:0; font-family:'SF Mono',Monaco,Consolas,monospace; color:#e6e6e6; }
.chat-inline-code { background:rgba(255,255,255,.1); padding:1px 5px; border-radius:4px; font-family:'SF Mono',Monaco,Consolas,monospace; font-size:0.9em; }
.chat-h { margin:16px 0 8px; font-weight:700; line-height:1.3; }
h1.chat-h { font-size:1.3em; } h2.chat-h { font-size:1.15em; } h3.chat-h { font-size:1.05em; }
h4.chat-h, h5.chat-h, h6.chat-h { font-size:1em; }
.chat-hr { border:none; border-top:1px solid var(--border); margin:12px 0; }
.chat-bq { border-left:3px solid var(--accent); padding:2px 10px; margin:8px 0; color:var(--text-dim); }
.chat-list { margin:12px 0; padding-left:20px; }
.chat-list li { margin:6px 0; line-height:1.4; }
.chat-p { margin:0 0 10px 0; line-height:1.5; }
.chat-p:last-child { margin-bottom:0; }
/* Option buttons */
.chat-option-btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chat-option-btn { background:rgba(59,125,216,.1); border:1px solid rgba(59,125,216,.3); border-radius:10px; padding:6px 14px; color:var(--text); font-size:13px; cursor:pointer; transition:background .15s, border-color .15s; }
.chat-option-btn:hover { background:rgba(59,125,216,.2); border-color:var(--accent); }
.chat-option-btn:active { background:rgba(59,125,216,.3); }
.msg-images { display:flex; flex-wrap:wrap; gap:6px; flex-shrink:0; }
.msg-images img { max-width:120px; max-height:100px; border-radius:8px; object-fit:cover; border:1px solid var(--border); cursor:pointer; }
.msg-images-below { margin-top:6px; }
.msg-images-below img { max-width:200px; max-height:160px; }
.msg-file-card { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); text-decoration:none; color:var(--text); font-size:13px; margin:4px 0; max-width:280px; transition:background .15s; }
.msg-file-card:hover { background:rgba(59,125,216,.1); }
.msg-file-card .file-icon { font-size:24px; flex-shrink:0; }
.msg-file-card .file-info { display:flex; flex-direction:column; overflow:hidden; }
.msg-file-card .file-name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-file-card .file-type { font-size:11px; color:var(--text-dim); text-transform:uppercase; }
.msg-media { margin-top:6px; }
.msg-media img { max-width:100%; max-height:300px; border-radius:8px; cursor:pointer; border:1px solid var(--border); }
.msg-media a.file-download { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--accent); text-decoration:none; font-size:13px; margin-top:4px; }
.msg-media a.file-download:hover { background:rgba(255,255,255,.1); }
.queue-panel { padding:6px 16px; font-size:12px; color:var(--text-dim); max-width:min(752px, 100%); margin:0 auto; width:100%; box-sizing:border-box; }
.queue-panel .queue-title { margin-bottom:4px; font-weight:600; }
.queue-item { display:flex; align-items:center; gap:6px; padding:3px 0; }
.queue-item .queue-preview { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-item button { background:none; border:none; cursor:pointer; font-size:12px; padding:2px 6px; border-radius:4px; color:var(--text-dim); }
.queue-item button:hover { background:rgba(255,255,255,.1); color:var(--text); }
.queue-item .q-edit { color:var(--accent); }
.queue-item .q-cancel { color:#e55; }
.subagent-panel { padding:8px 16px; font-size:12px; max-width:min(752px, 100%); margin:0 auto; width:100%; box-sizing:border-box; background:rgba(59,125,216,.08); border:1px solid rgba(59,125,216,.24); border-radius:10px; color:var(--text); }
.subagent-panel .subagent-title { font-weight:600; margin-bottom:4px; color:#9ec5ff; }
.subagent-item { display:flex; align-items:center; gap:7px; padding:2px 0; }
.subagent-dot { width:8px; height:8px; border-radius:50%; background:#4da3ff; box-shadow:0 0 0 0 rgba(77,163,255,.65); animation:subagentPulse 1.2s ease-in-out infinite; }
.subagent-name { font-weight:500; }
.subagent-meta { margin-left:auto; color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
@keyframes subagentPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(77,163,255,.65); } 50%{ box-shadow:0 0 0 6px rgba(77,163,255,0); } }
.msg-file {
  display:inline-flex; align-items:center; gap:6px; margin-top:6px;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:6px 10px; border-radius:10px; font-size:12px; color:var(--text-dim);
}
.play-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(59,125,216,.15); border:1px solid rgba(59,125,216,.3);
  color:var(--accent); cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:all .15s;
  position:absolute; bottom:4px; right:6px;
}
.play-btn svg { width:14px; height:14px; }
.play-btn:active { background:rgba(59,125,216,.3); }
.play-btn.playing { color:var(--danger); border-color:rgba(255,74,74,.3); background:rgba(255,74,74,.1); }
.play-btn.loading { color:var(--accent); border-color:rgba(59,125,216,.3); background:rgba(59,125,216,.1); }
.play-btn .spin { animation:btn-spin 1s linear infinite; }
@keyframes btn-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.typing { 
  color:var(--text-dim); font-size:13px; padding:8px 16px; display:none; 
  max-width:min(752px, 100%); margin:0 auto; width:100%; box-sizing:border-box; 
  position:relative; z-index:1;
  /* Prevent layout shift and scrollbar flicker */
  contain: layout style paint;
  overflow: hidden;
}
.typing.visible { display:flex; align-items:center; gap:8px; }
/* ── Alert Overlay ── */
.alert-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:24px; backdrop-filter:blur(10px); animation:alertFadeIn .3s ease; }
@keyframes alertFadeIn { from{opacity:0} to{opacity:1} }
.alert-icon { width:80px; height:80px; border-radius:50%; background:rgba(255,74,74,.15); display:flex; align-items:center; justify-content:center; animation:alertPulse 1.5s infinite; }
@keyframes alertPulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,74,74,.4)} 50%{transform:scale(1.05);box-shadow:0 0 0 20px rgba(255,74,74,0)} }
.alert-icon svg { width:40px; height:40px; }
.alert-message { font-size:18px; font-weight:600; color:#fff; text-align:center; max-width:400px; line-height:1.4; }
.alert-time { font-size:13px; color:rgba(255,255,255,.5); }
.alert-ack-btn { background:var(--accent); color:#fff; border:none; border-radius:16px; padding:16px 48px; font-size:16px; font-weight:700; cursor:pointer; transition:all .15s; letter-spacing:.5px; }
.alert-ack-btn:hover { transform:scale(1.05); filter:brightness(1.2); }
.alert-ack-btn:active { transform:scale(.97); }
.yt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0; }
.yt-card { min-width:0; }
.yt-card a>div { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--surface); }
@media(max-width:600px){ .yt-grid { grid-template-columns:1fr; } }
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:6px 0; }
.shop-card { min-width:0; }
.shop-card a { text-decoration:none; color:inherit; display:block; height:100%; }
.shop-card .shop-inner { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--surface); height:100%; display:flex; flex-direction:column; transition:border-color .15s,box-shadow .15s; }
.shop-card .shop-inner:hover { border-color:var(--accent); box-shadow:0 2px 12px rgba(0,0,0,.15); }
.shop-card .shop-img { width:100%; height:140px; object-fit:contain; background:#fff; display:block; }
.shop-card .shop-img-placeholder { width:100%; height:140px; background:var(--surface); display:flex; align-items:center; justify-content:center; }
.shop-card .shop-body { padding:10px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.shop-card .shop-title { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.shop-card .shop-price { font-size:16px; font-weight:700; color:var(--accent); margin-top:auto; }
.shop-card .shop-store { font-size:11px; color:var(--text-dim); display:flex; align-items:center; gap:4px; margin-top:2px; }
.shop-card .shop-rating { font-size:11px; color:var(--text); display:inline-flex; align-items:center; gap:2px; }
.shop-card .shop-badge { display:inline-block; font-size:10px; padding:2px 6px; border-radius:4px; font-weight:600; }
.shop-card .shop-badge.in-stock { background:rgba(76,175,80,.15); color:#4caf50; }
.shop-card .shop-badge.out-of-stock { background:rgba(255,152,0,.15); color:#ff9800; }
@media(max-width:400px){ .shop-grid { grid-template-columns:repeat(2,1fr); } }
.stop-btn { background:rgba(255,74,74,.12); border:1px solid rgba(255,74,74,.3); color:var(--danger); border-radius:8px; padding:4px 12px; font-size:12px; font-weight:600; cursor:pointer; margin-left:auto; display:flex; align-items:center; gap:4px; transition:all .15s; flex-shrink:0; }
.stop-btn:hover { background:rgba(255,74,74,.25); }
.stop-btn svg { width:12px; height:12px; }
.typing span { animation:blink 1.4s infinite both; }
.typing span:nth-child(2) { animation-delay:.2s; }
.typing span:nth-child(3) { animation-delay:.4s; }
.typing.deep-thinking .typing-label { color:var(--accent); font-style:italic; }
.typing.deep-thinking span:nth-child(1),.typing.deep-thinking span:nth-child(2),.typing.deep-thinking span:nth-child(3) { animation-duration:2.8s; color:var(--accent); }
@keyframes blink { 0%,80%,100%{opacity:.3} 40%{opacity:1} }

/* ── Thread Sidebar ── */
.thread-sidebar {
  width:260px; min-width:260px; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden; flex-shrink:0;
  transition:width .2s ease, min-width .2s ease;
}
.thread-sidebar.collapsed { width:0; min-width:0; border-right:none; overflow:hidden; }
.thread-sidebar-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 8px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.thread-sidebar-header h3 { font-size:13px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin:0; }
.thread-new-btn {
  background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px;
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.thread-new-btn:hover { color:var(--text); background:rgba(255,255,255,.08); }

.thread-list { flex:1; overflow-y:auto; padding:4px 6px; }
.thread-version { padding:6px 10px 10px; font-size:10px; color:var(--text-dim); text-align:right; opacity:.65; user-select:none; }
.thread-item {
  padding:10px 10px; border-radius:10px; cursor:pointer; margin-bottom:2px;
  display:flex; align-items:center; gap:8px; 
  transition:background .15s ease; /* Add ease for smoother transitions */
  position:relative;
  user-select:none; /* Prevent text selection on double-click */
}
.thread-item:hover { background:rgba(255,255,255,.06); transition-delay:0s; }
.thread-item.active { background:rgba(255,255,255,.1); }
.thread-item:active { background:rgba(255,255,255,.12); } /* Active state for click feedback */
.thread-item.drag-over { border-top:2px solid var(--accent); margin-top:-2px; }
.thread-item.dragging { opacity:.4; }
.thread-item-title {
  flex:1; font-size:13px; color:var(--text); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.thread-item.active .thread-item-title { font-weight:600; }
.thread-title-input {
  flex:1; font-size:13px; color:var(--text); background:rgba(255,255,255,.1);
  border:1px solid var(--accent); border-radius:4px; padding:1px 4px;
  outline:none; font-family:inherit; min-width:0;
}
.thread-item-time { font-size:11px; color:var(--text-dim); flex-shrink:0; }
.thread-item-delete {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--surface); border:none; color:var(--danger); cursor:pointer;
  padding:2px 4px; border-radius:4px; font-size:14px; opacity:0;
  transition:opacity .15s; z-index:1;
}
.thread-item:hover .thread-item-delete { opacity:.6; }
.thread-item:hover .thread-item-time { opacity:0; }
.thread-item-delete:hover { opacity:1 !important; }
.thread-item-spinner {
  width:14px; height:14px; border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--accent); border-radius:50%; flex-shrink:0;
  animation:thread-spin .8s linear infinite;
}
@keyframes thread-spin { to { transform:rotate(360deg); } }
.thread-item-unread {
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  flex-shrink:0; margin-left:auto;
}
.thread-item-ctx {
  font-size:10px; flex-shrink:0; font-weight:500; font-variant-numeric:tabular-nums;
  pointer-events:auto; /* Ensure it receives its own clicks */
}
.thread-model-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:3px; font-size:9px; font-weight:700;
  flex-shrink:0; cursor:pointer; border:1px solid transparent;
  transition:all .15s ease;
}
.thread-model-badge.opus {
  background:rgba(255, 139, 69, 0.2); color:#ff8b45; border-color:rgba(255, 139, 69, 0.3);
}
.thread-model-badge.sonnet {
  background:rgba(59, 125, 216, 0.2); color:#3b7dd8; border-color:rgba(59, 125, 216, 0.3);
}
.thread-model-badge.haiku {
  background:rgba(168, 85, 247, 0.2); color:#a855f7; border-color:rgba(168, 85, 247, 0.3);
}
.thread-model-badge.gemini {
  background:rgba(66, 133, 244, 0.2); color:#4285f4; border-color:rgba(66, 133, 244, 0.3);
}
.thread-model-badge.gemini-pro {
  background:rgba(66, 133, 244, 0.25); color:#5c9dff; border-color:rgba(66, 133, 244, 0.4);
  font-size:8px;
}
.thread-model-badge.gpt4o {
  background:rgba(16, 163, 127, 0.2); color:#10a37f; border-color:rgba(16, 163, 127, 0.3);
  font-size:8px;
}
.thread-model-badge.gpt4 {
  background:rgba(16, 163, 127, 0.25); color:#14b88a; border-color:rgba(16, 163, 127, 0.4);
}
.thread-model-badge.gpt {
  background:rgba(16, 163, 127, 0.15); color:#0fa16e; border-color:rgba(16, 163, 127, 0.25);
}
.thread-model-badge.llama {
  background:rgba(236, 72, 153, 0.2); color:#ec4899; border-color:rgba(236, 72, 153, 0.3);
}
.thread-model-badge.deepseek {
  background:rgba(99, 102, 241, 0.2); color:#6366f1; border-color:rgba(99, 102, 241, 0.3);
}
.thread-model-badge.unknown {
  background:rgba(148, 163, 184, 0.2); color:#94a3b8; border-color:rgba(148, 163, 184, 0.3);
}
.thread-model-badge:hover {
  background:rgba(255,255,255,0.1); transform:scale(1.1);
}
/* Chat body becomes a row with sidebar + chat column */
.chat-body { display:flex; flex:1; overflow:hidden; min-height:0; }
.chat-main {
  display:flex; flex-direction:column; flex:1; min-width:0;
  overflow:hidden; position:relative;
  background:var(--chat-bg);
  /* Prevent any horizontal overflow */
  overflow-x: hidden;
}
/* Mobile thread dropdown */
.thread-mobile-bar {
  display:none; padding:6px 12px; background:var(--surface); border-bottom:1px solid var(--border);
  align-items:center; gap:8px; flex-shrink:0;
}
.thread-mobile-dropdown {
  flex:1; position:relative;
}
.thread-mobile-trigger {
  width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:6px 10px; font-size:var(--font-size); font-family:inherit;
  cursor:pointer; display:flex; align-items:center; gap:6px;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.thread-mobile-trigger-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.thread-mobile-trigger-ctx { font-size:calc(var(--font-size) - 3px); font-weight:500; flex-shrink:0; }
.thread-mobile-trigger-chevron { flex-shrink:0; transition:transform .2s; color:var(--text-dim); }
.thread-mobile-trigger.open .thread-mobile-trigger-chevron { transform:rotate(180deg); }
.thread-mobile-menu {
  display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:200;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.4); max-height:50vh; overflow-y:auto;
  padding:4px;
}
.thread-mobile-menu.open { display:block; }
.thread-mobile-menu-item {
  display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:8px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s;
  font-size:var(--font-size); font-family:inherit;
}
.thread-mobile-menu-item:active { background:rgba(255,255,255,.1); }
.thread-mobile-menu-item.active { background:rgba(255,255,255,.08); }
.thread-mobile-menu-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-weight:400; }
.thread-mobile-menu-item.active .thread-mobile-menu-item-name { font-weight:600; }
.thread-mobile-menu-item-ctx { font-size:calc(var(--font-size) - 3px); font-weight:500; flex-shrink:0; }
.thread-mobile-menu-item-unread { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.thread-mobile-menu-item-actions { display:flex; gap:2px; flex-shrink:0; margin-left:auto; }
.thread-mobile-action-btn {
  width:28px; height:28px; border:none; background:none; border-radius:6px;
  color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s;
}
.thread-mobile-action-btn:active { background:rgba(255,255,255,.12); }
.thread-mobile-action-btn.danger:active { color:#ff3b30; }
/* Thread action confirmation popup */
.thread-confirm-overlay {
  display:none; position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.65);
  align-items:center; justify-content:center; animation:fadeIn .15s ease;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.thread-confirm-overlay.open { display:flex; }
.thread-confirm-box {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; width:88%; max-width:360px; text-align:center;
}
.thread-confirm-icon { margin-bottom:12px; }
.thread-confirm-icon svg { width:40px; height:40px; }
.thread-confirm-title { font-size:calc(var(--font-size) + 1px); font-weight:600; color:var(--text); margin-bottom:6px; }
.thread-confirm-desc { font-size:calc(var(--font-size) - 1px); color:var(--text-dim); line-height:1.5; margin-bottom:20px; }
.thread-confirm-btns { display:flex; gap:10px; justify-content:center; }
.thread-confirm-btns button {
  flex:1; padding:10px 0; border-radius:10px; font-size:calc(var(--font-size) - 1px);
  font-weight:600; cursor:pointer; border:none; font-family:inherit;
}
.thread-confirm-cancel { background:rgba(255,255,255,.08); color:var(--text-dim); border:1px solid var(--border) !important; }
.thread-confirm-cancel:active { background:rgba(255,255,255,.14); }
.thread-confirm-action { color:white; }
.thread-confirm-action.danger { background:#ff3b30; }
.thread-confirm-action.danger:active { background:#d32f2f; }
.thread-confirm-action.warning { background:#f0ad4e; }
.thread-confirm-action.warning:active { background:#d4952e; }
.thread-mobile-new {
  background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text-dim); cursor:pointer; padding:6px 8px; display:flex;
  align-items:center; justify-content:center;
}
@media(max-width:768px){
  .thread-sidebar { display:none !important; }
  .thread-mobile-bar { display:flex; }
  #threadToggleBtn { display:none !important; }

}
@media(min-width:769px){
  .thread-mobile-bar { display:none !important; }
}

/* ── Perplexity-style Input Area ── */
.input-area { padding:6px 16px 4px; background:var(--bg); flex-shrink:0; display:flex; justify-content:center; }
.input-container {
  background:var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:14px 14px 8px; transition:border-color .2s;
  width:100%; max-width:min(720px, 100%);
}
.input-container:focus-within { border-color:#444; }

/* Center input vertically when chat is empty */
.messages:empty + .typing + #debugLog + .img-lightbox + input + input + .input-area,
.messages-empty .input-area { }
body.empty-chat .messages { display:none; }
body.empty-chat .typing { display:none !important; }
body.empty-chat .chat-main { justify-content:flex-end; }
body.empty-chat .input-area {
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding-bottom:20vh;
}
body.empty-chat .input-area::before {
  content:var(--assistant-title, '☁️ Oscar C'); display:block;
  font-size:28px; font-weight:600; color:var(--text-dim);
  margin-bottom:24px; text-align:center;
}

/* Attachment thumbnails inside the box */
.att-preview { display:none; padding-bottom:8px; }
.att-preview.visible { display:flex; gap:6px; flex-wrap:wrap; }
.att-preview .att-item { position:relative; display:inline-block; }
.att-preview img { width:52px; height:52px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }
.att-preview .file-badge {
  background:var(--bg); border:1px solid var(--border);
  padding:6px 10px; border-radius:10px; font-size:12px; color:var(--text-dim);
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.att-preview .remove-att {
  width:18px; height:18px; border-radius:50%; background:var(--danger);
  color:white; border:none; font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:-5px; right:-5px; z-index:2;
}

/* Textarea */
.input-container textarea {
  width:100%; background:none; border:none; color:var(--text);
  font-size:var(--font-size); font-family:inherit; resize:none;
  max-height:120px; line-height:1.4; outline:none; min-height:28px; padding:0;
}
.input-container textarea::placeholder { color:var(--text-dim); }
.input-container.transcribing-state { position:relative; }
.input-container.transcribing-state textarea::placeholder { padding-left:22px; }
.input-container.transcribing-state::before {
  content:''; position:absolute; top:18px; left:18px; width:14px; height:14px;
  border-radius:50%; border:2px solid rgba(59,125,216,.2); border-top-color:var(--accent);
  animation:spin-transcribe .7s linear infinite; z-index:2;
}
@keyframes spin-transcribe { to { transform:rotate(360deg); } }

/* Toolbar row inside input box */
.input-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px;
}
.tb-left, .tb-right { display:flex; align-items:center; gap:6px; }

.tb-btn {
  width:36px; height:36px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; user-select:none;
  background:rgba(255,255,255,.06); color:var(--text-dim);
  transition:background .15s,color .15s; position:relative;
}
.tb-btn:active { background:rgba(255,255,255,.12); }
.tb-btn svg { position:relative; z-index:1; }

/* Send = accent filled circle */
.tb-btn.primary { background:var(--accent); color:white; width:38px; height:38px; }
.tb-btn.primary:disabled { opacity:.25; cursor:default; }

/* Mic states */
.tb-btn.recording { background:rgba(255,74,74,.2); color:var(--danger); overflow:visible; }
.tb-btn .mic-ring {
  position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--danger); opacity:0; transform:scale(1); pointer-events:none;
}
/* mic-ring pulse removed — vizMicLevel handles volume viz */
.tb-btn .mic-level {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(255,74,74,.15); opacity:0;
  transition:opacity .08s ease-out; pointer-events:none;
}
.tb-btn.transcribing { background:rgba(255,74,74,.15); color:var(--danger); position:relative; cursor:pointer; }
.tb-btn.transcribing svg { display:none; }
.tb-btn.transcribing .mic-level, .tb-btn.transcribing .mic-ring { display:none; }
.tb-btn.transcribing::after {
  content:''; position:absolute; width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ff4a4a' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center;
  z-index:2;
}
@keyframes mic-pulse {

/* Mic mute button */
#micMuteBtn {
  background:rgba(255,165,0,.2);
  color:#ffaa00;
  border:1px solid rgba(255,165,0,.3);
}
#micMuteBtn.muted {
  background:rgba(255,74,74,.2);
  color:var(--danger);
  border:1px solid rgba(255,74,74,.3);
}
#micMuteBtn.muted .mute-slash {
  display:block !important;
}
  0%{transform:scale(.9);opacity:.8} 100%{transform:scale(1.6);opacity:0}
}
/* Login */
.login-overlay {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center; z-index:999;
}
.login-overlay.hidden { display:none; }
/* Hide all UI until authenticated */
body:not(.authenticated) .header,
body:not(.authenticated) .chat-body,
body:not(.authenticated) .messages,
body:not(.authenticated) .typing,
body:not(.authenticated) .input-area,
body:not(.authenticated) .queue-panel,
body:not(.authenticated) #debugWrap { display:none !important; }
.login-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:32px; width:90%; max-width:360px; text-align:center;
}
.login-box h2 { margin-bottom:8px; font-size:24px; }
.login-box p { color:var(--text-dim); margin-bottom:20px; font-size:14px; }
.login-box input {
  width:100%; padding:12px 16px; background:var(--bg);
  border:1px solid var(--border); border-radius:10px; color:var(--text);
  font-size:15px; margin-bottom:12px; outline:none;
}
.login-box input:focus { border-color:var(--accent); }
.login-box button {
  width:100%; padding:12px; background:var(--accent); color:white;
  border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;
}
.login-box .error { color:var(--danger); font-size:13px; margin-top:8px; display:none; }
.login-box .hint { color:var(--text-dim); font-size:12px; margin-top:12px; }

/* Debug / Lightbox */
#debugWrap {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0;
  background:rgba(0,0,0,.95); z-index:160; display:none;
  flex-direction:column;
  /* Prevent layout reflow when toggling */
  contain: layout style paint;
}
#debugWrap.visible { display:flex; }
#debugToolbar {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; flex-shrink:0; border-bottom:1px solid #222;
}
#debugToolbar span { color:#0f0; font-size:14px; font-family:monospace; flex:1; display:flex; align-items:center; gap:6px; }
#debugToolbar button {
  background:rgba(255,255,255,.08); color:var(--text-dim); border:1px solid #333;
  padding:8px 14px; border-radius:8px; font-size:12px; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
#debugLog {
  flex:1; overflow-y:auto; background:transparent; color:#0f0; font-size:11px;
  font-family:monospace; padding:6px; word-break:break-all;
  -webkit-user-select:text; user-select:text;
}
.img-lightbox {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.9); align-items:center; justify-content:center; cursor:pointer;
}
.img-lightbox.open { display:flex; }
.img-lightbox img { max-width:95%; max-height:90%; object-fit:contain; border-radius:8px; }

[id^="lc"]::-webkit-scrollbar { display:none; }
.messages::-webkit-scrollbar { width:6px; }
.messages::-webkit-scrollbar-track { background:transparent; }
.messages::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
/* safe area handled by body fixed positioning */
input[type=file] { display:none; }
/* Drag & drop overlay */
.drop-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px); pointer-events:none;
  align-items:center; justify-content:center; flex-direction:column; gap:12px;
}
.drop-overlay.active { display:flex; }
.drop-overlay-inner {
  border:3px dashed var(--accent); border-radius:20px; padding:48px 64px;
  text-align:center; color:var(--text); pointer-events:none;
}
.drop-overlay-inner svg { width:48px; height:48px; color:var(--accent); margin-bottom:8px; }
.drop-overlay-inner p { font-size:18px; font-weight:600; margin:0; }
.drop-overlay-inner span { font-size:13px; color:var(--text-dim); }

/* ── Email Triage Panel ── */
/* Desktop: resize handle */
.panel-resize-handle {
  display:none; position:absolute; top:0; left:0; width:6px; height:100%;
  cursor:col-resize; z-index:10; background:transparent;
}
.panel-resize-handle:hover, .panel-resize-handle.dragging { background:var(--accent); opacity:0.4; }
@media(min-width:768px){
  .panel-resize-handle { display:block; }
  .email-panel-backdrop.open, .todo-panel-backdrop.open, .memory-panel-backdrop.open, .subscriptions-panel-backdrop.open, .files-panel-backdrop.open, .cronjobs-panel-backdrop.open, .appmanager-panel-backdrop.open, .accounting-panel-backdrop.open, .terminal-panel-backdrop.open, .crm-panel-backdrop.open, .vpsstats-panel-backdrop.open, .campaigns-panel-backdrop.open, .sb-panel-backdrop.open { display:none; }
}
.email-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.email-header h2 { font-size:15px; font-weight:600; }
.email-close { background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; padding:4px 8px; }
/* .email-refresh — shared by legacy panels (campaigns/usage); swept here, fully retired in step 13. */
.email-refresh {
  background:var(--overlay-2); border:1px solid var(--border); color:var(--text-dim);
  padding:6px 12px; border-radius:var(--radius); font-size:var(--fs-sm); cursor:pointer;
}
.email-refresh:active { background:var(--overlay-3); }
.email-list { flex:1; overflow-y:auto; padding:0; }
/* Urgency section header (statusDot + label) — replaces inline-styled emoji headers. */
.email-section-hdr {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) 14px; font-size:var(--fs-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid var(--border); background:var(--overlay-1);
}
.email-row {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border); position:relative; transition:opacity .3s, transform .3s;
}
.email-row.fade-out { opacity:0; transform:translateX(60px); }
.email-row.unread { background:var(--accent-tint); }
.email-unread-dot { width:8px; height:8px; border-radius:var(--radius-pill); background:var(--accent); flex-shrink:0; }
.email-unread-dot.read { background:transparent; }
.email-content { flex:1; min-width:0; }
.email-subject { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.email-row.unread .email-subject { font-weight:600; }
.email-from { font-size:var(--fs-sm); color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-badges { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.email-badges span { display:inline-flex; }
.email-badges svg { width:13px; height:13px; }
.email-time { font-size:var(--fs-xs); color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
/* Per-row action chips (chat / mark-read / overflow) — OscarUI.iconButton based. */
.email-row-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
/* .email-loading — kept as a shared text-placeholder (meetings/calendar/memory still borrow it; retired in their steps). */
.email-loading { text-align:center; padding:32px; color:var(--text-dim); font-size:var(--fs-md); }

/* ── Pending sends (approval-gated outbound) ── */
/* Hidden by default; openPendingView()/closePendingView() toggle .style.display. */
.email-pending-view { display:none; flex:1; min-height:0; flex-direction:column; }
.email-pending-bar {
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.email-pending-title { flex:1; font-size:13px; font-weight:600; color:var(--text); }
.email-pending-list { flex:1; overflow-y:auto; padding:8px 12px; }
.email-pending-item {
  border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:10px;
  background:var(--surface);
}
.email-pending-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
}
.email-pending-acct {
  font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-tint); padding:2px 8px; border-radius:var(--radius);
}
.email-pending-by { font-size:11px; color:var(--text-dim); }
.email-pending-to { font-size:12px; color:var(--text-dim); margin-bottom:2px; }
.email-pending-subj { font-size:15px; font-weight:600; color:var(--text); margin-bottom:6px; }
.email-pending-body {
  font-size:13px; color:var(--text-dim); white-space:pre-wrap; word-break:break-word;
  max-height:120px; overflow:hidden; margin-bottom:10px;
}
.email-pending-actions { display:flex; gap:8px; }
.email-pending-approve, .email-pending-reject {
  padding:7px 14px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid var(--border);
}
.email-pending-approve { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.email-pending-approve:disabled, .email-pending-reject:disabled { opacity:.5; cursor:default; }
.email-pending-reject { background:none; color:var(--text-dim); }
.email-pending-reject:active { background:var(--overlay-2); }

/* ── Todo Panel (legacy slide-in shell removed — tasks is framework-migrated; .todo-* content kept where still shared) ── */
.todo-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.todo-header h2 { font-size:16px; font-weight:600; }
.todo-date-nav {
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface);
}
.todo-date-nav span { font-size:14px; font-weight:500; min-width:140px; text-align:center; }
/* .todo-nav-btn deleted — only the calendar borrowed it; it now uses its own .cal-nav-btn (css/calendar.css). */
.todo-filters {
  display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0;
}
.todo-filter {
  flex:1; padding:9px; text-align:center; font-size:13px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent;
}
.todo-filter.active { color:var(--accent); border-bottom-color:var(--accent); }
.todo-add-bar { padding:8px 16px; flex-shrink:0; }
.todo-add-btn {
  padding:10px 16px; border-radius:10px; border:1px dashed var(--border);
  background:none; color:var(--accent); font-size:13px; font-weight:500; cursor:pointer;
}
.todo-add-btn:active { background:rgba(59,125,216,.08); }
.todo-form {
  padding:8px 16px 12px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.todo-input-row { display:flex; gap:6px; align-items:center; margin-bottom:8px; }
.todo-input-row input {
  flex:1; padding:10px 12px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:14px; outline:none;
}
.todo-input-row input:focus { border-color:var(--accent); }
.todo-form-row { display:flex; gap:6px; align-items:center; }
.todo-form-row select {
  flex:1; padding:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none;
}
.todo-save-btn {
  padding:8px 16px; background:var(--accent); color:white; border:none;
  border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
}
.todo-list { flex:1; overflow-y:auto; padding:0; }
.todo-group-header {
  padding:8px 16px; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.15);
}
.todo-row {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border); position:relative;
}
.todo-row.done { opacity:.5; }
.todo-checkbox {
  width:22px; height:22px; border-radius:6px; border:2px solid var(--border);
  background:rgba(255,255,255,.08); cursor:pointer; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:transparent; transition:all .2s;
}
.todo-checkbox.checked { background:var(--success); border-color:var(--success); color:white; }
.todo-content { flex:1; min-width:0; }
.todo-title { font-size:14px; }
.todo-row.done .todo-title { text-decoration:line-through; color:var(--text-dim); }
.todo-due { font-size:11px; color:var(--text-dim); margin-top:2px; }
.todo-owner-pill {
  font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px;
  background:rgba(255,255,255,.08); color:var(--text-dim); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
}
.todo-meta-line {
  display:flex; align-items:center; gap:6px; margin-top:3px;
}
.todo-subtask-badge {
  display:inline-block; font-size:10px; color:var(--text-dim); background:rgba(255,255,255,.08);
  padding:1px 6px; border-radius:8px;
}
.todo-subtask-badge.all-done { color:var(--success); background:rgba(74,255,122,.1); }
.todo-chat-btn {
  background:none; border:none; font-size:16px; cursor:pointer; padding:4px 6px;
  flex-shrink:0; opacity:0.4; transition:opacity .2s; color:var(--text-dim);
}
.todo-chat-btn:hover, .todo-chat-btn:active { opacity:1; }
.todo-dots-btn {
  background:none; border:none; cursor:pointer; padding:4px 8px;
  flex-shrink:0; color:var(--text-dim); font-size:18px; line-height:1;
  opacity:0.5; transition:opacity .2s; position:relative;
}
.todo-dots-btn:hover, .todo-dots-btn:active { opacity:1; }
.todo-dots-menu {
  position:absolute; right:0; top:100%; z-index:300;
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.4); min-width:160px; overflow:hidden;
}
.todo-dots-menu button {
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px;
  background:none; border:none; color:var(--text); font-size:13px; cursor:pointer;
  text-align:left;
}
.todo-dots-menu button:hover { background:rgba(255,255,255,.06); }
.todo-dots-menu button.danger { color:var(--danger); }
.todo-dots-menu button.danger:hover { background:rgba(255,74,74,.1); }
.todo-detail { display:none; padding:8px 16px 12px 48px; border-bottom:1px solid var(--border); background:rgba(0,0,0,.1); }
.todo-detail.open { display:block; }
.todo-subtask { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; }
.todo-subtask span { flex:1; min-width:0; }
.todo-subtask-check {
  width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border);
  background:none; cursor:pointer; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:9px; color:transparent;
}
.todo-subtask-check.checked { background:var(--accent); border-color:var(--accent); color:white; }
.todo-subtask.done span { text-decoration:line-through; color:var(--text-dim); }
.todo-promote-btn {
  background:none; border:none; color:var(--text-dim); cursor:pointer; padding:2px 4px;
  margin-left:auto; flex-shrink:0; opacity:0.3; transition:opacity .2s;
}
.todo-promote-btn:hover { opacity:1; color:var(--accent); }
.todo-subtask.promoting {
  background:rgba(59,125,216,.1); border-radius:6px;
  animation: subtask-promote 0.8s ease forwards;
}
@keyframes subtask-promote {
  0% { transform:translateX(0); opacity:1; }
  50% { transform:translateX(-10px) scale(1.02); opacity:0.8; }
  100% { transform:translateX(0); opacity:0; max-height:0; padding:0; margin:0; overflow:hidden; }
}
.todo-notes { font-size:12px; color:var(--text-dim); margin-top:6px; font-style:italic; }
.todo-edit-title { width:100%; padding:6px 8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:14px; outline:none; font-family:inherit; line-height:1.4; display:block; }
.todo-edit-title:focus { border-color:var(--accent); }
.todo-edit-notes { width:100%; padding:6px 8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; outline:none; font-family:inherit; resize:vertical; min-height:32px; margin-top:6px; }
.todo-edit-notes:focus { border-color:var(--accent); }
.todo-subtask-notes { font-size:11px; color:var(--text-dim); font-style:italic; margin-left:24px; margin-top:1px; }
.todo-detail-actions { display:flex; gap:4px; margin-top:8px; }
.todo-detail-actions button {
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px;
  color:var(--text-dim); font-size:11px; padding:4px 10px; cursor:pointer;
}
.todo-detail-actions button:active { background:rgba(255,255,255,.12); }
.todo-add-subtask {
  display:flex; gap:6px; margin-top:6px;
}
.todo-add-subtask input {
  flex:1; padding:6px 8px; background:var(--surface); border:1px solid var(--border);
  border-radius:6px; color:var(--text); font-size:12px; outline:none;
}
.todo-add-subtask button {
  padding:6px 10px; background:var(--accent); color:white; border:none;
  border-radius:6px; font-size:11px; cursor:pointer;
}
.todo-stats {
  padding:10px 16px; border-top:1px solid var(--border); background:var(--surface);
  font-size:13px; color:var(--text-dim); text-align:center; flex-shrink:0;
}
/* Email detail view */
.email-detail { display:none; flex-direction:column; flex:1; overflow:hidden; }
.email-detail.open { display:flex; }
.email-detail-header { display:flex; flex-direction:column; gap:6px; padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.email-detail-header > .ou-back-btn { align-self:flex-start; }
.email-detail-subject { font-size:var(--fs-lg); font-weight:600; }
.email-detail-meta { font-size:var(--fs-sm); color:var(--text-dim); }
.email-detail-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.email-detail-actions button { background:var(--overlay-2); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:var(--fs-sm); padding:6px 10px; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background .15s; }
.email-detail-actions button:hover { background:var(--overlay-3); }
.email-detail-actions button svg { width:16px; height:16px; }
.email-detail-actions > .ou-icon-btn { padding:6px; }
.email-detail-body { flex:1; overflow-y:auto; padding:16px; font-size:var(--fs-md); line-height:1.6; color:var(--text); }

/* Compose panel */
.email-compose { display:none; flex-direction:column; gap:10px; padding:14px 16px; border-top:1px solid var(--border); background:var(--surface); flex-shrink:0; max-height:60vh; overflow-y:auto; }
.email-compose.open { display:flex; }
.email-compose label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:2px; }
.email-compose input, .email-compose textarea, .email-compose select {
  background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text);
  font-size:13px; padding:8px 10px; font-family:inherit; width:100%; outline:none;
}
.email-compose input:focus, .email-compose textarea:focus, .email-compose select:focus { border-color:var(--accent); }
.email-compose textarea { resize:vertical; min-height:80px; line-height:1.5; }
.email-compose .compose-account { color:var(--accent); font-size:13px; padding:4px 0; }
.email-compose-btns { display:flex; gap:8px; justify-content:flex-end; }
.email-compose-btns button {
  padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--text);
}
.email-compose-btns button.primary { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.email-compose-btns button:active { opacity:.7; }

/* ── Auto-send checkbox ── */
.auto-send-wrap { display:flex; align-items:center; gap:2px; }
.auto-send-wrap input[type=checkbox] { display:inline-block; width:14px; height:14px; accent-color:var(--accent); cursor:pointer; margin:0; }
.auto-send-label { font-size:10px; color:var(--text-dim); cursor:default; user-select:none; }
.llm-auth-tab.active { background:rgba(59,125,216,.12) !important; border-color:var(--accent) !important; color:var(--accent) !important; }
.think-select { background:none; border:none; color:var(--text-dim); font-size:10px; cursor:pointer; padding:0; font-family:inherit; outline:none; -webkit-appearance:none; appearance:none; }
.think-select option { background:var(--surface); color:var(--text); }
.think-wrap.active .think-select { color:var(--accent); }
.think-wrap.active svg { stroke:var(--accent); opacity:1; }

/* Chat Options Modal */
.chat-options-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,.7);
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn .15s ease;
  padding: 0;
}
.chat-options-modal-overlay.open { display: flex; }

.chat-options-modal {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  margin-bottom: 0;
}
/* Team (first-party) chat: compact — only Model + Add-to-Chat, tighter spacing. */
.chat-options-modal.team-mode { max-width: 360px; }
.chat-options-modal.team-mode .chat-options-header { padding: 12px 16px; }
.chat-options-modal.team-mode .chat-options-header h3 { font-size: 15px; }
.chat-options-modal.team-mode .chat-option-section { padding: 12px 16px; }
.chat-options-modal.team-mode .model-options { gap: 6px; }
.chat-options-modal.team-mode .model-option { padding: 9px 12px; }
/* Compact, tidy attachment buttons (Camera/Files) for team chat — small horizontal
   pills instead of big squares. */
.chat-options-modal.team-mode .attachment-option { flex-direction: row; justify-content: center; gap: 8px; padding: 9px 12px; font-size: 13px; }
.chat-options-modal.team-mode .attachment-option svg { width: 18px; height: 18px; }

.chat-options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.chat-options-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.chat-option-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.chat-option-section:last-child { border-bottom: none; }

.chat-option-section label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Model Options */
.model-options {
  display: grid;
  gap: 8px;
}

.model-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  color: var(--text);          /* a bare <button> otherwise inherits the near-black UA color → invisible on dark themes */
  font-size: 14px;
}

.model-option:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--accent);
}

.model-option.active {
  background: rgba(88,166,255,.1);
  border-color: var(--accent);
}

.model-icon { font-size: 24px; }
.model-name { flex: 1; font-size: 16px; font-weight: 500; color: var(--text); }
.model-desc { font-size: 12px; color: var(--text-dim); }

/* Model Groups */
.model-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  margin: 12px 0 6px;
  padding: 0 4px;
}
.model-group-label:first-child { margin-top: 0; }

.model-group-openrouter {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 12px;
  overflow: hidden;
}
.model-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: rgba(255,255,255,.02);
  transition: background .15s;
  user-select: none;
}
.model-group-header:hover { background: rgba(255,255,255,.05); }
.model-group-header .chevron {
  transition: transform .2s;
  color: var(--text-dim);
}
.model-group-openrouter.expanded .model-group-header .chevron {
  transform: rotate(90deg);
}
.model-group-header-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.model-group-count {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 10px;
}
.model-group-body {
  display: none;
  border-top: 1px solid var(--border);
}
.model-group-openrouter.expanded .model-group-body {
  display: block;
}
.model-search-input {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
}
.model-search-input::placeholder { color: var(--text-dim); }
.model-group-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.model-group-list .model-option {
  padding: 7px 10px;
  gap: 0;
  border: none;
  border-radius: 6px;
}
.model-group-list .model-option:hover {
  background: rgba(255,255,255,.05);
}
.model-group-list .model-option.active {
  background: rgba(88,166,255,.1);
}

/* Compact two-line layout for OpenRouter models */
.model-option-compact {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.model-compact-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.model-compact-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-compact-row2 {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-pricing {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.model-pricing-free {
  color: #4caf50;
}

/* Thinking Options */
.think-options {
  display: flex;
  gap: 8px;
}

.think-option {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--text);
}

.think-option:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--accent);
}

.think-option.active {
  background: rgba(88,166,255,.1);
  border-color: var(--accent);
}

/* Attachment Options */
.attachment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.attachment-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--text);
  font-size: 14px;
}

.attachment-option:hover {
  background: rgba(255,255,255,.05);
  border-color: var(--accent);
}

.attachment-option svg { width: 32px; height: 32px; stroke-width: 1.5; }

/* Toggle Options */
.toggle-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

.toggle-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ── Message hover actions ── */
.msg-wrap { position:relative; }
.msg-actions {
  display:none; position:absolute; top:50%; right:0; transform:translate(calc(100% + 4px),-50%); gap:4px; z-index:5;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:4px 6px;
}
.msg { position:relative; }
.msg-wrap.user .msg-actions { right:auto; left:0; transform:translate(calc(-100% - 4px),-50%); }
@media(hover:hover){
  .msg-wrap:hover .msg-actions { display:flex; }
}
.msg-action-btn {
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); cursor:pointer; color:var(--text-dim);
  transition:all .15s;
}
.msg-action-btn:hover { background:rgba(255,255,255,.12); color:var(--text); border-color:#444; }
.msg-action-btn svg { width:14px; height:14px; }
/* Mobile swipe actions */
.msg-swipe-reveal {
  position:absolute; top:0; right:0; bottom:0; width:180px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.msg-swipe-reveal.visible {
  opacity:1; pointer-events:auto;
  position:sticky; top:50vh; transform:translateY(-50%); height:fit-content;
  align-self:flex-start;
}
.msg-swipe-reveal .msg-action-btn {
  width:52px; height:52px;
}
.msg-swipe-reveal .msg-action-btn svg { width:22px; height:22px; }
.msg-row { transition:transform .2s ease; }

/* Reply bar */
.doc-context-bar { display:none; align-items:center; gap:6px; padding:6px 10px; margin-bottom:4px; background:rgba(59,125,216,.08); border:1px solid rgba(59,125,216,.2); border-radius:8px; font-size:12px; color:var(--accent); }
.doc-context-bar.visible { display:flex; }
.doc-context-bar .doc-context-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.reply-bar {
  display:none; align-items:center; gap:8px; padding:6px 10px;
  background:rgba(59,125,216,.08); border-left:3px solid var(--accent);
  border-radius:4px; margin-bottom:6px; font-size:12px; color:var(--text-dim);
}
.reply-bar.visible { display:flex; }
.reply-bar .reply-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reply-bar .reply-close { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; padding:2px 4px; }

/* Toast — positioned in the typing indicator area */
.global-toast {
  color:var(--text-dim); font-size:13px; padding:8px 16px; max-width:min(752px, 100%); 
  margin:0 auto; width:100%; box-sizing:border-box;
  text-align:center; opacity:0; transition:opacity .3s; pointer-events:none; display:none;
  /* Prevent layout shift */
  contain: layout style paint;
  overflow: hidden;
}
.global-toast.show { opacity:1; display:block; }

/* ── Task status styles ── */
.todo-row.in-review { }
.todo-row.rejected { }
.todo-checkbox.in-review { background:#f0ad4e; border-color:#f0ad4e; color:white; }
.todo-checkbox.in-progress { background:var(--accent); border-color:var(--accent); color:white; }
.todo-checkbox.rejected { background:#e75480; border-color:#e75480; color:white; }
.todo-status-label { font-size:10px; color:var(--text-dim); margin-top:1px; }
.todo-status-label.in-progress { color:var(--accent); }
.todo-status-label.in-review { color:#f0ad4e; }
.todo-status-label.done { color:var(--success); }
.todo-status-label.rejected { color:#e75480; }
.todo-status-label.pending-approval { color:#8b95a5; }
.todo-status-label.postponed { color:#a855f7; }
.todo-row.pending-approval { }
.todo-row.postponed { }
.todo-checkbox.pending-approval { background:#2c3240; border-color:#4a5568; color:white; }
.todo-checkbox.postponed { background:#a855f7; border-color:#a855f7; color:white; }
.todo-approve-btn { background:rgba(139,149,165,.15); border:1px solid #8b95a5; color:#8b95a5; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; margin-left:auto; flex-shrink:0; }
.todo-approve-btn:hover { background:rgba(240,173,78,.3); }
.todo-master-icon { display:inline-flex; align-items:center; margin-right:4px; vertical-align:-2px; }

/* Status dropdown */
.todo-status-dropdown {
  position:absolute; left:8px; top:36px; z-index:20;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.5); min-width:150px; overflow:hidden; display:none;
}
.todo-status-dropdown.open { display:block; }
.todo-status-dropdown button {
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:10px 14px; font-size:13px; background:none; border:none; color:var(--text); cursor:pointer;
}
.todo-status-dropdown button:hover, .todo-status-dropdown button:active { background:rgba(255,255,255,.06); }
.todo-status-dropdown button.current { color:var(--accent); font-weight:600; }
.todo-status-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Done animation */
@keyframes todo-confirm {
  0% { border-left-color:#f0ad4e; background:rgba(240,173,78,.1); }
  50% { border-left-color:var(--success); background:rgba(74,255,122,.1); }
  100% { border-left-color:var(--success); background:transparent; }
}
@keyframes todo-fadeout {
  0% { opacity:1; max-height:80px; }
  100% { opacity:0; max-height:0; padding:0 16px; margin:0; overflow:hidden; }
}
.todo-row.confirming {
  animation: todo-confirm 1s ease forwards;
  border-left:3px solid var(--success);
}
.todo-row.fading-out {
  animation: todo-fadeout 0.5s ease forwards;
}

/* ── Memory/Brain Panel ── */
.memory-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:500px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.memory-panel.open { right:0; }
.memory-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.memory-panel-backdrop.open { display:block; }
.memory-tabs { display:flex; flex-wrap:wrap; border-bottom:1px solid var(--border); flex-shrink:0; }
.memory-tab {
  padding:8px 12px; font-size:12px; font-weight:500; color:var(--text-dim); cursor:pointer;
  border:none; background:none; border-bottom:2px solid transparent;
}
.memory-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.memory-content { flex:1; display:flex; flex-direction:column; overflow:hidden; padding:8px; }
.memory-content textarea {
  flex:1; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-family:monospace; font-size:12px; padding:10px; resize:none; outline:none;
}
.memory-content textarea:focus { border-color:var(--accent); }
.memory-save-bar { display:flex; justify-content:flex-end; padding:6px 0; gap:6px; flex-shrink:0; }
.memory-save-btn {
  padding:7px 16px; background:var(--accent); color:white; border:none; border-radius:8px;
  font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.memory-save-btn svg, .memory-preview-toggle svg { vertical-align:middle; flex-shrink:0; }
.memory-preview-toggle {
  padding:7px 16px; background:rgba(255,255,255,.06); color:var(--text-dim); border:1px solid var(--border);
  border-radius:8px; font-size:12px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
@media(max-width:600px){
  .memory-save-btn, .memory-preview-toggle { padding:10px 18px; font-size:13px; }
}
.memory-preview-toggle.active { background:rgba(59,125,216,.15); color:var(--accent); border-color:var(--accent); }
.memory-rendered {
  flex:1; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:14px; font-size:var(--font-size); line-height:1.7; color:var(--text);
}
.memory-rendered h1 { font-size:20px; font-weight:700; margin:16px 0 8px; color:var(--text); }
.memory-rendered h2 { font-size:17px; font-weight:600; margin:14px 0 6px; color:var(--text); }
.memory-rendered h3 { font-size:15px; font-weight:600; margin:12px 0 4px; color:var(--text); }
.memory-rendered h4,.memory-rendered h5,.memory-rendered h6 { font-size:13px; font-weight:600; margin:10px 0 4px; }
.memory-rendered strong { font-weight:700; }
.memory-rendered em { font-style:italic; }
.memory-rendered ul,.memory-rendered ol { padding-left:20px; margin:6px 0; }
.memory-rendered li { margin:3px 0; }
.memory-rendered a { color:var(--accent); text-decoration:underline; }
.memory-rendered code { background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; font-family:monospace; font-size:12px; }
.memory-rendered pre { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:8px; padding:10px; overflow-x:auto; margin:8px 0; }
.memory-rendered pre code { background:none; padding:0; }
.memory-rendered blockquote { border-left:3px solid var(--accent); padding-left:12px; margin:8px 0; color:var(--text-dim); }
.memory-rendered hr { border:none; border-top:1px solid var(--border); margin:12px 0; }
.memory-rendered p { margin:6px 0; }
.memory-daily-list { flex:1; overflow-y:auto; }
.memory-daily-item {
  padding:10px 12px; border-bottom:1px solid var(--border); cursor:pointer; font-size:13px; color:var(--text);
}
.memory-daily-item:hover { background:rgba(255,255,255,.04); }

/* ── Subscriptions Panel ── */
.subscriptions-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:480px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.subscriptions-panel.open { right:0; }
.subscriptions-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.subscriptions-panel-backdrop.open { display:block; }
.subscriptions-list { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.sub-type-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.sub-type-tab { flex:1; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-dim); font-size:13px; font-weight:600; padding:10px 0; cursor:pointer; transition:all .2s; }
.sub-type-tab:hover { color:var(--text); }
.sub-type-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.sub-filter-tabs { display:flex; gap:4px; padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sub-filter-tab { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:16px; color:var(--text-dim); font-size:12px; padding:4px 12px; cursor:pointer; transition:all .2s; }
.sub-filter-tab:hover { color:var(--text); border-color:#555; }
.sub-filter-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.sub-summary {
  background:rgba(255,255,255,.04); border-radius:10px; padding:12px 16px; font-size:13px;
  color:var(--text-dim); display:flex; justify-content:space-between; align-items:center;
}
.sub-summary strong { color:var(--text); }
.sub-card {
  background:var(--surface); border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:all .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.3); border-left:4px solid #94a3b8;
}
.sub-card:hover { transform:translateX(-2px); }
.sub-card-cat-software { border-left-color:#4ecdc4; }
.sub-card-cat-hosting { border-left-color:#ff6b6b; }
.sub-card-cat-media { border-left-color:#a78bfa; }
.sub-card-cat-finance { border-left-color:#ffd93d; }
.sub-card-cat-communication { border-left-color:#34d399; }
.sub-card-cat-other { border-left-color:#94a3b8; }
.sub-card-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sub-card-name { font-weight:700; font-size:14px; color:var(--text); flex:1; }
.sub-card-warn { color:#ffa500; font-size:14px; }
.sub-account-pill {
  font-size:10px; padding:1px 7px; border-radius:8px; background:rgba(255,255,255,.08);
  color:var(--text-dim); font-weight:600; text-transform:uppercase; letter-spacing:.3px;
}
.sub-card-price { font-size:13px; color:var(--text); margin-top:4px; }
.sub-card-renewal { font-size:12px; color:var(--text-dim); margin-top:4px; display:flex; align-items:center; gap:6px; }
.sub-days-badge {
  font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600;
  background:rgba(255,255,255,.08); color:var(--text-dim);
}
.sub-days-badge.urgent { background:rgba(255,107,107,.2); color:#ff6b6b; }
.sub-status-badge {
  font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600; text-transform:uppercase;
}
.sub-status-active { background:rgba(74,255,122,.15); color:#4aff7a; }
.sub-status-canceled { background:rgba(136,136,136,.2); color:#888; }
.sub-status-overdue { background:rgba(255,107,107,.2); color:#ff6b6b; }
.sub-card-expanded { display:none; margin-top:12px; border-top:1px solid var(--border); padding-top:12px; }
.sub-card.expanded .sub-card-expanded { display:block; }
.sub-discover-panel { display:none; padding:12px; background:var(--surface); border-radius:10px; margin-bottom:10px; border:1px solid rgba(255,255,255,.06); }
.sub-discover-panel.open { display:block; }
.sub-discover-header { font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text); }
.sub-discover-section { margin-bottom:10px; }
.sub-discover-label { font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.sub-discover-check { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); padding:3px 0; cursor:pointer; }
.sub-discover-check input { accent-color:var(--accent); }
.sub-discover-actions { display:flex; gap:8px; justify-content:flex-end; }
.sub-discover-actions button { padding:8px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text); cursor:pointer; font-size:13px; }
.sub-discover-actions button.save { background:var(--accent); color:#fff; border:none; }
.sub-discover-actions button.save:disabled { opacity:.5; }
.sub-discover-results { margin-top:10px; }
.sub-discover-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.03); margin-bottom:6px; font-size:13px; }
.sub-discover-item .sdi-info { flex:1; min-width:0; }
.sub-discover-item .sdi-name { font-weight:600; color:var(--text); }
.sub-discover-item .sdi-detail { font-size:11px; color:var(--text-dim); margin-top:2px; }
.sub-discover-item .sdi-add { padding:4px 10px; border-radius:6px; border:1px solid var(--accent); color:var(--accent); background:transparent; cursor:pointer; font-size:12px; flex-shrink:0; }
.sub-discover-item .sdi-add:hover { background:var(--accent); color:#fff; }
.sub-discover-item .sdi-exists { color:var(--text-dim); font-size:11px; flex-shrink:0; }
.sub-discover-loading { text-align:center; color:var(--text-dim); padding:16px; font-size:13px; }
.sub-card-link { margin-bottom:8px; }
.sub-card-link a { color:var(--accent); text-decoration:none; font-size:13px; }
.sub-card-link a:hover { text-decoration:underline; }
.sub-card-email { font-size:13px; color:var(--text-dim); margin-bottom:8px; cursor:pointer; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.04); }
.sub-card-email:active { background:rgba(255,255,255,.1); }
.sub-card-notes { font-size:12px; color:var(--text-dim); margin-bottom:10px; white-space:pre-wrap; }
.sub-card-actions { display:flex; gap:6px; }
.sub-card-actions button {
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-dim);
  padding:5px 12px; border-radius:6px; font-size:11px; cursor:pointer;
}
.sub-card-actions button:hover { color:var(--text); border-color:#444; }
.sub-card-actions button.danger { color:var(--danger); }
.sub-card-actions button.danger:hover { border-color:var(--danger); }
.sub-form { background:var(--surface); border-radius:10px; padding:14px; display:none; flex-direction:column; gap:8px; }
.sub-form.open { display:flex; }
.sub-form input, .sub-form textarea, .sub-form select {
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:13px; padding:8px; outline:none; font-family:inherit;
}
.sub-form input:focus, .sub-form textarea:focus, .sub-form select:focus { border-color:var(--accent); }
.sub-form-row { display:flex; gap:8px; }
.sub-form-row > * { flex:1; }
.sub-form-actions { display:flex; gap:6px; justify-content:flex-end; }
.sub-form-actions button {
  padding:6px 16px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; border:none;
}
.sub-form-actions .save { background:var(--accent); color:white; }
.sub-form-actions .cancel { background:rgba(255,255,255,.06); color:var(--text-dim); border:1px solid var(--border); }

/* ── Calendar Panel — chrome provided by panel-framework; only inner styles below ── */
/* ── Calendar panel CSS moved to css/calendar.css (UI-unification §5 step 7). ── */

/* ── CronJobs Panel ── */
.cronjobs-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:520px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.cronjobs-panel.open { right:0; }
.cronjobs-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.cronjobs-panel-backdrop.open { display:block; }
.cronjobs-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.cronjobs-tab {
  flex:1; padding:10px; text-align:center; font-size:13px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent;
}
.cronjobs-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.cronjobs-content { flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:12px; }
.cronjobs-section { display:none; }
.cronjobs-section.active { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
.cronjobs-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.cronjobs-card-header {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.cronjobs-card-header h3 { margin:0; font-size:14px; font-weight:600; }
.cronjobs-btn {
  border:1px solid rgba(59,125,216,.5);
  background:linear-gradient(135deg, #4b91f4, #3b7dd8);
  color:#fff;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}
.cronjobs-btn:disabled { opacity:.5; cursor:default; }
.cronjobs-btn-secondary {
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.cronjobs-table-wrap { overflow-x:auto; }
.cronjobs-table { width:100%; border-collapse:collapse; font-size:12px; }
.cronjobs-table th, .cronjobs-table td { padding:9px 10px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.cronjobs-table th { color:var(--text-dim); font-size:11px; font-weight:600; }
.cronjobs-table tr:last-child td { border-bottom:none; }
.cronjobs-mono { font-family:'JetBrains Mono',monospace; font-size:11px; }
.cronjobs-badge { display:inline-block; border-radius:999px; padding:2px 8px; font-size:10px; font-weight:600; }
.cronjobs-badge.enabled { background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.32); color:#7ff2a6; }
.cronjobs-badge.disabled { background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.32); color:#ff9b9b; }
.cronjobs-run-actions { display:flex; gap:6px; flex-wrap:wrap; }
.cronjobs-run-actions button {
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:7px;
  cursor:pointer;
  padding:4px 8px;
  font-size:11px;
}
.cronjobs-form-grid { padding:12px; display:grid; gap:10px; }
.cronjobs-form-grid label { display:grid; gap:6px; color:var(--text-dim); font-size:12px; }
.cronjobs-form-grid input, .cronjobs-form-grid select, .cronjobs-form-grid textarea {
  width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit;
}
.cronjobs-form-grid textarea { resize:vertical; line-height:1.45; min-height:92px; font-family:'JetBrains Mono',monospace; }
.cronjobs-inline { display:flex !important; align-items:center; gap:8px; }
.cronjobs-inline input[type="checkbox"] { width:auto; }
.cronjobs-inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cronjobs-block { display:grid; gap:10px; }
.cronjobs-hidden { display:none !important; }
.cronjobs-actions { display:flex; justify-content:flex-end; gap:8px; }
.cronjobs-heartbeat-wrap { padding:12px; display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; }
.cronjobs-heartbeat-wrap textarea {
  width:100%; min-height:120px; flex:1; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px; font-size:13px; line-height:1.5; resize:vertical; font-family:'JetBrains Mono',monospace;
}
.cronjobs-markdown {
  min-height:120px; flex:1; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:12px; background:var(--bg); line-height:1.55; font-size:13px;
}
.cronjobs-markdown h1, .cronjobs-markdown h2, .cronjobs-markdown h3 { margin:0.8em 0 0.4em; }
.cronjobs-markdown code { background:rgba(255,255,255,.08); border-radius:6px; padding:1px 5px; font-family:'JetBrains Mono',monospace; }
.cronjobs-markdown pre { background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:8px; padding:10px; overflow:auto; }
.cronjobs-markdown blockquote { border-left:3px solid var(--accent); margin:.6em 0; padding-left:10px; color:var(--text-dim); }

/* ── CronJobs Card Layout + Modal ── */
.cronjobs-jobs-list { padding:0; }
.cj-item { padding:12px; border-bottom:1px solid var(--border); position:relative; }
.cj-item:last-child { border-bottom:none; }
.cj-item-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cj-item-name { font-weight:600; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cj-dots-btn { background:none; border:none; cursor:pointer; padding:4px 8px; color:var(--text-dim); font-size:18px; line-height:1; opacity:.5; transition:opacity .2s; flex-shrink:0; }
.cj-dots-btn:hover { opacity:1; }
.cj-dots-menu { position:absolute; right:12px; top:36px; z-index:300; background:var(--surface); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.4); min-width:140px; overflow:hidden; }
.cj-dots-menu button { display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px; background:none; border:none; color:var(--text); font-size:13px; cursor:pointer; text-align:left; }
.cj-dots-menu button:hover { background:rgba(255,255,255,.06); }
.cj-dots-menu button.danger { color:var(--danger); }
.cj-dots-menu button.danger:hover { background:rgba(255,74,74,.1); }
.cj-item-details { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.cj-item-schedule { color:var(--text-dim); font-size:12px; }
.cj-item-times { display:flex; gap:12px; margin-top:4px; font-size:11px; color:var(--text-dim); }
.cj-item-kind { font-size:11px; color:var(--text-dim); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:4px; }
.cj-no-jobs { text-align:center; color:var(--text-dim); padding:20px; font-size:13px; }
.cj-form-backdrop { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:200; background:rgba(0,0,0,.6); align-items:center; justify-content:center; }
.cj-form-backdrop.open { display:flex; }
.cj-form-modal { background:var(--bg); border:1px solid var(--border); border-radius:12px; width:92%; max-width:480px; max-height:85vh; display:flex; flex-direction:column; }
.cj-form-modal .cronjobs-card-header { border-radius:12px 12px 0 0; flex-shrink:0; }
.cj-form-modal-body { overflow-y:auto; flex:1; min-height:0; }
.cronjobs-markdown table { width:100%; border-collapse:collapse; }
.cronjobs-markdown td, .cronjobs-markdown th { border:1px solid var(--border); padding:6px 8px; }
.cronjobs-status { border-top:1px solid var(--border); padding:8px 12px; font-size:11px; color:var(--text-dim); background:var(--surface); flex-shrink:0; }

/* ── Files Panel ── */
.files-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:480px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.files-panel.open { right:0; z-index:10000; }
.files-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.files-panel-backdrop.open { display:block; }
.files-breadcrumb { display:flex; align-items:center; gap:4px; padding:8px 16px; font-size:13px; color:var(--text-dim); border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface); flex-wrap:wrap; }
.files-breadcrumb button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; padding:2px 4px; border-radius:4px; }
.files-breadcrumb button:hover { background:var(--accent-tint); }
.files-breadcrumb span { color:var(--text-dim); }
.files-toolbar { display:flex; gap:6px; padding:8px 16px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--surface); align-items:center; flex-wrap:wrap; }
.files-toolbar button { background:none; border:1px solid var(--border); color:var(--text-dim); padding:5px 10px; border-radius:8px; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.files-toolbar button:hover { color:var(--text); border-color:var(--border-strong); }
.files-toolbar button svg { width:14px; height:14px; }
.files-toolbar .files-select-all { margin-left:auto; }
.files-list { flex:1; overflow-y:auto; padding:8px; }
.files-item {
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px;
  cursor:pointer; transition:background .15s; position:relative;
}
.files-item:hover { background:var(--surface); }
.files-item.selected { background:var(--accent-tint); }
.files-item.drag-over { outline:2px dashed var(--accent); outline-offset:-2px; background:var(--accent-tint); }
.files-item.dragging { opacity:.4; }
.files-breadcrumb button.drag-over { background:var(--accent); color:var(--text-on-accent); }
.files-item input[type=checkbox] { flex-shrink:0; accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.files-item-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:6px; background:var(--surface); }
.files-item-icon svg { width:20px; height:20px; }
.files-item-icon img { width:36px; height:36px; border-radius:6px; object-fit:cover; }
.files-item-info { flex:1; min-width:0; }
.files-item-name { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.files-item-meta { font-size:11px; color:var(--text-dim); margin-top:2px; }
.files-item-actions { display:flex; gap:4px; opacity:0; transition:opacity .15s; }
.files-item:hover .files-item-actions { opacity:1; }
.files-item-actions button { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px; border-radius:4px; display:flex; }
.files-item-actions button:hover { color:var(--text); background:var(--overlay-2); }
.files-item-actions button svg { width:16px; height:16px; }
/* Three-dot menu for narrow/mobile view (the menu itself is now OscarUI.menu) */
.files-item-actions .files-more-btn { display:none; }
.files-item-actions .files-action-direct { display:flex; }
@media (max-width:600px) {
  .files-item-actions { opacity:1; }
  .files-item-actions .files-action-direct { display:none !important; }
  .files-item-actions .files-more-btn { display:flex !important; }
}
/* Narrow panel mode (set via JS when panel < 400px) */
.files-narrow .files-item-actions { opacity:1; }
.files-narrow .files-item-actions .files-action-direct { display:none !important; }
.files-narrow .files-item-actions .files-more-btn { display:flex !important; }
/* Public file badge */
.files-pub-badge { display:inline-flex; align-items:center; vertical-align:middle; margin-left:5px; color:var(--accent); opacity:.8; }
.files-pub-badge svg { width:12px; height:12px; }

.files-empty { text-align:center; padding:40px 20px; color:var(--text-dim); font-size:14px; }
.files-empty svg { width:48px; height:48px; margin-bottom:12px; opacity:.4; }
.files-rename-input { background:var(--surface); border:1px solid var(--accent); color:var(--text); padding:2px 6px; border-radius:4px; font-size:14px; width:100%; outline:none; }
.files-upload-zone { border:2px dashed var(--border); border-radius:12px; padding:20px; text-align:center; margin:8px; color:var(--text-dim); font-size:13px; transition:border-color .2s, background .2s; }
.files-upload-zone.drag-active, .files-list.drag-active { border-color:var(--accent); background:var(--accent-tint); }
.files-upload-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.65); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; border-radius:0; gap:12px; backdrop-filter:blur(4px); }
.files-upload-overlay .upload-spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.files-upload-overlay .upload-label { color:#fff; font-size:13px; font-weight:500; }
.files-upload-overlay .upload-bar-track { width:60%; height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.files-upload-overlay .upload-bar-fill { height:100%; background:var(--accent); border-radius:3px; transition:width .15s; width:0%; }
@keyframes spin { to { transform:rotate(360deg); } }
.files-preview-overlay { flex:1; min-height:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; overflow:hidden; position:relative; }
/* The floating .files-preview-toolbar was deleted — the preview header is now
   OscarUI.subHeader (.files-preview-header), styled in css/files.css. */
@media(max-width:600px){
  .files-preview-overlay { z-index:160; }
  .files-preview-content { padding:16px 12px 12px; }
}
.files-preview-content { max-width:1200px; width:100%; flex:1; position:relative; overflow-y:auto; overflow-x:hidden; padding:16px 24px 24px; min-height:0; display:flex; flex-direction:column; }
.files-preview-content img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; display:block; margin:0 auto; }
.files-preview-content iframe { width:100%; flex:1; min-height:300px; border:none; border-radius:8px; background:white; }
.files-preview-content pre { max-width:100%; max-height:85vh; overflow:auto; background:rgba(255,255,255,.05); color:var(--text); padding:20px; border-radius:8px; font-size:13px; white-space:pre-wrap; word-break:break-word; }
.md-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.md-table th, .md-table td { padding:10px 14px; border:1px solid rgba(255,255,255,.12); text-align:left; }
.md-table th { background:rgba(255,255,255,.06); font-weight:600; white-space:nowrap; }
.md-table tr:nth-child(even) { background:rgba(255,255,255,.03); }
.md-table tr:hover { background:rgba(255,255,255,.06); }
.files-preview-overlay.light-preview { background:#fff; }
.files-preview-overlay.light-preview .files-preview-content { color:#1a1a1a; }
.files-preview-overlay.light-preview .files-md-rendered { color:#1a1a1a; }
.chat-main.doc-light .input-area { background:#fff; }
.chat-main.doc-light .input-area .input-container { background:#fff; border-color:#ddd; }
.chat-main.doc-light .input-area textarea { background:#f5f5f5; color:#1a1a1a; }
.chat-main.doc-light .input-area .doc-context-bar { background:rgba(0,100,200,.08); border-color:rgba(0,100,200,.2); color:#0066cc; }
.chat-main.doc-light .input-area .tb-btn { color:#555; }
.files-preview-overlay.light-preview .md-table th, .files-preview-overlay.light-preview .md-table td { border-color:rgba(0,0,0,.15); }
.files-preview-overlay.light-preview .md-table th { background:rgba(0,0,0,.06); }
.files-preview-overlay.light-preview .md-table tr:nth-child(even) { background:rgba(0,0,0,.03); }
.files-preview-overlay.light-preview .md-table tr:hover { background:rgba(0,0,0,.06); }
.files-preview-overlay.light-preview pre { background:rgba(0,0,0,.05); color:#1a1a1a; }
.files-preview-overlay.light-preview code { background:rgba(0,0,0,.06); color:#1a1a1a; }
.files-preview-overlay.light-preview blockquote { border-left:3px solid rgba(0,0,0,.2); color:#444; }
.files-preview-overlay.light-preview a { color:#0066cc; }
.files-preview-overlay.light-preview h1,.files-preview-overlay.light-preview h2,.files-preview-overlay.light-preview h3,.files-preview-overlay.light-preview h4 { color:#111; }
.files-preview-overlay.light-preview hr { border-color:rgba(0,0,0,.12); }
.files-preview-overlay.light-preview .files-preview-header { background:#fff; border-bottom-color:rgba(0,0,0,.12); }
.files-preview-overlay.light-preview .files-preview-header .ou-subheader-title { color:#1a1a1a; }
.files-preview-overlay.light-preview .files-preview-header .ou-back-btn { color:#333; }
.files-preview-overlay.light-preview .files-preview-header .ou-subheader-actions button { background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.12); color:#333; }
.files-preview-overlay.light-preview .files-preview-header .ou-subheader-actions button:hover { background:rgba(0,0,0,.15); }
.files-preview-close { display:none; }

/* ── Document Audio Player ── */
.doc-audio-player { position:sticky; bottom:0; left:0; right:0; background:rgba(20,20,25,.95); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.1); padding:12px 20px; z-index:210; display:flex; flex-direction:column; gap:8px; }
.doc-audio-player .dap-row { display:flex; align-items:center; gap:12px; }
.doc-audio-player .dap-btn { width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .15s,transform .1s; }
.doc-audio-player .dap-btn:hover { background:#4a8ae6; transform:scale(1.05); }
.doc-audio-player .dap-btn:active { transform:scale(.95); }
.doc-audio-player .dap-btn.generating { background:rgba(255,255,255,.15); animation:dap-pulse 1.5s ease-in-out infinite; }
@keyframes dap-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.doc-audio-player .dap-skip { width:32px; height:32px; border-radius:50%; border:none; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc-audio-player .dap-skip:hover { background:rgba(255,255,255,.2); }
.doc-audio-player .dap-timeline { flex:1; display:flex; flex-direction:column; gap:4px; }
.doc-audio-player .dap-progress-bar { width:100%; height:16px; background:rgba(255,255,255,.12); border-radius:8px; cursor:pointer; position:relative; overflow:visible; touch-action:none; }
.doc-audio-player .dap-progress-bar:hover { height:18px; }
.doc-audio-player .dap-progress-fill { height:100%; background:var(--accent); border-radius:8px; transition:width .1s linear; pointer-events:none; }
.doc-audio-player .dap-progress-handle { position:absolute; top:50%; left:0%; width:18px; height:18px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,.3); opacity:1; pointer-events:none; }
.doc-audio-player .dap-time { font-size:11px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; }
.doc-audio-player .dap-speed { font-size:11px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.doc-audio-player .dap-speed:hover { background:rgba(255,255,255,.2); }
.files-preview-overlay.light-preview .doc-audio-player { background:rgba(250,250,252,.95); border-top-color:rgba(0,0,0,.1); }
.files-preview-overlay.light-preview .doc-audio-player .dap-time { color:rgba(0,0,0,.5); }
.files-preview-overlay.light-preview .doc-audio-player .dap-progress-bar { background:rgba(0,0,0,.1); }
.files-preview-overlay.light-preview .doc-audio-player .dap-skip { background:rgba(0,0,0,.08); color:#333; }
.files-preview-overlay.light-preview .doc-audio-player .dap-speed { color:#555; background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.12); }

/* ── Usage Stats Panel ── */
.usage-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:480px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.usage-panel.open { right:0; }
.usage-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.usage-panel-backdrop.open { display:block; }
.usage-view-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.usage-view-tab {
  flex:1; padding:9px; text-align:center; font-size:13px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border:none; background:none;
  border-bottom:2px solid transparent;
}
.usage-view-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.usage-content { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.usage-summary-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.usage-card {
  background:var(--surface); border-radius:10px; padding:14px;
  border:1px solid var(--border);
}
.usage-card-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:4px; }
.usage-card-value { font-size:22px; font-weight:700; color:var(--text); }
.usage-card-value.cost { color:#4ecdc4; }
.usage-chart-container { background:var(--surface); border-radius:10px; padding:14px; border:1px solid var(--border); }
.usage-chart-title { font-size:13px; font-weight:600; color:var(--text-dim); margin-bottom:10px; text-transform:uppercase; letter-spacing:.3px; }
.usage-chart-svg { width:100%; }
.usage-breakdown { display:flex; flex-direction:column; gap:8px; }
.usage-breakdown-item {
  background:var(--surface); border-radius:10px; padding:12px 14px;
  border:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;
}
.usage-breakdown-left { display:flex; flex-direction:column; gap:2px; }
.usage-breakdown-service { font-size:14px; font-weight:600; }
.usage-breakdown-detail { font-size:11px; color:var(--text-dim); }
.usage-breakdown-cost { font-size:16px; font-weight:700; color:#4ecdc4; }
.usage-empty { text-align:center; color:var(--text-dim); padding:40px 20px; font-size:14px; }
.usage-mode-btn.active { color:var(--accent) !important; border-bottom-color:var(--accent) !important; }
.usage-sim-highlight { background:linear-gradient(135deg, rgba(255,107,107,0.08), rgba(78,205,196,0.08)); border:1px solid rgba(255,107,107,0.2); border-radius:10px; padding:14px; margin-bottom:12px; }
.usage-sim-vs { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; }
.usage-sim-vs-item { text-align:center; flex:1; }
.usage-sim-vs-label { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:2px; }
.usage-sim-vs-value { font-size:20px; font-weight:700; }
.usage-sim-vs-value.savings { color:#4ecdc4; }
.usage-sim-vs-value.cost { color:#ff6b6b; }
.usage-sim-vs-value.sub { color:#d4a574; }
.usage-token-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.usage-token-item { background:var(--surface); border-radius:8px; padding:10px; border:1px solid var(--border); }
.usage-token-label { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:2px; }
.usage-token-value { font-size:16px; font-weight:600; color:var(--text); }
.msg-usage-footer { font-size:10px; color:var(--text-dim); opacity:.6; margin-top:3px; padding-top:3px; border-top:1px solid rgba(255,255,255,.05); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.msg-usage-footer span { white-space:nowrap; }
.msg-usage-footer .usage-cost { color:#ff6b6b; font-weight:600; }

/* ── Meetings Panel ── */
/* ── Accounting Panel (legacy slide-in shell removed — framework-migrated; content kept) ── */
.accounting-content { flex:1; padding:0; display:flex; flex-direction:column; min-height:0; overflow-y:auto; }
.accounting-month-nav { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.accounting-month-nav button { display:inline-flex; align-items:center; gap:4px; background:none; border:1px solid var(--border); border-radius:6px; color:var(--text); padding:4px 10px; cursor:pointer; font-size:13px; }
.accounting-month-nav button:hover { background:var(--surface); }
.accounting-month-nav .acc-month-ico { display:inline-flex; }
.accounting-month-nav .acc-month-ico svg { width:14px; height:14px; }
.accounting-month-label { font-weight:600; font-size:14px; }
.accounting-docs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.accounting-docs .accounting-card-wrap { flex-shrink:0; }
.accounting-empty { text-align:center; color:var(--text-dim); padding:40px 20px; font-size:14px; }
.accounting-empty svg { display:block; margin:0 auto 12px; opacity:.4; }

/* ── Terminal Panel ── */
.terminal-panel {
  position:fixed; top:var(--header-h); right:-100%; bottom:0; width:100%; max-width:580px; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.terminal-panel.open { right:0; }
.terminal-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:transparent; display:none; pointer-events:none;
}
.terminal-panel-backdrop.open { display:block; }

/* Terminal wrappers — body containers (replace inline cssText) */
.st-terminal-root { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.st-term-wrapper { position:absolute; inset:0; }
.st-clipboard-helper { position:fixed; left:-9999px; opacity:0; }
.mt-clipboard-helper { position:fixed; left:-9999px; top:-9999px; opacity:0; }
.mt-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); padding:4px 14px; background:rgba(34,197,94,0.9); color:#fff; border-radius:12px; font-size:12px; font-weight:600; z-index:9999; pointer-events:none; }
.mt-term-wrapper { position:absolute; inset:0; }
.mt-task-notes { font-size:12px; color:var(--text-dim); margin-top:6px; white-space:pre-wrap; max-height:60px; overflow:hidden; }
.mt-task-sub { font-size:11px; color:var(--text-dim); margin-top:4px; }

/* Travel app helpers (extracted from inline styles; --mk = dynamic marker hex) */
.tv-marker-wrap { position:relative; }
.tv-marker { background: var(--mk); }
.tv-hero-placeholder { background: var(--ph); }
.tv-chat-title { margin:0 0 16px 0; color:var(--text); }
.tv-chat-context { background:var(--surface-2); padding:12px; border-radius:8px; margin:0 0 16px 0; font-size:13px; line-height:1.5; white-space:pre-line; }
.tv-chat-actions { display:flex; gap:8px; justify-content:flex-end; }
.tv-chat-btn-cancel { padding:8px 16px; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:6px; cursor:pointer; }
.tv-chat-btn-primary { padding:8px 16px; background:var(--accent); color:white; border:none; border-radius:6px; cursor:pointer; }
.mt-pane { display:none; flex-direction:column; flex:1; min-height:0; }
.mt-pane-active { display:flex; }
.mt-pane-scroll { overflow-y:auto; }

/* VS Code wrapper */
.vscode-body { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; padding:0; }
.vscode-loading { display:flex; align-items:center; justify-content:center; flex:1; color:var(--text-dim); font-size:14px; }
.vscode-iframe { flex:1; border:none; width:100%; min-height:0; display:none; }
.vscode-iframe.loaded { display:block; }

/* Files wrapper layout. The tab bar is now OscarUI.tabs (.ou-tabs); the
   .files-tab / .files-tab.active clones were deleted (replaced by .ou-tab). */
.files-picker-banner { display:none; padding:8px 12px; background:var(--accent-tint); border:1px solid var(--accent-tint); border-radius:8px; margin:0 12px 8px; font-size:12px; color:var(--accent); align-items:center; justify-content:space-between; }
.files-picker-msg { display:inline-flex; align-items:center; gap:6px; }
.files-picker-icon { display:inline-flex; }
.files-picker-icon svg { width:14px; height:14px; }
.files-picker-cancel { background:none; border:none; color:var(--accent); cursor:pointer; font-size:12px; padding:2px 6px; }
.files-toolbar-group { display:flex; gap:8px; align-items:center; flex:1; }
.files-toolbar-search { display:flex; align-items:center; gap:8px; padding:0 8px; }
.files-search-icon { opacity:.6; }
.files-search-input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:6px; font-size:13px; width:200px; }
.files-delete-btn { display:none; }
.files-upload-input { display:none; }
.drive-view { display:none; flex-direction:column; flex:1; overflow:hidden; }
.drive-account-bar { display:flex; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); align-items:center; flex-wrap:wrap; }
.drive-account-label { font-size:12px; color:var(--text-dim); }
.drive-account-pills { display:flex; gap:4px; flex-wrap:wrap; }
.drive-breadcrumb { display:flex; align-items:center; gap:4px; padding:8px 12px; font-size:13px; overflow-x:auto; white-space:nowrap; }
.drive-toolbar { display:flex; gap:8px; padding:4px 12px 8px; align-items:center; }
.drive-toolbar-spacer { flex:1; }
.drive-btn { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:12px; cursor:pointer; }
.drive-search-input { background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:6px; font-size:13px; width:180px; }
.drive-files-list { flex:1; overflow-y:auto; }

/* Accounting wrapper layout (extracted from inline cssText) */
/* NOTE: The view containers below intentionally do NOT set `display`. The
   accounting tab JS (switchAccTab in app.js) toggles each view between
   'none' / 'flex' / '' (empty = fall back to browser default `block`).
   If we put display:none in the class, an empty-string clear in the JS
   would re-hide the view via the class — leaving stmt/stats/settings tabs
   invisible. So the wrapper sets `style.display='none'` imperatively at
   creation time for views that start hidden. */
/* .acc-search-bar carries the .ou-filter-bar class for layout (overflow-x, never
   wrap); these rules only flex the inner controls. */
.acc-search-icon { opacity:.5; flex-shrink:0; display:inline-flex; align-items:center; }
.acc-search-icon svg { width:14px; height:14px; }
.acc-search-input { flex:1; min-width:140px; padding:5px 8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; outline:none; }
.acc-filter-ctrl { padding:4px 6px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:11px; cursor:pointer; flex-shrink:0; }
.acc-filter-ctrl--wide { max-width:160px; }
.acc-filter-amt { padding:4px 6px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:11px; width:70px; flex-shrink:0; }
.acc-filter-reset { padding:4px 8px; background:none; border:1px solid var(--border); border-radius:6px; color:var(--text-dim); font-size:11px; cursor:pointer; flex-shrink:0; }
.acc-dup-btn { background:none; border:1px solid var(--border); padding:4px 8px; cursor:pointer; color:var(--text-dim); display:flex; align-items:center; gap:0; font-size:11px; border-radius:4px; white-space:nowrap; }
.acc-dup-count { margin-right:4px; }
/* Tab bar is now OscarUI.tabs (.ou-tabs) — the old .acc-tab/.acc-tabs clones are deleted. */
.acc-recon-bar { padding:8px 12px; background:var(--surface); border-bottom:1px solid var(--border); }
.acc-docs-view { display:flex; flex-direction:column; flex:1; min-height:0; }
.acc-stmt-view { flex:1; overflow-y:auto; }
.acc-stats-view { flex:1; overflow-y:auto; padding:16px; }
.acc-inv-view { flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.acc-inv-content { display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; }
.acc-settings-view { flex:1; overflow-y:auto; padding:16px; }

/* Invoices UI — layout/field chrome only; buttons/back/empty come from OscarUI */
.inv-pad { padding:16px; }
.inv-toolbar { padding:8px 12px; display:flex; justify-content:space-between; align-items:center; }
.inv-row-edit { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.inv-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.inv-grid-2-tight { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.inv-line-grid { display:grid; grid-template-columns:1fr 60px 90px 30px; gap:6px; margin-bottom:6px; align-items:end; }
.inv-vat-row { margin-bottom:12px; }
.inv-notes-row { margin-bottom:16px; }
.inv-card { padding:10px; background:var(--surface); border-radius:8px; }
.inv-card-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; margin-bottom:4px; }
.inv-card-value { font-weight:600; font-size:13px; }
.inv-meta-sm { font-size:11px; color:var(--text-dim); }
.inv-label { font-size:11px; color:var(--text-dim); display:block; margin-bottom:4px; }
.inv-label-tiny { font-size:10px; color:var(--text-dim); }
.inv-issue-meta { font-size:12px; color:var(--text-dim); margin-bottom:16px; }
.inv-amount-large { text-align:right; font-size:20px; font-weight:700; color:var(--text); }
.inv-section-head { font-size:12px; font-weight:600; color:var(--text); margin-bottom:6px; }
.inv-vat-hint { font-size:10px; color:var(--text-dim); margin-left:8px; }
.inv-email-info { font-size:13px; color:var(--text-dim); margin-bottom:12px; }
.inv-input { width:100%; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:12px; }
.inv-input-md { width:100%; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; }
.inv-input-lg { width:100%; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; margin-bottom:12px; }
.inv-input-edit-num { font-size:18px; font-weight:700; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:4px 8px; width:220px; }
.inv-vat-input { width:80px; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; }
.inv-textarea { width:100%; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12px; resize:vertical; }
.inv-email-input { width:100%; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; margin-bottom:8px; }
.inv-email-textarea { width:100%; padding:8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; resize:vertical; margin-bottom:12px; }
.inv-btn-line-remove { background:none; border:none; color:var(--danger); cursor:pointer; padding:6px; display:inline-flex; align-items:center; }
.inv-btn-line-remove svg { width:14px; height:14px; }
.inv-btn-add-line { padding:4px 12px; background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text-dim); cursor:pointer; font-size:11px; margin-bottom:12px; }
.inv-btn-block { width:100%; justify-content:center; }
.inv-status-buttons { margin-top:16px; display:flex; gap:6px; flex-wrap:wrap; }
.inv-list-row { display:flex; align-items:center; gap:10px; padding:10px 12px; }
.inv-list-icon { flex-shrink:0; width:36px; height:36px; border-radius:8px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.inv-list-icon svg { width:18px; height:18px; }
.inv-list-content { flex:1; min-width:0; }
.inv-list-num { font-weight:600; font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-list-client { font-size:11px; color:var(--text-dim); }
.inv-list-right { text-align:right; }
.inv-list-total { font-weight:700; font-size:14px; color:var(--text); }
.inv-status { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; color:var(--text-on-accent); }
.inv-status-draft { background:var(--text-dim); }
.inv-status-sent { background:var(--info); }
.inv-status-paid { background:var(--success); }
.inv-status-overdue { background:var(--danger); }
.inv-status-cancelled { background:var(--text-dim); }
.inv-table { width:100%; border-collapse:collapse; font-size:12px; margin-bottom:12px; }
.inv-table thead tr { background:var(--surface); }
.inv-table th { text-align:left; padding:6px 8px; }
.inv-table th.right { text-align:right; }
.inv-table th.qty { width:50px; }
.inv-table th.price, .inv-table th.total { width:80px; }
.inv-table td { padding:6px 8px; border-bottom:1px solid var(--border); }
.inv-table td.right { text-align:right; }
.inv-preview-iframe { width:100%; border:none; background:#fff; }
.terminal-header {
  display:flex; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border);
  gap:8px; flex-shrink:0; background:var(--bg);
}
.terminal-header h3 { font-size:14px; font-weight:600; margin:0; white-space:nowrap; }
.terminal-close { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:18px; padding:4px 8px; margin-left:auto; }
.terminal-tabs {
  display:flex; align-items:center; gap:2px; flex-shrink:0; padding:0 8px;
  border-bottom:1px solid var(--border); background:var(--surface); overflow-x:auto; min-height:36px;
}
.terminal-tab {
  display:flex; align-items:center; gap:4px; padding:6px 12px; font-size:12px;
  cursor:pointer; border-radius:6px 6px 0 0; white-space:nowrap;
  color:var(--text-dim); background:transparent; border:none; transition:background .15s;
}
.terminal-tab:hover { background:var(--bg); }
.terminal-tab.active { background:var(--bg); color:var(--text); font-weight:600; border-bottom:2px solid var(--accent); }
.terminal-tab .tab-close { font-size:14px; opacity:.4; margin-left:4px; cursor:pointer; }
.terminal-tab .tab-close:hover { opacity:1; color:#e55; }
.terminal-tab-add {
  background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:18px;
  padding:4px 8px; opacity:.6;
}
.terminal-tab-add:hover { opacity:1; }
.terminal-presets {
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-bottom:1px solid var(--border);
  flex-shrink:0; background:var(--bg);
}
.terminal-preset-btn {
  display:flex; align-items:center; gap:4px; padding:4px 10px; font-size:11px;
  border-radius:6px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; white-space:nowrap; transition:background .15s;
}
.terminal-preset-btn:hover { background:var(--border); }
.terminal-preset-btn svg { width:14px; height:14px; flex-shrink:0; }
.terminal-voice-btn {
  margin-left:auto; background:none; border:1px solid var(--border); border-radius:50%;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); transition:all .15s;
}
.terminal-voice-btn:hover { background:var(--surface); }
.terminal-voice-btn.recording { color:#e55; border-color:#e55; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.terminal-body { flex:1; position:relative; min-height:0; background:#1a1a2e; }
.terminal-body .xterm { height:100%; }
.terminal-body .xterm-viewport { overflow-y:auto !important; }
/* Fix mobile keyboard input — xterm's helper textarea must stay within viewport */
@media (max-width:768px) {
  .terminal-body .xterm-helper-textarea {
    position:absolute !important;
    opacity:0 !important;
    left:0 !important;
    top:0 !important;
    width:4px !important;
    height:4px !important;
    z-index:10 !important;
    font-size:16px !important; /* prevent iOS zoom */
  }
}
.terminal-empty {
  display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--text-dim); font-size:14px; flex-direction:column; gap:12px;
}
.terminal-empty svg { opacity:.3; }

/* ── Terminal Oscar Sessions ── */
.terminal-oscar-section {
  flex-shrink:0; border-bottom:1px solid var(--border); background:var(--surface-2);
}
.terminal-oscar-header {
  display:flex; align-items:center; justify-content:space-between; 
  padding:8px 12px; border-bottom:1px solid var(--border);
}
.terminal-oscar-header h4 {
  font-size:12px; font-weight:600; margin:0; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:0.05em;
}
.terminal-oscar-refresh {
  background:none; border:1px solid var(--border); border-radius:4px;
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); transition:all .15s;
}
.terminal-oscar-refresh:hover { background:var(--surface); color:var(--text); }
.terminal-oscar-list {
  max-height:120px; overflow-y:auto;
}
.terminal-oscar-session {
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  border-bottom:1px solid rgba(255,255,255,0.05); cursor:pointer;
  transition:background .15s;
}
.terminal-oscar-session:hover { background:rgba(255,255,255,0.03); }
.terminal-oscar-session:last-child { border-bottom:none; }
.terminal-oscar-session-icon {
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  font-size:8px; color:#fff;
}
.terminal-oscar-session-icon.running { background:var(--success); }
.terminal-oscar-session-icon.exited { background:var(--text-dim); }
.terminal-oscar-session-info {
  flex:1; min-width:0;
}
.terminal-oscar-session-name {
  font-size:12px; font-weight:500; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.terminal-oscar-session-meta {
  font-size:10px; color:var(--text-dim); margin-top:1px;
}
.terminal-oscar-session-status {
  font-size:10px; padding:2px 6px; border-radius:10px;
  background:var(--surface); color:var(--text-dim); font-weight:500;
}
.terminal-oscar-session-status.running { background:var(--success); color:#fff; }
.terminal-oscar-session-status.exited { background:var(--text-dim); color:#fff; }
.accounting-doc-card { display:flex; gap:12px; background:var(--surface); border-radius:10px; padding:12px; cursor:pointer; transition:all .2s; position:relative; }
.accounting-doc-card:hover { transform:translateX(-2px); box-shadow:var(--shadow-1); }
.accounting-doc-thumb { width:56px; height:56px; border-radius:8px; object-fit:cover; background:var(--bg); flex-shrink:0; }
.accounting-doc-info { flex:1; min-width:0; }
.accounting-doc-vendor { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.accounting-doc-meta { font-size:12px; color:var(--text-dim); margin-top:2px; }
.accounting-doc-amount { font-weight:700; font-size:15px; color:var(--accent); margin-top:4px; }
.accounting-doc-badge { display:inline-block; font-size:10px; font-weight:600; text-transform:uppercase; padding:2px 8px; border-radius:10px; background:var(--overlay-2); color:var(--text-dim); margin-left:8px; }
.accounting-doc-badge.receipt { background:var(--success-tint); color:var(--success); }
.accounting-doc-badge.invoice { background:var(--danger-tint); color:var(--danger); }
.accounting-doc-badge.bill { background:var(--warning-tint); color:var(--warning); }
.accounting-doc-badge.check { background:var(--info-tint); color:var(--info); }

/* Inline meta-row badge chrome (shared by the doc-card meta line). Per-badge
   colour comes from .acc-meta-* modifiers; the SVG glyph sits in .acc-badge-ico. */
.acc-meta-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; padding:1px 6px; border-radius:8px; margin-left:4px; background:var(--overlay-2); color:var(--text-dim); }
.acc-meta-badge.acc-meta-strong { font-weight:600; }
.acc-meta-dim { background:var(--overlay-2); color:var(--text-dim); }
.acc-meta-warning { background:var(--warning-tint); color:var(--warning); }
.acc-meta-c2 { background:color-mix(in srgb, var(--c2) 18%, transparent); color:var(--c2); }
.acc-meta-c7 { background:color-mix(in srgb, var(--c7) 18%, transparent); color:var(--c7); }
.acc-badge-ico { display:inline-flex; align-items:center; }
.acc-badge-ico svg { width:11px; height:11px; }
.acc-dup-ico { display:inline-flex; align-items:center; margin-right:4px; }
.acc-dup-ico svg { width:13px; height:13px; }
.accounting-doc-delete { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:16px; opacity:0; transition:opacity .2s; }
.accounting-doc-card:hover .accounting-doc-delete { opacity:1; }
.accounting-card-wrap { position:relative; overflow:hidden; border-radius:10px; }
.accounting-swipe-actions { position:absolute; top:0; right:0; bottom:0; width:80px; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.accounting-swipe-actions.visible { opacity:1; pointer-events:auto; }
.accounting-swipe-delete { width:56px; height:56px; border-radius:12px; background:var(--danger-tint); border:none; color:var(--danger); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.accounting-swipe-delete:hover { background:color-mix(in srgb, var(--danger) 30%, transparent); }
.acc-scan-spinner { display:inline-block;width:14px;height:14px;border:2px solid var(--overlay-3);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle; }
.accounting-confirm-dialog { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); z-index:999; display:flex; align-items:center; justify-content:center; }
.accounting-confirm-box { background:var(--surface); border-radius:14px; padding:24px; max-width:300px; width:90%; text-align:center; }
.accounting-confirm-box p { margin:0 0 16px; font-size:15px; color:var(--text); }
.accounting-confirm-box .btn-row { display:flex; gap:10px; }
.accounting-confirm-box .btn-row button { flex:1; padding:10px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:none; }
.accounting-confirm-box .btn-cancel { background:var(--bg); color:var(--text); }
.accounting-confirm-box .btn-danger { background:var(--danger); color:var(--text-on-accent); }
.accounting-add-bar { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); flex-shrink:0; }
.accounting-add-bar button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.accounting-add-bar button:hover { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.accounting-add-bar button svg { width:16px; height:16px; flex-shrink:0; }
/* The transaction-detail overlay is position:absolute. Without a positioned
   ancestor inside the panel it anchored to .pf-panel (position:fixed). On mobile
   WebKit an absolute box anchored to a fixed ancestor while trapped inside the
   -webkit-overflow-scrolling:touch body scroller mis-clips — the detail rendered
   as a black screen with only the bottom actions visible. Anchoring it to the
   panel body (the correctly-sized scroll viewport that already lays out the list
   fine on mobile) fixes it. Scoped to accounting so no other panel changes; only
   this overlay re-anchors — every other absolute box here already has a closer
   position:relative parent (.accounting-doc-card / -card-wrap / -preview-img). */
#pf-accounting-body { position:relative; }
/* Single scroll container (overlay scrolls; header sticky-top, actions sticky-bottom
   set inline / below). Replaces the old flex column + nested overflow:auto child,
   which rendered the middle blank on iOS WebKit. */
.accounting-preview-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--bg); z-index:5; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.accounting-preview-img { overflow:hidden; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.3); max-height:240px; cursor:pointer; position:relative; }
.accounting-preview-img img { max-width:100%; max-height:100%; border-radius:8px; pointer-events:none; }
.accounting-preview-img .zoom-hint { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.6); color:var(--text-on-accent); font-size:11px; padding:3px 8px; border-radius:12px; pointer-events:none; }
.acc-lightbox { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.92); z-index:1000; display:flex; flex-direction:column; touch-action:none; }
.acc-lightbox-header { display:flex; align-items:center; justify-content:flex-end; padding:12px 16px; padding-top:max(12px, env(safe-area-inset-top, 12px)); gap:8px; flex-shrink:0; z-index:2; }
.acc-lightbox-header button { width:40px; height:40px; border-radius:10px; border:1px solid var(--overlay-3); background:var(--overlay-2); color:var(--text-on-accent); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.acc-lightbox-body { flex:1; overflow:hidden; position:relative; }
.acc-lightbox-body img { position:absolute; max-width:none; max-height:none; will-change:transform; }
.accounting-preview-result { padding:16px; display:flex; flex-direction:column; gap:10px; }
/* Flag-toggle labels (Needs review / Doc lost / Non-business / Reimbursable):
   emoji → OscarUI.Icons SVG; size the leading inline icon to match the text. */
.acc-flag-label { display:inline-flex; align-items:center; gap:6px; }
.acc-flag-label svg { width:15px; height:15px; flex-shrink:0; }
/* Accounting → Stats: compact view pager (chevrons via OscarUI.Icons) + warning glyph */
.acc-stats-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.acc-stats-nav-arrow { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px 8px; display:inline-flex; align-items:center; }
.acc-stats-nav-arrow:hover { color:var(--text); }
.acc-stats-nav-arrow svg { width:18px; height:18px; }
.acc-stats-nav-tab { cursor:pointer; font-size:11px; font-weight:400; color:var(--text-dim); border-bottom:2px solid transparent; padding-bottom:2px; }
.acc-stats-nav-tab.active { font-weight:700; color:var(--accent); border-bottom-color:var(--accent); }
.acc-stats-warn-ico { display:inline-flex; flex-shrink:0; }
.acc-stats-warn-ico svg { width:13px; height:13px; }
.accounting-field { display:flex; flex-direction:column; gap:2px; }
.accounting-field label { font-size:11px; color:var(--text-dim); text-transform:uppercase; font-weight:600; }
.accounting-field input, .accounting-field select { background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:8px 10px; color:var(--text); font-size:14px; }
.accounting-preview-actions { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); position:sticky; bottom:0; background:var(--bg); z-index:2; }
.accounting-preview-actions button { flex:1; padding:10px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:none; }
.accounting-preview-actions .cancel { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.accounting-preview-actions .save { background:var(--accent); color:var(--text-on-accent); }
.accounting-processing { text-align:center; padding:20px; color:var(--text-dim); font-size:14px; }

/* ── Health Panel (legacy slide-in shell removed — framework-migrated; content kept) ── */
.health-content { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:16px; }
.health-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.health-card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:4px;
}
.health-card-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; }
.health-card-value { font-size:24px; font-weight:700; line-height:1.2; color: var(--c, var(--text-dim)); }
.health-card-value-bpm { font-size:12px; font-weight:400; color:var(--text-dim); }
.health-card .bar-fill[data-c], .health-card .bar-fill { background: var(--c, var(--accent)); width: var(--w, 0%); }
.health-respiration { font-size:12px; color:var(--text-dim); }
.health-sleep-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); margin-top:4px; }
.health-sleep-legend-dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px; }
.health-sleep-deep { background:#5b5fc7; }
.health-sleep-light { background:#6bb5e0; }
.health-sleep-rem { background:#9b59b6; }
.health-sleep-awake { background:#666; }
.health-act-padel { background:#e55; }
.health-act-hike { background:#4ecdc4; }
.health-act-cycle { background:#f9a825; }
.health-act-default { background:var(--accent); }
.health-card-sub { font-size:11px; color:var(--text-dim); }
.health-card.wide { grid-column:1/-1; }
.health-card .bar-track { width:100%; height:8px; background:var(--border); border-radius:4px; margin-top:6px; overflow:hidden; }
.health-card .bar-fill { height:100%; border-radius:4px; transition:width .6s ease; }
.health-section-title { font-size:13px; font-weight:600; color:var(--text); margin:4px 0 0; }
.health-activity {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
}
.health-activity-icon { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.health-activity-icon svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; }
.health-activity-info { flex:1; min-width:0; }
.health-activity-name { font-size:13px; font-weight:600; }
.health-activity-meta { font-size:11px; color:var(--text-dim); }
.health-sleep-bar { display:flex; height:24px; border-radius:6px; overflow:hidden; margin-top:4px; }
.health-sleep-bar div { height:100%; }
.health-empty { text-align:center; color:var(--text-dim); padding:40px 20px; font-size:13px; }
.health-date-nav { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 0; flex-shrink:0; border-bottom:1px solid var(--border); }
.health-date-nav button { background:none; border:1px solid var(--border); border-radius:8px; padding:4px 10px; color:var(--text); cursor:pointer; font-size:12px; }
.health-date-nav button:hover { background:var(--surface); }
.health-date-nav span { font-size:13px; font-weight:600; min-width:120px; text-align:center; }


/* Meetings panel body sections (formerly inline-styled in index.html) */
.meetings-active-banner { display:none; padding:12px 16px; background:var(--danger-tint); border-bottom:1px solid var(--border); }
.meetings-rec-bar { display:none; }
.meetings-action-btns { display:none; }
.meetings-list-view { flex:1; overflow-y:auto; padding:0; }
/* No overflow here: .pf-body is the real scroll container — an intermediate
   overflow would trap the transcript's position:sticky header. */
.meetings-detail-view { display:none; flex:1; flex-direction:column; }
.meetings-join-btn { position:relative; }
.meetings-meet-dot { display:none; position:absolute; top:0; right:0; width:7px; height:7px; border-radius:50%; background:var(--danger); }
.meeting-card {
  padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; display:flex; gap:12px; align-items:flex-start; position:relative;
}
.meeting-card:hover { background:var(--overlay-1); }
/* Per-card kebab → opens OscarUI.menu; the menu chrome itself is .ou-menu now. */
.meeting-dots-btn { position:absolute; right:12px; top:12px; background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px 6px; border-radius:var(--radius); opacity:0; transition:opacity .15s, background .15s; z-index:10; display:inline-flex; align-items:center; }
.meeting-dots-btn svg { width:16px; height:16px; }
.meeting-card:hover .meeting-dots-btn { opacity:1; }
.meeting-dots-btn:hover { background:var(--overlay-3); color:var(--text); }
.meeting-card-thumb { width:56px; height:42px; border-radius:var(--radius); object-fit:cover; flex-shrink:0; background:var(--surface); }
.meeting-card-thumb-placeholder { width:56px; height:42px; border-radius:6px; flex-shrink:0; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
/* Source identity in the thumb slot: full-size icon in the placeholder, corner badge over a screenshot */
.meeting-card-thumb-placeholder svg { width:24px; height:24px; }
.meeting-card-thumb-wrap { position:relative; flex-shrink:0; width:56px; height:42px; }
.meeting-card-src-badge { position:absolute; right:-5px; bottom:-5px; width:20px; height:20px; background:var(--bg); border:1px solid var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); }
.meeting-card-src-badge svg { width:12px; height:12px; }
.meeting-card-info { flex:1; min-width:0; }
.meeting-card-title { font-size:14px; font-weight:600; color:var(--text); }
.meeting-card-meta { font-size:12px; color:var(--text-dim); margin-top:4px; display:flex; align-items:center; gap:12px; }
.meeting-card-preview { font-size:12px; color:var(--text-dim); margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; }
.meeting-card-failed { color:var(--danger); font-style:normal; }
.meeting-card-transcribing { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--accent); margin-top:6px; }
.mtg-spinner { width:13px; height:13px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex-shrink:0; }
/* Live bot recording — red pulsing badge + per-card Stop (renderMeetingsList) */
.meeting-card-recording { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--danger); margin-top:6px; }
.meeting-rec-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulse-dot 1.5s infinite; flex-shrink:0; }
.meeting-rec-stop { background:var(--danger); color:var(--text-on-accent); border:none; border-radius:var(--radius); padding:2px 10px; font-size:11px; font-weight:600; cursor:pointer; flex-shrink:0; }
.meeting-rec-stop:hover { opacity:.85; }
/* Live captions: latest line on the list card + the LIVE header in detail */
.meeting-card-live-line { font-size:12px; color:var(--text-dim); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-style:italic; }
.meeting-live-head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--danger); letter-spacing:.4px; margin:6px 0 8px; }
/* Participant chips (speaker-colored dot + name); the row wraps, unlike the
   single-line lang rows it sits between */
.mtg-part-row { flex-wrap:wrap; }
#mtgPartChips { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mtg-part-chip { display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2px 10px 2px 7px; font-size:12px; color:var(--text); }
.mtg-part-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--c, var(--text-faint)); }
/* Instant-call menu items wrap brand platform glyphs (Meet/Zoom/Teams) inside
   OscarUI.menu — the wrapper keeps the brand colors (§3.5 exemption). */
.mtg-instant-ic { display:inline-flex; }
.mtg-instant-ic svg { width:14px; height:14px; }
/* Summary toolbar (Regenerate + Copy) */
.meeting-summary-bar { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:10px; }
.meeting-summary-regen { display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.meeting-summary-regen:hover { border-color:var(--accent); color:var(--accent); }
.meeting-summary-copy { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px; border-radius:var(--radius-sm); display:flex; align-items:center; }
.meeting-summary-copy:hover { color:var(--text); }
.meeting-summary-copy svg { width:15px; height:15px; }
/* "Generate Summary" CTA (empty summary tab) */
.meeting-summary-generate { display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:var(--text-on-accent); border:none; padding:10px 20px; border-radius:var(--radius-lg); font-size:13px; font-weight:600; cursor:pointer; }
.meeting-summary-generate:hover { background:var(--accent-hover); }
.mtg-btn-ic { display:inline-flex; }
.mtg-btn-ic svg { width:14px; height:14px; }
/* Project badge on a meeting card (tinted with the project's color) */
.meeting-proj-badge { display:inline-block; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px 8px; border-radius:10px; border:1px solid transparent; font-size:11px; font-weight:600; line-height:1.5; }
.meeting-proj-badge-none { color:var(--text-dim); background:var(--overlay-1); border-color:var(--border); font-weight:500; }
/* Meetings filter bar — horizontal scroll on narrow widths, never wraps (see CLAUDE.md) */
.meetings-filter-bar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); }
/* Filters scroll horizontally within their own track; the view toggle (sibling)
   stays pinned and reachable on a narrow panel. */
.meetings-filter-scroll { display:flex; align-items:center; gap:8px; overflow-x:auto; white-space:nowrap; flex:1 1 auto; min-width:0; }
.meetings-filter-select, .meetings-filter-date { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:4px 8px; font-size:12px; max-width:200px; }
.meetings-filter-lbl { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dim); flex-shrink:0; }
.meetings-filter-apply, .meetings-filter-clear { border-radius:var(--radius); padding:5px 12px; font-size:12px; cursor:pointer; flex-shrink:0; }
.meetings-filter-apply { background:var(--accent); color:var(--text-on-accent); border:none; }
.meetings-filter-clear { background:var(--surface); color:var(--text-dim); border:1px solid var(--border); }
/* Reset (clear all filters) icon button */
.meetings-filter-reset { background:none; border:1px solid var(--border); color:var(--text-dim); cursor:pointer; padding:4px 7px; display:inline-flex; align-items:center; border-radius:var(--radius); flex-shrink:0; }
.meetings-filter-reset:hover { color:var(--danger); border-color:var(--danger); }
/* Date inputs: gray the dd/mm/yyyy placeholder until a date is chosen */
.meetings-filter-date::-webkit-datetime-edit { color:var(--text-dim); }
.meetings-filter-date.has-value::-webkit-datetime-edit, .meetings-filter-date:focus::-webkit-datetime-edit { color:var(--text); }
.meetings-filter-date::-webkit-calendar-picker-indicator { filter:invert(.6); cursor:pointer; }
/* List/calendar view toggle — segmented control, pinned to the right of the bar */
.meetings-view-toggle { display:inline-flex; flex-shrink:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.meetings-view-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-dim); cursor:pointer; padding:4px 9px; }
.meetings-view-btn+.meetings-view-btn { border-left:1px solid var(--border); }
.meetings-view-btn svg { width:15px; height:15px; }
.meetings-view-btn:hover { color:var(--text); }
.meetings-view-btn.active { background:var(--accent); color:var(--text-on-accent); }
/* Sticky day separators in the meetings list (groups cards by recording date) */
.meetings-date-sep {
  position:sticky; top:0; z-index:11;   /* above .meeting-dots-btn (z-index:10) so the pinned header isn't pierced by a hovered card's kebab */
  padding:6px 16px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--text-dim); background:var(--bg); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(2px);
}
/* Calendar (month) view — container-type lets the grid react to panel width */
.meetings-cal { padding:10px 12px 16px; container-type:inline-size; }
.meetings-cal-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.meetings-cal-nav { width:28px; height:28px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); font-size:18px; line-height:1; cursor:pointer; }
.meetings-cal-nav:hover { border-color:var(--accent); color:var(--accent); }
.meetings-cal-title { font-size:14px; font-weight:700; color:var(--text); min-width:140px; }
.meetings-cal-today { margin-left:auto; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.meetings-cal-today:hover { border-color:var(--accent); color:var(--accent); }
/* minmax(0,1fr) — NOT 1fr (=minmax(auto,1fr)) — so a long meeting title can't
   stretch its column; equal 7-col widths, titles truncate via ellipsis instead. */
.meetings-cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.meetings-cal-wd { background:var(--surface); color:var(--text-dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; text-align:center; padding:6px 0; }
.meetings-cal-cell { background:var(--bg); min-height:84px; min-width:0; overflow:hidden; padding:4px; display:flex; flex-direction:column; gap:3px; }
.meetings-cal-cell.is-other { background:var(--surface); }
.meetings-cal-cell[onclick] { cursor:pointer; }
.meetings-cal-cell[onclick]:hover { background:var(--overlay-1); }
.meetings-cal-daynum { font-size:11px; font-weight:600; color:var(--text-dim); padding:1px 3px; }
.meetings-cal-cell.is-today .meetings-cal-daynum { color:var(--text-on-accent); background:var(--accent); border-radius:50%; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; }
.meetings-cal-events { display:flex; flex-direction:column; gap:2px; min-width:0; }
.meetings-cal-event { display:flex; align-items:center; gap:4px; width:100%; text-align:left; background:color-mix(in srgb, var(--pc) 16%, transparent); border:none; border-left:2px solid var(--pc); border-radius:3px; padding:1px 4px; cursor:pointer; overflow:hidden; }
.meetings-cal-event:hover { background:color-mix(in srgb, var(--pc) 30%, transparent); }
.meetings-cal-ev-time { font-size:10px; font-weight:700; color:var(--pc); flex-shrink:0; }
.meetings-cal-ev-title { font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; }
.meetings-cal-more { background:none; border:none; color:var(--text-dim); font-size:10px; font-weight:600; cursor:pointer; padding:0 4px; text-align:left; }
.meetings-cal-more:hover { color:var(--accent); }
/* Narrow panel: shrink calendar cells so the 7-col grid still fits. Keep the
   time visible (the whole point is seeing WHEN a meeting was) — the title
   truncates instead, and the chip wraps time over title to stay legible. */
@container (max-width:560px){
  .meetings-cal-cell { min-height:64px; padding:3px; }
  .meetings-cal-event { flex-direction:column; align-items:flex-start; gap:0; padding:1px 3px; }
}
/* Manual upload button + form (§18C) */
.meetings-action-btns { display:block; padding:8px 12px 0; }
.meetings-upload-btn { display:inline-flex; align-items:center; gap:6px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; }
.meetings-upload-btn:hover { background:var(--overlay-1); }
.meetings-upload-form { display:flex; align-items:center; gap:8px; margin-top:8px; overflow-x:auto; white-space:nowrap; }
/* Override the global `input[type=file]{display:none}` (line ~770) so the picker is usable here */
.meetings-upload-form input[type=file].meetings-upload-file { display:inline-block; }
.meetings-upload-file { font-size:12px; color:var(--text-dim); max-width:210px; flex-shrink:0; }
.meetings-upload-title { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:12px; flex-shrink:0; }
.meetings-upload-status { font-size:11px; color:var(--text-dim); flex-shrink:0; }
.meetings-upload-fields { display:flex; align-items:center; gap:8px; }
.mtg-upload-progress { flex:1; min-width:220px; }
.mtg-upload-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--text-dim); margin-bottom:5px; }
.mtg-upload-bar { height:6px; border-radius:4px; background:var(--border); overflow:hidden; }
.mtg-upload-bar-fill { height:100%; width:0%; background:var(--accent); border-radius:4px; transition:width .15s ease; }
/* Per-meeting language + re-transcribe control (detail view) */
.meeting-detail-lang-row { display:flex; align-items:center; gap:8px; margin-top:8px; overflow-x:auto; white-space:nowrap; }
.meeting-detail-lang-lbl { font-size:11px; color:var(--text-dim); flex-shrink:0; }
.meeting-share-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text); cursor:pointer; flex-shrink:0; }
.meeting-share-toggle input[type=checkbox] { display:inline-block; width:auto; margin:0; cursor:pointer; }
.meeting-edit-icon { background:none; border:none; color:var(--text-dim); cursor:pointer; padding:2px 4px; display:inline-flex; align-items:center; border-radius:6px; flex-shrink:0; }
.meeting-edit-icon:hover { color:var(--accent); background:var(--overlay-2); }
.meeting-proj-edit { display:inline-flex; align-items:center; gap:8px; }
.meeting-model-chip { display:inline-block; padding:1px 8px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--overlay-1); color:var(--text-dim); font-size:11px; flex-shrink:0; }
.mtg-settings-textarea { width:100%; box-sizing:border-box; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:13px; line-height:1.5; resize:vertical; font-family:inherit; }
/* Save-recording modal (after Stop) */
.rec-save-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:10000; }
.rec-save-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; width:min(420px,92vw); box-shadow:var(--shadow-2); }
.rec-save-box h3 { margin:0 0 6px; font-size:16px; color:var(--text); }
.rec-save-lbl { display:block; font-size:11px; color:var(--text-dim); margin:12px 0 5px; }
.rec-save-box select { width:100%; }
.rec-save-btns { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
/* Local recording */
.rec-btn { display:flex; align-items:center; gap:6px; background:var(--danger); color:var(--text-on-accent); border:none; border-radius:var(--radius-lg); padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; margin:12px 16px 4px; }
.rec-btn svg { width:16px; height:16px; }
.rec-btn:hover { filter:brightness(1.15); }
.rec-bar {
  display:flex; align-items:center; gap:10px; padding:10px 16px; margin:0 16px 8px;
  background:var(--danger-tint); border:1px solid var(--danger-tint); border-radius:var(--radius-lg);
}
.rec-bar .rec-dot { width:10px; height:10px; border-radius:50%; background:var(--danger); animation:pulse-dot 1s infinite; flex-shrink:0; }
.rec-bar .rec-timer { font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--text); }
.rec-bar .rec-label { font-size:12px; color:var(--text-dim); flex:1; }
.rec-bar button { background:var(--overlay-3); border:1px solid var(--border); border-radius:var(--radius-lg); padding:6px 14px; color:var(--text); font-size:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:4px; }
.rec-bar button:hover { background:var(--overlay-3); }
.rec-bar .rec-stop { border-color:var(--danger); color:var(--danger); }

.meeting-detail-header { padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
/* OscarUI.subHeader is mounted here; trim its default top margin inside the header pad */
.meeting-detail-subheader { margin-top:0; }
.meeting-detail-title-input { width:100%; padding:6px 8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:15px; font-weight:600; outline:none; margin-top:8px; resize:none; overflow:hidden; font-family:inherit; line-height:1.4; min-height:32px; box-sizing:border-box; display:block; }
.meeting-detail-title-input:focus { border-color:var(--accent); }
.meeting-detail-meta { font-size:12px; color:var(--text-dim); margin-top:6px; line-height:1.8; }
.meeting-summary { padding:12px 16px; border-bottom:1px solid var(--border); }
.meeting-summary h4 { font-size:13px; color:var(--text-dim); margin-bottom:6px; }
.meeting-summary-content { font-size:13px; line-height:1.6; color:var(--text); white-space:pre-wrap; }
.meeting-transcript { padding:12px 16px; }
.meeting-transcript h4 { font-size:13px; color:var(--text-dim); margin-bottom:8px; }
.meeting-transcript-line { display:flex; gap:10px; padding:4px 0; font-size:13px; line-height:1.5; }
.meeting-transcript-time { color:var(--accent); font-family:var(--font-mono); font-size:12px; flex-shrink:0; min-width:44px; }
.meeting-transcript-text { color:var(--text); }
.meeting-active-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulse-dot 1.5s infinite; margin-right:6px; vertical-align:middle; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Meeting detail tabs use OscarUI.tabs (.ou-tabs); make the two tabs share the
   full width like the old equal-flex bar. */
.meeting-detail-tabs.ou-tabs { flex-shrink:0; }
.meeting-detail-tabs .ou-tab { flex:1; text-align:center; justify-content:center; }

/* Meeting audio player */
.meeting-audio-player { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
/* Sticky transcript header (audio player + search) — pins while lines scroll */
.meeting-transcript-sticky { position:sticky; top:0; z-index:5; background:var(--surface); }
.meeting-transcript-search { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.mtg-search-icon { color:var(--text-dim); flex-shrink:0; }
.mtg-search-input { flex:1; min-width:0; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:5px 10px; font-size:13px; }
.mtg-search-count { font-size:11px; color:var(--text-dim); white-space:nowrap; min-width:36px; text-align:center; flex-shrink:0; }
.mtg-search-nav, .mtg-search-copy { background:none; border:1px solid var(--border); color:var(--text-dim); cursor:pointer; padding:4px 6px; border-radius:6px; display:inline-flex; align-items:center; flex-shrink:0; }
.mtg-search-nav:hover, .mtg-search-copy:hover { color:var(--accent); border-color:var(--accent); }
mark.mtg-hl { background:#ffeb00; color:#1a1a1a; border-radius:2px; padding:0 1px; font-weight:600; }
mark.mtg-hl-current { background:#ff9100; color:#1a1a1a; box-shadow:0 0 0 1px #ff9100; }
.meeting-audio-play { width:36px; height:36px; border-radius:50%; background:var(--accent-tint); border:1px solid var(--accent-tint); color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.meeting-audio-play:active { background:var(--accent-tint); }
.meeting-audio-play svg { width:16px; height:16px; }
.meeting-audio-progress { flex:1; display:flex; flex-direction:column; gap:4px; }
.meeting-audio-bar { width:100%; height:6px; border-radius:3px; background:var(--border); cursor:pointer; position:relative; }
.meeting-audio-bar-fill { height:100%; background:var(--accent); border-radius:3px; width:0%; transition:width .1s linear; pointer-events:none; }
.meeting-audio-thumb { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); left:0%; cursor:grab; box-shadow:var(--shadow-1); transition:left .1s linear, transform .1s; pointer-events:auto; }
.meeting-audio-thumb:hover { transform:translate(-50%,-50%) scale(1.2); }
.meeting-audio-bar.dragging .meeting-audio-thumb { cursor:grabbing; transform:translate(-50%,-50%) scale(1.3); }
.meeting-audio-bar.dragging .meeting-audio-bar-fill, .meeting-audio-bar.dragging .meeting-audio-thumb { transition:none; }
.meeting-audio-time { font-size:11px; font-family:var(--font-mono); color:var(--text-dim); }
.meeting-audio-no-recording { padding:8px 16px; font-size:12px; color:var(--text-dim); font-style:italic; border-bottom:1px solid var(--border); }

/* Synced transcript */
.meeting-transcript-line { cursor:pointer; border-radius:var(--radius); padding:6px 10px; margin:1px 0; transition:background .15s; }
.meeting-transcript-line:hover { background:var(--overlay-1); }
.meeting-transcript-line.active { background:var(--accent-tint); }

/* Delete confirmation modal */
/* Share Meeting Modal */
.share-modal-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.7); align-items:center; justify-content:center; animation:fadeIn .15s ease; }
.share-modal-overlay.open { display:flex; }
.share-modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; width:90%; max-width:440px; max-height:80vh; overflow-y:auto; }
.share-modal h3 { font-size:16px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.share-modal h3 svg { flex-shrink:0; }
.share-section { margin-bottom:16px; }
.share-section-label { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim); margin-bottom:8px; font-weight:600; }
.share-check { display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer; font-size:14px; }
.share-check.disabled { opacity:.4; cursor:default; }
.share-check-box { width:20px; height:20px; border-radius:var(--radius); border:2px solid var(--border); background:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; }
.share-check-box.checked { background:var(--accent); border-color:var(--accent); }
.share-check-box svg { width:12px; height:12px; color:var(--text-on-accent); opacity:0; }
.share-check-box.checked svg { opacity:1; }
.share-check-note { font-size:11px; color:var(--text-dim); font-style:italic; margin-left:30px; margin-top:-2px; }
.share-participant { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13px; }
.share-participant.no-email { opacity:.4; }
.share-participant .no-email-tag { font-size:11px; color:var(--text-dim); font-style:italic; }
.share-email-input { display:flex; gap:8px; margin-top:8px; }
.share-email-input input { flex:1; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--text); font-size:13px; outline:none; }
.share-email-input input:focus { border-color:var(--accent); }
.share-email-input input::placeholder { color:var(--text-dim); }
.share-subject-input { width:100%; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--text); font-size:13px; outline:none; margin-top:4px; }
.share-subject-input:focus { border-color:var(--accent); }
.share-modal-btns { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.share-modal-btns button { padding:10px 24px; border-radius:var(--radius-lg); font-size:14px; font-weight:600; cursor:pointer; border:none; }
.share-modal-btns .share-cancel { background:var(--overlay-2); color:var(--text-dim); border:1px solid var(--border) !important; }
.share-modal-btns .share-send { background:var(--accent); color:var(--text-on-accent); }
.share-modal-btns .share-send:disabled { opacity:.4; cursor:default; }
.share-added-emails { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.share-email-pill { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:var(--accent-tint); border-radius:var(--radius-pill); font-size:12px; color:var(--accent); }
.share-email-pill button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0 2px; line-height:1; }

.delete-confirm-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.7); align-items:center; justify-content:center; animation:fadeIn .15s ease; }
.delete-confirm-overlay.open { display:flex; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.delete-confirm-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; width:90%; max-width:360px; text-align:center; }
.delete-confirm-icon { margin-bottom:12px; }
.delete-confirm-icon svg { width:48px; height:48px; color:var(--danger); }
.delete-confirm-title { font-size:16px; font-weight:600; color:var(--text); margin-bottom:6px; }
.delete-confirm-msg { font-size:13px; color:var(--text-dim); margin-bottom:20px; }
.delete-confirm-btns { display:flex; gap:10px; justify-content:center; }
.delete-confirm-btns button { padding:10px 24px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:none; }
.delete-confirm-cancel { background:rgba(255,255,255,.08); color:var(--text-dim); border:1px solid var(--border) !important; }
.delete-confirm-cancel:hover { background:rgba(255,255,255,.12); }
.delete-confirm-delete { background:var(--danger); color:white; }
.delete-confirm-delete:hover { opacity:.9; }

/* ── CRM utilities (replace recurring inline styles) ── */
.crm-meta { font-size:12px; color:var(--text-dim); }
.crm-meta-sm { font-size:11px; color:var(--text-dim); }
.crm-meta-xs { font-size:10px; color:var(--text-dim); }
.crm-meta-block { display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px; }
.crm-grow { flex:1; }
.crm-row-12 { display:flex; gap:12px; }
.crm-row-8 { display:flex; gap:8px; }
.crm-col-12 { display:flex; flex-direction:column; gap:12px; }
.crm-col-8 { display:flex; flex-direction:column; gap:8px; }
.crm-section-title { margin:16px 0 8px; font-size:14px; color:var(--text); }
.crm-mb-12 { margin-bottom:12px; }
.crm-mb-24 { margin-bottom:24px; }
.crm-heading { font-size:18px; color:#eee; }
.crm-empty { color:var(--text-dim); padding:16px; text-align:center; }
.crm-divided-top { border-top:1px solid var(--border); padding-top:12px; margin-top:4px; }
.crm-detail-title { margin:0 0 12px; font-size:15px; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:6px; }
.crm-grow-2 { flex:2; }
.crm-meta-sm-mb { font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.crm-text-dim { color:var(--text-dim); }
.crm-body-13 { font-size:13px; color:#ccc; }
.crm-meta-clickable { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); cursor:pointer; }
.crm-mt-20 { margin-top:20px; }
.crm-text-right { text-align:right; }
.crm-text-danger { color:#ef4444; }  /* literal — different shade from --danger */
.crm-px-16 { padding:0 16px; }
.crm-mb-8 { margin-bottom:8px; }
.crm-mb-16 { margin-bottom:16px; }
.crm-mb-4 { margin-bottom:4px; }
.crm-scroll-340 { max-height:340px; overflow-y:auto; }
.crm-list-item-row { display:flex; align-items:center; gap:8px; padding:6px 4px; cursor:pointer; border-bottom:1px solid var(--border); }
.crm-meta-mb-8 { font-size:12px; color:var(--text-dim); margin-bottom:8px; }
.crm-meta-mb-4 { font-size:12px; color:var(--text-dim); margin-bottom:4px; }

/* CRM batch 5 (long-tail) */
.crm-input-cell { font-size:12px; padding:4px 6px; min-width:100px; }
.crm-input-flex { flex:1; min-width:120px; font-size:12px; padding:4px 8px; }
.crm-w-full-12 { width:100%; font-size:12px; }
.crm-w-full { width:100%; }
.crm-min-w-80 { min-width:80px; }
.crm-empty-30 { text-align:center; padding:30px; color:var(--text-dim); }
.crm-empty-40 { text-align:center; padding:40px; color:var(--text-dim); }
.crm-info-box { padding:12px 18px; background:var(--surface); border-radius:8px; border:1px solid var(--border); text-align:center; }
.crm-section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding:0 16px; }
.crm-h-16 { margin:0; font-size:16px; }
.crm-h-18 { margin:0; font-size:18px; }
.crm-h-row { margin:0 0 8px; font-size:14px; display:flex; align-items:center; gap:8px; }
.crm-text-11 { font-size:11px; }
.crm-text-10 { font-size:10px; }
.crm-text-on { color:var(--text); }
.crm-text-success { color:#22c55e; }
.crm-text-666-16 { color:#666; font-size:16px; }
.crm-text-666-10 { color:#666; font-size:10px; }
.crm-text-666-10-mr { color:#666; font-size:10px; margin-right:6px; }
.crm-mt-8 { margin-top:8px; }
.crm-flex-8 { display:flex; align-items:center; gap:8px; }
.crm-flex-12-mb { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.crm-flex-wrap { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.crm-tabs-row { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:8px; }
.crm-tiny-pill { font-size:10px; padding:2px 8px; }
.crm-pill-info { padding:2px 8px; font-size:11px; border-color:#3b82f6; color:#3b82f6; }
.crm-pill-muted { padding:2px 8px; font-size:11px; border-color:#888; color:#888; }
.crm-btn-danger-solid { background:#ef4444; color:#fff; border-color:#ef4444; }
.crm-danger-outlined { color:var(--danger); border-color:rgba(239,68,68,.3); }
.crm-w-full-12-mb { width:100%; font-size:12px; margin-bottom:8px; }
.crm-flex-wrap-6 { display:flex; flex-wrap:wrap; gap:6px; }
.crm-meta-13 { font-size:13px; color:var(--text-dim); }
.crm-tiny-pill-6 { font-size:10px; padding:2px 6px; }
.crm-text-13-strong { font-size:13px; font-weight:500; color:var(--text); }
.crm-mb-8b { margin-bottom:8px; }
.crm-clickable-13 { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }
.crm-hidden-mt-4 { display:none; margin-top:4px; }
.crm-section-label { font-size:12px; font-weight:500; color:var(--text); margin-bottom:8px; }
.crm-section-label-strong { font-size:12px; font-weight:600; color:var(--text); margin-bottom:8px; }
.crm-row-12-mt-6 { display:flex; gap:12px; margin-top:6px; }
.crm-row-12-mt-8 { display:flex; gap:12px; margin-top:8px; }
.crm-mw-680 { max-width:680px; }
.crm-h-18-mb-4 { margin:0 0 4px; font-size:18px; color:var(--text); }
.crm-meta-12-mb-20 { font-size:12px; color:var(--text-dim); margin:0 0 20px; }
.crm-meta-12-mb-12 { font-size:12px; color:var(--text-dim); margin:0 0 12px; }

/* CRM final batch — remaining 1-2 occurrence patterns. Long names match purpose. */
.crm-row-12-mt-4 { display:flex; gap:12px; margin-top:4px; }
.crm-modal-title { font-weight:700; font-size:15px; margin-bottom:12px; }
.crm-form-label { font-size:11px; color:var(--text-dim); display:block; margin-bottom:4px; }
.crm-textarea-input { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; min-height:80px; }
.crm-form-actions { display:flex; gap:8px; justify-content:flex-end; }
.crm-btn-cancel { padding:8px 16px; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; cursor:pointer; color:var(--text); font-size:13px; }
.crm-btn-warn { padding:8px 16px; background:#f59e0b; color:#000; border:none; border-radius:6px; cursor:pointer; font-size:13px; }
.crm-tag-warn { color:#f59e0b; border-color:rgba(245,158,11,.3); }
.crm-tag-info-soft { color:#a78bfa; border-color:rgba(167,139,250,.3); }
.crm-pill-bg-text { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; }
.crm-pill-bg-text-wide { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; }
.crm-stats-row { display:flex; gap:24px; margin:12px 0; font-size:13px; color:#999; }
.crm-row-8-my-12 { display:flex; gap:8px; margin:12px 0; }
.crm-info-card { margin:12px 0; padding:12px; background:var(--surface); border-radius:8px; font-size:13px; color:var(--text-dim); }
.crm-card-error { margin:8px 0; padding:12px; background:var(--danger-tint); border-radius:8px; font-size:13px; color:var(--danger); }
.crm-card-success { margin:8px 0; padding:12px; background:var(--success-tint); border-radius:8px; font-size:13px; color:var(--success); }
.crm-card-info { margin:8px 0; padding:12px; background:var(--info-tint); border-radius:8px; font-size:13px; color:var(--info); }
.crm-card-purple { margin:8px 0; padding:12px; background:var(--accent-tint); border-radius:8px; font-size:13px; color:var(--accent); }
.crm-row-condensed { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; }
.crm-text-soft { color:#ccc; }
.crm-pill-orange { font-size:10px; color:#ff9800; border-color:#ff9800; }
.crm-pill-11 { padding:2px 8px; font-size:11px; }
.crm-btn-success-pill { background:#22c55e; color:#fff; border-color:#22c55e; padding:2px 8px; font-size:11px; }
.crm-btn-disabled-pill { opacity:0.4; padding:2px 8px; font-size:11px; cursor:not-allowed; }
.crm-tabs-row-mb-12 { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; }
.crm-tab-button { padding:8px 16px; font-size:13px; cursor:pointer; border:none; background:none; color:var(--text-dim); border-bottom:2px solid transparent; }
.crm-tab-button.active { color:var(--text); border-bottom-color:var(--accent); }
.crm-list-card { border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.crm-list-card-row { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; background:var(--surface); }
.crm-cell-on-140 { color:var(--text); min-width:140px; }
.crm-cell-dim-100 { color:var(--text-dim); min-width:100px; }
.crm-cell-40 { min-width:40px; }
.crm-cell-dim-50 { color:#888; min-width:50px; }
.crm-cell-aaa-flex { color:#aaa; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-detail-collapse { display:none; padding:12px 14px; background:var(--bg); border-top:1px solid var(--border); }
.crm-row-mb-8 { margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.crm-text-555-10 { font-size:10px; color:#555; }
.crm-clickable-tag { font-size:10px; color:#666; cursor:pointer; padding:2px 6px; background:var(--bg); border-radius:3px; font-weight:500; }
.crm-row-mb-10 { margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.crm-hidden-32 { display:none; height:32px; flex:1; }
.crm-info-banner { margin-bottom:10px; padding:8px; background:var(--surface); border-radius:6px; font-size:12px; color:var(--text-dim); }
.crm-scroll-400 { font-size:12px; line-height:1.6; max-height:400px; overflow-y:auto; }
.crm-msg-success { margin:4px 0; padding:6px 10px; background:rgba(74,255,122,0.06); border-radius:6px; border-left:3px solid var(--success); }
.crm-msg-info { margin:4px 0; padding:6px 10px; background:rgba(59,125,216,0.08); border-radius:6px; border-left:3px solid var(--accent); }
.crm-msg-meta { margin:4px 0; padding:4px 10px; color:#888; font-size:11px; }
.crm-text-success-bold { color:var(--success); font-weight:600; }
.crm-text-accent-bold { color:var(--accent); font-weight:600; }
.crm-c-dyn { color: var(--c); }
.crm-bg-c-22 { background: var(--bg-c); color: var(--c); }
.crm-cell-dyn { color: var(--c); min-width:40px; }
.crm-modal-overlay-fixed { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:flex; align-items:center; justify-content:center; }
.crm-modal-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; min-width:300px; max-width:400px; color:var(--text); }
.crm-select-input { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; margin-bottom:16px; }
.crm-btn-modal-cancel { padding:8px 16px; background:var(--surface); border:1px solid var(--border-strong); border-radius:6px; color:var(--text-dim); cursor:pointer; font-size:13px; }
.crm-btn-modal-warn { padding:8px 16px; background:#f59e0b; color:#000; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:600; }

/* CRM final tail — one-off styles batched into named classes. Long names are
   intentional, capturing the original intent so future readers can locate them. */
.crm-fw-600 { font-weight:600; }
.crm-stats-row-12 { display:flex; gap:24px; margin:12px 0; font-size:13px; color:#999; }
.crm-row-8-my-12b { display:flex; gap:8px; margin:12px 0; }
.crm-row-cond-12 { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:12px; }
.crm-pill-orange-bordered { font-size:10px; color:#ff9800; border-color:#ff9800; }
.crm-tabs-row-mb-12b { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:12px; }
.crm-tab-btn-13 { padding:8px 16px; font-size:13px; cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; }
.crm-tab-btn-13.active { border-bottom-color:#ccc; }
.crm-list-card-bordered { border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
.crm-list-card-row-surface { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; background:var(--surface); }
.crm-cell-on-140-min { color:var(--text); min-width:140px; }
.crm-cell-dim-100-min { color:var(--text-dim); min-width:100px; }
.crm-cell-dim-50-min { color:#888; min-width:50px; }
.crm-cell-aaa-flex-ellipsis { color:#aaa; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-detail-collapse-bg { display:none; padding:12px 14px; background:var(--bg); border-top:1px solid var(--border); }
.crm-text-555-tiny { font-size:10px; color:#555; }
.crm-clickable-tag-666 { font-size:10px; color:#666; cursor:pointer; padding:2px 6px; background:var(--bg); border-radius:3px; font-weight:500; }
.crm-row-mb-10b { margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.crm-hidden-32-flex { display:none; height:32px; flex:1; }
.crm-info-banner-surface { margin-bottom:10px; padding:8px; background:var(--surface); border-radius:6px; font-size:12px; color:var(--text-dim); }
.crm-scroll-400b { font-size:12px; line-height:1.6; max-height:400px; overflow-y:auto; }
.crm-msg-success-bordered { margin:4px 0; padding:6px 10px; background:rgba(74,255,122,0.06); border-radius:6px; border-left:3px solid var(--success); }
.crm-msg-info-bordered { margin:4px 0; padding:6px 10px; background:rgba(59,125,216,0.08); border-radius:6px; border-left:3px solid var(--accent); }
.crm-msg-meta-tiny { margin:4px 0; padding:4px 10px; color:#888; font-size:11px; }
.crm-bold-success { color:var(--success); font-weight:600; }
.crm-bold-accent { color:var(--accent); font-weight:600; }
.crm-mt-10-mb-6 { margin-top:10px; margin-bottom:6px; }
.crm-status-pill-strong { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; }
.crm-goal-color { margin-bottom:6px; font-size:12px; color: var(--c); }
.crm-bordered-card-12 { margin-bottom:6px; padding:6px 10px; background:var(--surface); border-radius:6px; font-size:12px; }
.crm-bordered-card-12-bordered { margin-bottom:6px; padding:6px 10px; background:var(--surface); border-radius:6px; font-size:12px; border-left:3px solid var(--c); }
.crm-orange { color:#ff9800; }
.crm-row-mt-4-ml-8 { margin:4px 0 0 8px; color:var(--text-dim); }
.crm-section-foot { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); text-align:right; }
.crm-btn-danger-outline { padding:6px 14px; border-radius:6px; border:1px solid #ef4444; background:transparent; color:#ef4444; font-size:12px; cursor:pointer; }
.crm-meta-12 { font-size:12px; color:var(--text-dim); }
.crm-text-16 { font-size:16px; }
.crm-text-14 { font-size:14px; }
.crm-text-28 { font-size:28px; margin-bottom:8px; }
.crm-text-12-on { font-size:12px; color:var(--text); }
.crm-text-12-mt-4-666 { font-size:12px; margin-top:4px; color:#666; }
.crm-meta-mt-2 { font-size:11px; color:var(--text-dim); margin-top:2px; }
.crm-meta-xs-mt-2 { font-size:10px; color:var(--text-dim); margin-top:2px; }
.crm-meta-13-padded { color:var(--text-dim); font-size:13px; padding:8px 0; }
.crm-meta-mt-12-block { font-size:11px; color:var(--text-dim); margin-top:12px; display:block; }
.crm-meta-sm-mt-8 { margin-top:8px; font-size:11px; color:var(--text-dim); }
.crm-meta-sm-min-80 { color:var(--text-dim); font-size:11px; min-width:80px; }
.crm-meta-pre { white-space:pre-wrap; word-break:break-word; font-size:12px; color:var(--text-dim); }
.crm-text-right-min-80 { text-align:right; min-width:80px; }
.crm-text-right-nowrap { text-align:right; white-space:nowrap; }
.crm-cell-on-130 { color:var(--text); min-width:130px; }
.crm-cell-dim-120-ellipsis { color:var(--text-dim); min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-cell-dim-flex-ellipsis { color:var(--text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.crm-blue-mr { font-size:11px; color:#3b82f6; margin-right:6px; }
.crm-orange-mr { font-size:11px; color:#f59e0b; margin-right:6px; }
.crm-pill-orange-solid { padding:2px 8px; font-size:11px; background:#f59e0b; border-color:#f59e0b; color:#fff; }
.crm-circle { min-width:28px; padding:4px 8px; border-radius:50%; }
.crm-circle-bold { min-width:28px; padding:4px 8px; border-radius:50%; font-weight:700; }
.crm-flex-row-8-mt-bot { display:flex; gap:8px; margin:8px 0 12px; }
.crm-tag-1px-rgba { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; background:rgba(255,255,255,.05); }
.crm-tag-1px-light { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; background:rgba(255,255,255,.05); }
.crm-tag-variant { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; background:rgba(59,130,246,.12); color:#60a5fa; margin-left:6px; }
.crm-tag-ai { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; background:rgba(167,139,250,.12); color:#a78bfa; margin-left:6px; }
.crm-tag-thread { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; background:rgba(255,255,255,.06); color:var(--text-dim); margin-left:6px; }
.crm-page-info { min-width:50px; text-align:center; }
.crm-act-cb { margin-right:8px; flex-shrink:0; }
.crm-name-input { width:100%; padding:8px 10px; }
.crm-name-input-mb { width:100%; margin-bottom:10px; padding:8px 10px; }
.crm-instr-input { width:100%; min-height:140px; padding:10px; }
.crm-content-area { width:100%; min-height:320px; padding:10px; font-family:monospace; font-size:12px; }
.crm-file-input-styled { display:block; width:100%; padding:8px; background:var(--surface); border:1px dashed var(--border); border-radius:8px; color:var(--text); font-size:13px; cursor:pointer; }
/* Style the native "Choose File" button explicitly — otherwise it inherits
   color:var(--text) from the input wrapper and the white-on-white button
   becomes invisible in dark mode (looks like the file picker is missing). */
.crm-file-input-styled::file-selector-button {
  background: var(--accent); color: #fff; border: none;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  margin-right: 10px; font-size: 12px; font-weight: 600;
}
.crm-file-input-styled::file-selector-button:hover { opacity: .85; }
.crm-file-input-styled::-webkit-file-upload-button {
  background: var(--accent); color: #fff; border: none;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  margin-right: 10px; font-size: 12px; font-weight: 600;
}
.crm-status-inline-danger { margin-left:8px; font-size:11px; color:#ef4444; font-weight:500; }
.crm-sup-inline { margin-left:8px; display:inline-flex; align-items:center; gap:4px; }
.crm-color-picker { width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; padding:0; flex-shrink:0; }
.crm-tiny-btn { padding:3px 6px; min-width:auto; }
.crm-tiny-btn-danger { padding:3px 6px; min-width:auto; color:var(--danger); }
.crm-color-danger-var { color: var(--danger); }
/* Unified delete-row icon button — trash svg, hovers red. */
.crm-del-icon-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.crm-del-icon-btn:hover { color: var(--danger); border-color: var(--danger); }
/* NOTE: the old bordered `.crm-icon-btn` definition lived here. It was a dead
 * ghost (the JS-injected borderless variant always won the cascade); deleted in
 * UI-unification Phase 1 Step 2. The live `.crm-icon-btn` family now lives in
 * css/crm.css. */
/* Deal status settings row */
.crm-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
}
.crm-status-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
/* Inline status select in the deals list — the chip BG comes from --c, set
 * per-row via data-c (the panel-level MutationObserver wires that up). */
.crm-status-inline-select {
  background-color: var(--c, var(--text-dim));
  color: var(--text-on-accent);
  border: none;
  padding: 2px 22px 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.crm-status-inline-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.crm-status-inline-select option { background: var(--surface); color: var(--text); text-transform: none; }
.crm-drag-ghost { position:fixed; pointer-events:none; z-index:9999; opacity:0.9; transform:rotate(1.5deg); box-shadow:0 12px 32px rgba(0,0,0,.4); border:2px solid var(--accent); border-radius:8px; }
.crm-italic-dim { color:var(--text-dim); font-style:italic; }
.crm-flex-8-mt-12 { display:flex; gap:8px; margin-top:12px; }
.crm-bold-section-label { font-weight:600; margin-bottom:6px; font-size:12px; color:var(--text); }
.crm-row-between-8 { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.crm-row-between-mb-6 { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.crm-empty-vertical { text-align:center; padding:40px 0; color:var(--text-dim); }
.crm-bordered-list-card { border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:8px; background:var(--surface); }
.crm-scroll-300-bordered { max-height:300px; overflow-y:auto; padding:10px; background:rgba(255,255,255,.02); border-radius:6px; border:1px solid var(--border); }
.crm-flex-wrap-mb-12 { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.crm-w-40 { width:40px; }
.crm-bordered-row-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--surface); }
.crm-bordered-card-bordered { margin-bottom:6px; padding:6px 10px; background:var(--surface); border-radius:6px; font-size:12px; border-left:3px solid var(--accent); }
.crm-bordered-card-orange { margin-bottom:6px; padding:6px 10px; background:var(--surface); border-radius:6px; font-size:12px; border-left:3px solid #ff9800; }
.crm-bordered-row-card-c { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:var(--surface); border-left:3px solid var(--c, var(--border)); }
.crm-tab-btn-12 { padding:6px 14px; font-size:12px; cursor:pointer; border:none; background:none; color:var(--text-dim); border-bottom:2px solid transparent; }
.crm-tab-btn-12.active { color:var(--text); border-bottom-color:var(--accent); }
.crm-tab-btn-13b { padding:8px 16px; font-size:13px; cursor:pointer; border:none; background:none; color:var(--text-dim); border-bottom:2px solid transparent; }
.crm-tab-btn-13b.active { color:var(--text); border-bottom-color:#ccc; }
.crm-pill-paused { padding:2px 8px; font-size:11px; background:#6b7280; border-color:#6b7280; color:#fff; }
.crm-pill-active { padding:2px 8px; font-size:11px; background:#22c55e; border-color:#22c55e; color:#fff; }
.crm-filter-pill-active { font-size:11px; background:var(--accent); color:#fff; }
.crm-filter-pill { font-size:11px; }
.crm-text-666 { font-size:10px; color:#888; }
.crm-text-555 { color:#555; }
.crm-text-blue-light { color:#60a5fa; font-size:10px; }
.crm-text-blue-bold { font-weight:600; color:#60a5fa; min-width:20px; }
.crm-text-blue { color:#3b82f6; }
.crm-text-emerald { color:#10b981; }
.crm-text-purple { color:#a855f7; }
.crm-text-amber { color:#eab308; }
.crm-ml-auto-on { margin-left:auto; color:var(--text); }
.crm-text-italic-on { font-size:12px; color:var(--text); margin-bottom:6px; font-style:italic; }
.crm-meta-pre-clamp { font-size:12px; color:var(--text-dim); margin-bottom:6px; max-height:60px; overflow:hidden; text-overflow:ellipsis; }
.crm-row-6-mt-4 { display:flex; gap:6px; margin-top:4px; }
.crm-h-section-14 { margin:0 0 8px; font-size:14px; color:var(--text); }
.crm-stats-row-20 { margin:16px 0; display:flex; gap:20px; flex-wrap:wrap; }
.crm-stat-22-blue { font-size:22px; font-weight:700; color:#3b82f6; }
.crm-stat-22-green { font-size:22px; font-weight:700; color:#22c55e; }
.crm-stat-22-red { font-size:22px; font-weight:700; color:#ef4444; }
.crm-icon-20-10 { width:20px; height:20px; font-size:10px; }
.crm-chart-axis { display:flex; align-items:flex-end; gap:2px; height:120px; padding:0; border-bottom:1px solid var(--border); }
.crm-chart-col { flex:1; min-width:6px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.crm-chart-stack { width:80%; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; height:100%; }
.crm-chart-bar { background:#3b82f6; border-radius:2px 2px 0 0; position:relative; min-height:2px; height: var(--w); }
.crm-chart-overlay-open { position:absolute; bottom:0; left:0; right:0; background:#22c55e; opacity:0.7; height: var(--w); }
.crm-chart-overlay-reply { position:absolute; bottom:0; left:0; right:0; background:#f59e0b; opacity:0.9; height: var(--w); }
.crm-chart-overlay { position:absolute; bottom:0; left:0; right:0; }
.crm-chart-legend { display:flex; gap:16px; margin-top:6px; font-size:10px; color:var(--text-dim); }
.crm-legend-dot-blue { display:inline-block; width:8px; height:8px; background:#3b82f6; border-radius:2px; margin-right:3px; }
.crm-legend-dot-green { display:inline-block; width:8px; height:8px; background:#22c55e; border-radius:2px; margin-right:3px; }
.crm-legend-dot-amber { display:inline-block; width:8px; height:8px; background:#f59e0b; border-radius:2px; margin-right:3px; }
.crm-bordered-card-mb { margin-bottom:12px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.crm-card-header-strip { padding:8px 12px; background:var(--surface); font-size:12px; font-weight:600; color:var(--text); }
.crm-card-footer-strip { padding:8px 12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:16px; font-size:12px; }
.crm-stat-22-dyn { font-size:20px; font-weight:700; color: var(--c); }
.crm-pill-success-soft { background:#22c55e22; color:#22c55e; font-size:10px; }
.crm-row-12-wrap { display:flex; gap:12px; flex-wrap:wrap; }
.crm-info-tile { padding:10px 14px; background:var(--surface); border-radius:8px; border:1px solid var(--border); text-align:center; flex:1; min-width:120px; }
.crm-mw-600 { max-width:600px; }
.crm-meta-block-666 { font-size:12px; color:#888; display:block; margin-bottom:6px; }
.crm-meta-mb-8-666 { font-size:12px; color:#888; margin-bottom:8px; }
.crm-row-12-mb-12 { display:flex; gap:12px; margin-bottom:12px; }
.crm-col-4-mb-12 { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.crm-text-danger-tiny { color:#ef4444; font-size:10px; }
.crm-clickable-row { display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; font-size:12px; }
.crm-step-row { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border:1px solid var(--border); border-radius:6px; margin-bottom:4px; background:var(--surface); }
.crm-scroll-400-bordered { max-height:400px; overflow-y:auto; padding:12px; background:rgba(255,255,255,.02); border-radius:6px; border:1px solid var(--border); font-size:13px; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.crm-scroll-400a { max-height:400px; overflow-y:auto; }
.crm-pad-y-8 { padding:8px 0; }
.crm-text-hl-12 { font-size:12px; color:var(--text); background:rgba(255,255,255,.03); padding:8px; border-radius:6px; margin-bottom:8px; border:1px solid var(--border); }
.crm-text-danger-bordered { color:#ef4444; border-color:#ef4444; }
.crm-card-bordered-12-16 { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:24px; }
.crm-section-cap { font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.crm-li { margin:3px 0; }
.crm-link-meta { color:var(--accent); text-decoration:none; font-size:12px; }
.crm-line-22 { line-height:2.2; }
.crm-meta-13-on { color:var(--text-dim); font-size:13px; }
.crm-bold-meta-12 { font-size:12px; font-weight:600; color:var(--text); }
.crm-meta-mb-4-sm { font-size:11px; color:var(--text-dim); margin-bottom:4px; }
.crm-row-8-mb-24 { display:flex; gap:8px; margin-bottom:24px; }
.crm-btn-accent-tab { background:var(--accent); color:#fff; padding:8px 24px; }
.crm-h-section-15-bordered { margin:0 0 8px; font-size:15px; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:6px; }
.crm-meta-13-line { font-size:13px; color:var(--text-dim); line-height:1.7; }
.crm-my-12 { margin:12px 0; }
.crm-h-13-mb-4 { margin:0 0 4px; font-size:13px; color:var(--text); }
.crm-meta-12-line { font-size:12px; color:var(--text-dim); line-height:1.7; }
.crm-empty-32 { padding:32px; text-align:center; color:var(--text-dim); }
.crm-tab-btn-12-13 { padding:6px 14px; font-size:12px; cursor:pointer; border:none; background:none; color:var(--text-dim); border-bottom:2px solid transparent; }
.crm-tab-btn-12-13.active { color:var(--text); border-bottom-color:var(--accent); }
.crm-collapsible-mt-4 { margin-top:4px; }
.crm-status-pill-strong-c { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:600; background: var(--bg-c); color: var(--c); }
.crm-bg-c { background: var(--c); }
.crm-bar-fill-c { width: var(--w); background: var(--c); }
.crm-overlay-c { position:absolute; bottom:0; left:0; right:0; background: var(--c); }
.crm-status-cell-c { background: var(--bg-c); color: var(--c); min-width:60px; text-align:center; }
.crm-cell-c-50 { color: var(--c); min-width:50px; text-align:center; font-size:11px; }
.crm-status-pill-10 { background: var(--bg-c); color: var(--c); font-size:10px; }
.crm-text-10-c { font-size:10px; color: var(--c); }
.crm-act-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; background:var(--surface); }
.crm-act-row.done { text-decoration:line-through; opacity:0.6; }
.crm-act-overdue { font-size:11px; color:#ef4444; font-weight:600; }
.crm-act-meta-11 { font-size:11px; }

/* ── CRM Panel (legacy slide-in shell removed — framework-migrated; content kept) ── */
.crm-pipeline { display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; padding:10px 12px; gap:8px; }
.crm-pipeline-pill {
  display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; border:1px solid transparent;
  background:var(--surface); color:var(--text-dim); transition:all .15s;
}
.crm-pipeline-pill.active { color:#fff; }
.crm-pipeline-pill .crm-pill-count { font-size:10px; opacity:.7; }
.crm-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.crm-tab { flex:1; padding:10px; background:none; border:none; border-bottom:2px solid transparent; color:var(--text-dim); font-weight:600; font-size:13px; cursor:pointer; transition:all .15s; }
.crm-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.crm-list { flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; }
.crm-card {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; cursor:pointer; transition:background .15s;
}
.crm-card:hover { background:var(--bg); }
.crm-card-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.crm-card-name { font-weight:600; font-size:14px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crm-card-meta { font-size:12px; color:var(--text-dim); display:flex; gap:10px; flex-wrap:wrap; }
.crm-status-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; color:#fff; }
.crm-search-bar { padding:8px 12px; flex-shrink:0; }
.crm-search-bar input { width:100%; padding:7px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; outline:none; box-sizing:border-box; }
.crm-empty { text-align:center; color:var(--text-dim); padding:40px 20px; font-size:14px; opacity:.6; }
.crm-detail { flex:1; overflow-y:auto; padding:0; }
.crm-detail-header { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.crm-detail-back { background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; font-weight:600; padding:4px 0; }
.crm-detail-body { padding:16px; display:flex; flex-direction:column; gap:14px; }
.crm-detail-field label { display:block; font-size:11px; font-weight:600; color:var(--text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.crm-detail-field p { font-size:14px; color:var(--text); margin:0; }
.crm-detail-field input, .crm-detail-field select, .crm-detail-field textarea {
  width:100%; padding:7px 10px; background:var(--surface); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; outline:none; box-sizing:border-box; font-family:inherit;
}
.crm-detail-field textarea { resize:vertical; min-height:70px; }
.crm-modal-overlay {
  display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.7); align-items:center; justify-content:center;
}
.crm-modal-overlay.open { display:flex; }
.crm-modal-box {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px; width:90%; max-width:420px; max-height:85vh; overflow-y:auto; display:flex; flex-direction:column; gap:14px;
}
.crm-modal-title { font-size:16px; font-weight:700; margin:0; }
.crm-modal-actions { display:flex; gap:8px; justify-content:flex-end; padding-top:4px; }
.crm-btn { padding:8px 16px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .15s; }
.crm-btn-primary { background:var(--accent); color:#fff; }
.crm-btn-primary:hover { opacity:.88; }
.crm-btn-danger { background:var(--danger); color:#fff; }
.crm-btn-secondary { background:var(--surface); color:var(--text-dim); border:1px solid var(--border); }
.crm-btn-accent { background:linear-gradient(135deg, #7c3aed, #a855f7); color:#fff; }
.crm-btn-accent:hover { opacity:.9; }
.crm-contacts-section { margin-top:8px; }
.crm-contacts-section h4 { font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin:0 0 8px; }

/* ── CRM Import Modal ── */
.crm-import-overlay {
  display:none; position:fixed; inset:0; z-index:350; background:rgba(0,0,0,.75); align-items:center; justify-content:center;
}
.crm-import-overlay.open { display:flex; }
.crm-import-box {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  width:92%; max-width:680px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
.crm-import-header { display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border); gap:10px; flex-shrink:0; }
.crm-import-header h3 { margin:0; font-size:16px; font-weight:700; flex:1; }
.crm-import-body { flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:16px; }
.crm-import-footer { display:flex; gap:8px; justify-content:flex-end; padding:14px 18px; border-top:1px solid var(--border); flex-shrink:0; }
.crm-dropzone {
  border:2px dashed var(--border); border-radius:12px; padding:40px 20px; text-align:center;
  cursor:pointer; transition:border-color .2s, background .2s; color:var(--text-dim);
}
.crm-dropzone:hover, .crm-dropzone.drag-over { border-color:var(--accent); background:var(--accent-tint); }
.crm-dropzone-icon { font-size:36px; margin-bottom:10px; }
.crm-dropzone-label { font-size:14px; margin-bottom:6px; color:var(--text); font-weight:600; }
.crm-dropzone-hint { font-size:12px; opacity:.6; }
.crm-dropzone-file { margin-top:10px; font-size:13px; color:var(--accent); font-weight:600; }
.crm-import-preview-table { width:100%; border-collapse:collapse; font-size:12px; }
.crm-import-preview-table th {
  background:var(--bg); color:var(--text-dim); font-size:11px; text-transform:uppercase;
  letter-spacing:.04em; padding:6px 8px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap;
}
.crm-import-preview-table td { padding:5px 8px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.crm-import-preview-table tr:last-child td { border-bottom:none; }
.crm-import-preview-table td.dup-warn { background:rgba(232,155,45,.12); color:#e89b2d; }
.crm-col-map-select {
  width:100%; padding:3px 6px; background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:11px; outline:none;
}
.crm-import-type-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crm-import-type-row label { font-size:12px; font-weight:600; color:var(--text-dim); }
.crm-import-type-row select { padding:4px 8px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; outline:none; }
.crm-import-analyzing { display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:14px; padding:20px 0; justify-content:center; }
.crm-import-spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.crm-import-success { text-align:center; padding:30px 20px; }
.crm-import-success-icon { font-size:48px; margin-bottom:12px; }
.crm-import-success p { font-size:15px; margin:0; }
.crm-import-section-label { font-size:12px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin:0; }
.crm-import-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:8px; max-height:220px; overflow-y:auto; }

/* ── Meeting Bot Modal ── */
.meet-modal {
  display:none; position:fixed; inset:0; z-index:250; background:rgba(0,0,0,.7);
  align-items:center; justify-content:center;
}
.meet-modal.open { display:flex; }
.meet-modal-box {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:24px; width:90%; max-width:400px;
}
.meet-modal-box h3 { font-size:16px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.meet-modal-box input {
  width:100%; padding:10px 12px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px; outline:none; margin-bottom:12px;
}
.meet-modal-box input:focus { border-color:var(--accent); }
.meet-modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.meet-modal-btns button {
  padding:8px 18px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; border:none;
}
.meet-modal-btns .cancel { background:rgba(255,255,255,.06); color:var(--text-dim); border:1px solid var(--border); }
.meet-modal-btns .join { background:var(--accent); color:white; }
.meet-modal-btns .join:disabled { opacity:.4; cursor:default; }
.meet-active-bar {
  display:none; align-items:center; justify-content:center; gap:10px; padding:8px 16px;
  background:rgba(255,74,74,.08); border-top:1px solid rgba(255,74,74,.2);
  font-size:13px; color:var(--text); flex-shrink:0;
}
.meet-active-bar.visible { display:flex; }
.meet-active-dot { width:10px; height:10px; border-radius:50%; background:var(--danger); animation:meet-pulse 1.5s infinite; flex-shrink:0; }
@keyframes meet-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.meet-active-bar .meet-timer { font-family:monospace; font-weight:600; color:var(--danger); font-size:15px; }
.meet-active-bar .meet-stop { background:var(--danger); color:var(--text-on-accent); border:none; padding:6px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.meet-active-bar .meet-label { white-space:nowrap; font-weight:500; }

/* ── Header live-status widgets (in-call / local recording) — extracted from index.html inline styles ── */
.header-live-widget { display:none; align-items:center; gap:6px; margin-left:8px; padding-left:8px; border-left:1px solid var(--overlay-3); font-size:13px; }
.header-live-widget .meet-active-dot { width:8px; height:8px; }
.header-live-label { color:var(--text); white-space:nowrap; }
.header-live-widget .meet-timer { font-family:monospace; font-weight:600; color:var(--danger); }
.header-live-btn { padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; border:none; }
.header-live-btn-stop { background:var(--danger); color:var(--text-on-accent); }
.header-live-btn-pause { background:var(--overlay-2); color:var(--text); border:1px solid var(--overlay-3); }
@media(max-width:600px){
  #meetActiveHeader { display:none !important; }
  .meet-active-bar { padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Desktop side-by-side layout ── */
@media(min-width:768px){
  body { flex-direction:column; }
  .calendar-panel-backdrop.open { display:none !important; }
  .files-panel-backdrop.open { display:none !important; }
  body.panel-open-right .chat-main {
    margin-right:var(--panel-width, 420px);
    transition:margin-right .3s ease;
  }
  /* Hide backdrops on desktop — panels are side-by-side, chat stays interactive */
  .email-panel-backdrop.open,
  .todo-panel-backdrop.open,
  .memory-panel-backdrop.open,
  .subscriptions-panel-backdrop.open,
  .files-panel-backdrop.open,
  .cronjobs-panel-backdrop.open,
  .usage-panel-backdrop.open,
  .health-panel-backdrop.open,
  .settings-panel-backdrop.open,
  .meetings-panel-backdrop.open,
  .calendar-panel-backdrop.open,
  .accounting-panel-backdrop.open,
  .terminal-panel-backdrop.open,
  .crm-panel-backdrop.open,
  .vpsstats-panel-backdrop.open,
  .campaigns-panel-backdrop.open {
    display:none !important;
  }
}
/* ── PWA Floating Nav Bar ── */
.pwa-fab-nav {
  display:none; position:absolute; right:5px; z-index:120;
  flex-direction:column; gap:6px; padding:6px;
  background:color-mix(in srgb, var(--surface-2) 92%, transparent); border:1px solid var(--border);
  border-radius:14px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow:var(--shadow-1);
  transition:box-shadow .2s;
}
.pwa-fab-nav.dragging {
  background:color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent);
  box-shadow:0 4px 24px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pwa-fab-nav .fab-drag-hint {
  display:none; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:var(--accent); color:var(--text-on-accent); font-size:11px; font-weight:600;
  padding:5px 10px; border-radius:8px; white-space:nowrap;
  pointer-events:none; align-items:center; gap:5px;
}
.pwa-fab-nav.dragging .fab-drag-hint { display:flex; }
.pwa-fab-nav .fab-btn {
  width:38px; height:38px; border-radius:10px; border:none;
  background:transparent; color:var(--text-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; transition:background .15s, color .15s;
}
.pwa-fab-nav .fab-btn:active { background:var(--overlay-3); }
.pwa-fab-nav .fab-btn.active { color:var(--accent); }
.pwa-fab-nav .fab-btn svg { width:20px; height:20px; pointer-events:none; }
@media(display-mode: standalone){
  .pwa-fab-nav { display:flex; }
}
@media(hover:hover) and (min-width:601px){
  .pwa-fab-nav { display:flex; position:absolute; right:8px; bottom:80px; z-index:120; }
}

/* iOS keyboard stabilization */
:root { --ios-kb-offset: 0px; }
body.ios-keyboard-open .input-area,
body.ios-keyboard-open .composer-wrap,
body.ios-keyboard-open #inputContainer {
  padding-bottom: max(env(safe-area-inset-bottom), var(--ios-kb-offset));
}


/* Pending message styles */
.msg-wrap.msg-pending {
  opacity: 0.7;
  position: relative;
}

.msg-wrap.msg-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-dim);
  border-top-color: transparent;
  border-radius: 50%;
  animation: msg-pending-spin 0.8s linear infinite;
}

@keyframes msg-pending-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Remove pending state when confirmed */
.msg-wrap.msg-confirmed {
  animation: msg-confirm-flash 0.3s ease-out;
}

@keyframes msg-confirm-flash {
  0% { opacity: 0.7; }
  50% { opacity: 1; background-color: rgba(59, 125, 216, 0.1); }
  100% { opacity: 1; background-color: transparent; }
}

/* Queued message styles */
.msg-wrap.msg-queued {
  opacity: 0.6;
  position: relative;
}

.msg-wrap.msg-queued::before {
  content: "⏳";
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.7;
}

/* Pending message styles (sent but not acknowledged) */
.msg-wrap.msg-pending {
  position: relative;
}

.msg-wrap.msg-pending .msg {
  opacity: 0.85;
  position: relative;
}

/* Compact list styling for messages */
.msg ul, .msg ol {
  margin: 8px 0;
  padding-left: 24px;
}

.msg li {
  margin: 4px 0;
  line-height: 1.4;
}

.msg li:first-child {
  margin-top: 0;
}

.msg li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.msg li ul, .msg li ol {
  margin: 4px 0 4px 0;
}

/* Tighten spacing between list and surrounding text */
.msg p + ul, .msg p + ol {
  margin-top: 6px;
}

.msg ul + p, .msg ol + p {
  margin-top: 8px;
}

/* Compact heading spacing in messages */
.msg h1, .msg h2, .msg h3, .msg h4 {
  margin: 12px 0 6px 0;
  line-height: 1.3;
}

.msg h1:first-child, .msg h2:first-child, 
.msg h3:first-child, .msg h4:first-child {
  margin-top: 0;
}

/* Reduce space after headings before lists */
.msg h1 + ul, .msg h1 + ol,
.msg h2 + ul, .msg h2 + ol,
.msg h3 + ul, .msg h3 + ol {
  margin-top: 4px;  
}

/* General paragraph spacing in messages */
.msg p {
  margin: 8px 0;
}

.msg p:first-child {
  margin-top: 0;
}

.msg p:last-child {
  margin-bottom: 0;
}

/* Files search responsive styles */
@media(max-width:600px){
  .files-toolbar { 
    flex-direction: column; 
    align-items: stretch; 
    gap: 12px; 
    padding: 12px;
  }
  .files-toolbar > div:first-child {
    justify-content: center;
  }
  .files-toolbar > div:last-child {
    width: 100%;
  }
  #filesSearchInput {
    width: 100% !important;
  }
}

/* VPS Stats Panel */
.vpsstats-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:500px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.vpsstats-panel.open { right:0; }
.vpsstats-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.vpsstats-panel-backdrop.open { display:block; }
.vpsstats-content {
  flex:1; overflow-y:auto; padding:0 16px 16px;
}
.vpsstats-section {
  margin:16px 0; padding:16px; background:var(--surface); border-radius:10px; border:1px solid var(--border);
}
.vpsstats-section h3 {
  margin:0 0 12px; font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px;
}
.vpsstats-metric {
  display:flex; justify-content:space-between; align-items:center; margin:8px 0;
}
.vpsstats-metric-label {
  font-size:12px; color:var(--text-dim);
}
.vpsstats-metric-value {
  font-size:14px; font-weight:600; color:var(--text); font-family:'JetBrains Mono',monospace;
}
.vpsstats-progress {
  width:100%; height:20px; background:var(--bg); border-radius:10px; overflow:hidden; margin:4px 0;
}
.vpsstats-progress-bar {
  height:100%; background:var(--accent); transition:width .3s ease; position:relative; overflow:hidden;
}
.vpsstats-progress-bar.high { background:var(--danger); }
.vpsstats-progress-bar.medium { background:var(--warning); }
.vpsstats-progress-bar.low { background:var(--success); }
.vpsstats-chart {
  width:100%; height:200px; margin:16px 0; position:relative; background:var(--bg); border-radius:8px; overflow:hidden;
}
.vpsstats-chart-tabs {
  display:flex; gap:0; border-bottom:1px solid var(--border); background:var(--surface);
}
.vpsstats-chart-tab {
  flex:1; padding:8px; text-align:center; font-size:11px; font-weight:600; cursor:pointer;
  border:none; background:none; color:var(--text-dim); transition:all .15s;
}
.vpsstats-chart-tab.active {
  color:var(--accent); border-bottom:2px solid var(--accent);
}
.vpsstats-chart-canvas {
  position:relative; height:160px; padding:12px;
}
.vpsstats-chart-svg {
  width:100%; height:100%;
}
.vpsstats-chart-label {
  font-size:10px; fill:var(--text-dim);
}
.vpsstats-chart-grid {
  stroke:var(--border); stroke-width:0.5; opacity:0.5;
}
.vpsstats-containers {
  display:flex; flex-direction:column; gap:12px; margin-top:12px;
}
.vpsstats-container {
  padding:12px; background:var(--bg); border-radius:8px; border:1px solid var(--border);
}
.vpsstats-container-header {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
}
.vpsstats-container-name {
  font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px;
}
.vpsstats-container-status {
  font-size:11px; padding:2px 8px; border-radius:12px; font-weight:600;
}
.vpsstats-container-status.running {
  background:rgba(52,211,153,.15); color:#34d399;
}
.vpsstats-container-status.stopped {
  background:rgba(239,68,68,.15); color:#ef4444;
}
.vpsstats-container-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:11px;
}
.vpsstats-container-stat {
  display:flex; justify-content:space-between; color:var(--text-dim);
}
.vpsstats-container-stat span:last-child {
  color:var(--text); font-weight:500; font-family:'JetBrains Mono',monospace;
}

/* ─── Campaigns Panel ────────────────────────────────────────────────────────────── */
.campaigns-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:420px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.campaigns-panel.open { right:0; }
.campaigns-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.campaigns-panel-backdrop.open { display:block; }

/* Campaigns header matches email panel */
.campaigns-panel .email-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.campaigns-panel .email-header h2 { 
  font-size:15px; font-weight:600; display:flex; align-items:center;
}
.campaigns-panel .email-close { 
  background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer; padding:4px 8px; 
}
.campaigns-panel .email-refresh {
  background:none; border:none; color:var(--text-dim); cursor:pointer; padding:6px; border-radius:4px;
}
.campaigns-panel .email-refresh:hover {
  background:var(--overlay-2);
}
.campaigns-panel .campaigns-new-btn {
  background:var(--accent); color:white;
}

.campaigns-content {
  flex:1; overflow-y:auto; padding:20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
}

.campaigns-list {
  display:flex; flex-direction:column; gap:12px;
}

.campaign-item {
  background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px;
  display:flex; justify-content:space-between; align-items:center;
}

.campaign-info h3 {
  margin:0 0 4px 0; font-size:16px; color:var(--text);
}

.campaign-info p {
  margin:0 0 8px 0; color:var(--text-dim); font-size:14px;
}

.campaign-meta {
  display:flex; gap:12px; align-items:center; font-size:12px;
}

.campaign-status {
  padding:2px 8px; border-radius:4px; font-weight:500;
}

.status-draft { background:var(--warning); color:var(--bg); }
.status-sent { background:var(--success); color:var(--text-on-accent); }
.status-sending { background:var(--info); color:var(--text-on-accent); }

.campaign-actions {
  display:flex; gap:8px;
}

.campaigns-form {
  padding:20px 0;
}

.campaigns-form h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.campaigns-form-group {
  margin-bottom:16px;
}

.campaigns-form-group label {
  display:block; margin-bottom:6px; font-weight:500; font-size:14px;
}

.campaigns-form-group input, .campaigns-form-group textarea {
  width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:4px;
  background:var(--surface-2); color:var(--text); font-size:14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.campaigns-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.campaigns-form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}

.campaigns-form-actions {
  display:flex; gap:12px; justify-content:flex-end; margin-top:20px;
}

.campaigns-empty-state {
  text-align:center; padding:40px 20px; color:var(--text-dim);
}

.contacts-filters {
  margin-bottom:16px; padding:12px; background:var(--surface); border-radius:8px;
}

.contacts-filters input[type="text"] {
  width:100%; padding:8px 12px; margin-bottom:8px; border:1px solid var(--border);
  border-radius:4px; background:var(--surface-2); color:var(--text);
}

.filter-options {
  display:flex; gap:16px; font-size:14px;
}

.filter-options label {
  display:flex; align-items:center; gap:6px; cursor:pointer;
}

.contacts-list {
  max-height:400px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;
  background:var(--surface);
}

.contact-item {
  display:flex; align-items:center; padding:12px; border-bottom:1px solid var(--border);
  cursor:pointer;
}

.contact-item:hover {
  background:var(--overlay-2);
}

.contact-item input[type="checkbox"] {
  margin-right:12px;
}

.contact-info {
  flex:1;
}

.contact-info strong {
  display:block; margin-bottom:2px; font-size:14px;
}

.contact-info .company {
  color:var(--text-dim); font-size:13px; margin-right:8px;
}

.contact-info .email {
  color:var(--accent); font-size:13px;
}

.contact-info .badge {
  display:inline-block; padding:2px 6px; background:var(--accent); color:var(--text-on-accent);
  border-radius:3px; font-size:11px; margin-left:8px;
}

.selection-footer {
  display:flex; justify-content:space-between; align-items:center; padding:12px;
  background:var(--surface); border-top:1px solid var(--border);
}

.campaign-preview {
  margin-top:16px; padding:16px; background:var(--surface); border-radius:8px;
  border:1px solid var(--border);
}

.email-preview {
  margin-top:8px; padding:12px; background:white; color:black; border-radius:4px;
  max-height:200px; overflow-y:auto;
}

.campaigns-btn-small {
  padding:4px 12px; font-size:13px; border:none; border-radius:4px; cursor:pointer;
  background:var(--surface); color:var(--text);
}
.campaigns-btn-small:hover {
  background:var(--overlay-2);
}

.campaigns-btn-small.campaigns-btn-primary {
  background:var(--accent); color:white;
}

.campaigns-btn-small.campaigns-btn-secondary {
  background:var(--text-faint); color:var(--text-on-accent);
}

.campaigns-btn-primary {
  background:var(--accent); color:white; border:none; padding:8px 16px; border-radius:4px; cursor:pointer;
}

.campaigns-btn-secondary {
  background:var(--text-faint); color:var(--text-on-accent); border:none; padding:8px 16px; border-radius:4px; cursor:pointer;
}

.campaigns-loading {
  text-align:center; padding:20px; color:var(--text-dim);
}

.campaigns-error {
  text-align:center; padding:20px; color:var(--danger);
}

/* Mobile responsiveness */
@media(min-width:768px){
  .campaigns-panel-backdrop.open, .sb-panel-backdrop.open { display:none; }
}

/* Voice message styling */
.msg-wrap.msg-voice .msg { border-left: 2px solid rgba(250, 204, 21, 0.5); }
.msg-wrap.msg-voice.user .msg { border-left: none; border-right: 2px solid rgba(250, 204, 21, 0.5); }
/* Force PWA reload - 1772879048 */

/* Voice thinking dots animation */
.thinking-dots span { animation: thinkBlink 1.4s infinite; font-size: 24px; line-height: 1; letter-spacing: 2px; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkBlink { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }
.msg-wrap.msg-streaming .msg { border-left: 2px solid rgba(250,204,21,0.7); animation: voicePulse 1.5s ease-in-out infinite; }
@keyframes voicePulse { 0%,100% { border-left-color: rgba(250,204,21,0.3); } 50% { border-left-color: rgba(250,204,21,0.8); } }
.voice-thinking .msg { min-height: 28px; display: flex; align-items: center; }

/* Thread info badge (auto-hidden sidebar, desktop only) */
.thread-info-badge {
  position: absolute; top: 10px; left: 10px; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); cursor: pointer; padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  max-width: 250px; overflow: hidden;
  user-select: none;
}
.thread-info-badge:hover { background: rgba(255,255,255,.08); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.tib-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.tib-ctx { font-size: 12px; font-weight: 600; white-space: nowrap; }
@media(max-width:768px){ .thread-info-badge { display: none !important; } }

/* VNC Draggable Overlay */
.vnc-overlay {
  position: fixed; z-index: 10000;
  width: 800px; height: 483px;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  transition: box-shadow .2s;
  resize: none;
}
.vnc-overlay:hover { box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.vnc-overlay.vnc-fullscreen {
  position: fixed !important; top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0; border: none;
}
.vnc-overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); padding: 6px 10px;
  cursor: grab; user-select: none; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.vnc-overlay-header:active { cursor: grabbing; }
.vnc-overlay-title { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.vnc-overlay-btns { display: flex; gap: 4px; }
.vnc-overlay-btn {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 4px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.vnc-overlay-btn:hover { background: var(--overlay-2); color: var(--text); }
.vnc-close-btn:hover { background: var(--danger-tint); color: var(--danger); }
.vnc-overlay-iframe {
  flex: 1; border: none; background: #000; width: 100%; height: 100%;
}
.vnc-resize-handle { display: none; }
/* Multi-edge resize zones */
.vnc-edge { position: absolute; z-index: 2; }
.vnc-edge-n { top: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.vnc-edge-s { bottom: 0; left: 6px; right: 6px; height: 6px; cursor: ns-resize; }
.vnc-edge-e { right: 0; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.vnc-edge-w { left: 0; top: 6px; bottom: 6px; width: 6px; cursor: ew-resize; }
.vnc-edge-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.vnc-edge-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.vnc-edge-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.vnc-edge-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.vnc-fullscreen .vnc-edge { display: none; }
@media(max-width:768px){ .vnc-overlay { top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; border-radius:0 !important; } .vnc-overlay .vnc-resize-handle { display:none; } .vnc-overlay .vnc-drag-bar { display:none; } }


/* News Feed Panel */
.newsfeed-panel {
  position:fixed; top:var(--header-h); right:-100%; width:100%; max-width:600px; bottom:0; z-index:150;
  background:var(--bg); border-left:1px solid var(--border);
  display:flex; flex-direction:column; transition:right .3s ease;
}
.newsfeed-panel.open { right:0; }
.newsfeed-panel-backdrop {
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:140; background:rgba(0,0,0,.5); display:none;
}
.newsfeed-panel-backdrop.open { display:block; }

/* Topic Filter Tabs */
.newsfeed-topics {
  display:flex; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border);
  overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
}
.newsfeed-topic-tab {
  padding:6px 12px; border-radius:20px; font-size:13px; font-weight:500;
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer; transition:all .2s; flex-shrink:0;
}
.newsfeed-topic-tab:hover {
  background:var(--bg); border-color:var(--accent);
}
.newsfeed-topic-tab.active {
  background:var(--accent); color:white; border-color:var(--accent);
}
.newsfeed-topic-add {
  padding:6px 10px; border-radius:50%; font-size:16px; font-weight:600;
  background:transparent; border:1px dashed var(--border); color:var(--text-dim);
  cursor:pointer; transition:all .2s; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.newsfeed-topic-add:hover {
  border-color:var(--accent); color:var(--accent);
}

/* News Content */
.newsfeed-content {
  flex:1; overflow-y:auto; padding:16px;
}
.newsfeed-cards {
  display:grid !important; 
  grid-template-columns: 1fr;
  gap:16px;
  align-items: start;
}

/* Multi-column layout for wide screens - lowered breakpoints */
@media (min-width: 768px) {
  .newsfeed-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1200px) {
  .newsfeed-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Time filter dropdown */
.newsfeed-time-filter {
  margin-left: auto;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}
.newsfeed-time-filter:hover {
  border-color: var(--accent);
}


.newsfeed-card {
  display:flex; gap:12px; padding:12px; background:var(--surface);
  border-radius:10px; border:1px solid var(--border); transition:all .2s;
}
.newsfeed-card:hover {
  border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.newsfeed-thumbnail {
  position:relative; flex-shrink:0; width:160px; height:90px;
  border-radius:8px; overflow:hidden; background:var(--bg);
}
.newsfeed-thumbnail img {
  width:100%; height:100%; object-fit:cover;
}
.newsfeed-thumbnail.video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}
.newsfeed-duration {
  position:absolute; bottom:4px; right:4px; padding:2px 6px;
  background:rgba(0,0,0,.8); color:white; font-size:11px;
  font-weight:600; border-radius:4px; font-family:'JetBrains Mono',monospace;
}
.newsfeed-content {
  flex:1; min-width:0;
}
.newsfeed-title {
  margin:0 0 4px; font-size:14px; font-weight:600; line-height:1.4;
}
.newsfeed-title a {
  color:var(--text); text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.newsfeed-title a:hover {
  color:var(--accent);
}
.newsfeed-description {
  margin:4px 0 8px; font-size:12px; color:var(--text-dim); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.newsfeed-meta {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:11px; color:var(--text-dim);
}
.newsfeed-meta > span {
  display:flex; align-items:center; gap:4px;
}
.newsfeed-channel, .newsfeed-source {
  font-weight:500; color:var(--text);
}
.newsfeed-actions {
  display:flex; gap:4px; margin-top:8px;
}
.newsfeed-btn {
  padding:6px; border-radius:6px; background:transparent;
  border:1px solid var(--border); color:var(--text-dim);
  cursor:pointer; transition:all .2s; display:flex;
  align-items:center; justify-content:center;
}
.newsfeed-btn:hover {
  background:var(--bg); border-color:var(--accent); color:var(--accent);
}
.newsfeed-btn.active {
  background:var(--accent); color:white; border-color:var(--accent);
}
.newsfeed-loading, .newsfeed-error, .newsfeed-empty {
  padding:40px 20px; text-align:center; color:var(--text-dim);
}
.newsfeed-error {
  color:var(--danger);
}

/* Add Topic Form */
.newsfeed-add-topic {
  padding:16px; background:var(--surface); border-radius:10px;
  border:1px solid var(--border); margin:16px;
}
.newsfeed-add-topic h3 {
  margin:0 0 12px; font-size:16px; font-weight:600; color:var(--text);
}
.newsfeed-add-topic input {
  width:100%; padding:8px 12px; background:var(--bg);
  border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:14px;
}
.newsfeed-add-topic input:focus {
  outline:none; border-color:var(--accent);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .newsfeed-card {
    flex-direction:column;
  }
  .newsfeed-thumbnail {
    width:100%; height:180px;
  }
  .newsfeed-panel-backdrop.open { display:block; }
}
@media(min-width:768px){
  .newsfeed-panel-backdrop.open { display:none; }
}
.newsfeed-panel { z-index:150 !important; max-width:100% !important; width:100% !important; }


/* ── Rate Limit Widget ── */
.rate-limit-widget {
  display:flex; align-items:center; gap:5px; padding:5px 10px;
  border:1px solid var(--border); border-radius:8px; font-size:13px;
  color:var(--text-dim); cursor:pointer; transition:all .2s; white-space:nowrap;
  flex-shrink:0;
}
.rate-limit-widget:hover { border-color:#444; color:var(--text); }
.rate-limit-widget.warning { color:#ffa500; border-color:rgba(255,165,0,.4); }
.rate-limit-widget.critical { color:var(--danger); border-color:rgba(255,74,74,.4); background:rgba(255,74,74,.06); }
.rate-limit-widget.ok { color:var(--text-dim); }

.rate-limit-modal-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.5); z-index:9999; justify-content:center; align-items:flex-start;
  padding-top:80px;
}
.rate-limit-modal-overlay.open { display:flex; }
.rate-limit-modal {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  width:340px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.rate-limit-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px 10px; border-bottom:1px solid var(--border);
}
.rate-limit-modal-header h3 { margin:0; font-size:14px; font-weight:600; color:var(--text); }
.rate-limit-modal-body { padding:16px; }
.rate-limit-section { margin-bottom:14px; }
.rate-limit-section:last-of-type { margin-bottom:8px; }
.rate-limit-label { font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
.rate-limit-bar-container {
  width:100%; height:6px; background:var(--border); border-radius:3px; overflow:hidden;
}
.rate-limit-bar {
  height:100%; border-radius:3px; transition:width .4s ease, background .3s;
  background:var(--accent); width:0%;
}
.rate-limit-bar.warning { background:#ffa500; }
.rate-limit-bar.critical { background:var(--danger); }
.rate-limit-details {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:4px; font-size:11px;
}
.rate-limit-details span:first-child { font-weight:600; color:var(--text); }
.rate-limit-reset { color:var(--text-dim); }
.rate-limit-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:10px; border-top:1px solid var(--border); margin-top:6px;
}
.rate-limit-meta { font-size:10px; color:var(--text-dim); }
.rate-limit-refresh-btn {
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--text-dim); font-size:16px; cursor:pointer; padding:2px 8px;
  transition:all .2s;
}
.rate-limit-refresh-btn:hover { color:var(--text); border-color:#444; }
.rate-limit-refresh-btn.spinning { animation:rl-spin .8s linear infinite; }
@keyframes rl-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

@media(max-width:600px) {
  .rate-limit-widget span { display:none; }
  .rate-limit-widget { padding:3px 6px; }
  .rate-limit-modal { width:95vw; }
}

/* ── Floating Browser Button (desktop only) ── */
.floating-browser-btn {
  display:none; /* hidden on mobile by default */
  position:fixed; bottom:16px; left:16px; z-index:190;
  align-items:center; gap:6px; padding:8px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  color:var(--text-dim); font-size:13px; font-weight:400;
  cursor:pointer; transition:all .2s; box-shadow:var(--shadow-1);
  position:relative; width:fit-content;
  font-family:inherit; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.floating-browser-btn:hover { color:var(--text); border-color:var(--border-strong); background:var(--surface-2); box-shadow:var(--shadow-2); }
.floating-browser-btn.browser-active { color:var(--warning); border-color:color-mix(in srgb, var(--warning) 50%, transparent); }
.floating-browser-btn.browser-active::after {
  content:''; position:absolute; top:6px; right:6px; width:6px; height:6px;
  border-radius:50%; background:var(--warning); animation:browser-pulse 1.5s infinite;
}
@keyframes browser-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.floating-browser-btn:active { transform:scale(.97); }
.floating-browser-btn svg { flex-shrink:0; }
@media(min-width:601px) {
  .floating-browser-btn { display:inline-flex; }
}

/* Fast Mode Button */
.fast-mode-btn { background:none; border:1px solid var(--border); border-radius:6px; padding:4px 8px; cursor:pointer; color:var(--text-dim); transition:all 0.2s; display:flex; align-items:center; }
.fast-mode-btn:hover { border-color:var(--text-dim); }
.fast-mode-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Streaming message bubble — progressive rendering */
.msg-wrap.streaming-msg .msg {
  border-left: 2px solid var(--accent);
  animation: streamPulse 2s ease-in-out infinite;
}
.msg-wrap.streaming-msg .streaming-text::after {
  content: '\25AE';
  display: inline;
  color: var(--accent);
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 2px;
  font-size: 0.85em;
}
@keyframes streamPulse {
  0%, 100% { border-left-color: rgba(99,102,241,0.3); }
  50% { border-left-color: rgba(99,102,241,0.8); }
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Accounting document checkboxes — dark mode */
.acc-doc-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  transition: all .15s;
}
.acc-doc-cb:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.acc-doc-cb:checked::after {
  content: '✓';
  display: block;
  color: #fff;
  font-size: 11px;
  line-height: 12px;
  text-align: center;
}

/* ── Litegraph node editor overrides ── */
.pf-body .litegraph { background: var(--surface) !important; }
.litegraph .litemenu-entry { color: var(--text) !important; }
.litemenu { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.litemenu-entry:hover { background: var(--overlay-2) !important; }


/* Tasks project modal animation */
@keyframes tasksProjectFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}