:root {
  --header-h: 52px;
  --bg: #0a0a0a; --surface: #1a1a1a; --border: #2a2a2a;
  --text: #e0e0e0; --text-dim: #888; --accent: #3b7dd8;
  --user-bg: #1a3a5c; --bot-bg: #222222;
  --danger: #ff4a4a; --success: #4aff7a;
  --font-size: 15px;
}
* { 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,.email-ai-panel,.todo-panel,.memory-panel,.projects-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,#f59e0b)} 50%{opacity:.3} }
.status-dot.connected { background:var(--success); }
.node-status { display:flex; align-items:center; gap:8px; margin-left:6px; padding-left:8px; border-left:1px solid rgba(255,255,255,.1); }
.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); }

/* 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; }
.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(--bg-2,rgba(255,255,255,.05)); 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;
  /* 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 ── */
.email-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;
}
.email-panel.open { right:0; }
.email-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;
}
.email-panel-backdrop.open { display:block; }
/* 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, .email-ai-panel-backdrop.open, .todo-panel-backdrop.open, .memory-panel-backdrop.open, .projects-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-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.email-tab {
  flex:1; padding:10px; text-align:center; font-size:13px; font-weight:500;
  color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent;
  background:none; border-top:none; border-left:none; border-right:none;
}
.email-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.email-toolbar { display:flex; justify-content:flex-end; padding:8px 12px; flex-shrink:0; }
.email-refresh {
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text-dim);
  padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer;
}
.email-refresh:active { background:rgba(255,255,255,.12); }
.email-list { flex:1; overflow-y:auto; padding:0; }
.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:rgba(59,125,216,.04); }
.email-unread-dot { width:8px; height:8px; border-radius:50%; 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:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.email-badges { display:inline; }
.email-badges span { margin-left:4px; font-size:12px; }
.email-time { font-size:11px; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.email-check-btn {
  background:none; border:1px solid var(--border); color:var(--text-dim); font-size:14px; cursor:pointer;
  padding:2px 6px; flex-shrink:0; line-height:1; border-radius:4px; margin-right:2px;
}
.email-check-btn:active { background:rgba(255,255,255,.15); color:var(--accent); }
.email-menu-btn {
  background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer;
  padding:4px 8px; flex-shrink:0; line-height:1;
}
.email-dropdown {
  position:absolute; right:12px; top:40px; z-index:10;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.5); min-width:160px; display:none; overflow:hidden;
}
.email-dropdown.open { display:block; }
.email-dropdown button {
  display:block; width:100%; text-align:left; padding:10px 14px; font-size:13px;
  background:none; border:none; color:var(--text); cursor:pointer;
}
.email-dropdown button:hover, .email-dropdown button:active { background:rgba(255,255,255,.06); }
.email-loading { text-align:center; padding:32px; color:var(--text-dim); font-size:13px; }

/* ── Email AI Panel ── */
.email-ai-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;
}
.email-ai-panel.open { right:0; }
.email-ai-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;
}
.email-ai-panel-backdrop.open { display:block; }
.email-ai-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-ai-header h2 { font-size:15px; font-weight:600; }
.email-ai-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid var(--border); flex-shrink:0;
  gap:12px;
}
.email-ai-filters {
  display:flex; gap:12px; align-items:center; font-size:13px;
}
.email-ai-filters label {
  display:flex; align-items:center; gap:4px; color:var(--text-dim);
}
.email-ai-content {
  flex:1; overflow-y:auto; padding:16px;
}
.email-ai-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; margin-bottom:16px;
}
.email-ai-stats .stat-card {
  background:var(--surface); padding:16px; border-radius:10px;
  text-align:center; border:1px solid var(--border);
}
.stat-card.urgent { border-color:#f85149; }
.stat-card.important { border-color:#58a6ff; }
.stat-card.normal { border-color:#f9a825; }
.stat-card.low { border-color:#6b7280; }
.stat-card .stat-value { font-size:24px; font-weight:600; margin-bottom:4px; }
.stat-card .stat-label { font-size:12px; color:var(--text-dim); }
.email-ai-list {
  display:flex; flex-direction:column; gap:8px;
}
.email-ai-item {
  display:flex; gap:12px; padding:12px; background:var(--surface);
  border-radius:8px; border:1px solid var(--border); cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
}
.email-ai-item:hover {
  border-color:#444; transform:translateX(4px);
}
.email-ai-item.urgent { border-left:3px solid #f85149; }
.email-ai-item.important { border-left:3px solid #58a6ff; }
.email-ai-item.normal { border-left:3px solid #f9a825; }
.email-ai-item.low { border-left:3px solid #6b7280; }
.email-ai-score {
  font-size:20px; font-weight:600; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  min-width:40px;
}
.email-ai-item.urgent .email-ai-score { color:#f85149; }
.email-ai-item.important .email-ai-score { color:#58a6ff; }
.email-ai-item.normal .email-ai-score { color:#f9a825; }
.email-ai-item.low .email-ai-score { color:#6b7280; }
.email-ai-content .loading,
.email-ai-content .error-message,
.email-ai-content .no-emails {
  text-align:center; padding:32px; color:var(--text-dim);
}
.email-ai-from {
  font-weight:600; font-size:14px; margin-bottom:4px;
}
.email-ai-subject {
  font-size:13px; margin-bottom:4px; color:var(--text);
}
.email-ai-preview {
  font-size:12px; color:var(--text-dim); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.email-ai-meta {
  display:flex; gap:12px; margin-top:8px; font-size:11px;
}
.email-ai-category {
  padding:2px 8px; border-radius:4px; background:rgba(255,255,255,.06);
  text-transform:uppercase; font-weight:600;
}
.email-ai-reason {
  color:var(--text-dim);
}
@media(min-width:768px){
  .email-ai-panel-backdrop.open { display:none; }
}

/* ── Todo Panel ── */
.todo-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;
}
.todo-panel.open { right:0; }
.todo-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;
}
.todo-panel-backdrop.open { display:block; }
.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 {
  background:none; border:1px solid var(--border); color:var(--text); width:32px; height:32px;
  border-radius:8px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.todo-nav-btn:active { background:rgba(255,255,255,.1); }
.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-toast {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:200;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:10px 20px; border-radius:12px; font-size:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.4); opacity:0; transition:opacity .3s;
  pointer-events:none;
}
.email-toast.show { opacity:1; }
/* Email detail view */
.email-detail { display:none; flex-direction:column; flex:1; overflow:hidden; }
.email-detail.open { display:flex; }
.email-detail-header { padding:12px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.email-detail-back { background:none; border:none; color:var(--accent); font-size:13px; cursor:pointer; padding:4px 0; }
.email-detail-subject { font-size:15px; font-weight:600; margin-top:6px; }
.email-detail-meta { font-size:12px; color:var(--text-dim); margin-top:4px; }
.email-detail-actions { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.email-detail-actions { display:flex; gap:6px; margin-top:10px; align-items:center; flex-wrap:wrap; }
.email-detail-actions button { background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:12px; padding:6px 10px; cursor:pointer; display:flex; align-items:center; gap:5px; transition:background .15s; }
.email-detail-actions button:hover { background:rgba(255,255,255,.12); }
.email-detail-actions button:active { background:rgba(255,255,255,.18); }
.email-detail-actions .more-btn { padding:6px 8px; position:relative; }
.email-action-overflow { position:absolute; top:100%; right:0; margin-top:6px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.4); min-width:170px; z-index:999; padding:4px 0; }
.email-action-overflow button { width:100%; border:none; border-radius:0; background:transparent; padding:8px 14px; font-size:13px; }
.email-action-overflow button:hover { background:rgba(255,255,255,.1); }
.email-detail-body { flex:1; overflow-y:auto; padding:16px; font-size:13px; 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:#fff; 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;
}

.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;
}

.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); }

/* ── Projects Panel ── */
.projects-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;
}
.projects-panel.open { right:0; }
.projects-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;
}
.projects-panel-backdrop.open { display:block; }
.projects-board { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.project-card {
  background:var(--surface); border-left:4px solid var(--accent); border-radius:10px;
  padding:14px 16px; cursor:pointer; transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.project-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.5); transform:translateY(-1px); }
.project-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-card-title { font-size:15px; font-weight:600; color:var(--text); }
.project-status {
  font-size:10px; font-weight:600; text-transform:uppercase; padding:2px 8px;
  border-radius:10px; letter-spacing:.5px; flex-shrink:0;
}
.project-status.active { background:rgba(74,255,122,.15); color:#4aff7a; }
.project-status.paused { background:rgba(255,217,61,.15); color:#ffd93d; }
.project-status.completed { background:rgba(136,136,136,.2); color:#888; }
.project-status.idea { background:rgba(59,125,216,.15); color:#3b7dd8; }
.project-card-desc { font-size:12px; color:var(--text-dim); margin-top:6px; }
.project-card-expanded { display:none; margin-top:12px; border-top:1px solid var(--border); padding-top:12px; }
.project-card.expanded .project-card-expanded { display:block; }
.project-detail-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-top:10px; margin-bottom:4px; }
.project-detail-label:first-child { margin-top:0; }
.project-notes-input {
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-size:12px; padding:8px; resize:vertical; min-height:40px; outline:none; font-family:inherit;
}
.project-notes-input:focus { border-color:var(--accent); }
.project-repo-link { color:var(--accent); font-size:12px; text-decoration:none; word-break:break-all; }
.project-subnodes { list-style:none; }
.project-subnode {
  display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.project-subnode:last-child { border-bottom:none; }
.subnode-status {
  font-size:9px; padding:1px 6px; border-radius:8px; font-weight:600; text-transform:uppercase; flex-shrink:0;
}
.subnode-status.todo { background:rgba(59,125,216,.15); color:#3b7dd8; }
.subnode-status.in-progress { background:rgba(255,165,0,.15); color:#ffa500; }
.subnode-status.done { background:rgba(74,255,122,.15); color:#4aff7a; }
.subnode-title { flex:1; color:var(--text); }
.subnode-cycle { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:12px; padding:2px 4px; }
.subnode-cycle:hover { color:var(--text); }
.project-add-subnode {
  background:none; border:1px dashed var(--border); color:var(--text-dim); padding:6px;
  border-radius:6px; width:100%; cursor:pointer; font-size:12px; margin-top:6px;
}
.project-add-subnode:hover { border-color:var(--text-dim); color:var(--text); }
.project-card-actions { display:flex; gap:6px; margin-top:10px; }
.project-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;
}
.project-card-actions button:hover { color:var(--text); border-color:#444; }
.project-card-actions button.danger { color:var(--danger); }
.project-card-actions button.danger:hover { border-color:var(--danger); }
/* New project form */
.project-form { background:var(--surface); border-radius:10px; padding:14px; display:none; flex-direction:column; gap:8px; }
.project-form.open { display:flex; }
.project-form input, .project-form textarea, .project-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;
}
.project-form input:focus, .project-form textarea:focus { border-color:var(--accent); }
.project-color-picker { display:flex; gap:6px; }
.project-color-opt {
  width:24px; height:24px; border-radius:50%; border:2px solid transparent; cursor:pointer;
}
.project-color-opt.selected { border-color:var(--text); }
.project-form-actions { display:flex; gap:6px; justify-content:flex-end; }
.project-form-actions button {
  padding:6px 16px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; border:none;
}
.project-form-actions .save { background:var(--accent); color:white; }
.project-form-actions .cancel { background:rgba(255,255,255,.06); color:var(--text-dim); border:1px solid var(--border); }

/* ── 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 ── */
.calendar-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;
}
.calendar-panel.open { right:0; }
.calendar-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;
}
.calendar-panel-backdrop.open { display:block; }
.calendar-view-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.calendar-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;
}
.calendar-view-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.calendar-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);
}
.calendar-date-nav span { font-size:14px; font-weight:500; min-width:160px; text-align:center; }
.calendar-events { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.calendar-event {
  background:var(--surface); border-left:4px solid var(--accent); border-radius:10px;
  padding:12px 14px; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.calendar-event.acct-personal { border-left-color:#4ecdc4; }
.calendar-event.acct-ideajetlab { border-left-color:#ff6b6b; }
.calendar-event.acct-h2yo { border-left-color:#ffd93d; }
.calendar-event-time { font-size:12px; color:var(--accent); font-weight:600; margin-bottom:4px; }
.calendar-event-title { font-size:14px; font-weight:600; color:var(--text); }
.calendar-event-meta { font-size:11px; color:var(--text-dim); margin-top:4px; }
.calendar-acct-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; margin-left:8px;
}
.calendar-day-header {
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-dim); padding:6px 4px; border-bottom:1px solid var(--border);
}
.calendar-today-btn {
  background:none; border:1px solid var(--border); color:var(--text-dim); font-size:12px;
  padding:3px 10px; border-radius:12px; cursor:pointer; font-weight:600;
}
.calendar-today-btn:hover { color:var(--accent); border-color:var(--accent); }
.calendar-create-btn {
  background:var(--accent); color:white; border:none; border-radius:50%; width:44px; height:44px;
  position:absolute; bottom:20px; right:20px; cursor:pointer; box-shadow:0 4px 12px rgba(59,125,216,.4);
  display:flex; align-items:center; justify-content:center; z-index:5;
}
.calendar-create-btn:hover { transform:scale(1.1); }
.calendar-month-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px; padding:8px 12px;
}
.calendar-month-grid .cal-dow {
  text-align:center; font-size:10px; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; padding:4px 0;
}
.calendar-month-grid .cal-day {
  text-align:center; padding:6px 2px; font-size:13px; cursor:pointer; border-radius:8px;
  color:var(--text); min-height:44px; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.calendar-month-grid .cal-day:hover { background:rgba(255,255,255,.06); }
.calendar-month-grid .cal-day.other-month { color:var(--text-dim); opacity:.4; }
.calendar-month-grid .cal-day.today { background:rgba(59,125,216,.15); font-weight:700; color:var(--accent); border:1px solid var(--accent); }
.cal-day-dots { display:flex; gap:2px; justify-content:center; flex-wrap:wrap; }
.cal-day-dots .dot { width:5px; height:5px; border-radius:50%; }
.calendar-event { cursor:pointer; transition:transform .1s; }
.calendar-event:hover { transform:translateX(2px); }
.calendar-event-detail {
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border); font-size:12px; color:var(--text-dim);
  display:none; flex-direction:column; gap:4px;
}
.calendar-event-detail.open { display:flex; }
.calendar-event-detail a { color:var(--accent); text-decoration:none; }
.calendar-event-detail a:hover { text-decoration:underline; }
.calendar-create-form {
  padding:12px; display:flex; flex-direction:column; gap:10px; border-bottom:1px solid var(--border);
  background:var(--surface); flex-shrink:0;
}
.calendar-create-form input, .calendar-create-form select {
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px;
  padding:8px 10px; color:var(--text); font-size:13px;
}
.calendar-create-form .cal-form-row { display:flex; gap:8px; }
.calendar-create-form .cal-form-row > * { flex:1; }
.calendar-create-form .cal-form-actions { display:flex; gap:8px; justify-content:flex-end; }
.calendar-create-form .cal-form-actions button {
  padding:6px 16px; border-radius:8px; border:none; font-size:13px; font-weight:600; cursor:pointer;
}
.cal-form-save { background:var(--accent); color:white; }
.cal-form-cancel { background:rgba(255,255,255,.06); color:var(--text-dim); border:1px solid var(--border) !important; }

/* ── 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:rgba(59,125,216,.15); }
.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:#444; }
.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:rgba(59,125,216,.12); }
.files-item.drag-over { outline:2px dashed var(--accent); outline-offset:-2px; background:rgba(59,125,216,.1); }
.files-item.dragging { opacity:.4; }
.files-breadcrumb button.drag-over { background:var(--accent); color:#fff; }
.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:rgba(255,255,255,.08); }
.files-item-actions button svg { width:16px; height:16px; }
/* Three-dot menu for narrow/mobile view */
.files-item-actions .files-more-btn { display:none; }
.files-item-actions .files-action-direct { display:flex; }
.files-item-menu { display:none; position:absolute; right:8px; top:100%; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:4px 0; z-index:100; min-width:160px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.files-item-menu.open { display:block; }
.files-item-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; background:none; border:none; color:var(--text); font-size:13px; cursor:pointer; font-family:inherit; }
.files-item-menu button:hover { background:rgba(255,255,255,.06); }
.files-item-menu button svg { width:16px; height:16px; flex-shrink:0; color:var(--text-dim); }
@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:rgba(59,125,216,.06); }
.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; }
.files-preview-toolbar { position:absolute; top:8px; right:12px; display:flex; gap:2px; z-index:202; }
@media(max-width:600px){
  .files-preview-overlay { z-index:160; }
  .files-preview-content { padding:48px 12px 12px; }
  .files-preview-toolbar { top:6px; right:8px; }
}
.files-preview-toolbar button { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:8px; cursor:pointer; transition:background .15s; }
.files-preview-toolbar button:hover { background:rgba(255,255,255,.2); }
.files-preview-content { max-width:1200px; width:100%; flex:1; position:relative; overflow-y:auto; overflow-x:hidden; padding:48px 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-toolbar button { background:rgba(0,0,0,.08); border-color:rgba(0,0,0,.12); color:#333; }
.files-preview-overlay.light-preview .files-preview-toolbar 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 ── */
/* ── Health Panel ── */
/* ── Accounting Panel ── */
.accounting-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;
}
.accounting-panel.open { right:0; }
.accounting-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;
}
.accounting-panel-backdrop.open { display:block; }
.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 { 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-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-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-alt);
}
.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:0 2px 8px rgba(0,0,0,.3); }
.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:rgba(255,255,255,.08); color:var(--text-dim); margin-left:8px; }
.accounting-doc-badge.receipt { background:rgba(78,205,196,.15); color:#4ecdc4; }
.accounting-doc-badge.invoice { background:rgba(255,107,107,.15); color:#ff6b6b; }
.accounting-doc-badge.bill { background:rgba(255,190,11,.15); color:#ffbe0b; }
.accounting-doc-badge.check { background:rgba(114,137,218,.15); color:#7289da; }
.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:rgba(255,59,48,.15); border:none; color:#ff3b30; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.accounting-swipe-delete:hover { background:rgba(255,59,48,.3); }
.acc-scan-spinner { display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.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:#ff3b30; color:white; }
.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:#fff; border-color:var(--accent); }
.accounting-add-bar button svg { width:16px; height:16px; flex-shrink:0; }
.accounting-preview-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:var(--bg); z-index:5; display:flex; flex-direction:column; }
.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:#fff; 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 rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; 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; }
.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); }
.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:#fff; }
.accounting-processing { text-align:center; padding:20px; color:var(--text-dim); font-size:14px; }

.health-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;
}
.health-panel.open { right:0; }
.health-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;
}
.health-panel-backdrop.open { display:block; }
.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; }
.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 {
  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;
}
.meetings-panel.open { right:0; }
.meetings-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;
}
.meetings-panel-backdrop.open { display:block; }
.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:rgba(255,255,255,.03); }
.meeting-dots-btn { position:absolute; right:12px; top:12px; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:18px; padding:4px 6px; border-radius:6px; opacity:0; transition:opacity .15s, background .15s; z-index:10; }
.meeting-card:hover .meeting-dots-btn { opacity:1; }
.meeting-dots-btn:hover { background:rgba(255,255,255,.1); color:var(--text); }
.meeting-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:180px; overflow:hidden;
}
.meeting-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;
}
.meeting-dots-menu button:hover { background:rgba(255,255,255,.06); }
.meeting-dots-menu button.danger { color:var(--danger); }
.meeting-dots-menu button.danger:hover { background:rgba(255,74,74,.1); }
.meeting-card-thumb { width:56px; height:42px; border-radius:6px; 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); }
.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; 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; }
/* Local recording */
.rec-btn { display:flex; align-items:center; gap:6px; background:var(--danger); color:#fff; border:none; border-radius:10px; 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:rgba(255,74,74,.08); border:1px solid rgba(255,74,74,.25); border-radius:10px;
}
.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:monospace; 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:rgba(255,255,255,.1); border:1px solid var(--border); border-radius:8px; 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:rgba(255,255,255,.2); }
.rec-bar .rec-stop { border-color:rgba(255,74,74,.4); color:var(--danger); }

.mtg-header-btn { background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; transition:background .15s; }
.mtg-header-btn:hover { background:rgba(255,255,255,.14); }
.mtg-header-btn:active { background:rgba(255,255,255,.2); }
.meeting-detail-header { padding:10px 16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.meeting-detail-top-row { display:flex; align-items:center; gap:8px; }
.meeting-detail-back { background:none; border:none; color:var(--accent); cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:background .15s; }
.meeting-detail-back:hover { background:rgba(59,125,216,.1); }
.meeting-detail-top-actions { display:flex; gap:4px; margin-left:auto; }
.meeting-detail-top-actions button { background:rgba(255,255,255,.08); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; transition:background .15s; }
.meeting-detail-top-actions button:hover { background:rgba(255,255,255,.14); }
.meeting-detail-top-actions button:active { background:rgba(255,255,255,.2); }
.meeting-detail-top-actions button.danger { color:var(--danger); border-color:rgba(255,74,74,.3); }
.meeting-detail-top-actions button.danger:hover { background:rgba(255,74,74,.1); }
.meeting-detail-title-input { width:100%; padding:6px 8px; background:var(--surface); border:1px solid var(--border); border-radius:6px; 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-detail-actions { display:none; }
.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:monospace; 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 */
.meeting-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
.meeting-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; transition:all .2s; }
.meeting-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* 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); }
.meeting-audio-play { width:36px; height:36px; border-radius:50%; background:rgba(59,125,216,.15); border:1px solid rgba(59,125,216,.3); color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s; }
.meeting-audio-play:active { background:rgba(59,125,216,.3); }
.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:0 0 4px rgba(0,0,0,.4); 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:monospace; 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:6px; padding:6px 10px; margin:1px 0; transition:background .15s; }
.meeting-transcript-line:hover { background:rgba(255,255,255,.03); }
.meeting-transcript-line.active { background:rgba(59,125,216,.1); }

/* 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:16px; 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:6px; 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:white; 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:8px; 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:8px; 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:10px; font-size:14px; font-weight:600; cursor:pointer; border:none; }
.share-modal-btns .share-cancel { background:rgba(255,255,255,.08); color:var(--text-dim); border:1px solid var(--border) !important; }
.share-modal-btns .share-send { background:var(--accent); color:white; }
.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:rgba(59,125,216,.15); border-radius:16px; 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 Panel ── */
.crm-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;
}
.crm-panel.open { right:0; }
.crm-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;
}
.crm-panel-backdrop.open { display:block; }
.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:rgba(var(--accent-rgb,59,125,216),.06); }
.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:white; 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; }
@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,
  .projects-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:rgba(26,26,26,.92); 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:0 2px 12px rgba(0,0,0,.4);
  transition:box-shadow .2s;
}
.pwa-fab-nav.dragging {
  background:rgba(59,125,216,.25); border-color:var(--accent);
  box-shadow:0 4px 24px rgba(59,125,216,.3);
}
.pwa-fab-nav .fab-drag-hint {
  display:none; position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:rgba(59,125,216,.9); color:#fff; 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:rgba(255,255,255,.1); }
.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(--hover-bg);
}
.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(--fg);
}

.campaign-info p {
  margin:0 0 8px 0; color:var(--muted); 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:#ffc107; color:#000; }
.status-sent { background:#28a745; color:white; }
.status-sending { background:#17a2b8; color:white; }

.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(--input-bg); color:var(--fg); 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(--muted);
}

.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(--input-bg); color:var(--fg);
}

.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(--hover-bg);
}

.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(--muted); 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:white;
  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(--hover-bg);
}

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

.campaigns-btn-small.campaigns-btn-secondary {
  background:#6c757d; color:white;
}

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

.campaigns-btn-secondary {
  background:#6c757d; color:white; border:none; padding:8px 16px; border-radius:4px; cursor:pointer;
}

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

.campaigns-error {
  text-align:center; padding:20px; color:#dc3545;
}

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

/* Ensure proper background on all themes */
.campaigns-panel {
  background: var(--bg, #ffffff);
}



/* 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, #1a1a2e); border: 1px solid var(--border, #333);
  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, #16213e); padding: 6px 10px;
  cursor: grab; user-select: none; flex-shrink: 0;
  border-bottom: 1px solid var(--border, #333);
}
.vnc-overlay-header:active { cursor: grabbing; }
.vnc-overlay-title { font-size: 12px; font-weight: 600; color: var(--text-dim, #888); }
.vnc-overlay-btns { display: flex; gap: 4px; }
.vnc-overlay-btn {
  background: none; border: none; color: var(--text-dim, #888);
  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: rgba(255,255,255,.1); color: var(--text, #eee); }
.vnc-close-btn:hover { background: rgba(239,68,68,.3); color: #ef4444; }
.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:var(--accent-dim); 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; }


/* Email AI - enhanced styles */
.email-ai-score-badge {
  font-size:16px; font-weight:700; min-width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; flex-shrink:0;
}
.email-ai-score-badge.urgent { background:#f8514920; color:#f85149; }
.email-ai-score-badge.important { background:#58a6ff20; color:#58a6ff; }
.email-ai-score-badge.normal { background:#f9a82520; color:#f9a825; }
.email-ai-score-badge.low { background:#6b728020; color:#6b7280; }
.email-ai-body { flex:1; min-width:0; cursor:pointer; }
.email-ai-actions {
  display:flex; gap:2px; align-items:center; flex-shrink:0;
  opacity:0; transition:opacity .2s;
}
.email-ai-item:hover .email-ai-actions { opacity:1; }
.email-ai-actions button {
  background:none; border:none; cursor:pointer; padding:4px 6px;
  font-size:14px; border-radius:4px; color:var(--text-dim);
  transition:background .15s;
}
.email-ai-actions button:hover { background:var(--hover); }
.email-ai-cat-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; letter-spacing:0.5px;
}
.email-ai-cat-label.urgent { background:#f8514930; color:#f85149; }
.email-ai-cat-label.important { background:#58a6ff30; color:#58a6ff; }
.email-ai-cat-label.normal { background:#f9a82530; color:#f9a825; }
.email-ai-cat-label.low { background:#6b728030; color:#6b7280; }
.email-ai-time { color:var(--text-dim); font-size:11px; }
/* Detail view */
.email-ai-detail { padding:0; }
.email-ai-detail-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0 12px; border-bottom:1px solid var(--border); margin-bottom:12px;
}
.email-ai-back {
  background:none; border:1px solid var(--border); color:var(--text);
  padding:6px 12px; border-radius:6px; cursor:pointer; font-size:13px;
}
.email-ai-back:hover { background:var(--hover); }
.email-ai-detail-actions {
  display:flex; gap:4px;
}
.email-ai-detail-actions button {
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:5px 10px; border-radius:6px; cursor:pointer; font-size:12px;
  transition:background .15s;
}
.email-ai-detail-actions button:hover { background:var(--hover); }
.email-ai-detail h3 { margin:0 0 8px; font-size:16px; }
.email-ai-detail-meta {
  display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--text-dim); margin-bottom:16px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.email-ai-detail-body {
  font-size:13px; line-height:1.6; white-space:pre-wrap;
  word-break:break-word; color:var(--text);
}

/* ── 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:0 2px 12px rgba(0,0,0,.3);
  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:#444; background:rgba(26,26,26,.95); box-shadow:0 4px 16px rgba(0,0,0,.4); }
.floating-browser-btn.browser-active { color:#f5c542; border-color:rgba(245,197,66,.5); }
.floating-browser-btn.browser-active::after {
  content:''; position:absolute; top:6px; right:6px; width:6px; height:6px;
  border-radius:50%; background:#f5c542; 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, rgba(99,102,241,0.7));
  animation: streamPulse 2s ease-in-out infinite;
}
.msg-wrap.streaming-msg .streaming-text::after {
  content: '\25AE';
  display: inline;
  color: var(--accent, rgba(99,102,241,0.7));
  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; }
}