/* ════════════════ STAR ANIMATION ════════════════ */
#star-canvas {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    overflow: hidden; display: none;
}
#star-canvas-el {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: all;
}

body { background-color: var(--bg-primary); color: var(--text-primary); }

/* ════════════════ FONT SIZE SCALING (icons + text) ════════════════ */
:root { --ui-scale: 1; }
[data-fontsize="compact"] [data-lucide] { transform: scale(0.875); }
[data-fontsize="medium"] [data-lucide] { transform: scale(1.25); }
[data-fontsize="medium"] .glass-panel { padding: calc(1.25rem * var(--ui-scale)); }
[data-fontsize="medium"] .sidebar-label { font-size: 12px; }
[data-fontsize="medium"] .text-xs { font-size: 0.85rem; }
[data-fontsize="medium"] .text-\\[10px\\] { font-size: 12px; }
[data-fontsize="medium"] .text-\\[11px\\] { font-size: 13px; }
[data-fontsize="medium"] .text-\\[9px\\] { font-size: 11px; }
/* ═══ GLOBAL SCROLLBAR: ACCENT GLOW ═══ */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); }
::-webkit-scrollbar-thumb:active { background: color-mix(in srgb, var(--accent) 80%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

.ticker-scroll::-webkit-scrollbar { height: 3px; }
.ticker-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.glass-panel { background: var(--bg-panel); backdrop-filter: blur(var(--glass-blur, 10px)); -webkit-backdrop-filter: blur(var(--glass-blur, 10px)); border: 1px solid var(--border); border-radius: var(--radius-lg, 12px); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.glass-panel:hover { border-color: var(--panel-glow-border, var(--border-strong)); box-shadow: var(--panel-glow, 0 2px 8px rgba(0,0,0,0.15)); }
.active-nav { background: var(--accent-bg); color: var(--accent-light); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   GLOBAL INTERACTIVITY BASELINE
   ═══════════════════════════════════════════════════ */
button, [role="button"] { cursor: pointer; transition: filter 150ms ease, transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
button:hover { filter: brightness(1.15); }
button:active { filter: brightness(0.9); transform: scale(0.97); }
input, select, textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input:focus, select:focus, textarea:focus {
    border-color: var(--accent-border) !important;
    box-shadow: 0 0 0 2px var(--accent-bg);
    outline: none;
}
select { cursor: pointer; }
select:hover { border-color: var(--text-muted) !important; }

/* U5: Notification bell — glow + blink when visible (has unread) */
#notif-bell-btn { transition: color 0.2s ease; }
#notif-bell-btn:not(.hidden) svg {
    animation: bellGlow 2s ease-in-out infinite, bellRing 0.6s ease 0s 1;
    filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));
}
#notif-bell-btn:hover svg { animation: bellRing 0.6s ease; }
@keyframes bellRing {
    0% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}
@keyframes bellGlow {
    0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 3px rgba(251,191,36,0.3)); }
    50% { opacity: 1; filter: drop-shadow(0 0 8px rgba(251,191,36,0.6)); }
}

/* U1: Save/star button pulse on signal cards */
@keyframes savePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.save-btn-pulse { animation: savePulse 0.4s ease; }

/* U4: Customize button subtle attention pulse */
@keyframes customizePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 52,211,153), 0); }
    50% { opacity: 0.85; box-shadow: 0 0 8px 2px rgba(var(--accent-rgb, 52,211,153), 0.2); }
}
.customize-pulse { animation: customizePulse 2.5s ease-in-out 3; }

/* User chat bubble */
.agent-bubble-user {
    position: relative;
    box-shadow: 0 2px 8px rgba(59,130,246,0.08);
}

/* F3: Agent fullscreen mode — Claude/ChatGPT-like layout */
#agent-panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.agent-fullscreen {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    border-radius: 0 !important;
    pointer-events: auto;
    isolation: isolate;
}
.agent-fullscreen * {
    pointer-events: auto;
}
.agent-fullscreen > .agent-fs-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
}
.agent-fullscreen > .agent-fs-wrapper > [data-agent-inner] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
    border-radius: 0;
    border: none;
    background: rgba(8, 8, 26, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.agent-fullscreen .agent-fs-sidebar {
    animation: slideInLeft 0.25s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
@keyframes slideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
/* Arcane-style gradient bar at top of fullscreen agent */
.agent-fullscreen::before {
    content: '';
    display: var(--fs-grad-display, block);
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 10;
    background: linear-gradient(90deg, var(--accent), var(--accent-light, var(--accent)), var(--accent));
    background-size: 300% 100%;
    animation: agentBarShift 6s ease infinite;
    opacity: 0.8;
}
@keyframes agentBarShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.agent-fullscreen #agent-body {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.agent-fullscreen #agent-messages {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    height: auto !important;
    overflow-y: auto !important;
    padding: 32px 28px;
}
/* Larger text in fullscreen — uses CSS vars for customizer */
.agent-fullscreen .agent-bubble-ai,
.agent-fullscreen .agent-bubble-user {
    max-width: 90%;
    font-size: var(--fs-font-size, 15px) !important;
    line-height: var(--fs-line-height, 1.65) !important;
    padding: var(--fs-bubble-padding, 14px 18px) !important;
    border-radius: var(--fs-bubble-radius, 16px) !important;
}
.agent-fullscreen #agent-input {
    font-size: var(--fs-font-size, 15px) !important;
    padding: 14px 18px !important;
    min-height: var(--fs-input-height, 52px);
    border-radius: var(--fs-bubble-radius, 16px) !important;
}
.agent-fullscreen #agent-send-btn,
.agent-fullscreen #agent-upload-btn,
.agent-fullscreen #rp-director-btn,
.agent-fullscreen #agent-mic-btn {
    width: var(--fs-send-size, 44px) !important;
    height: var(--fs-send-size, 44px) !important;
    border-radius: 14px !important;
}
.agent-fullscreen #agent-upload-btn svg,
.agent-fullscreen #rp-director-btn svg,
.agent-fullscreen #agent-mic-btn svg {
    width: calc(var(--fs-send-size, 44px) * 0.4) !important;
    height: calc(var(--fs-send-size, 44px) * 0.4) !important;
}
.agent-fullscreen #agent-welcome .text-sm { font-size: calc(var(--fs-font-size, 15px) + 3px) !important; }
.agent-fullscreen #agent-welcome .text-\\[11px\\] { font-size: calc(var(--fs-font-size, 15px) - 2px) !important; }
.agent-fullscreen #agent-welcome .w-12 { width: 56px !important; height: 56px !important; }
.agent-fullscreen .agent-chips button { font-size: calc(var(--fs-font-size, 15px) - 3px) !important; padding: 8px 14px !important; }
/* Hide compact sidebar toggle in fullscreen — fullscreen has its own sidebar */
.agent-fullscreen #agent-sidebar-btn { display: none !important; }
.agent-fullscreen .agent-option-btn { font-size: calc(var(--fs-font-size, 15px) - 2px) !important; padding: 10px 14px !important; }
/* Global UI scale for fullscreen — applied to sidebar + chat individually, not customizer */
.agent-fullscreen .agent-fs-sidebar {
    zoom: var(--fs-ui-scale, 1);
    font-size: 13px;
}
.agent-fullscreen > .agent-fs-wrapper > [data-agent-inner] {
    zoom: var(--fs-ui-scale, 1);
}
/* Fullscreen customizer styles */
.fs-cust-group { }
.fs-cust-label { display:block; font-size:11px; color:var(--text-muted); margin-bottom:4px; margin-top:8px; }
.fs-cust-label:first-child { margin-top:0; }
.fs-cust-row { display:flex; align-items:center; gap:8px; }
.fs-cust-slider {
    flex:1; height:4px; -webkit-appearance:none; appearance:none; border-radius:2px;
    background:rgba(255,255,255,0.1); outline:none; cursor:pointer;
}
.fs-cust-slider::-webkit-slider-thumb {
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
    background:var(--accent,#34d399); border:2px solid rgba(0,0,0,0.3);
    box-shadow:0 0 6px rgba(var(--accent-rgb,52,211,153),0.3); cursor:pointer;
}
.fs-cust-slider::-moz-range-thumb {
    width:14px; height:14px; border-radius:50%;
    background:var(--accent,#34d399); border:2px solid rgba(0,0,0,0.3); cursor:pointer;
}
.fs-cust-val { font-size:10px; font-family:monospace; color:var(--text-muted); min-width:40px; text-align:right; }
.agent-fs-customizer::-webkit-scrollbar { width:3px; }
.agent-fs-customizer::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--accent) 30%, transparent); }
/* Tooltips inside customizer — use title fallback via JS-positioned tooltip */
.agent-fs-customizer .strat-tip { cursor: default; position: relative; }
.agent-fs-customizer .strat-tip::after { display: none !important; }

/* Hide the compact header buttons in fullscreen (sidebar replaces them) */
.agent-fullscreen #agent-conv-tabs { display: none !important; }
/* Hide sidebar and main content behind fullscreen agent */
body:has(.agent-fullscreen) #sidebar,
body:has(.agent-fullscreen) > .flex > main {
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s;
}
/* Sidebar scrollbar styling */
.agent-fs-sidebar::-webkit-scrollbar { width: 3px; }
.agent-fs-sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── Agent option buttons: touch-friendly ── */
.agent-option-btn {
    min-height: 44px;
}
.agent-options {
    max-width: 100%;
}
/* ── Agent suggestion chips: prevent overflow ── */
.agent-chips {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.agent-chips::-webkit-scrollbar { display: none; }
/* ── Conversation tabs: scroll, no wrap ── */
#agent-conv-tabs {
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#agent-conv-tabs::-webkit-scrollbar { display: none; }

/* ── Agent Compact Sidebar ── */
.agent-compact-sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 180px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel-solid);
    border-right: 1px solid var(--border-strong);
    overflow: hidden;
    font-size: 12px;
}
.agent-compact-sidebar .acs-section { padding: 8px 10px; }
.agent-compact-sidebar .acs-flex-1 { flex: 1; overflow-y: auto; }
.agent-compact-sidebar .acs-heading {
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: 6px; padding: 0 2px;
}
.agent-compact-sidebar .acs-divider { height: 1px; margin: 0 10px; background: var(--border-strong); }
.agent-compact-sidebar .acs-persona-list { display: flex; flex-wrap: wrap; gap: 4px; }
.agent-compact-sidebar .acs-persona-btn {
    font-size: 10px; font-weight: 500; padding: 4px 8px; border-radius: 6px;
    border: 1px solid transparent; background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.agent-compact-sidebar .acs-persona-btn:hover { background: rgba(255,255,255,0.04); color: var(--text-heading); }
.agent-compact-sidebar .acs-persona-active { font-weight: 600; }
.agent-compact-sidebar .acs-conv-list { display: flex; flex-direction: column; gap: 2px; }
.agent-compact-sidebar .acs-conv-item {
    display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px;
    cursor: pointer; transition: background 0.15s; color: var(--text-muted);
}
.agent-compact-sidebar .acs-conv-item:hover { background: rgba(255,255,255,0.04); }
.agent-compact-sidebar .acs-conv-item.acs-active {
    background: rgba(255,255,255,0.06); color: var(--text-heading);
}
.agent-compact-sidebar .acs-conv-title {
    flex: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-compact-sidebar .acs-conv-del {
    opacity: 0; font-size: 14px; color: var(--text-muted); cursor: pointer; padding: 0 2px;
    transition: opacity 0.15s, color 0.15s;
}
.agent-compact-sidebar .acs-conv-item:hover .acs-conv-del { opacity: 0.6; }
.agent-compact-sidebar .acs-conv-del:hover { color: #f87171 !important; opacity: 1 !important; }
.agent-compact-sidebar .acs-actions {
    display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px;
}
.agent-compact-sidebar .acs-actions button {
    width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent;
    color: var(--text-muted); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.agent-compact-sidebar .acs-actions button:hover { background: rgba(255,255,255,0.06); color: var(--text-heading); }
/* Push main content right when compact sidebar is open */
#agent-body:has(.agent-compact-sidebar) > :not(.agent-compact-sidebar) {
    margin-left: 180px;
}

/* ── fadeIn animation ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Persona Guide (V3 Grid) ── */
.pg-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.18s ease; }
.pg-container { position:relative;width:1060px;max-width:96vw;max-height:92vh;background:var(--bg,#08081a);border-radius:16px;overflow:hidden;border:1px solid rgba(52,211,153,0.12);box-shadow:0 32px 80px rgba(0,0,0,0.8),0 0 0 1px rgba(52,211,153,0.08);display:flex;flex-direction:column; }
.pg-stars { position:absolute;inset:0;z-index:0;border-radius:14px; }
.pg-container > *:not(.pg-stars) { position:relative;z-index:1; }
.pg-titlebar { display:flex;align-items:center;padding:14px 22px;gap:12px;background:rgba(8,8,26,0.7);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05);box-shadow:inset 0 3px 0 0 var(--accent,#34d399),inset 0 3px 20px -6px rgba(52,211,153,0.15);flex-shrink:0;z-index:2; }
.pg-title { font-size:17px;font-weight:700;color:#fff;filter:drop-shadow(0 0 8px rgba(52,211,153,0.2)); }
.pg-subtitle { font-size:12.5px;color:var(--text-muted,#64748b); }
.pg-close { margin-left:auto;background:none;border:none;color:var(--text-muted,#64748b);font-size:18px;cursor:pointer;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all 0.15s; }
.pg-close:hover { background:rgba(255,100,100,0.12);color:#ff6b6b; }
.pg-body { flex:1;overflow-y:auto;padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px; }
.pg-body::-webkit-scrollbar { width:6px; }
.pg-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08);border-radius:3px; }
.pg-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.pg-card { padding:18px 20px;border-radius:14px;background:rgba(255,255,255,0.015);backdrop-filter:blur(8px);border:1px solid var(--brd,rgba(255,255,255,0.06));transition:all 0.25s;display:flex;flex-direction:column;gap:10px;cursor:pointer; }
.pg-card:hover { background:rgba(255,255,255,0.035);border-color:var(--card-color);box-shadow:0 0 0 1px var(--card-color),0 0 25px rgba(var(--card-rgb),0.06);transform:translateY(-1px); }
.pg-card.full { grid-column:1/-1; }
.pg-card-top { display:flex;align-items:center;gap:10px; }
.pg-card-icon { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.pg-card-icon svg { width:22px;height:22px; }
.pg-card-meta { flex:1; }
.pg-card-title { font-size:16px;font-weight:700; }
.pg-card-sub { font-size:12px;color:var(--text-muted,#64748b);margin-top:2px; }
.pg-card-badge { font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.7px;padding:3px 9px;border-radius:5px;align-self:flex-start; }
.pg-card-desc { font-size:13px;color:var(--text-secondary,#94a3b8);line-height:1.65; }
.pg-card-desc b { font-weight:600; }
.pg-card-row { display:flex;flex-wrap:wrap;gap:4px; }
.pg-pill { font-size:11px;padding:4px 10px;border-radius:7px;font-weight:500;cursor:default;transition:all 0.18s; }
.pg-pill:hover { filter:brightness(1.3);color:#fff; }
.pg-pill:active { animation:pgPillBounce 0.35s ease; }
.pg-ex { font-size:11px;padding:4px 10px;border-radius:7px;background:rgba(255,255,255,0.025);color:var(--text-muted,#64748b);border:1px solid rgba(255,255,255,0.04);font-style:italic;cursor:pointer;transition:all 0.18s; }
.pg-ex:hover { background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.2); }
.pg-ex:active { animation:pgPillBounce 0.35s ease; }
@keyframes pgPillBounce { 0%{transform:scale(1)} 30%{transform:scale(1.18)} 60%{transform:scale(0.95)} 100%{transform:scale(1)} }
.pg-highlight { grid-column:1/-1;padding:16px 20px;border-radius:14px;background:linear-gradient(135deg,rgba(244,114,182,0.04),rgba(251,146,60,0.03));border:1px solid rgba(244,114,182,0.12);display:flex;align-items:center;gap:16px; }
.pg-hl-icon { font-size:34px;flex-shrink:0;filter:drop-shadow(0 0 10px rgba(244,114,182,0.3)); }
.pg-hl-title { font-size:15px;font-weight:700;color:#f472b6;display:flex;align-items:center;gap:6px; }
.pg-hl-new { font-size:9.5px;padding:3px 8px;border-radius:5px;background:rgba(244,114,182,0.15);color:#f472b6;font-weight:700;text-transform:uppercase;letter-spacing:0.5px; }
.pg-hl-desc { font-size:12.5px;color:var(--text-secondary,#94a3b8);line-height:1.6;margin-top:4px; }
.pg-hl-desc em { font-style:normal;color:#f472b6;font-weight:600; }
.pg-hl-examples { display:flex;gap:5px;margin-top:6px;flex-wrap:wrap; }
.pg-hl-ex { font-size:11px;padding:4px 10px;border-radius:7px;background:rgba(244,114,182,0.06);color:#f472b6;border:1px solid rgba(244,114,182,0.12);font-style:italic;cursor:pointer;transition:all 0.15s; }
.pg-hl-ex:hover { background:rgba(244,114,182,0.2);color:#fff; }
.pg-hl-ex:active { animation:pgPillBounce 0.35s ease; }
.pg-footer { padding:10px 20px;font-size:12px;color:var(--text-muted,#64748b);text-align:center;background:rgba(8,8,26,0.5);backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,0.04);flex-shrink:0; }
.pg-footer b { color:var(--accent,#34d399); }
@media (max-width: 640px) {
    .pg-row { grid-template-columns:1fr; }
    .pg-container { max-width:100vw;border-radius:10px; }
    .pg-highlight { flex-direction:column;text-align:center; }
}

/* ── Context Editor Panel ── */
#context-editor-panel {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;
    pointer-events: none;
}
#context-editor-panel:not(.hidden) { pointer-events: auto; }
.ctx-editor-backdrop {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}
.ctx-editor-sidebar {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 90vw);
    background: var(--bg-panel-solid, #0e1026);
    border-left: 1px solid var(--border-strong);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
}
.ctx-slide-in .ctx-editor-sidebar { transform: translateX(0); }
.ctx-editor-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-strong);
    flex-shrink: 0;
}
.ctx-editor-body {
    flex: 1; display: flex; flex-direction: column; padding: 12px 16px; gap: 10px; min-height: 0;
}
.ctx-editor-info { flex-shrink: 0; }
.ctx-editor-textarea {
    flex: 1; resize: none; font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.6;
    padding: 12px; border-radius: 8px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong);
    color: var(--text-primary); outline: none; min-height: 200px;
}
.ctx-editor-textarea:focus {
    border-color: var(--accent); box-shadow: 0 0 0 2px rgba(16,185,129,0.1);
}
.ctx-editor-actions {
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; flex-wrap: wrap; gap: 8px;
}
.ctx-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 500;
    cursor: pointer; transition: all 0.15s; border: 1px solid transparent;
}
.ctx-btn-save { background: var(--accent); color: white; }
.ctx-btn-save:hover { opacity: 0.85; }
.ctx-btn-reset { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.ctx-btn-reset:hover { color: #f87171; border-color: rgba(239,68,68,0.3); }
@media (max-width: 768px) {
    .ctx-editor-sidebar { width: 100vw; }
    /* Workspace stats: 2 columns on mobile */
    #ws-stats-content .grid { grid-template-columns: repeat(2, 1fr) !important; }
    /* Persona picker dropdown: full width */
    .persona-picker-dropdown { min-width: 200px; }
}

/* ── YouTube Channel Cards ── */
.yt-channel-card {
    padding: 10px 12px; border-radius: 8px; transition: background 0.15s;
    border: 1px solid var(--border-strong); background: rgba(255,255,255,0.02);
}
.yt-channel-card:hover { background: var(--bg-hover); }

/* ── YouTube Channel Action Buttons ── */
.yt-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600; border: 1px solid var(--border-strong);
    background: transparent; transition: all 0.15s; white-space: nowrap;
}
.yt-action-process { color: var(--accent-light, var(--accent)); }
.yt-action-process:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.yt-action-videos { color: var(--text-secondary); }
.yt-action-videos:hover { color: var(--accent-light, var(--accent)); background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.yt-action-extract { color: #a78bfa; }
.yt-action-extract:hover { background: rgba(167,139,250,0.1); border-color: #a78bfa; }
.yt-action-export { color: #34d399; }
.yt-action-export:hover { background: rgba(52,211,153,0.1); border-color: #34d399; }
.yt-action-remove { color: var(--text-muted); }
.yt-action-remove:hover { color: #f87171; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }

/* ── YouTube Language Toggle ── */
.yt-lang-toggle {
    display: inline-flex; border: 1px solid var(--border-strong);
    border-radius: 6px; overflow: hidden;
}
.yt-lang-btn {
    padding: 3px 10px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    font-size: 10px; white-space: nowrap; line-height: 1.4;
}
.yt-lang-btn.active {
    background: rgba(192,132,252,0.15); color: #c084fc;
}
.yt-lang-btn:hover:not(.active) {
    background: rgba(255,255,255,0.04); color: var(--text-secondary);
}
@media (max-width: 768px) {
    .yt-lang-btn { padding: 5px 14px; font-size: 11px; }
}

/* ── YouTube Insights Viewer (Arcane Modal) ── */
.yi-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn 0.18s ease; }
.yi-container { position:relative;width:1060px;max-width:96vw;max-height:92vh;background:var(--bg-primary,#08081a);border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb, var(--accent,#c084fc) 15%, transparent);box-shadow:0 32px 80px rgba(0,0,0,0.8),0 0 0 1px color-mix(in srgb, var(--accent,#c084fc) 10%, transparent);display:flex;flex-direction:column; }
.yi-stars { position:absolute;inset:0;z-index:0;border-radius:14px; }
.yi-container > *:not(.yi-stars) { position:relative;z-index:1; }
.yi-titlebar { display:flex;align-items:center;padding:14px 22px;gap:12px;background:var(--bg-panel,rgba(8,8,26,0.7));backdrop-filter:blur(16px);border-bottom:1px solid var(--border,rgba(255,255,255,0.05));box-shadow:inset 0 3px 0 0 var(--accent,#c084fc),inset 0 3px 20px -6px color-mix(in srgb, var(--accent,#c084fc) 20%, transparent);flex-shrink:0;z-index:2; }
.yi-title { font-size:17px;font-weight:700;color:var(--text-primary,#fff);filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent,#c084fc) 25%, transparent)); }
.yi-subtitle { font-size:12.5px;color:var(--text-muted,#64748b); }
.yi-close { margin-left:auto;background:none;border:none;color:var(--text-muted,#64748b);font-size:18px;cursor:pointer;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all 0.15s; }
.yi-close:hover { background:rgba(255,100,100,0.12);color:#ff6b6b; }
.yi-header-btn { background:none;border:1px solid color-mix(in srgb, var(--accent,#c084fc) 18%, transparent);color:var(--text-muted,#64748b);font-size:11px;padding:5px 12px;border-radius:7px;cursor:pointer;transition:all 0.15s;display:inline-flex;align-items:center;gap:5px; }
.yi-header-btn:hover { background:color-mix(in srgb, var(--accent,#c084fc) 10%, transparent);color:var(--accent-light,#c084fc);border-color:color-mix(in srgb, var(--accent,#c084fc) 35%, transparent); }
.yi-tabs { display:flex;align-items:center;gap:6px;padding:10px 22px;border-bottom:1px solid var(--border,rgba(255,255,255,0.05));overflow-x:auto;scrollbar-width:none;flex-shrink:0;background:color-mix(in srgb, var(--bg-panel,#08081a) 60%, transparent); }
.yi-tabs::-webkit-scrollbar { display:none; }
.yi-tab { display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s;white-space:nowrap;border:1px solid var(--border-strong,rgba(255,255,255,0.06));color:var(--text-muted,#64748b);background:transparent; }
.yi-tab:hover { background:var(--bg-hover,rgba(255,255,255,0.03));border-color:color-mix(in srgb, var(--accent,#c084fc) 25%, transparent); }
.yi-tab-active { color:var(--accent-light,#c084fc);background:color-mix(in srgb, var(--accent,#c084fc) 12%, transparent);border-color:color-mix(in srgb, var(--accent,#c084fc) 35%, transparent); }
.yi-tab-dim { opacity:0.4; }
.yi-tab-dim:hover { opacity:0.7; }
.yi-body { flex:1;overflow-y:auto;padding:22px 26px 26px;min-height:0; }
.yi-body::-webkit-scrollbar { width:6px; }
.yi-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.08);border-radius:3px; }
.yi-card { padding:18px 20px;border-radius:14px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 40%, transparent);backdrop-filter:blur(8px);border:1px solid var(--border,rgba(255,255,255,0.06));transition:all 0.25s;margin-bottom:12px; }
.yi-card:hover { background:color-mix(in srgb, var(--bg-secondary,#080d18) 60%, transparent);border-color:color-mix(in srgb, var(--accent,#c084fc) 18%, transparent); }
.yi-summary-text { font-size:15px;line-height:1.85;color:var(--text-primary,#e2e8f0);margin-bottom:16px; }
.yi-takeaways-label { font-size:13px;font-weight:600;color:var(--accent-light,#c084fc);margin-bottom:10px;display:flex;align-items:center;gap:6px; }
.yi-takeaway { display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:10px;background:color-mix(in srgb, var(--accent,#c084fc) 4%, transparent);border:1px solid color-mix(in srgb, var(--accent,#c084fc) 10%, transparent);margin-bottom:8px; }
.yi-takeaway-num { width:24px;height:24px;border-radius:6px;background:color-mix(in srgb, var(--accent,#c084fc) 15%, transparent);color:var(--accent-light,#c084fc);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.yi-takeaway-text { font-size:14px;line-height:1.7;color:var(--text-primary,#e2e8f0); }
.yi-transcript { font-size:15px;line-height:1.9;color:var(--text-primary,#e2e8f0);padding:20px 22px;border-radius:14px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 40%, transparent);border:1px solid var(--border,rgba(255,255,255,0.06)); }
.yi-transcript p { margin-bottom:18px; }
.yi-transcript p:last-child { margin-bottom:0; }
.yi-transcript p:first-child::first-letter { font-size:1.35em;font-weight:600;color:var(--accent-light,#c084fc);line-height:1; }
.yi-transcript em { font-style:italic; }
.yi-transcript strong { font-weight:600;color:var(--text-heading,#e2e8f0); }
.yi-note { font-size:12px;color:var(--text-muted,#64748b);padding:8px 14px;border-radius:8px;background:color-mix(in srgb, var(--accent,#c084fc) 5%, transparent);border:1px solid color-mix(in srgb, var(--accent,#c084fc) 10%, transparent);margin-bottom:14px; }
.yi-vocab-card { padding:18px 20px;border-radius:12px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 40%, transparent);border:1px solid var(--border,rgba(255,255,255,0.06));transition:all 0.2s; }
.yi-vocab-card:hover { background:color-mix(in srgb, var(--bg-secondary,#080d18) 60%, transparent);border-color:color-mix(in srgb, var(--accent,#c084fc) 18%, transparent); }
.yi-vocab-term { font-size:18px;font-weight:700;color:var(--accent-light,#c084fc);margin-bottom:6px; }
.yi-vocab-def { font-size:14px;line-height:1.6;color:var(--text-primary,#e2e8f0);margin-bottom:8px; }
.yi-vocab-ctx { font-size:13px;line-height:1.6;color:var(--text-secondary,#94a3b8);font-style:italic;padding:8px 12px;border-radius:6px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 30%, transparent);border-left:2px solid color-mix(in srgb, var(--accent,#c084fc) 25%, transparent); }
.yi-narration { padding:18px 20px;border-radius:12px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 40%, transparent);border:1px solid var(--border,rgba(255,255,255,0.06));margin-bottom:12px;transition:all 0.2s; }
.yi-narration:hover { background:color-mix(in srgb, var(--bg-secondary,#080d18) 60%, transparent); }
.yi-narration-text { font-size:15px;line-height:1.8;color:var(--text-primary,#e2e8f0);margin-bottom:8px; }
.yi-badge { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;padding:3px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:4px; }
.yi-badge-verified { background:rgba(52,211,153,0.1);color:#34d399;border:1px solid rgba(52,211,153,0.2); }
.yi-badge-unverified { background:rgba(251,191,36,0.1);color:#fbbf24;border:1px solid rgba(251,191,36,0.2); }
.yi-badge-needs-check { background:rgba(239,68,68,0.1);color:#f87171;border:1px solid rgba(239,68,68,0.2); }
.yi-field { margin-bottom:8px; }
.yi-field-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted,#64748b);margin-bottom:3px; }
.yi-field-value { font-size:14px;line-height:1.7;color:var(--text-primary,#e2e8f0); }
.yi-section-title { font-size:15px;font-weight:700;color:var(--text-primary,#fff);margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.yi-loading { display:flex;justify-content:center;align-items:center;padding:60px 0; }
.yi-empty { text-align:center;padding:60px 20px;color:var(--text-muted,#64748b); }
.yi-empty-icon { width:48px;height:48px;margin:0 auto 12px;opacity:0.3; }
.yi-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px; }
/* Lens size modes — Small */
.yi-size-sm .yi-summary-text { font-size:13px;line-height:1.7; }
.yi-size-sm .yi-takeaway-text { font-size:12px; }
.yi-size-sm .yi-takeaways-label { font-size:11px; }
.yi-size-sm .yi-vocab-card { padding:12px 14px; }
.yi-size-sm .yi-vocab-term { font-size:14px;margin-bottom:3px; }
.yi-size-sm .yi-vocab-def { font-size:11px; }
.yi-size-sm .yi-vocab-ctx { font-size:10px;padding:5px 8px; }
.yi-size-sm .yi-narration { padding:12px 14px; }
.yi-size-sm .yi-narration-text { font-size:12px;line-height:1.6; }
.yi-size-sm .yi-transcript { font-size:12px;line-height:1.7;padding:14px 16px; }
.yi-size-sm .yi-field-value { font-size:12px; }
.yi-size-sm .yi-field-label { font-size:9px; }
.yi-size-sm .yi-section-title { font-size:13px; }
.yi-size-sm .yi-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px; }
.yi-size-sm .yi-badge { font-size:9px;padding:2px 8px; }
.yi-size-sm .yi-card { padding:14px 16px; }
.yi-size-sm .yi-takeaway { padding:8px 12px; }
/* Lens size modes — Large */
.yi-size-lg .yi-summary-text { font-size:18px;line-height:2.1; }
.yi-size-lg .yi-takeaway-text { font-size:17px;line-height:1.8; }
.yi-size-lg .yi-takeaways-label { font-size:15px; }
.yi-size-lg .yi-vocab-card { padding:24px 28px; }
.yi-size-lg .yi-vocab-term { font-size:24px;margin-bottom:10px; }
.yi-size-lg .yi-vocab-def { font-size:18px;line-height:1.7; }
.yi-size-lg .yi-vocab-ctx { font-size:16px;line-height:1.7;padding:12px 16px; }
.yi-size-lg .yi-narration { padding:24px 28px; }
.yi-size-lg .yi-narration-text { font-size:18px;line-height:1.9; }
.yi-size-lg .yi-transcript { font-size:18px;line-height:2.1;padding:26px 30px; }
.yi-size-lg .yi-field-value { font-size:17px;line-height:1.8; }
.yi-size-lg .yi-field-label { font-size:13px; }
.yi-size-lg .yi-section-title { font-size:18px; }
.yi-size-lg .yi-grid { grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px; }
.yi-size-lg .yi-badge { font-size:12px;padding:4px 14px; }
.yi-size-lg .yi-card { padding:22px 26px; }
.yi-size-lg .yi-takeaway { padding:14px 18px; }
.yi-size-lg .yi-takeaway-num { width:28px;height:28px;font-size:14px; }
.yi-size-lg .yi-note { font-size:14px;padding:10px 16px; }
.yi-lang-area { display:flex;align-items:center;gap:8px; }
/* Guide page */
.yi-guide-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:20px; }
.yi-guide-card { padding:18px 20px;border-radius:14px;background:color-mix(in srgb, var(--bg-secondary,#080d18) 40%, transparent);border:1px solid var(--border,rgba(255,255,255,0.06));transition:all 0.25s;display:flex;flex-direction:column;gap:10px;cursor:default; }
.yi-guide-card:hover { background:color-mix(in srgb, var(--bg-secondary,#080d18) 60%, transparent);border-color:color-mix(in srgb, var(--accent,#c084fc) 25%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent,#c084fc) 20%, transparent),0 0 25px color-mix(in srgb, var(--accent,#c084fc) 8%, transparent); }
.yi-guide-card.full { grid-column:1/-1; }
.yi-guide-icon { width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.yi-guide-icon svg { width:22px;height:22px; }
.yi-guide-title { font-size:16px;font-weight:700; }
.yi-guide-sub { font-size:12px;color:var(--text-muted,#64748b);margin-top:2px; }
.yi-guide-desc { font-size:13px;color:var(--text-secondary,#94a3b8);line-height:1.65; }
.yi-guide-ex { font-size:11px;padding:4px 10px;border-radius:7px;font-style:italic;cursor:default;transition:all 0.18s;display:inline-block;margin:2px; }
@media (max-width: 640px) {
    .yi-container { max-width:100vw;border-radius:10px; }
    .yi-guide-grid { grid-template-columns:1fr; }
    .yi-grid { grid-template-columns:1fr; }
}

/* ── File Browser ── */
.fb-tool-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 6px; border-radius: 4px; cursor: pointer;
    color: var(--text-muted); border: 1px solid var(--border-strong);
    background: transparent; transition: all 0.15s; font-size: 10px;
}
.fb-tool-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(16,185,129,0.06); }

/* ── File Explorer (Ubuntu-style modal) ── */
/* ── File Explorer: Nautilus-style ── */
.fe-container {
    background: var(--bg-panel-solid, #0e1026);
    border-radius: 10px; width: 950px; height: 80vh; min-width: 500px; min-height: 300px;
    display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--border-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
}
/* Title bar */
.fe-titlebar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; gap: 8px; cursor: default; user-select: none;
    background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--border-strong);
}
.fe-titlebar-left {
    display: flex; align-items: center; gap: 6px; min-width: 100px; flex-shrink: 0;
}
.fe-titlebar-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fe-titlebar-center {
    display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0;
    justify-content: center;
}
.fe-titlebar-right {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    justify-content: flex-end;
}
.fe-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px; border-radius: 6px; cursor: pointer;
    color: var(--text-muted); border: none; background: transparent; transition: all 0.15s;
}
.fe-nav-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.fe-wnd-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    border: none; transition: all 0.15s;
}
.fe-wnd-close { color: var(--text-muted); background: rgba(255,255,255,0.06); }
.fe-wnd-close:hover { color: #fff; background: #e11d48; }
/* Breadcrumb */
.fe-breadcrumb-bar {
    display: flex; align-items: center; gap: 2px; padding: 3px 10px;
    background: rgba(0,0,0,0.2); border-radius: 6px; min-width: 0; overflow-x: auto;
    scrollbar-width: none; max-width: 500px;
}
.fe-breadcrumb-bar::-webkit-scrollbar { display: none; }
.fe-crumb {
    background: none; border: none; color: var(--text-secondary); font-size: 13px;
    cursor: pointer; padding: 3px 6px; border-radius: 4px; transition: all 0.15s;
    white-space: nowrap;
}
.fe-crumb:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.fe-crumb b { color: var(--text-primary); font-weight: 600; }
.fe-crumb-icon { font-size: 13px; }
.fe-crumb-sep { color: var(--text-faint); font-size: 13px; margin: 0 2px; }
/* Body: sidebar + main */
.fe-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
/* Sidebar */
.fe-sidebar {
    width: 18%; min-width: 140px; max-width: 220px; flex-shrink: 0; overflow-y: auto;
    background: rgba(0,0,0,0.15); border-right: 1px solid var(--border-strong);
    padding: 8px 0;
}
.fe-sidebar-section { padding: 0 6px; }
.fe-sidebar-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--text-secondary); border: none;
    background: none; transition: all 0.12s; text-align: left;
}
.fe-sidebar-item:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.fe-sidebar-active {
    color: var(--text-primary) !important; background: rgba(255,255,255,0.08) !important;
    font-weight: 600;
}
.fe-sidebar-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
/* Main content */
.fe-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Column header */
.fe-col-header {
    display: flex; align-items: center; padding: 7px 14px; gap: 10px;
    border-bottom: 1px solid var(--border-strong);
    font-size: 12px; color: var(--text-faint); font-weight: 500;
    background: rgba(255,255,255,0.015);
}
.fe-col-name { flex: 1; padding-left: 42px; }
.fe-col-size { width: 70px; text-align: right; }
.fe-col-date { width: 110px; text-align: right; }
.fe-col-actions { width: 28px; }
/* File rows */
.fe-row {
    display: flex; align-items: center; padding: 8px 14px; gap: 10px;
    cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.12s;
}
.fe-row:hover { background: rgba(255,255,255,0.04); }
.fe-icon { width: 36px; text-align: center; flex-shrink: 0; }
.fe-name { flex: 1; color: var(--text-primary); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-size { color: var(--text-faint); font-size: 12px; width: 70px; text-align: right; flex-shrink: 0; }
.fe-date { color: var(--text-faint); font-size: 12px; width: 110px; text-align: right; flex-shrink: 0; }
.fe-del-btn {
    opacity: 0; padding: 4px; border-radius: 4px; cursor: pointer;
    color: var(--text-muted); border: none; background: none; transition: all 0.15s;
}
.fe-row:hover .fe-del-btn { opacity: 1; }
.fe-del-btn:hover { color: #f87171; background: rgba(239,68,68,0.1); }
/* Action bar */
.fe-action-bar {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    border-top: 1px solid var(--border-strong);
}
.fe-action-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
    border-radius: 6px; font-size: 12px; cursor: pointer;
    color: var(--text-muted); border: 1px solid var(--border-strong);
    background: transparent; transition: all 0.15s;
}
.fe-action-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Editor */
.fe-textarea {
    flex: 1; resize: none; font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 13px; line-height: 1.6; padding: 16px 20px;
    background: transparent; border: none;
    color: var(--text-primary); outline: none; min-height: 0;
    box-sizing: border-box;
}
.fe-textarea:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.2);
}
.fe-preview {
    flex: 1; overflow-y: auto; padding: 14px; font-size: 13px; line-height: 1.7;
    color: var(--text-primary);
}
.fe-preview h1, .fe-preview h2, .fe-preview h3 { color: var(--text-heading); margin: 12px 0 6px; }
.fe-preview h1 { font-size: 20px; } .fe-preview h2 { font-size: 16px; } .fe-preview h3 { font-size: 14px; }
.fe-preview strong { color: var(--text-heading); }
.fe-preview li { margin-left: 16px; }
/* Editor toolbar — matches column header row */
.fe-editor-toolbar {
    display: flex; align-items: center; padding: 7px 14px; gap: 4px;
    border-bottom: 1px solid var(--border-strong);
    background: rgba(255,255,255,0.015);
}
.fe-dirty-badge {
    font-size: 14px; color: #fbbf24; line-height: 1; margin: 0 2px;
    animation: fe-pulse 2s ease-in-out infinite;
}
@keyframes fe-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.fe-crumb-file { cursor: default; color: var(--text-primary); }
.fe-save-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
    border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
    color: #10b981; border: 1px solid rgba(16,185,129,0.3);
    background: rgba(16,185,129,0.08); transition: all 0.15s;
}
.fe-save-btn:hover { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.5); }
.fe-toolbar-divider { width: 1px; height: 16px; background: var(--border-strong); margin: 0 2px; }
.fe-fmt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 5px; border-radius: 4px; cursor: pointer;
    color: var(--text-muted); border: none; background: none; transition: all 0.12s;
}
.fe-fmt-btn:hover { color: var(--text-heading); background: rgba(255,255,255,0.06); }
.fe-ai-btn {
    display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px;
    border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; position: relative;
    color: #c084fc; border: 1px solid rgba(192,132,252,0.3);
    background: rgba(192,132,252,0.06); transition: all 0.15s;
}
.fe-ai-btn:hover { background: rgba(192,132,252,0.12); }
.fe-ai-menu {
    position: fixed; z-index: 999999;
    background: var(--bg-panel-solid, #0e1026); border: 1px solid var(--border-strong);
    border-radius: 8px; padding: 4px; min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.fe-ai-menu-item {
    display: block; width: 100%; text-align: left; padding: 6px 10px;
    border-radius: 4px; font-size: 11px; cursor: pointer;
    color: var(--text-secondary); border: none; background: none; transition: all 0.12s;
}
.fe-ai-menu-item:hover { background: rgba(192,132,252,0.1); color: #c084fc; }
/* AI loading overlay */
.fe-ai-loading {
    position: absolute; inset: 0; z-index: 50;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: 8px; gap: 12px;
}
.fe-ai-spinner {
    width: 28px; height: 28px; border: 3px solid rgba(192,132,252,0.2);
    border-top-color: #c084fc; border-radius: 50%;
    animation: feAiSpin 0.7s linear infinite;
}
@keyframes feAiSpin { to { transform: rotate(360deg); } }
.fe-ai-loading-text {
    font-size: 12px; font-weight: 500; color: #c084fc;
}
/* AI edited badge in editor status bar */
.fe-ai-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600;
    background: rgba(192,132,252,0.12); color: #c084fc;
    border: 1px solid rgba(192,132,252,0.25);
}
.fe-ai-undo {
    padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700;
    background: rgba(251,191,36,0.15); color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.3); cursor: pointer;
    transition: all 0.12s;
}
.fe-ai-undo:hover { background: rgba(251,191,36,0.25); }
/* Resize handle */
/* Tooltips — appended to body via JS for guaranteed top layer */
.fe-tooltip {
    position: fixed; z-index: 999999; pointer-events: none;
    padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 500;
    white-space: nowrap; opacity: 0; transition: opacity 0.12s;
    background: #1a1a2e; color: #f1f5f9;
    border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.fe-tooltip.visible { opacity: 1; }

.fe-resize-handle {
    position: absolute; bottom: 0; right: 0; width: 14px; height: 14px;
    cursor: nwse-resize; z-index: 20;
    background: linear-gradient(135deg, transparent 50%, var(--text-faint) 50%, var(--text-faint) 55%, transparent 55%,
        transparent 65%, var(--text-faint) 65%, var(--text-faint) 70%, transparent 70%);
    opacity: 0.25; border-radius: 0 0 10px 0;
}
.fe-resize-handle:hover { opacity: 0.6; }

/* Atmosphere selector (titlebar) */
.fe-atmos-group { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: 10px; padding: 3px; }
.fe-atmos-btn {
    padding: 4px 10px; border-radius: 8px; border: none; background: transparent;
    color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; white-space: nowrap; letter-spacing: 0.3px;
}
.fe-atmos-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.fe-atmos-btn.active { color: var(--accent); background: var(--accent-bg, rgba(52,211,153,0.1)); box-shadow: 0 0 8px var(--accent-bg, rgba(52,211,153,0.1)); }
/* Star canvas */
.fe-stars-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; border-radius: 10px; }
.fe-container[data-fe-atmos="arcane"] .fe-stars-canvas { display: block; }

/* ── Atmosphere: Clean (glassy/frosted like wizard default) ── */
.fe-container[data-fe-atmos="clean"] {
    background: rgba(var(--bg-panel-rgb, 14,16,38), 0.65);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.fe-container[data-fe-atmos="clean"] .fe-titlebar { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); }
.fe-container[data-fe-atmos="clean"] .fe-sidebar { background: rgba(255,255,255,0.02); backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.06); }
.fe-container[data-fe-atmos="clean"] .fe-breadcrumb-bar { background: rgba(0,0,0,0.15); }
.fe-container[data-fe-atmos="clean"] .fe-col-header,
.fe-container[data-fe-atmos="clean"] .fe-editor-toolbar { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
.fe-container[data-fe-atmos="clean"] .fe-row { border-color: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="clean"] .fe-row:hover { background: rgba(255,255,255,0.04); }
.fe-container[data-fe-atmos="clean"] .fe-textarea { background: rgba(0,0,0,0.05); }
.fe-container[data-fe-atmos="clean"] .fe-action-bar { border-color: rgba(255,255,255,0.06); }
/* Noise texture overlay like wizard */
.fe-container[data-fe-atmos="clean"]::after {
    content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none; z-index: 0; border-radius: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fe-container[data-fe-atmos="clean"] > *:not(.fe-resize-handle):not(.fe-stars-canvas) { position: relative; z-index: 1; }
/* Gradient bar at top */
.fe-container[data-fe-atmos="clean"] .fe-titlebar {
    box-shadow: inset 0 3px 0 0 var(--accent), inset 0 3px 12px -6px rgba(255,255,255,0.05);
}

/* ── Atmosphere: Deep (matches wizard exactly) ── */
.fe-container[data-fe-atmos="deep"] { background: #020206; border-color: rgba(255,255,255,0.04); box-shadow: 0 32px 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.04); }
.fe-container[data-fe-atmos="deep"] .fe-titlebar { background: rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="deep"] .fe-sidebar { background: rgba(0,0,0,0.5); backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="deep"] .fe-breadcrumb-bar { background: rgba(0,0,0,0.5); }
.fe-container[data-fe-atmos="deep"] .fe-col-header,
.fe-container[data-fe-atmos="deep"] .fe-editor-toolbar { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="deep"] .fe-row { border-color: rgba(255,255,255,0.015); }
.fe-container[data-fe-atmos="deep"] .fe-row:hover { background: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="deep"] .fe-sidebar-active { background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 1px var(--accent-border, rgba(52,211,153,0.2)), 0 8px 40px rgba(0,0,0,0.5); }
.fe-container[data-fe-atmos="deep"] .fe-textarea { background: rgba(0,0,0,0.2); }
.fe-container[data-fe-atmos="deep"] .fe-action-bar { border-color: rgba(255,255,255,0.03); }
.fe-container[data-fe-atmos="deep"] .fe-save-btn { box-shadow: 0 8px 40px var(--accent-border, rgba(52,211,153,0.2)), 0 0 0 1px var(--accent-border, rgba(52,211,153,0.2)); }

/* ── Atmosphere: Arcane (matches wizard exactly) ── */
.fe-container[data-fe-atmos="arcane"] { background: #08081a; border-color: var(--accent-bg, rgba(52,211,153,0.1)); box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px var(--accent-bg, rgba(52,211,153,0.1)); }
.fe-container[data-fe-atmos="arcane"] .fe-titlebar { background: rgba(8,8,26,0.7); backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.05); }
.fe-container[data-fe-atmos="arcane"] .fe-sidebar { background: rgba(8,8,26,0.7); backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.05); }
.fe-container[data-fe-atmos="arcane"] .fe-breadcrumb-bar { background: rgba(8,8,26,0.6); }
.fe-container[data-fe-atmos="arcane"] .fe-col-header,
.fe-container[data-fe-atmos="arcane"] .fe-editor-toolbar { background: rgba(255,255,255,0.025); backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.04); }
.fe-container[data-fe-atmos="arcane"] .fe-row { border-color: rgba(255,255,255,0.025); }
.fe-container[data-fe-atmos="arcane"] .fe-row:hover { background: rgba(255,255,255,0.03); box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 20px var(--accent-bg, rgba(52,211,153,0.1)); }
.fe-container[data-fe-atmos="arcane"] .fe-sidebar-active { background: rgba(255,255,255,0.06) !important; box-shadow: 0 0 0 1px var(--accent-border, rgba(52,211,153,0.2)), 0 0 30px var(--accent-bg, rgba(52,211,153,0.1)), 0 8px 40px rgba(0,0,0,0.4); }
.fe-container[data-fe-atmos="arcane"] .fe-sidebar-item { backdrop-filter: blur(8px); background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }
.fe-container[data-fe-atmos="arcane"] .fe-textarea { background: rgba(8,8,26,0.3); backdrop-filter: blur(8px); }
.fe-container[data-fe-atmos="arcane"] .fe-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent-border, rgba(52,211,153,0.25)), 0 0 20px var(--accent-bg, rgba(52,211,153,0.05)); }
.fe-container[data-fe-atmos="arcane"] .fe-action-bar { border-color: rgba(255,255,255,0.04); }
.fe-container[data-fe-atmos="arcane"] .fe-save-btn { box-shadow: 0 8px 40px var(--accent-border, rgba(52,211,153,0.2)), 0 0 20px var(--accent-bg, rgba(52,211,153,0.1)), 0 0 0 1px var(--accent-border, rgba(52,211,153,0.2)); }
.fe-container[data-fe-atmos="arcane"] .fe-titlebar-title { filter: drop-shadow(0 0 8px var(--accent-border, rgba(52,211,153,0.2))); }
/* Arcane top gradient bar — inset box-shadow instead of ::before so resize handle is not blocked */
.fe-container[data-fe-atmos="arcane"] .fe-titlebar {
    box-shadow: inset 0 3px 0 0 var(--accent), inset 0 3px 20px -6px var(--accent-bg, rgba(52,211,153,0.15));
}
/* All children above star canvas */
.fe-container[data-fe-atmos="arcane"] > *:not(.fe-stars-canvas):not(.fe-resize-handle) { position: relative; z-index: 1; }

@media (max-width: 768px) {
    .fe-container { width: 100% !important; height: 90vh !important; border-radius: 12px 12px 0 0; align-self: flex-end; }
    .fe-sidebar { display: none; }
    .fe-titlebar-left { width: auto; }
    .fe-titlebar-right { width: auto; }
    .fe-size, .fe-col-size { display: none; }
    .fe-row { min-height: 48px; }
}

/* Sidebar nav items — hover for inactive */
#nav-menu button:not(.active-nav):hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
#nav-menu button:active { transform: scale(0.98); }
.score-critical { color: #6ee7b7; border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.15); }
.score-high { color: #93c5fd; border-color: rgba(59,130,246,0.5); background: rgba(59,130,246,0.15); }
.score-medium { color: #fde047; border-color: rgba(234,179,8,0.5); background: rgba(234,179,8,0.15); }
.score-noise { color: #fca5a5; border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.15); }

/* Card borders based on score */
.card-critical { border-left: 3px solid #10b981; }
.card-high { border-left: 3px solid #3b82f6; }
.card-medium { border-left: 3px solid #eab308; }
.card-noise { border-left: 3px solid #ef4444; }

/* Placeholder styling */
input::placeholder, textarea::placeholder {
    color: #475569 !important;
    font-style: italic;
    opacity: 0.7;
}
/* Sidebar collapse */
#sidebar { transition: width 0.3s cubic-bezier(.4,0,.2,1), min-width 0.3s cubic-bezier(.4,0,.2,1), padding 0.3s cubic-bezier(.4,0,.2,1); overflow: hidden; }
#sidebar.sidebar-narrow .sidebar-bottom-section { display: none; }
.sidebar-collapsed { width: 0 !important; min-width: 0 !important; overflow: hidden !important; border-right: none !important; padding: 0 !important; }
.sidebar-collapsed > * { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
#sidebar:not(.sidebar-collapsed) > * { opacity: 1; transition: opacity 0.2s ease 0.1s; }
/* Float toggle smooth fade */
#sidebar-float-toggle { transition: opacity 0.3s ease, transform 0.3s ease; }
#sidebar-float-toggle.sf-hidden { opacity: 0; pointer-events: none; transform: translateX(-8px); }
#sidebar-float-toggle.sf-visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
/* Collapsible nav sections */
.nav-section-items { overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; }
.nav-section-items.intel-scroll { overflow-y: auto; overflow-x: hidden; }
.nav-section-items.intel-scroll::-webkit-scrollbar { width: 3px; }
.nav-section-items.collapsed { max-height: 0 !important; opacity: 0; overflow: hidden !important; pointer-events: none; }
.nav-section-header { cursor: pointer; user-select: none; }
.nav-section-header .chevron-icon { transition: transform 0.25s ease; display: inline-block; }
.nav-section-header.collapsed .chevron-icon { transform: rotate(-90deg); animation: chevronGlow 2s ease-in-out infinite; }
@keyframes chevronGlow {
    0%, 100% { filter: drop-shadow(0 0 2px var(--accent)); color: var(--text-muted); }
    50% { filter: drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 12px var(--accent)); color: var(--accent); }
}
.sidebar-collapsed .nav-section-header { display: none; }
.sidebar-collapsed .nav-section-items { max-height: none !important; opacity: 1; }
.sidebar-collapsed .nav-section-items.collapsed { max-height: none !important; opacity: 1; }
/* Nav badge */
.nav-badge { font-size: 9px; min-width: 20px; height: 20px; padding: 1px 5px; border-radius: 10px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
/* Status pulse animation */
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
#system-status.online .status-dot { animation: status-pulse 2s ease-in-out infinite; }

/* Search bar */
#feed-search { background: var(--bg-input); border: 1px solid var(--border-strong); transition: border-color 0.2s; }
#feed-search:focus { border-color: var(--accent-border); outline: none; }
/* Score filter pills */
.score-pill { transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s; cursor: pointer; user-select: none; }
.score-pill.active { opacity: 1; box-shadow: 0 0 8px rgba(255,255,255,0.08); }
.score-pill:not(.active) { opacity: 0.35; }
.score-pill:hover:not(.active) { opacity: 0.7; }
.score-pill:active { transform: scale(0.95); }
/* Time ago fade */
.time-ago { font-variant-numeric: tabular-nums; }

/* === ALERTS BANNER === */
.alert-ticker { 
    animation: alertPulse 3s ease-in-out infinite;
}
@keyframes alertPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 1s linear infinite;
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* === TOOLTIPS === */
.strat-tip {
    position: relative;
    cursor: help;
}
.strat-tip:hover {
    z-index: 999999;
}
.strat-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.97);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
    white-space: normal;
    width: max-content;
    max-width: 220px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 999999;
}
.strat-tip:hover::after {
    opacity: 1;
}

/* === THEME EDITOR RANGE SLIDERS === */
.te-range-wrap { padding: 4px 0; }
.te-range-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.1); outline: none;
    cursor: pointer;
}
.te-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent, #10b981); border: 2px solid rgba(255,255,255,0.2);
    cursor: pointer; transition: transform 0.15s;
}
.te-range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.te-range-val {
    font-size: 10px; color: var(--text-muted, #64748b);
    min-width: 32px; text-align: right; font-variant-numeric: tabular-nums;
}

/* === LOADING SKELETON === */
.skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: skelShimmer 1.5s ease infinite; }
.skel-card { opacity: 0.5; }
@keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* === NEWS CARD HOVER LIFT === */
.glass-panel[data-card-idx] { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.glass-panel[data-card-idx]:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.glass-panel[data-card-idx]:active { transform: translateY(0); }

/* === EMPTY STATE === */
.empty-state { text-align: center; padding: 3rem 2rem; border: 1px dashed var(--border-strong, #334155); border-radius: 12px; }
.empty-state p { color: var(--text-muted, #64748b); font-size: 14px; margin-bottom: 8px; }
.empty-state .empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.4; }
.empty-state button { margin-top: 12px; }

/* === EXPANDABLE CARD === */
.card-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; opacity: 0; }
.card-content.expanded { max-height: 500px; opacity: 1; overflow-y: auto; }

/* === DRILL-DOWN PILLS === */
.drill-pill { cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.04); }
.drill-pill:hover { opacity: 1 !important; background: rgba(255,255,255,0.08); text-decoration: none; }

/* === STALE INDICATORS === */
.stale-warning { color: #f59e0b; }
.stale-critical { color: #ef4444; }

/* === THEME LABEL PICKER === */
.theme-label {
    font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
    cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--label-color); background: transparent; border: 1px solid transparent;
    opacity: 0.4;
}
.theme-label:hover { opacity: 0.85; background: rgba(255,255,255,0.03); }
.theme-label.active { opacity: 1; border-color: var(--label-color); background: rgba(255,255,255,0.05); box-shadow: 0 0 8px rgba(255,255,255,0.03); }

/* Sakura theme button icon */
.sakura-btn { display: inline-flex; align-items: center; gap: 1px; }
.sakura-btn .sakura-icon { transition: transform 0.4s ease, filter 0.3s ease; }
.sakura-btn:hover .sakura-icon { transform: rotate(36deg) scale(1.15); }
.sakura-btn.active .sakura-icon { filter: drop-shadow(0 0 3px currentColor); animation: sakura-spin 8s linear infinite; }
@keyframes sakura-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }


/* === THEME EDITOR PANEL === */
#theme-editor-panel { display: none; }
#theme-editor-panel.te-open { display: block; }

.te-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.08); z-index: 998;
    animation: teFadeIn 0.15s ease;
}
.te-container {
    position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
    width: 280px; max-height: 85vh; z-index: 999;
    background: var(--bg-panel-solid); border: 1px solid var(--border-strong);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
    display: flex; flex-direction: column;
    animation: teSlideIn 0.2s ease;
}
@keyframes teFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes teSlideIn { from { opacity: 0; transform: translateY(-50%) translateX(20px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }

.te-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
}
.te-header-left {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.te-header-left svg { color: var(--accent); }
.te-header-right { display: flex; align-items: center; gap: 6px; }
.te-close {
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--text-muted); border-radius: 6px; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    display: flex; align-items: center;
}
.te-close:hover { color: var(--text-primary); background: var(--bg-hover); }

.te-btn {
    font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 5px;
    cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 4px; letter-spacing: 0.02em;
}
.te-btn-reset {
    background: var(--bg-hover); color: var(--text-secondary); border-color: var(--border);
}
.te-btn-reset:hover { color: var(--accent-light); border-color: var(--accent-border); }

.te-base-label {
    font-size: 9px; color: var(--text-muted); padding: 6px 14px 2px;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.te-base-label span { color: var(--accent); font-weight: 600; }

.te-body {
    overflow-y: auto; padding: 6px 14px 10px; flex: 1;
}
.te-body::-webkit-scrollbar { width: 3px; }

.te-group { margin-bottom: 12px; }
.te-group-label {
    font-size: 9px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px;
}
.te-grid { display: flex; flex-direction: column; gap: 5px; }

.te-color-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0;
}
.te-color-label {
    font-size: 10px; color: var(--text-secondary); font-weight: 500;
    min-width: 70px;
}
.te-color-input-wrap {
    display: flex; align-items: center; gap: 6px;
}
.te-color-picker {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border: 2px solid var(--border-strong);
    border-radius: 7px; cursor: pointer; padding: 0; background: none;
    transition: border-color 0.15s;
}
.te-color-picker:hover { border-color: var(--accent-border); }
.te-color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.te-color-picker::-webkit-color-swatch { border-radius: 4px; border: none; }
.te-color-picker::-moz-color-swatch { border-radius: 4px; border: none; }

.te-color-hex {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 10px; width: 68px; padding: 4px 6px;
    background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 5px;
    outline: none; transition: border-color 0.15s;
}
.te-color-hex:focus { border-color: var(--accent-border); }

.te-footer {
    padding: 8px 14px; border-top: 1px solid var(--border);
}
.te-footer-hint {
    font-size: 8px; color: var(--text-faint); text-align: center;
    letter-spacing: 0.03em; margin-bottom: 6px;
}
.te-preset-row {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 12px; margin: 0 -14px -8px;
    border-top: 1px solid var(--border); background: rgba(0,0,0,0.12);
}
.te-preset-select {
    flex: 1; padding: 5px 8px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--bg-primary);
    color: var(--text-primary); font-size: 11px; font-family: inherit;
    cursor: pointer; outline: none; min-width: 0; transition: border-color 0.2s;
}
.te-preset-select:focus { border-color: var(--accent); }
.te-btn-save {
    padding: 5px 12px; border-radius: 8px;
    border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.08);
    color: var(--accent); font-size: 10px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap;
}
.te-btn-save:hover { background: rgba(52,211,153,0.18); border-color: rgba(52,211,153,0.5); }
.te-btn-del {
    padding: 5px 7px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: rgba(255,255,255,0.02);
    color: var(--text-muted); font-size: 11px; cursor: pointer;
    transition: all 0.2s; line-height: 1;
}
.te-btn-del:hover { color: #f87171; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.08); }

@media (max-width: 640px) {
    .te-container { right: 8px; left: 8px; width: auto; max-height: 75vh; }
}

/* === RESPONSIVE — Mobile-first breakpoints === */

/* Extra small phones (≤360px, e.g. iPhone SE) */
@media (max-width: 360px) {
    main { padding: 0.25rem !important; }
    .glass-panel { padding: 0.375rem !important; border-radius: 0.375rem !important; }
    #page-title { font-size: 0.875rem !important; }
    #feed-controls { gap: 0.25rem !important; }
    #feed-controls input[type="text"] { font-size: 0.75rem; }
    #agent-messages { max-height: 160px !important; }
    #agent-input { font-size: 0.8rem; }
    .score-pill { font-size: 0.6rem !important; padding: 0.125rem 0.375rem !important; }
}

/* Phones portrait (≤480px) */
@media (max-width: 480px) {
    main { padding: 0.5rem !important; }
    /* World tabs wrap */
    #world-tabs { order: 2; width: 100%; }
    #world-tabs .flex { flex-wrap: wrap; gap: 4px; }
    /* Ticker strip */
    .ticker-scroll { max-width: calc(100vw - 2rem); }
    /* Market chart */
    #chart-wrapper { min-height: 180px !important; }
    /* Settings grid single column */
    #adv-grid { grid-template-columns: 1fr !important; }
    /* Feed cards */
    .card-content.expanded { max-height: 350px; }
    /* Market tickers section */
    #simple-tickers { max-height: 120px; overflow-y: auto; }
}

/* Phones landscape / small tablets (481px–768px) */
@media (max-width: 768px) {
    #sidebar { position: fixed; z-index: 40; height: 100vh; }
    main { margin-left: 0 !important; padding: 0.75rem !important; }
    /* Settings */
    #adv-grid { grid-template-columns: 1fr !important; }
    /* News source tabs smaller */
    #settings-sources button { padding: 0.375rem 0.75rem; font-size: 0.625rem; }
    /* Agent fullscreen sidebar hidden on mobile */
    .agent-fs-sidebar { display: none !important; }
}

/* Tablets (769px–1024px) */
@media (max-width: 1024px) {
    #sidebar { position: fixed; z-index: 40; height: 100vh; }
    main { margin-left: 0 !important; padding: 1rem !important; }
}

/* Large tablets & small laptops (1025px–1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
    main { padding: 1.5rem !important; }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .ticker-btn { min-height: 36px; padding: 0.5rem 0.75rem !important; }
    .score-pill { min-height: 32px; padding: 0.375rem 0.75rem !important; }
    /* Disable hover-only interactions */
    .group-hover\\:opacity-100 { opacity: 0.7; }
    .group-hover\\:rotate-180 { transform: none; }
    /* Scrollbar always visible on touch */
    .ticker-scroll { scrollbar-width: auto; }
    /* Feed card touch targets */
    .news-card { min-height: 44px; }
    .news-card a { padding: 0.5rem 0; }
    /* Tap highlight for mobile */
    a, button { -webkit-tap-highlight-color: rgba(16, 185, 129, 0.15); }
}

/* Safe area insets for notched phones (iPhone X+) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    #sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* === SIMPLE SETTINGS BUBBLES === */
.simple-time-btn {
    cursor: pointer;
    user-select: none;
}
.simple-time-btn:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════
   WHO ARE YOU — Action Button Interactivity
   ═══════════════════════════════════════════════════ */
#simple-generate-btn,
#setup-wizard-btn,
#suggest-context-btn,
#save-context-btn {
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

/* Generate (primary/filled accent) */
#simple-generate-btn:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
#simple-generate-btn:active {
    filter: brightness(0.95);
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* Setup Wizard (outlined accent) */
#setup-wizard-btn:hover {
    background: var(--accent-bg) !important;
    border-color: var(--accent-light) !important;
    color: var(--accent-light) !important;
    transform: translateY(-1px);
}
#setup-wizard-btn:active {
    background: rgba(16, 185, 129, 0.15) !important;
    transform: translateY(0) scale(0.97);
}

/* Suggest (indigo tint) */
#suggest-context-btn:hover {
    background: rgba(99,102,241,0.15) !important;
    border-color: rgba(99,102,241,0.5) !important;
    color: #a5b4fc !important;
    transform: translateY(-1px);
}
#suggest-context-btn:active {
    background: rgba(99,102,241,0.2) !important;
    transform: translateY(0) scale(0.97);
}

/* Save (green tint) */
#save-context-btn:hover {
    background: rgba(16,185,129,0.15) !important;
    border-color: rgba(16,185,129,0.5) !important;
    color: #6ee7b7 !important;
    transform: translateY(-1px);
}
#save-context-btn:active {
    background: rgba(16,185,129,0.2) !important;
    transform: translateY(0) scale(0.97);
}

/* === RATING PANEL === */
#rating-panel select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* === WORLD TABS (Top Bar) === */
.world-tab-active {
    background: var(--accent-bg);
    border: 1px solid var(--accent-border);
    color: var(--accent-light);
}
.world-tab-inactive {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
}
.world-tab-inactive:hover {
    background: var(--bg-panel-solid);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* === SIDEBAR RESIZE HANDLE === */
#sidebar-resize-handle {
    width: 3px;
    transition: background 0.15s;
}
#sidebar-resize-handle:hover {
    background: rgba(16,185,129,0.3) !important;
}
/* Disable sidebar width transition during drag */
#sidebar.resizing { transition: none !important; }

/* === ADVANCED SETTINGS DRAG & DROP === */
.adv-draggable {
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    position: relative;
}
.adv-draggable:hover .adv-drag-handle {
    color: var(--accent, #34d399);
    opacity: 1;
}
.adv-drag-handle {
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
}
.adv-draggable.dragging {
    opacity: 0.4;
    transform: scale(0.97);
    box-shadow: 0 0 0 2px rgba(16,185,129,0.3);
}
.adv-drop-col.drag-over {
    background: rgba(16,185,129,0.04);
    border-radius: 1rem;
    outline: 2px dashed rgba(16,185,129,0.25);
    outline-offset: 4px;
    transition: outline 0.15s, background 0.15s;
}
.adv-drop-placeholder {
    height: 4px;
    border-radius: 2px;
    background: var(--accent, #34d399);
    opacity: 0.6;
    margin: 4px 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

/* === AI AGENT CHAT === */
#agent-messages::-webkit-scrollbar { width: 3px; }
.agent-response strong { font-weight: 600; }
.agent-response br + br { display: none; }

/* Agent thinking indicator — bouncing dots */
.agent-thinking-dots span {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #10b981);
    opacity: 0.4;
    animation: agentThinkBounce 1.4s infinite ease-in-out;
}
.agent-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agentThinkBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .agent-thinking-dots span { animation: none; opacity: 0.6; }
}

/* Agent message action buttons (copy, speak) — visible on hover */
.group\/msg .agent-msg-actions button { opacity: 0; transition: opacity 0.2s ease; }
.group\/msg:hover .agent-msg-actions button { opacity: 0.6; }
.group\/msg .agent-msg-actions button:hover { opacity: 1 !important; }
@media (hover: none) {
    .group\/msg .agent-msg-actions button { opacity: 0.5; }
}

/* === CHART TOOLBAR === */
.chart-tool-btn {
    background: transparent;
    border: 1px solid var(--border-strong, rgba(51,65,85,0.5));
    color: var(--text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.chart-tool-btn:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text-heading, #e2e8f0);
    border-color: var(--text-muted, #64748b);
}
.chart-tool-btn.active {
    background: rgba(16,185,129,0.12);
    color: var(--accent, #34d399);
    border-color: var(--accent, #34d399);
}
#draw-overlay { image-rendering: auto; }

/* Chart resize handle */
.mp-resize-handle:hover > div { background: rgba(100,116,139,0.5) !important; }
.mp-resize-handle:active > div { background: rgba(16,185,129,0.5) !important; }

/* Chart scroll indicators */
.mp-chartwrap { cursor: grab; background: rgba(0,0,0,0.25); }
.mp-chartwrap:active { cursor: grabbing; }

.mp-scroll-fade-l, .mp-scroll-fade-r {
    position: absolute; top: 0; bottom: 0; width: 20px; z-index: 5;
    pointer-events: none; opacity: 0.4; transition: opacity 0.3s;
}
.mp-scroll-fade-l { left: 0; background: linear-gradient(to right, rgba(15,23,42,0.7), transparent); }
.mp-scroll-fade-r { right: 0; background: linear-gradient(to left, rgba(15,23,42,0.7), transparent); }
.mp-chartwrap:hover .mp-scroll-fade-l,
.mp-chartwrap:hover .mp-scroll-fade-r { opacity: 0.7; }

.mp-scroll-track {
    position: absolute; bottom: 2px; left: 10%; right: 10%; height: 3px; z-index: 11;
    background: rgba(100,116,139,0.1); border-radius: 2px;
    pointer-events: none; opacity: 0.4; transition: opacity 0.3s;
}
.mp-chartwrap:hover .mp-scroll-track { opacity: 0.8; }

.mp-scroll-thumb {
    position: absolute; top: 0; height: 100%;
    background: rgba(148,163,184,0.35); border-radius: 2px;
    min-width: 12px; transition: background 0.15s;
}
.mp-chartwrap:hover .mp-scroll-thumb { background: rgba(148,163,184,0.5); }
/* Lightweight Charts overrides for theme */
.tv-lightweight-charts { border-radius: 6px; }
/* Hide Lightweight Charts attribution watermark */
#tv-chart-container a[href*="tradingview"],
#tv-chart-container a[target="_blank"],
#tv-chart-container table tr:last-child a,
#tv-chart-container div[style*="z-index"] a {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════
   MOBILE GESTURES & TOUCH UI
   ═══════════════════════════════════════════════════ */

/* Sidebar backdrop overlay */
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none; opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Card swipe action indicator */
.card-swipe-ind {
    position: absolute; inset: 0; z-index: -1;
    display: flex; align-items: center;
    border-radius: inherit; overflow: hidden;
    opacity: 0; transition: opacity 0.15s;
}
.card-swipe-ind .csi-icon {
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.05em; padding: 0 18px;
    text-transform: uppercase;
}
.card-swipe-ind.csi-save {
    justify-content: flex-start; opacity: 1;
    background: linear-gradient(90deg, rgba(16,185,129,0.25) 0%, transparent 70%);
}
.card-swipe-ind.csi-save .csi-icon { color: #34d399; }
.card-swipe-ind.csi-dismiss {
    justify-content: flex-end; opacity: 1;
    background: linear-gradient(270deg, rgba(239,68,68,0.25) 0%, transparent 70%);
}
.card-swipe-ind.csi-dismiss .csi-icon { color: #f87171; }

/* Pull-to-refresh indicator */
.ptr-indicator {
    width: 100%; height: 0; overflow: hidden; opacity: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--text-secondary); font-size: 12px; font-weight: 500;
}
.ptr-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    transition: transform 0.05s linear;
}
.ptr-spinner.spinning {
    animation: spin 0.7s linear infinite;
}

/* Bottom navigation bar */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 50; display: none;
    background: var(--bg-panel-solid);
    border-top: 1px solid var(--border-strong);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: center;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
    transition: transform 0.25s ease;
}
.bnav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 12px; border: none; background: none;
    color: var(--text-muted); font-size: 10px; font-weight: 500;
    cursor: pointer; transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
}
.bnav-item i, .bnav-item svg { width: 20px; height: 20px; }
.bnav-item.active {
    color: var(--accent-light);
}
.bnav-item.active::after {
    content: ''; display: block;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
    margin-top: 1px;
}
.bnav-item:active { transform: scale(0.92); }
@media (hover: hover) {
    .bnav-item:hover:not(.active) { color: var(--text-secondary); background: var(--bg-hover); }
}

/* Fullscreen chart — in-place expansion */
/* ═══════════════════════════════════════════════════
   BINANCE-STYLE FULLSCREEN CHART
   ═══════════════════════════════════════════════════ */
.cfs-bg {
    position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,0.85);
    animation: cfsIn 0.15s ease;
}
@keyframes cfsIn { from { opacity: 0; } to { opacity: 1; } }

.cfs-root {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: var(--bg-primary, #161A1E);
    animation: cfsIn 0.15s ease;
    margin: 8px; border-radius: 14px; overflow: hidden;
}

/* ── Header (Zone 1) ── */
.cfs-header {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 16px;
    height: 48px; min-height: 48px;
    padding: 0 12px;
    background: var(--bg-panel-solid, #1E2329);
    border-bottom: 1px solid rgba(42,46,57,0.8);
    z-index: 5;
}
.cfs-hdr-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cfs-ticker { font-size: 13px; font-weight: 700; color: var(--text-primary, #eaecef); white-space: nowrap; }
.cfs-ticker-btn { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 4px 10px; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.cfs-ticker-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(240,185,11,0.3); }
.cfs-ticker-sym { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; color: #eaecef; }
.cfs-ticker-name { font-size: 11px; font-weight: 500; color: #848e9c; }
.cfs-price { font-size: 14px; font-weight: 700; font-family: 'ui-monospace','SFMono-Regular',monospace; }
.cfs-change { font-size: 11px; font-weight: 500; }

.cfs-tf-row { display: flex; align-items: center; gap: 3px; }
.cfs-tf {
    padding: 5px 12px; font-size: 13px; font-weight: 600;
    border: none; border-radius: 6px; cursor: pointer;
    background: transparent; color: #848e9c;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; white-space: nowrap;
}
.cfs-tf:hover { color: #eaecef; background: rgba(255,255,255,0.06); }
.cfs-tf.active { color: var(--accent, #F0B90B); background: rgba(240,185,11,0.12); font-weight: 700; }

.cfs-close-btn {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    background: transparent; color: #848e9c;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; flex-shrink: 0;
    margin-left: auto;
}
.cfs-close-btn:hover { background: rgba(239,68,68,0.15); color: #F6465D; }

/* ── Left Sidebar (Zone 2 — desktop only) ── */
.cfs-sidebar {
    position: absolute; top: 48px; left: 0; bottom: 0; width: 52px;
    background: var(--bg-panel-solid, #1E2329);
    border-right: 1px solid rgba(42,46,57,0.8);
    display: flex; flex-direction: column; align-items: center;
    padding: 10px 0; gap: 4px; z-index: 4;
}
.cfs-tool {
    width: 42px; height: 42px; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: #848e9c;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.cfs-tool:hover { background: rgba(255,255,255,0.08); color: #eaecef; border-color: rgba(255,255,255,0.06); transform: scale(1.05); }
.cfs-tool.active { color: var(--accent, #F0B90B); background: rgba(240,185,11,0.12); border-color: rgba(240,185,11,0.3); }
.cfs-done-btn { color: #0ECB81 !important; }
.cfs-done-btn:hover { background: rgba(14,203,129,0.1); border-color: rgba(14,203,129,0.3); }

/* ── Chart Area (Zone 3) ── */
.cfs-chart-area {
    flex: 1; position: relative; display: flex; flex-direction: column;
    overflow: hidden; min-height: 0;
}
.cfs-chart-area.with-sidebar { margin-left: 52px; }

.cfs-divider {
    width: 32px; height: 1px; border: none;
    background: rgba(255,255,255,0.06); margin: 4px 0;
}

.cfs-ohlc-strip {
    position: absolute; top: 4px; left: 8px; z-index: 3;
    font-size: 10px; font-family: 'ui-monospace','SFMono-Regular',monospace;
    color: #848e9c; pointer-events: none;
}
.cfs-ohlc-label { display: flex; gap: 4px; flex-wrap: wrap; }
.cfs-ohlc-label span { color: #eaecef; }

.cfs-ma-legend {
    position: absolute; top: 18px; left: 8px; z-index: 3;
    font-size: 9px; font-family: 'ui-monospace','SFMono-Regular',monospace;
    display: flex; gap: 10px; pointer-events: none;
}
.cfs-ma-legend b { font-weight: 600; }

.cfs-chart-container {
    flex: 1; position: relative; min-height: 0;
}
.cfs-draw-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
}

/* ── Mobile Drawing FAB (desktop only) + Swipe Toolbar ── */
.cfs-draw-fab {
    position: absolute; bottom: 16px; right: 16px; z-index: 10;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--bg-panel-solid, #1E2329);
    border: 1px solid rgba(42,46,57,0.8);
    color: #848e9c; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.cfs-draw-fab:active, .cfs-draw-fab.active {
    color: var(--accent, #F0B90B);
    border-color: var(--accent, #F0B90B);
}

.cfs-mobile-toolbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    transform: translateY(100%);
    will-change: transform;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 4px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-panel-solid, #1E2329);
    border-top: 1px solid rgba(42,46,57,0.8);
    border-radius: 16px 16px 0 0;
    z-index: 250; touch-action: none;
}
.cfs-mobile-toolbar .cfs-tool { width: 44px; height: 44px; flex-shrink: 0; }

/* Grab handle visible when toolbar closed */
.cfs-grab-handle {
    position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.3);
    z-index: 251; pointer-events: none;
    transition: opacity 200ms;
}
.cfs-grab-handle.hidden { opacity: 0; }

/* Toolbar grab handle (inside toolbar) */
.cfs-toolbar-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.3);
    margin: 0 auto 8px; flex-basis: 100%;
}

/* ── Tool Tooltips (desktop) ── */
.cfs-tooltip {
    position: absolute; z-index: 999999;
    background: var(--bg-panel-solid, #1E2329);
    border: 1px solid rgba(42,46,57,0.8);
    border-radius: 8px; padding: 8px 10px;
    max-width: 240px; pointer-events: none;
    opacity: 0; transition: opacity 150ms;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.cfs-tooltip.visible { opacity: 1; }
.cfs-tooltip-name { font-weight: 700; font-size: 13px; color: #eaecef; }
.cfs-tooltip-desc { font-size: 12px; color: #848e9c; margin-top: 2px; }
.cfs-tooltip-key {
    display: inline-block; background: rgba(255,255,255,0.1);
    border: 1px solid rgba(42,46,57,0.8); border-radius: 4px;
    padding: 1px 6px; font-family: monospace; font-size: 11px;
    margin-left: 6px; color: #eaecef;
}
.cfs-tool-flash { animation: cfsFlash 200ms ease; }
@keyframes cfsFlash { 0%{transform:scale(1)} 50%{transform:scale(1.2); box-shadow:0 0 8px var(--accent, #F0B90B)} 100%{transform:scale(1)} }

/* ── Mobile Hotbar + Full Panel ── */
.cfs-hotbar {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 48px; display: flex; align-items: center;
    justify-content: space-around;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(42,46,57,0.8);
    padding: 0 8px; padding-bottom: env(safe-area-inset-bottom);
    z-index: 250; touch-action: none;
}
.cfs-hotbar .hotbar-tool {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    color: #848e9c; cursor: pointer; transition: background-color 150ms, color 150ms, border-color 150ms, opacity 150ms;
}
.cfs-hotbar .hotbar-tool.active {
    border-color: var(--accent, #F0B90B);
    background: rgba(240,185,11,0.15);
    color: var(--accent, #F0B90B);
}
.cfs-hotbar .hotbar-grip {
    width: 32px; height: 40px; display: flex;
    flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; cursor: grab;
}
.cfs-hotbar .hotbar-grip span {
    width: 20px; height: 2px;
    background: rgba(255,255,255,0.4); border-radius: 1px;
}
.cfs-full-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-panel-solid, #1E2329);
    border-top: 1px solid rgba(42,46,57,0.8);
    border-radius: 16px 16px 0 0;
    z-index: 251; touch-action: none;
    transform: translateY(100%);
    will-change: transform;
    transition: transform 200ms ease-out;
}
.cfs-full-panel.open { transform: translateY(0); }
.cfs-panel-grip {
    width: 100%; height: 24px; display: flex;
    align-items: center; justify-content: center; cursor: grab;
}
.cfs-panel-grip span {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.3);
}
.cfs-panel-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; padding: 0 12px 12px;
    max-height: calc(33vh - 48px); overflow-y: auto;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.cfs-panel-grid .cfs-tool {
    width: 100%; height: 44px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; flex-direction: column; gap: 2px;
}
.cfs-panel-grid .cfs-tool .cfs-tool-label {
    font-size: 9px; color: #848e9c; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cfs-panel-grid .cfs-tool.active .cfs-tool-label { color: var(--accent, #F0B90B); }

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .cfs-root { margin: 0; border-radius: 0; }
    .cfs-header { padding: 0 6px; gap: 6px; }
    .cfs-hdr-left { gap: 6px; }
    .cfs-ticker { font-size: 11px; }
    .cfs-ticker-sym { font-size: 13px; }
    .cfs-ticker-name { font-size: 9px; }
    .cfs-ticker-btn { padding: 3px 7px; gap: 4px; }
    .cfs-price { font-size: 12px; }
    .cfs-change { font-size: 9px; }
    .cfs-tf { padding: 3px 8px; font-size: 11px; }
    .cfs-ohlc-strip { font-size: 9px; }
    .cfs-ma-legend { font-size: 8px; }
}

/* ── Bottom Intel Panel ── */
.cfs-intel-panel {
    background: var(--bg-panel-solid, #1E2329);
    border-top: 1px solid rgba(42,46,57,0.8);
    overflow: hidden; display: flex; flex-direction: column;
    transition: height 0.2s ease;
}
.cfs-intel-grip {
    height: 28px; cursor: ns-resize; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    user-select: none; -webkit-user-select: none;
}
.cfs-intel-grip:hover .cfs-intel-grip-bar { background: rgba(240,185,11,0.4); }
.cfs-intel-grip-bar { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); transition: background 0.15s; }
.cfs-intel-grip-label { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.25); text-transform: uppercase; letter-spacing: 1px; }
.cfs-intel-body {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding: 0 14px 14px; overflow-y: auto; min-height: 0;
}
.cfs-intel-col { min-height: 0; overflow-y: auto; }
.cfs-intel-col h4 { font-size: 10px; font-weight: 700; color: #848e9c; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cfs-intel-col h4 .dot { width: 5px; height: 5px; border-radius: 50%; background: #10b981; }
.cfs-intel-metric { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 11px; }
.cfs-intel-metric .label { color: #64748b; }
.cfs-intel-metric .value { font-family: ui-monospace, monospace; font-weight: 600; }
.cfs-intel-range-bar { width: 100%; height: 4px; background: #1e293b; border-radius: 2px; position: relative; overflow: hidden; margin: 4px 0 8px; }
.cfs-intel-range-fill { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, #ef4444, #fbbf24, #22c55e); opacity: 0.4; }
.cfs-intel-range-dot { position: absolute; top: -1px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,0.5); transform: translateX(-50%); }
/* Agent column */
.cfs-intel-agent-msgs { flex: 1; overflow-y: auto; min-height: 40px; max-height: 200px; scroll-behavior: smooth; }
.cfs-intel-agent-input { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.cfs-intel-agent-input input { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(51,65,85,0.5); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: #e2e8f0; outline: none; transition: border-color 0.15s; }
.cfs-intel-agent-input input:focus { border-color: #34d399; }
.cfs-intel-agent-input button { width: 30px; height: 30px; border-radius: 8px; border: none; background: #10b981; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media (max-width: 768px) {
    .cfs-intel-body { grid-template-columns: 1fr; gap: 8px; }
}

/* Legacy compat — keep old class for non-fullscreen usage */
.chart-fs-overlay-bg { position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,0.7); }
.chart-fs-bar { display: none; }

/* Saved view — grid mode */
#news-feed.saved-grid-mode {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
}
@media (min-width: 1024px) {
    #news-feed.saved-grid-mode { grid-template-columns: repeat(3, 1fr); }
}
#news-feed.saved-grid-mode .glass-panel { padding: 0.5rem !important; }
#news-feed.saved-grid-mode .glass-panel h3 {
    font-size: 0.78rem !important; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Hide verbose elements in grid mode */
#news-feed.saved-grid-mode .glass-panel > p.text-slate-400.text-sm { display: none; }
#news-feed.saved-grid-mode .glass-panel > .flex.items-center.gap-3 { display: none; }
#news-feed.saved-grid-mode .glass-panel > p.drill-pill.text-\\[10px\\] { display: none; }
#news-feed.saved-grid-mode .card-content,
#news-feed.saved-grid-mode [id^="ai-response-"],
#news-feed.saved-grid-mode [id^="rating-panel-"] { display: none; }
#news-feed.saved-grid-mode .glass-panel > p.drill-pill.text-xs { display: none; }

/* ═══════════════════════════════════════════════════
   ONBOARDING WELCOME CARDS
   ═══════════════════════════════════════════════════ */
.ob-wrap { display:flex; flex-direction:column; align-items:center; padding:4rem 1.5rem; }
.ob-icon { width:3.5rem; height:3.5rem; border-radius:0.75rem; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.15); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.ob-greeting { font-size:1.125rem; font-weight:700; color:rgba(241,245,249,1); margin-bottom:0.5rem; }
.ob-subtitle { font-size:0.875rem; color:rgba(148,163,184,1); margin-bottom:2.5rem; text-align:center; max-width:28rem; line-height:1.5; }
.ob-steps { width:100%; max-width:32rem; display:flex; flex-direction:column; gap:0.75rem; }
.ob-step { display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:0.75rem; cursor:default; }
.ob-step-link { cursor:pointer; transition:background 0.15s, border-color 0.15s; }
.ob-badge { width:2.25rem; height:2.25rem; border-radius:0.5rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.875rem; font-weight:700; }
.ob-text { flex:1; min-width:0; }
.ob-title-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.ob-title { font-size:0.875rem; font-weight:600; }
.ob-desc { font-size:0.75rem; color:rgba(100,116,139,1); margin-top:0.25rem; }
.ob-arrow { width:1rem; height:1rem; flex-shrink:0; transition:color 0.15s; }
.ob-cta { width:100%; margin-top:0.5rem; padding:0.625rem 1.25rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; display:flex; align-items:center; justify-content:center; gap:0.5rem; background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.3); color:rgb(52,211,153); cursor:pointer; transition:background 0.15s; font-family:inherit; }
.ob-cta:hover { background:rgba(16,185,129,0.25); }

/* ═══════════════════════════════════════════════════
   MOBILE LAYOUT REDESIGN (≤768px)
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Bottom nav clearance ── */
    main { padding-bottom: 60px !important; }

    /* ── Sidebar above backdrop ── */
    #sidebar { z-index: 40; }

    /* ── Header: compact single row ── */
    main > div:first-child {
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    /* Hide redundant page title on mobile (bottom nav shows active tab) */
    #page-title { display: none !important; }
    #page-subtitle { display: none !important; }
    /* Hide redundant header buttons (all in bottom nav or not needed) */
    #refresh-market-btn { padding: 0.3rem 0.6rem !important; }
    #scan-history-btn { display: none !important; }
    #help-btn { display: none !important; }
    /* Hide settings button from header (in bottom nav) */
    main > div:first-child button[onclick="setActive('settings')"] { display: none !important; }
    /* Hide divider pipe next to hidden buttons */
    main > div:first-child .w-px { display: none !important; }
    /* Compact scan button */
    #scan-btn { padding: 0.3rem 0.6rem !important; font-size: 0.65rem !important; }
    /* Compact last-sync area */
    main > div:first-child > .text-right { gap: 0.4rem !important; }
    main > div:first-child > .text-right > div:first-child {
        display: flex; align-items: center; gap: 4px;
    }
    main > div:first-child > .text-right > div:first-child > div:first-child {
        display: none; /* hide "Last Sync" label */
    }

    /* ── Feed controls compact ── */
    #feed-controls { gap: 0.35rem !important; }
    #feed-controls .relative { min-width: 0 !important; }
    #feed-search { padding: 0.35rem 0.35rem 0.35rem 2rem !important; font-size: 0.7rem !important; }
    .score-pill { padding: 0.2rem 0.4rem !important; font-size: 0.6rem !important; min-height: 26px !important; }
    #feed-count { font-size: 9px !important; margin-top: -2px; }

    /* ── Cards: tighter, more compact ── */
    .glass-panel { padding: 0.6rem !important; border-radius: 0.5rem !important; }
    #news-feed .glass-panel { padding: 0.5rem 0.6rem !important; }
    #news-feed .glass-panel h3 { font-size: 0.82rem !important; line-height: 1.3; }
    #news-feed .glass-panel .text-slate-400 { font-size: 0.62rem !important; }
    #news-feed .glass-panel .text-xs { font-size: 0.62rem !important; }
    #news-feed .space-y-3 > * + * { margin-top: 0.4rem; }
    /* Card actions row tighter */
    #news-feed .glass-panel .flex.items-center.gap-3 { gap: 0.35rem !important; }

    /* ── Alerts/heatmap: grid on mobile ── */
    #alerts-banner { margin-bottom: 0.25rem !important; }
    #overview-content { font-size: 0.7rem; }
    #overview-content .heatmap-row {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
        gap: 4px !important;
        flex-wrap: unset !important;
        overflow-x: unset !important;
        padding-bottom: 2px;
    }
    #overview-content .heatmap-row > div {
        min-width: 0 !important;
        flex: unset !important;
    }

    /* ── Hide agent panel on Home (mobile has its own Agent page) ── */
    #agent-panel { display: none !important; }

    /* ── Hide markets sidebar on Home/Saved (dedicated Markets tab) ── */
    #sidebar-column { display: none !important; }

    /* ── Feed cards: compact grid ── */
    #news-feed { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
    #news-feed.onboarding-active { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; }
    /* ── Onboarding welcome: vertical stack on mobile ── */
    .ob-wrap { padding: 1.25rem 0.5rem !important; }
    .ob-icon { width: 2.5rem !important; height: 2.5rem !important; margin-bottom: 0.5rem !important; }
    .ob-icon i { width: 1.25rem !important; height: 1.25rem !important; }
    .ob-greeting { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
    .ob-subtitle { font-size: 0.75rem !important; margin-bottom: 1.25rem !important; }
    .ob-steps { max-width: 100% !important; gap: 0.625rem !important; }
    .ob-step { flex-direction: column !important; align-items: center !important; gap: 0.5rem !important; padding: 0.875rem !important; }
    .ob-badge { width: 2rem !important; height: 2rem !important; font-size: 0.8rem !important; }
    .ob-text { width: 100% !important; text-align: center !important; }
    .ob-title-row { justify-content: center !important; }
    .ob-title { font-size: 0.8125rem !important; }
    .ob-desc { font-size: 0.6875rem !important; }
    .ob-arrow { position: absolute; right: 0.75rem; top: 0.75rem; width: 0.875rem !important; height: 0.875rem !important; }
    .ob-step-link { position: relative !important; }
    .ob-cta { font-size: 0.8125rem !important; padding: 0.625rem !important; }
    #news-feed .glass-panel { padding: 0.4rem 0.5rem !important; }
    #news-feed .glass-panel h3 { font-size: 0.72rem !important; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* Hide summary text on mobile grid */
    #news-feed .glass-panel > p.text-slate-400.text-sm { display: none; }
    /* Hide action buttons on mobile (card swipe handles save/dismiss) */
    #news-feed .glass-panel > .flex.items-center.gap-3 { display: none; }
    /* Hide score reason */
    #news-feed .glass-panel > p.drill-pill.text-\\[10px\\] { display: none; }
    /* Hide expandable content & AI/rating panels */
    #news-feed .card-content,
    #news-feed [id^="ai-response-"],
    #news-feed [id^="rating-panel-"] { display: none; }
    /* Hide source link (save space) */
    #news-feed .glass-panel > p.drill-pill.text-xs { display: none; }
    /* Compact metadata row */
    #news-feed .glass-panel > .flex.justify-between.items-start { margin-bottom: 0.2rem; }
    #news-feed .glass-panel > .flex.justify-between.items-start .flex.gap-2 { gap: 0.15rem !important; }
    /* Compact ping indicator */
    #news-feed .glass-panel .absolute.top-2.right-2 { top: 4px; right: 4px; }
    #news-feed .glass-panel .absolute.top-2.right-2 .w-2 { width: 6px; height: 6px; }

    /* ── Mobile Agent fullscreen view ── */
    /* Hide compact sidebar + toggle on mobile (mobile has its own agent view) */
    #agent-sidebar-btn { display: none !important; }
    .agent-compact-sidebar { display: none !important; }

    #mobile-agent-view {
        position: fixed; inset: 0; z-index: 55;
        background: var(--bg-primary);
        display: flex; flex-direction: column;
        animation: chartFsIn 0.2s ease;
    }
    #mobile-agent-view .mav-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-strong);
        background: var(--bg-panel-solid);
    }
    #mobile-agent-view .mav-title {
        display: flex; align-items: center; gap: 8px;
        font-size: 13px; font-weight: 700; color: var(--text-primary);
    }
    #mobile-agent-view .mav-title .mav-dot {
        width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted);
    }
    #mobile-agent-view .mav-close {
        width: 32px; height: 32px; border-radius: 8px; border: none;
        background: var(--bg-hover); color: var(--text-secondary);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    #mobile-agent-view .mav-actions {
        display: flex; align-items: center; gap: 4px;
    }
    #mobile-agent-view .mav-actions button {
        width: 32px; height: 32px; border-radius: 8px; border: none;
        background: transparent; color: var(--text-muted);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    #mobile-agent-view .mav-actions button:active { background: var(--bg-hover); }
    #mobile-agent-view .mav-body {
        flex: 1; overflow-y: auto; padding: 12px;
        -webkit-overflow-scrolling: touch;
    }
    #mobile-agent-view .mav-input-wrap {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border-strong);
        background: var(--bg-panel-solid);
    }
    #mobile-agent-view .mav-input-row {
        display: flex; gap: 8px; align-items: end;
    }
    #mobile-agent-view .mav-input {
        flex: 1; border-radius: 12px; padding: 10px 14px;
        font-size: 14px; border: 1px solid var(--border-strong);
        background: rgba(255,255,255,0.03); color: var(--text-primary);
        outline: none;
    }
    #mobile-agent-view .mav-input:focus { border-color: var(--accent); }
    #mobile-agent-view .mav-send {
        width: 38px; height: 38px; border-radius: 12px; border: none;
        background: var(--accent); color: white;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; flex-shrink: 0;
    }
    #mobile-agent-view .mav-input {
        resize: none; max-height: 120px; overflow-y: auto; line-height: 1.4;
    }
    #mobile-agent-view .mav-input-hint {
        padding: 2px 4px 0; text-align: right;
    }
    /* Conversation tabs (hidden by default, toggled by button) */
    #mobile-agent-view .mav-conv-tabs {
        display: none; gap: 6px; padding: 6px 12px; overflow-x: auto;
        border-bottom: 1px solid var(--border-strong);
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #mobile-agent-view .mav-conv-tabs::-webkit-scrollbar { display: none; }
    #mobile-agent-view .mav-conv-tab {
        flex-shrink: 0; padding: 5px 12px; border-radius: 8px;
        font-size: 11px; font-weight: 500; border: 1px solid var(--border-strong);
        background: transparent; color: var(--text-muted); cursor: pointer;
        transition: all 0.15s; white-space: nowrap; font-family: inherit;
    }
    #mobile-agent-view .mav-conv-tab:active { transform: scale(0.95); }
    #mobile-agent-view .mav-conv-active {
        background: var(--accent-bg, rgba(16,185,129,0.1)); color: var(--accent);
        border-color: var(--accent-border, rgba(16,185,129,0.25));
    }
    /* Suggestion chips */
    #mobile-agent-view .mav-suggestions {
        display: flex; gap: 6px; padding: 0 12px; overflow-x: auto;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    #mobile-agent-view .mav-suggestions:empty { display: none; }
    #mobile-agent-view .mav-suggestions::-webkit-scrollbar { display: none; }
    #mobile-agent-view .mav-chip {
        flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
        font-size: 12px; font-weight: 500; border: 1px solid var(--border-strong);
        background: rgba(255,255,255,0.03); color: var(--text-muted); cursor: pointer;
        transition: all 0.15s; white-space: nowrap; font-family: inherit;
    }
    #mobile-agent-view .mav-chip:active {
        transform: scale(0.95); background: var(--accent-bg, rgba(16,185,129,0.1));
        color: var(--accent); border-color: var(--accent);
    }

    /* ── Markets panel compact ── */
    #markets-panel { padding: 0.5rem !important; }
    #markets-panel .glass-panel { padding: 0.5rem !important; }
    /* Hide keyboard shortcuts on mobile (useless without keyboard) */
    #shortcuts-btn { display: none !important; }
    /* Hide "Click two grips to swap them" hint */
    #markets-panel .tracking-normal { display: none !important; }

    /* ── Briefing compact ── */
    #briefing-panel { font-size: 0.78rem; }
    #briefing-panel .glass-panel { padding: 0.6rem !important; }

    /* sidebar-column hidden on mobile — see above */

    /* ── Main content grid: single column, tight gap ── */
    #main-content { gap: 0.75rem !important; }

    /* ── Scanning/status banners compact ── */
    #scanning-banner { padding: 0.5rem 0.6rem !important; }
    #scanning-banner p { font-size: 0.72rem !important; }
    #newdata-banner { padding: 0.5rem 0.6rem !important; }
    #newdata-banner p { font-size: 0.72rem !important; }

    /* ── Loading state ── */
    #loading { padding: 4rem 0 !important; }

    /* ── Settings page: compact on mobile ── */
    #settings-panel { padding: 0.5rem !important; overflow-x: hidden !important; max-width: 100vw !important; box-sizing: border-box !important; }
    #settings-panel .glass-panel { padding: 0.75rem !important; margin-bottom: 0.5rem !important; overflow: hidden !important; }
    #settings-panel .grid { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
    #settings-panel select, #settings-panel input[type="text"], #settings-panel textarea {
        max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important;
    }
    #profile-avatar-preview { width: 40px !important; height: 40px !important; font-size: 14px !important; }
    #settings-simple { gap: 0.5rem !important; }
    main.overflow-y-auto { padding: 0.5rem !important; padding-bottom: 60px !important; box-sizing: border-box !important; }

    /* ── Hide keyboard shortcuts on mobile ── */
    #shortcuts-panel { display: none !important; }

    /* ── Settings header: stack buttons on mobile ── */
    #settings-panel > div:first-child { flex-wrap: wrap !important; gap: 6px !important; }
    #settings-panel > div:first-child > .flex.items-center.gap-2 { flex-wrap: wrap !important; gap: 4px !important; }

    /* ── Unified button sizes on mobile ── */
    .settings-header-btn { padding: 4px 8px !important; font-size: 10px !important; height: 28px !important; }

    /* ── Profile popup: fixed position on mobile so it's always visible ── */
    .profile-popup {
        position: fixed !important;
        bottom: 70px !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 200 !important;
    }
}

/* ── Extra small phones (≤360px) ── */
@media (max-width: 360px) {
    .bnav-item { padding: 4px 6px; font-size: 9px; }
    .bnav-item i, .bnav-item svg { width: 18px; height: 18px; }
    #page-title { font-size: 0.8rem !important; }
    #scan-btn { padding: 0.25rem 0.5rem !important; }
    .score-pill { padding: 0.15rem 0.3rem !important; font-size: 0.55rem !important; }
}

/* ── Phones portrait (≤480px) additional compaction ── */
@media (max-width: 480px) {
    /* Market heatmap: scroll horizontal */
    #overview-content .flex { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* Chart wrapper tighter */
    #chart-wrapper { min-height: 160px !important; }
    /* World tabs smaller */
    #world-tabs button { padding: 0.25rem 0.5rem !important; font-size: 0.6rem !important; }
}

/* ── Landscape compact mode ── */
@media (max-height: 500px) and (orientation: landscape) {
    .bottom-nav { padding: 2px 0; }
    .bnav-item { flex-direction: row; gap: 4px; padding: 4px 10px; font-size: 10px; }
    .bnav-item i, .bnav-item svg { width: 16px; height: 16px; }
    main { padding-bottom: 40px !important; }
    #news-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    main > div:first-child { padding: 4px 8px !important; }
}
/* ── PWA Install Banner ── */
#pwa-install-banner {
    position: fixed; bottom: 70px; left: 12px; right: 12px;
    z-index: 300;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--bg-panel-solid, #1a1e2e);
    border: 1px solid var(--accent, #5b8af5);
    border-radius: 10px;
    color: var(--text-primary, #e8ecf4);
    font-size: 13px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    animation: pwa-slide-up .3s ease-out;
}
#pwa-install-banner span { flex: 1; }
#pwa-install-btn {
    padding: 6px 14px; border: none; border-radius: 6px;
    background: var(--accent, #5b8af5); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
#pwa-dismiss-btn {
    background: none; border: none; color: var(--text-secondary, #8892a6);
    font-size: 18px; cursor: pointer; padding: 2px 6px;
}
@keyframes pwa-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   SETTINGS HEADER BUTTONS — unified sizing
   ═══════════════════════════════════════════════════ */
.settings-header-btn {
    padding: 6px 12px; font-size: 11px; height: 32px;
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; font-weight: 500; white-space: nowrap;
    cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.settings-header-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.settings-header-btn:active { filter: brightness(0.9); transform: scale(0.97); }

/* ═══════════════════════════════════════════════════
   SETTINGS SUB-TABS
   ═══════════════════════════════════════════════════ */
.stab-bar {
    display: flex; gap: 2px; padding: 2px;
    background: rgba(30,35,41,0.6); border-radius: 10px;
    margin-bottom: 8px;
}
.stab {
    flex: 1; padding: 8px 0; border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--text-muted); font-size: 12px;
    font-weight: 500; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
    font-family: inherit;
}
.stab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.stab.active { color: var(--accent, #34d399); background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); font-weight: 600; }

/* === DANGER ZONE (Delete Account) === */
.danger-zone { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(239,68,68,0.15); }
.danger-zone-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #ef4444; opacity: 0.6; margin-bottom: 0.75rem; font-weight: 600; }

/* === SUGGESTION CHIPS STAGGER === */
.agent-chips button { animation: chipFadeIn 0.25s ease both; }
.agent-chips button:nth-child(1) { animation-delay: 0.05s; }
.agent-chips button:nth-child(2) { animation-delay: 0.1s; }
.agent-chips button:nth-child(3) { animation-delay: 0.15s; }
.agent-chips button:nth-child(4) { animation-delay: 0.2s; }
.agent-chips button:nth-child(5) { animation-delay: 0.25s; }
.agent-chips button:nth-child(6) { animation-delay: 0.3s; }
@keyframes chipFadeIn { from { opacity: 0; transform: translateY(6px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* === FOCUS VISIBLE (Accessibility) === */
:focus-visible { outline: 2px solid var(--accent, #34d399); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent, #34d399); outline-offset: 2px; }

/* === REDUCED MOTION (Accessibility) === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .glass-panel[data-card-idx]:hover { transform: none; }
    .score-pill:active { transform: none; }
}

/* Ticker preset buttons */
.ticker-preset-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font-size: 11px;
    font-weight: 500; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
    background: var(--bg-panel-solid); border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}
.ticker-preset-btn:hover { border-color: var(--accent-border); color: var(--accent-light); background: var(--accent-bg); }
.ticker-preset-btn .preset-delete {
    opacity: 0; margin-left: 2px; color: #f87171; font-size: 13px;
    transition: opacity 0.15s; cursor: pointer; line-height: 1;
}
.ticker-preset-btn:hover .preset-delete { opacity: 0.7; }
.ticker-preset-btn .preset-delete:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════
   PROFILE POPUP MENU
   ═══════════════════════════════════════════════════ */
.profile-popup {
    position: absolute; bottom: calc(100% + 8px); left: 0; right: 0;
    min-width: 220px;
    background: var(--bg-panel-solid);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 12px;
    z-index: 60;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: profilePopIn 0.15s ease;
}
@keyframes profilePopIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ═══════════════════════════════════════════════════
   CHART ZOOM TOOLBAR
   ═══════════════════════════════════════════════════ */
.chart-toolbar {
    position: absolute; bottom: 8px; left: 8px; z-index: 25;
    display: flex; gap: 2px; padding: 2px;
    background: rgba(0,0,0,0.5); border-radius: 6px;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0.4; transition: opacity 0.2s;
}
.chart-toolbar:hover { opacity: 1; }
.chart-toolbar button {
    width: 26px; height: 26px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 14px; font-weight: 700;
    background: transparent; border: none; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.chart-toolbar button:hover {
    background: rgba(255,255,255,0.12); color: var(--text-primary, #e2e8f0);
}

/* ═══════════════════════════════════════════════════
   FULLSCREEN CHART — New overlay container
   ═══════════════════════════════════════════════════ */
#chart-fs-container {
    contain: layout style;
}

@media (max-width: 768px) {

    /* ── Markets panel charts: single column on mobile ── */
    #mp-chart-grid {
        grid-template-columns: 1fr !important;
    }
    #mp-chart-grid > div {
        grid-column: auto !important;
    }
    .mp-chartwrap {
        height: 220px !important;
    }
    #mp-overview-content { font-size: 0.7rem; }
    #mp-bottom-row { grid-template-columns: 1fr !important; }

    /* ── Split view toggle (visible on mobile only) ── */
    .mp-mobile-only { display: inline-flex !important; }

    /* ── Compact 2-column mode ── */
    #mp-chart-grid.compact-mobile { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
    #mp-chart-grid.compact-mobile .mp-chartwrap { height: 140px !important; }
    #mp-chart-grid.compact-mobile .mp-chart-panel { padding: 4px !important; }
    /* Hide tools & detail rows in compact mode to save space */
    #mp-chart-grid.compact-mobile .flex.items-center.gap-0\\.5,
    #mp-chart-grid.compact-mobile .flex.flex-wrap.items-center.gap-1 { display: none !important; }
    #mp-chart-grid.compact-mobile .mp-chart-header { font-size: 0.65rem !important; padding: 2px 4px !important; }
}
.mp-mobile-only { display: none; }

/* ═══════════════════════════════════════════════════
   DENSITY & FONT SIZE MODES
   ═══════════════════════════════════════════════════ */
/* Compact: tighter cards, hide summaries, smaller text */
body.density-compact #news-feed .glass-panel { padding: 6px 10px !important; border-radius: 8px !important; }
body.density-compact #news-feed .glass-panel h3 { font-size: 0.78rem !important; line-height: 1.3 !important; }
body.density-compact #news-feed .glass-panel > p.text-slate-400 { display: none !important; }
body.density-compact #news-feed .glass-panel .card-content { display: none !important; }
body.density-compact #news-feed .space-y-3 > * + * { margin-top: 4px !important; }
body.density-compact #news-feed .glass-panel .flex.items-center.gap-3 { gap: 4px !important; }
body.density-compact .score-pill { min-height: unset !important; padding: 2px 6px !important; font-size: 10px !important; }

/* Comfortable: spacious cards, larger text, full summaries */
body.density-comfortable #news-feed .glass-panel { padding: 18px 20px !important; border-radius: 14px !important; }
body.density-comfortable #news-feed .glass-panel h3 { font-size: 1rem !important; line-height: 1.5 !important; }
body.density-comfortable #news-feed .space-y-3 > * + * { margin-top: 12px !important; }
body.density-comfortable #news-feed .glass-panel > p.text-slate-400 { font-size: 0.85rem !important; }
body.density-comfortable .score-pill { min-height: 36px !important; padding: 6px 12px !important; }

/* ═══ ACCOUNT SETTINGS GRID ═══ */
.acct-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.acct-left { display:block; }
.acct-right { padding-left:16px; border-left:1px solid var(--border-strong,#1e293b); }
.acct-right button { cursor:pointer; transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.acct-right button:hover { filter:brightness(1.2); transform:translateY(-1px); }
.acct-right button:active { filter:brightness(0.9); transform:scale(0.97); }
.acct-btns { grid-column:1 / -1; display:flex; gap:12px; align-items:center; }
.acct-btns button { cursor:pointer; transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
.acct-btns button:hover { filter:brightness(1.2); transform:translateY(-1px); }
.acct-btns button:active { filter:brightness(0.9); transform:scale(0.97); }
@media (max-width:768px) {
    .acct-grid { grid-template-columns:1fr; }
    .acct-right { padding-left:0; border-left:none; border-top:1px solid var(--border-strong,#1e293b); padding-top:12px; }
}

/* ═══ FIRST-TIME TAB TOOLTIPS ═══ */
.stab-tooltip {
    padding:10px 14px; border-radius:10px; margin-bottom:12px;
    background:rgba(16,185,129,0.06); border:1px solid rgba(16,185,129,0.15);
    display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-secondary);
    animation:stab-tip-in 0.3s ease;
}
.stab-tooltip .stab-tip-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; margin-left:auto; padding:2px 6px; }
.stab-tooltip .stab-tip-close:hover { color:var(--text-primary); }
@keyframes stab-tip-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

/* ═══════════════════════════════════════════════════
   GUIDED TOUR — Spotlight overlay + tooltips
   All colors via CSS custom properties for theme compat.
   ═══════════════════════════════════════════════════ */

/* ── Utility ── */
.tour-hidden { display: none !important; }

/* ── Overlay container ── */
#stratos-tour-overlay {
    position: fixed; inset: 0; z-index: 9998;
    pointer-events: none; opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#stratos-tour-overlay.tour-visible { opacity: 1; pointer-events: auto; }
#stratos-tour-overlay.tour-fading-out { opacity: 0; pointer-events: none; }

/* ── Cutout spotlight (CSS box-shadow approach) ── */
.tour-cutout-box {
    position: fixed;
    z-index: 9998;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72),
                0 0 0 2px color-mix(in srgb, var(--accent, #10b981) 40%, transparent);
    transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
    pointer-events: none;
    /* Start hidden off-screen */
    left: -20px; top: -20px; width: 0; height: 0;
}
[data-dark="true"] .tour-cutout-box {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.82),
                0 0 0 2px color-mix(in srgb, var(--accent, #10b981) 40%, transparent);
}
[data-bright="true"] .tour-cutout-box {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65),
                0 0 0 2px color-mix(in srgb, var(--accent, #10b981) 40%, transparent);
}
/* Subtle pulse glow on the ring */
.tour-ring-pulse {
    animation: tour-ring-breathe 2.2s ease-in-out infinite;
}
@keyframes tour-ring-breathe {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72),
                           0 0 0 2px color-mix(in srgb, var(--accent, #10b981) 40%, transparent); }
    50%      { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72),
                           0 0 0 3px color-mix(in srgb, var(--accent, #10b981) 70%, transparent),
                           0 0 12px color-mix(in srgb, var(--accent, #10b981) 20%, transparent); }
}

/* ── Tooltip card ── */
.tour-tooltip {
    position: fixed; z-index: 9999;
    pointer-events: auto;
    width: 320px;
    background: var(--bg-panel-solid, #111820);
    border: 1px solid color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45),
                0 0 40px color-mix(in srgb, var(--accent, #10b981) 10%, transparent);
    overflow: hidden;
    will-change: opacity, transform;
}

/* Tooltip animation states */
.tour-tooltip-hidden {
    opacity: 0; pointer-events: none;
    transform: translateY(10px) scale(0.97);
}
.tour-tooltip-entering {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: none;
}
.tour-tooltip-visible {
    opacity: 1; pointer-events: auto;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-tooltip-exit {
    opacity: 0; pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* Tag bar */
.tour-tag-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--accent, #10b981) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--accent, #10b981);
}
.tour-tag-icon { font-size: 12px; }
.tour-progress-text {
    margin-left: auto;
    font-size: 10px; font-weight: 600;
    color: var(--text-muted, #64748b);
    letter-spacing: 0; text-transform: none;
}
.tour-progress-track {
    height: 2px; width: 100%;
    background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
}
.tour-progress-fill {
    height: 100%; width: 0%;
    background: var(--accent, #10b981);
    border-radius: 0 1px 1px 0;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-el-hidden { display: none !important; }

/* Content area */
.tour-content { padding: 16px 16px 12px; }
.tour-title {
    font-size: 16px; font-weight: 700; margin-bottom: 6px;
    color: var(--text-primary, #e2e8f0);
}
.tour-body {
    font-size: 13px; line-height: 1.65; margin-bottom: 4px;
    color: var(--text-secondary, #94a3b8);
}
.tour-example {
    font-size: 12px; font-style: italic; margin-top: 8px;
    color: color-mix(in srgb, var(--accent, #10b981) 65%, var(--text-muted, #64748b));
}
.tour-hint {
    font-size: 12px; font-weight: 600; margin-top: 8px;
    color: var(--accent, #10b981);
    animation: tour-hint-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-hint-pulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Actions */
.tour-actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 14px;
}
.tour-skip {
    background: none; border: 1px solid rgba(148,163,184,0.3); border-radius: 8px; cursor: pointer;
    font-size: 13px; color: var(--text-secondary, #94a3b8); opacity: 0.85;
    padding: 8px 18px;
    transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tour-skip:hover { opacity: 1; color: var(--text-primary, #e2e8f0); border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.06); }
.tour-never {
    display: block; width: 100%; text-align: center; margin-top: 6px; padding: 8px 0 6px;
    background: none; border: none; border-top: 1px solid rgba(148,163,184,0.12); cursor: pointer;
    font-size: 11px; color: var(--text-secondary, #94a3b8); opacity: 0.65;
    transition: opacity 0.25s ease, color 0.25s ease;
}
.tour-never:hover { opacity: 1; color: var(--text-primary, #e2e8f0); }
.tour-welcome-never { margin-top: 14px; border-top: none; font-size: 12px; padding: 10px 20px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.2); color: var(--text-secondary, #94a3b8); opacity: 0.7; }
.tour-welcome-never:hover { border-color: rgba(148,163,184,0.4); background: rgba(148,163,184,0.06); opacity: 1; color: var(--text-primary, #e2e8f0); }
.tour-next {
    padding: 8px 22px; border-radius: 8px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600;
    background: var(--accent, #10b981); color: #fff;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent, #10b981) 30%, transparent);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tour-next:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent, #10b981) 40%, transparent);
}
.tour-next:active { transform: translateY(0); }

/* ── Welcome modal ── */
.tour-welcome-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
}
.tour-welcome-hidden { display: none !important; }
.tour-welcome-entering .tour-welcome-card {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
}
.tour-welcome-visible .tour-welcome-card {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-welcome-exiting .tour-welcome-card {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.tour-welcome-card {
    position: relative; overflow: hidden;
    width: 92%; max-width: 440px;
    padding: 40px 32px 32px; text-align: center;
    background: var(--bg-panel-solid, #0f172a);
    border: 1px solid color-mix(in srgb, var(--accent, #10b981) 20%, transparent);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5),
                0 0 60px color-mix(in srgb, var(--accent, #10b981) 6%, transparent);
    will-change: opacity, transform;
}
.tour-welcome-glow {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent, #10b981) 8%, transparent) 0%, transparent 70%);
    animation: tour-glow-rotate 8s linear infinite;
    pointer-events: none;
}
@keyframes tour-glow-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tour-welcome-icon { font-size: 48px; margin-bottom: 16px; position: relative; z-index: 1; }
.tour-welcome-title {
    font-size: 22px; font-weight: 700; margin-bottom: 10px;
    color: var(--text-primary, #e2e8f0);
    position: relative; z-index: 1;
}
.tour-welcome-body {
    font-size: 14px; line-height: 1.7; margin-bottom: 28px;
    color: var(--text-muted, #64748b);
    position: relative; z-index: 1;
}
.tour-welcome-actions { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; z-index: 1; }
.tour-welcome-skip {
    background: none; border: 1px solid rgba(148,163,184,0.3); border-radius: 10px; cursor: pointer;
    font-size: 13px; color: var(--text-secondary, #94a3b8); opacity: 0.85;
    padding: 12px 24px;
    transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tour-welcome-skip:hover { opacity: 1; color: var(--text-primary, #e2e8f0); border-color: rgba(148,163,184,0.5); background: rgba(148,163,184,0.06); }
.tour-welcome-cta {
    padding: 12px 28px; border-radius: 10px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700;
    background: var(--accent, #10b981); color: #fff;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tour-welcome-cta:hover {
    filter: brightness(1.15); transform: translateY(-1px);
    box-shadow: 0 6px 28px color-mix(in srgb, var(--accent, #10b981) 35%, transparent);
}
.tour-welcome-cta:active { transform: translateY(0); }

/* ── Interactive target: allow typing through the overlay ── */
.tour-interactive-target {
    position: relative !important;
    z-index: 9999 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #10b981) 30%, transparent),
                0 0 20px color-mix(in srgb, var(--accent, #10b981) 15%, transparent) !important;
    border-color: var(--accent, #10b981) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ── Help menu popover ── */
.tour-help-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 999;
    min-width: 160px; padding: 4px;
    background: var(--bg-panel-solid, #111820);
    border: 1px solid var(--border-strong, #334155);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.tour-help-menu button {
    display: block; width: 100%; text-align: left;
    padding: 8px 12px; border: none; border-radius: 6px;
    background: none; cursor: pointer;
    font-size: 12px; color: var(--text-secondary, #94a3b8);
    transition: background 0.15s ease, color 0.15s ease;
}
.tour-help-menu button:hover {
    background: color-mix(in srgb, var(--accent, #10b981) 12%, transparent);
    color: var(--text-primary, #e2e8f0);
}

/* ── Explore tour prompt banner ── */
.tour-explore-prompt {
    position: fixed; bottom: 24px; left: 50%; z-index: 9999;
    transform: translateX(-50%) translateY(20px);
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px; border-radius: 12px;
    background: var(--bg-panel-solid, #111820);
    border: 1px solid color-mix(in srgb, var(--accent, #10b981) 25%, transparent);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4),
                0 0 30px color-mix(in srgb, var(--accent, #10b981) 8%, transparent);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour-explore-prompt-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tour-explore-prompt-text {
    font-size: 13px; color: var(--text-secondary, #94a3b8); white-space: nowrap;
}
.tour-explore-prompt-yes {
    padding: 6px 16px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600;
    background: var(--accent, #10b981); color: #fff;
    transition: filter 0.2s ease;
}
.tour-explore-prompt-yes:hover { filter: brightness(1.15); }
.tour-explore-prompt-no {
    background: none; border: none; cursor: pointer;
    font-size: 14px; color: var(--text-muted, #64748b); opacity: 0.5;
    transition: opacity 0.2s ease;
}
.tour-explore-prompt-no:hover { opacity: 1; }

/* ── Mobile: welcome as bottom-sheet, tooltips full-width ── */
@media (max-width: 768px) {
    .tour-welcome-modal { align-items: flex-end; }
    .tour-welcome-card {
        max-width: 100%; width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 32px 24px 28px;
    }
    .tour-welcome-entering .tour-welcome-card {
        transform: translateY(100%);
    }
    .tour-welcome-visible .tour-welcome-card {
        transform: translateY(0);
    }
    .tour-welcome-exiting .tour-welcome-card {
        transform: translateY(100%);
    }
    .tour-tooltip {
        width: calc(100vw - 32px) !important;
        max-width: 360px;
    }
    .tour-explore-prompt {
        bottom: 16px; left: 16px; right: 16px;
        transform: translateX(0) translateY(20px);
        flex-wrap: wrap; gap: 8px; white-space: normal;
    }
    .tour-explore-prompt-visible {
        transform: translateX(0) translateY(0);
    }
    .tour-explore-prompt-text { white-space: normal; }
}

/* ═══════════════════════════════════════════════════
   MOBILE — File Browser & Context Editor as Bottom Sheets
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Context editor: bottom sheet instead of right sidebar ── */
    .ctx-editor-sidebar {
        position: absolute; top: auto; right: 0; bottom: 0; left: 0;
        width: 100vw !important; max-height: 85vh;
        border-left: none; border-top: 1px solid var(--border-strong);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    }
    .ctx-slide-in .ctx-editor-sidebar { transform: translateY(0); }
    .ctx-editor-header { padding: 14px 16px; }
    .ctx-editor-header::before {
        content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15);
    }
    .ctx-editor-body { padding: 10px 14px; }
    .ctx-editor-textarea { min-height: 160px; font-size: 14px; }
    .ctx-btn { padding: 8px 16px; font-size: 12px; min-height: 36px; }

    /* ── File browser: bottom sheet ── */
    #file-browser-panel .ctx-editor-sidebar {
        max-height: 80vh;
    }
    #file-browser-panel .ctx-editor-header::before {
        content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
        width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15);
    }
    /* Larger touch targets for file browser entries */
    .fb-tool-btn { padding: 8px 10px; min-height: 36px; min-width: 36px; }
    #fb-file-list > div { padding: 10px 12px !important; min-height: 44px; }
    /* Always show delete button on touch (no hover) */
    #fb-file-list .group button { opacity: 0.6 !important; }
    #fb-file-list > div span { font-size: 13px !important; }
    /* File editor textarea touch-friendly */
    #fb-editor-textarea { font-size: 14px !important; }

    /* ── Mobile agent: persona row & actions ── */
    #mobile-agent-view .mav-header {
        flex-wrap: wrap; gap: 6px; padding: 10px 12px;
    }
    .mav-persona-row {
        display: flex; gap: 4px; padding: 6px 12px; overflow-x: auto;
        border-bottom: 1px solid var(--border-strong);
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .mav-persona-row::-webkit-scrollbar { display: none; }
    .mav-persona-btn {
        flex-shrink: 0; padding: 5px 12px; border-radius: 16px;
        font-size: 11px; font-weight: 600; border: 1px solid var(--border-strong);
        background: transparent; color: var(--text-muted); cursor: pointer;
        transition: all 0.15s;
    }
    .mav-persona-btn:active { transform: scale(0.95); }
    .mav-persona-active {
        background: var(--accent-bg); color: var(--accent);
        border-color: var(--accent-border);
    }
    /* ── Minimum font sizes (WCAG AA) ── */
    .text-\\[9px\\] { font-size: 10px !important; }
    .text-\\[10px\\] { font-size: 11px !important; }
    .text-\\[11px\\] { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE — Touch-friendly interactions
   ═══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Replace hover-only delete buttons with always-visible (reduced opacity) */
    .group-hover\:opacity-100 { opacity: 0.5 !important; }
    /* Larger touch targets for small buttons */
    .fb-tool-btn { min-height: 36px; min-width: 36px; }
    /* File browser entries — touch-friendly spacing */
    #fb-file-list > div { min-height: 44px; }
    /* Context editor buttons — touch-friendly */
    .ctx-btn { min-height: 36px; }
    /* Active states instead of hover */
    .fb-tool-btn:active { color: var(--accent); border-color: var(--accent); background: rgba(16,185,129,0.1); }
    .ctx-btn-reset:active { color: #f87171; border-color: rgba(239,68,68,0.3); }
    /* Market chart tool buttons — active feedback */
    .mp-chart-panel button:active { background: var(--bg-hover); }
    /* Chart resize handles — larger grab area for touch */
    .mp-resize-handle { min-height: 20px !important; }
    /* Market heatmap tiles — active state */
    #overview-content .heatmap-row > div:active,
    #mp-overview-content .heatmap-row > div:active { transform: scale(0.95); }
}

/* ═══════════════════════════════════════════════════
   MOBILE PERFORMANCE — disable heavy GPU effects
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .glass-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-panel-solid); }
    .te-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .sidebar-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .cfs-hotbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .chart-toolbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .profile-popup { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ctx-editor-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* Reduce animation durations on mobile */
    .ctx-editor-sidebar { transition-duration: 0.2s; }
    /* Simplify box shadows on mobile */
    .glass-panel { box-shadow: none; }
    /* Optimize scroll containers */
    #news-feed, #fb-file-list, .mav-body, main {
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }
    /* Reduce paint by disabling unnecessary transitions */
    .news-card { transition: none; }
}

/* Disable heavy effects on touch devices (tablets + phones) */
@media (hover: none) and (pointer: coarse) {
    .glass-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-panel-solid); }
    .te-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .sidebar-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .cfs-hotbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .chart-toolbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .profile-popup { backdrop-filter: none; -webkit-backdrop-filter: none; }
    button:hover { filter: none; }
    button:active { transform: none; filter: none; }
}

/* Swipe hint animation */
@keyframes swipeHintIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════
   PERFORMANCE MODE — body.perf-mode disables expensive GPU effects
   ═══════════════════════════════════════════════════ */
body.perf-mode *,
body.perf-mode *::before,
body.perf-mode *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Kill box-shadows globally — one of the biggest GPU consumers */
body.perf-mode .glass-panel,
body.perf-mode .profile-popup,
body.perf-mode .chart-toolbar,
body.perf-mode .cfs-hotbar,
body.perf-mode .sidebar-backdrop,
body.perf-mode .stratos-prompt-backdrop,
body.perf-mode [class*="shadow"] {
    box-shadow: none !important;
}
body.perf-mode .glass-panel {
    background: var(--bg-panel-solid, var(--bg-panel)) !important;
}

/* Kill filters (brightness, blur, drop-shadow) — trigger full element repaint */
body.perf-mode button:hover,
body.perf-mode button:active,
body.perf-mode .cfs-tool:hover,
body.perf-mode .fe-sidebar-item:hover {
    filter: none !important;
    transform: none !important;
}

/* Kill hover transforms on cards and interactive elements */
body.perf-mode .glass-panel[data-card-idx]:hover {
    transform: none !important;
}

body.perf-mode .cosmos-canvas,
body.perf-mode .star-field,
body.perf-mode #cosmos-container,
body.perf-mode #auth-star-field {
    display: none !important;
}

/* Preserve essential animations in perf mode */
body.perf-mode .loading-spinner,
body.perf-mode .scan-progress-bar,
body.perf-mode .scan-progress-fill,
body.perf-mode [class*="animate-spin"],
body.perf-mode [class*="animate-pulse"] {
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
    transition-duration: 0.2s !important;
}

/* TTS speak button — hidden in perf mode and when TTS disabled */
body.perf-mode .speak-btn,
body.tts-disabled .speak-btn {
    display: none !important;
}

/* Mobile: always show speak button (no hover) */
@media (hover: none) {
    .speak-btn { opacity: 0.5 !important; }
}

/* ── Voice Input — STT Mic Button ─────────────────────── */
.agent-mic-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    color: rgba(255,255,255,0.45);
    min-width: 36px; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.agent-mic-btn:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8);
}
.agent-mic-btn.stt-recording {
    color: #ef4444;
    animation: stt-pulse 1.5s ease-in-out infinite;
    background: rgba(239,68,68,0.1);
}
@keyframes stt-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); transform: scale(1); }
    50%     { box-shadow: 0 0 0 8px rgba(239,68,68,0); transform: scale(1.05); }
}
.agent-mic-btn.stt-processing {
    animation: stt-spin 1s linear infinite;
    pointer-events: none; opacity: 0.6;
}
@keyframes stt-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.agent-mic-btn.stt-error {
    color: #ef4444;
    animation: stt-flash 0.3s ease-in-out 3;
}
@keyframes stt-flash { 50%{background:rgba(239,68,68,0.2)} }
.stt-duration {
    position: absolute; top: -18px; right: 0;
    font-size: 10px; color: #ef4444;
    font-variant-numeric: tabular-nums;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
}
body.stt-disabled .agent-mic-btn { display: none !important; }
body.perf-mode .agent-mic-btn.stt-recording { animation: none; color: #ef4444; background: rgba(239,68,68,0.15); }
body.perf-mode .agent-mic-btn.stt-processing { animation: none; }
@media (max-width: 768px) {
    .agent-mic-btn { min-width: 44px; min-height: 44px; }
}

/* Respect reduced-motion system preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .auth-orb { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════ */
/* STRATOS PROMPT / CONFIRM MODAL                             */
/* ═══════════════════════════════════════════════════════════ */
.stratos-prompt-backdrop {
    position: fixed; inset: 0; z-index: 999990;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease;
}
.stratos-prompt-dialog {
    background: var(--bg-panel-solid, #12162b);
    border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
    border-radius: 14px; padding: 20px 24px; min-width: 340px; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    transform: scale(0.95); opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease;
}
.sp-title {
    font-size: 14px; font-weight: 600; color: var(--text-primary, #e2e8f0);
    margin-bottom: 14px;
}
.sp-message {
    font-size: 13px; color: var(--text-secondary, #94a3b8);
    margin-bottom: 16px; line-height: 1.5;
}
.sp-field { margin-bottom: 10px; }
.sp-label {
    display: block; font-size: 11px; font-weight: 500;
    color: var(--text-secondary, #94a3b8); margin-bottom: 4px;
}
.sp-input {
    width: 100%; padding: 9px 12px; font-size: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
    border-radius: 8px; color: var(--text-primary, #e2e8f0);
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.sp-input:focus {
    border-color: var(--accent, #60a5fa);
    box-shadow: 0 0 0 2px rgba(96,165,250,0.15);
}
.sp-input.sp-shake {
    animation: spShake 0.3s ease;
    border-color: #f87171;
}
@keyframes spShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.sp-buttons {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.sp-btn {
    padding: 7px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; transition: all 0.12s;
}
.sp-cancel {
    background: rgba(255,255,255,0.05); color: var(--text-secondary, #94a3b8);
    border-color: var(--border-strong, rgba(255,255,255,0.1));
}
.sp-cancel:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #e2e8f0); }
.sp-ok {
    background: var(--accent, #60a5fa); color: #fff; border-color: transparent;
}
.sp-ok:hover { filter: brightness(1.1); }
.sp-danger {
    background: rgba(239,68,68,0.8);
}
.sp-danger:hover { background: rgba(239,68,68,1); }

/* ======================================================================
   PROMPT BUILDER (pb-* prefix)
   ====================================================================== */
.pb-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.pb-modal {
    background: var(--bg-panel-solid, #0f172a);
    border: 1px solid var(--border-strong, rgba(255,255,255,0.1));
    border-radius: 16px; width: 90vw; max-width: 900px;
    max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.pb-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-strong, rgba(255,255,255,0.08));
}
.pb-title {
    font-size: 15px; font-weight: 700; color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
}
.pb-tabs { display: flex; gap: 4px; margin-left: 16px; }
.pb-tab {
    padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
    background: transparent; color: rgba(255,255,255,0.4); border: none; cursor: pointer;
    transition: all 0.15s;
}
.pb-tab:hover { color: rgba(255,255,255,0.7); }
.pb-tab-active { background: var(--accent, #60a5fa); color: #fff; }
.pb-close {
    margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.pb-close:hover { color: #fff; }
.pb-body {
    flex: 1; overflow-y: auto; padding: 20px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.pb-form { display: flex; flex-direction: column; gap: 16px; }
.pb-row { display: flex; gap: 12px; }
.pb-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pb-field-sm { flex: 0 0 100px; }
.pb-field-lg { flex: 2; }
.pb-field > label {
    font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 8px;
}
.pb-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; opacity: 0.6; }
.pb-input {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px; font-size: 13px;
    color: var(--text-primary, #e2e8f0); outline: none; transition: border-color 0.15s;
}
.pb-input:focus { border-color: var(--accent, #60a5fa); }
.pb-textarea {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit;
    color: var(--text-primary, #e2e8f0); outline: none; resize: vertical;
    min-height: 80px; transition: border-color 0.15s;
}
.pb-textarea:focus { border-color: var(--accent, #60a5fa); }
.pb-textarea-sm { min-height: 50px; }
.pb-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.pb-radio {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: rgba(255,255,255,0.7); cursor: pointer;
}
.pb-radio input { accent-color: var(--accent, #60a5fa); }
.pb-checkbox-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
}
.pb-check {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,0.7); cursor: pointer;
}
.pb-check input { accent-color: var(--accent, #60a5fa); }

/* Phases */
.pb-phase {
    display: flex; align-items: center; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pb-phase-handle {
    cursor: grab; color: rgba(255,255,255,0.25); font-size: 14px; user-select: none;
}
.pb-phase-num { font-size: 12px; color: rgba(255,255,255,0.4); min-width: 20px; }
.pb-phase-name { flex: 1; }
.pb-phase-desc { flex: 1.5; }
.pb-phase.pb-dragging { opacity: 0.5; background: rgba(255,255,255,0.03); border-radius: 6px; }
.pb-btn-x {
    background: none; border: none; color: rgba(255,255,255,0.3); font-size: 18px;
    cursor: pointer; padding: 2px 6px; line-height: 1;
}
.pb-btn-x:hover { color: #ef4444; }
.pb-btn-sm {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 3px 10px; font-size: 11px;
    color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.15s;
}
.pb-btn-sm:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Context preview */
.pb-context-preview {
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 12px; font-size: 11px;
    color: rgba(255,255,255,0.5); max-height: 160px; overflow-y: auto;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.pb-context-preview pre { margin: 2px 0; white-space: pre-wrap; font-size: 10px; color: rgba(255,255,255,0.4); }
.pb-context-preview strong { color: rgba(255,255,255,0.65); }
.pb-ctx-section { margin-bottom: 6px; }

/* Actions */
.pb-actions { display: flex; gap: 8px; align-items: center; padding-top: 8px; }
.pb-btn {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.15s;
}
.pb-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pb-btn-primary {
    background: var(--accent, #60a5fa); color: #fff; border-color: transparent;
}
.pb-btn-primary:hover { filter: brightness(1.1); }
.pb-btn-danger { color: #ef4444; border-color: rgba(239,68,68,0.3); }
.pb-btn-danger:hover { background: rgba(239,68,68,0.15); }
.pb-select {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px 12px; font-size: 12px;
    color: rgba(255,255,255,0.6); outline: none;
}
.pb-select-sm {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 3px 8px; font-size: 11px;
    color: rgba(255,255,255,0.6); outline: none;
}

/* Preview */
.pb-preview-section {
    margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 16px;
}
.pb-preview-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7);
}
.pb-preview-actions { display: flex; gap: 6px; }
.pb-preview {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; padding: 16px; font-size: 12px; line-height: 1.6;
    color: rgba(255,255,255,0.7); max-height: 400px; overflow-y: auto;
    white-space: pre-wrap; word-wrap: break-word;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

/* History items */
.pb-history-item, .pb-template-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px; color: rgba(255,255,255,0.8);
}
.pb-history-item:last-child, .pb-template-item:last-child { border-bottom: none; }
.pb-history-header { display: flex; flex-direction: column; gap: 2px; }
.pb-history-meta { font-size: 11px; color: rgba(255,255,255,0.35); }
.pb-history-actions { display: flex; gap: 6px; align-items: center; }
.pb-empty, .pb-loading {
    text-align: center; padding: 40px 20px;
    font-size: 13px; color: rgba(255,255,255,0.35);
}

/* Prompt viewer overlay */
.pb-prompt-viewer {
    position: fixed; inset: 0; z-index: 10001;
    background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center;
}
.pb-prompt-viewer-inner {
    background: var(--bg-panel-solid, #0f172a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; width: 80vw; max-width: 800px; max-height: 85vh;
    display: flex; flex-direction: column;
}
.pb-prompt-viewer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.7);
}
.pb-prompt-viewer-header button {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 20px; cursor: pointer;
}
.pb-prompt-viewer-inner .pb-preview {
    flex: 1; max-height: none; border-radius: 0 0 12px 12px; border: none;
}

/* Responsive */
@media (max-width: 768px) {
    .pb-modal { width: 95vw; max-height: 95vh; }
    .pb-row { flex-direction: column; }
    .pb-checkbox-grid { grid-template-columns: 1fr; }
    .pb-history-item, .pb-template-item { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ════════════════ CODEX BROWSER (cx- prefix) ════════════════ */
.cx-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.cx-modal {
    width: 90vw; max-width: 820px; max-height: 85vh;
    background: var(--bg-panel-solid, #0f172a);
    border: 1px solid var(--border-strong, #334155);
    border-radius: 16px; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.cx-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-strong, #1e293b);
    gap: 12px; flex-shrink: 0;
}
.cx-header-left { display: flex; align-items: center; gap: 10px; }
.cx-header-right { display: flex; align-items: center; gap: 8px; }
.cx-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #e2e8f0); }
.cx-badge {
    font-size: 10px; padding: 2px 8px; border-radius: 99px;
    background: var(--accent, #34d399); color: #000; font-weight: 600;
}
.cx-back {
    background: none; border: 1px solid var(--border-strong, #334155);
    color: var(--text-secondary, #94a3b8); border-radius: 6px;
    padding: 4px 10px; cursor: pointer; font-size: 14px;
}
.cx-back:hover { border-color: var(--accent, #34d399); color: var(--accent, #34d399); }
.cx-close {
    background: none; border: none; color: var(--text-secondary, #64748b);
    font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.cx-close:hover { color: var(--text-primary, #e2e8f0); }
.cx-search {
    background: var(--bg-input, #1e293b); border: 1px solid var(--border-strong, #334155);
    color: var(--text-primary, #e2e8f0); border-radius: 8px;
    padding: 6px 12px; font-size: 12px; width: 200px; outline: none;
}
.cx-search:focus { border-color: var(--accent, #34d399); }
.cx-content { overflow-y: auto; padding: 16px 20px; flex: 1; }

/* Category grid */
.cx-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cx-card {
    background: var(--bg-input, #1e293b); border: 1px solid var(--border-strong, #334155);
    border-radius: 12px; padding: 20px 16px; text-align: center;
    cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.cx-card:hover { border-color: var(--accent, #34d399); transform: translateY(-2px); }
.cx-card-icon { font-size: 28px; margin-bottom: 8px; }
.cx-card-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0); }
.cx-card-count { font-size: 11px; color: var(--text-secondary, #64748b); margin-top: 4px; }

/* Term list */
.cx-section-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.cx-section-icon { font-size: 20px; }
.cx-section-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #e2e8f0); }
.cx-term-list { display: flex; flex-direction: column; gap: 4px; }
.cx-term-row {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--bg-input, #1e293b); border: 1px solid transparent;
    border-radius: 8px; cursor: pointer; transition: border-color 0.15s;
    flex-wrap: wrap;
}
.cx-term-row:hover { border-color: var(--accent, #34d399); }
.cx-term-name { font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0); white-space: nowrap; }
.cx-term-preview { font-size: 11px; color: var(--text-secondary, #64748b); flex: 1; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-type-tag {
    font-size: 9px; padding: 1px 6px; border-radius: 4px;
    background: rgba(52, 211, 153, 0.15); color: var(--accent, #34d399);
    font-weight: 600; text-transform: uppercase; white-space: nowrap;
}
.cx-type-lg { font-size: 10px; padding: 2px 8px; }
.cx-cat-tag {
    font-size: 9px; padding: 1px 6px; border-radius: 4px;
    background: rgba(148, 163, 184, 0.15); color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
}
.cx-sprint-tag {
    font-size: 10px; padding: 2px 8px; border-radius: 4px; margin-left: 6px;
    background: rgba(56, 189, 248, 0.12); color: #38bdf8;
}

/* Detail view */
.cx-detail { max-width: 680px; }
.cx-detail-title { font-size: 20px; font-weight: 700; color: var(--text-primary, #e2e8f0); margin-bottom: 8px; }
.cx-detail-def { font-size: 13px; color: var(--text-secondary, #cbd5e1); line-height: 1.7; margin: 16px 0; }
.cx-detail-section { margin: 16px 0; }
.cx-detail-section h4 { font-size: 12px; font-weight: 600; color: var(--text-primary, #e2e8f0); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.cx-detail-section ul { list-style: none; padding: 0; }
.cx-detail-section li { font-size: 12px; color: var(--text-secondary, #94a3b8); padding: 3px 0; }
.cx-detail-section code { font-size: 11px; background: rgba(148,163,184,0.1); padding: 1px 5px; border-radius: 3px; color: var(--accent, #34d399); }
.cx-related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chip {
    font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
    background: var(--bg-input, #1e293b); border: 1px solid var(--border-strong, #334155);
    color: var(--text-secondary, #94a3b8); transition: all 0.15s;
}
.cx-chip:hover { border-color: var(--accent, #34d399); color: var(--accent, #34d399); }
.cx-detail-meta { margin-top: 20px; font-size: 12px; color: var(--text-secondary, #64748b); }

/* Breadcrumb */
.cx-breadcrumb { display: flex; align-items: center; gap: 6px; }
.cx-breadcrumb-link {
    font-size: 13px; font-weight: 600; color: var(--accent, #34d399); background: none; border: none; padding: 0; cursor: pointer;
    transition: opacity 0.15s;
}
.cx-breadcrumb-link:hover { opacity: 0.75; text-decoration: underline; }
.cx-breadcrumb-sep { font-size: 13px; color: var(--text-secondary, #64748b); }
.cx-breadcrumb-active { font-size: 13px; font-weight: 600; color: var(--text-primary, #e2e8f0); }

/* Responsive */
@media (max-width: 640px) {
    .cx-modal { width: 98vw; max-height: 95vh; }
    .cx-grid { grid-template-columns: repeat(2, 1fr); }
    .cx-search { width: 120px; }
}

/* ═══ Intelligence Persona — Terminal Code Style ═══ */
#agent-panel.agent-intel .agent-response {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #c8d6e5 !important;
}
#agent-panel.agent-intel .agent-response strong,
#agent-panel.agent-intel .agent-response b {
    color: #34d399;
    text-shadow: 0 0 6px rgba(52,211,153,0.25);
    font-weight: 700;
}
#agent-panel.agent-intel .agent-response code {
    color: #06b6d4;
    background: rgba(6,182,212,0.08);
    text-shadow: 0 0 4px rgba(6,182,212,0.2);
}
#agent-panel.agent-intel .agent-response a {
    color: #06b6d4;
    text-shadow: 0 0 4px rgba(6,182,212,0.15);
}
#agent-panel.agent-intel .agent-response li::marker {
    color: #34d399;
}
#agent-panel.agent-intel .agent-response h1,
#agent-panel.agent-intel .agent-response h2,
#agent-panel.agent-intel .agent-response h3,
#agent-panel.agent-intel .agent-response h4 {
    color: #34d399 !important;
    text-shadow: 0 0 8px rgba(52,211,153,0.2);
    font-family: 'JetBrains Mono', monospace !important;
}
#agent-panel.agent-intel .agent-bubble-user {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
    font-size: 13px !important;
}
#agent-panel.agent-intel #agent-input {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}
/* Fullscreen intelligence */
.agent-fullscreen.agent-intel .agent-response {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important;
    color: #c8d6e5 !important;
}
.agent-fullscreen.agent-intel .agent-response strong,
.agent-fullscreen.agent-intel .agent-response b {
    color: #34d399;
    text-shadow: 0 0 6px rgba(52,211,153,0.25);
}
.agent-fullscreen.agent-intel .agent-response h1,
.agent-fullscreen.agent-intel .agent-response h2,
.agent-fullscreen.agent-intel .agent-response h3 {
    color: #34d399 !important;
    text-shadow: 0 0 8px rgba(52,211,153,0.2);
    font-family: 'JetBrains Mono', monospace !important;
}
.agent-fullscreen.agent-intel .agent-bubble-user {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}
.agent-fullscreen.agent-intel #agent-input {
    font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
}

/* ═══ Onboarding Terminal Greeting ═══ */
.ob-greeting {
    padding: 20px 0;
}
.ob-greeting .ob-line1 {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: #34d399;
    text-shadow: 0 0 10px rgba(52,211,153,0.6), 0 0 30px rgba(52,211,153,0.3);
    line-height: 1.4;
}
.ob-greeting .ob-line1::before {
    content: '> ';
    color: #10b981;
    opacity: 0.5;
}
.ob-greeting .ob-line2 {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    color: #06b6d4;
    text-shadow: 0 0 8px rgba(6,182,212,0.4);
    margin-top: 6px;
}
.ob-greeting .ob-line2::before {
    content: '> ';
    color: #06b6d4;
    opacity: 0.35;
}
.ob-greeting .ob-cursor {
    display: inline-block;
    width: 9px;
    height: 18px;
    background: #34d399;
    margin-left: 3px;
    animation: obBlink 1s step-end infinite;
    vertical-align: text-bottom;
    box-shadow: 0 0 8px rgba(52,211,153,0.6);
    border-radius: 1px;
}
@keyframes obBlink { 50% { opacity: 0; } }
.ob-greeting .ob-body {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 14px;
    color: #64748b;
    border-left: 3px solid rgba(52,211,153,0.25);
    padding-left: 14px;
    margin-top: 16px;
    line-height: 1.6;
}