/* ============================================================================
   SEO Tracker — Features
   ----------------------------------------------------------------------------
   Feature-specific, app-shell widget styles. Each section corresponds to
   one discrete feature that currently lives as an inline <style> block
   inside base.html. Moved here so base.html can eventually be stripped
   to a ~50-line shell.

   Depends on: tokens.css, theme-dark.css, base.css, components.css.
   Must load LAST.

   Scope
     - Page loader splash                 (base.html lines 220-319)
     - Sidebar overflow widgets           (base.html lines 814-870  — bot panel)
     - Global search dropdown             (base.html lines 1618-1628)
     - Celebration animation              (base.html lines 2028-2030)
     - Platform Support chat widget       (base.html lines 2085-2185)
     - Autonomous agent widget            (base.html lines 2234-2365)
     - Debug toggle button                (base.html lines 2707-2711)

   NOTE: date-range-picker.css, content-engine.css, content_map.html's inline
   token-silo (--cm-*), and print.css are tracked for a later absorption
   pass. They are not duplicated here to avoid cascade conflicts.
   ============================================================================ */


/* ─────────────────────────────────────────────────────────────────────────────
   Page transition (replaces the legacy splash + loader bar removed 2026-04-30)
   Subtle fade-in on page content after every Turbo navigation. The previous
   2.2s yellow progress bar / full-screen splash with logo + grid + glow orb
   has been removed — its retained Turbo handlers + 6-keyframe CSS stack are
   gone with it.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes acc-page-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
main.app-content,
main.container {
    animation: acc-page-fade 0.18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    main.app-content,
    main.container {
        animation: none;
    }
}

/* Soften Turbo's built-in progress bar so it reads as a status hint,
   not a heavyweight loading screen. Only fires on slow nav (>500ms). */
.turbo-progress-bar {
    height: 2px !important;
    background: var(--accent, #f4e14a) !important;
    opacity: 0.65 !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   Bot panel (sidebar-anchored task panel)
   Rules are a verbatim mirror of the inline <style> block formerly at
   base.html:713-769. Legacy var names (var(--bg-0), var(--text-*)) resolve
   correctly via the tokens.css alias layer — DO NOT rewrite them to new
   token names without visual auth-gated verification.
   ───────────────────────────────────────────────────────────────────────── */
.bot-panel-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:1069;transition:opacity 0.2s;}
.bot-panel-overlay.open{display:block;}
.bot-panel{position:fixed;top:0;right:-440px;width:420px;max-width:90vw;height:100vh;background:var(--bg-0);border-left:1px solid var(--border-200);box-shadow:-4px 0 24px rgba(0,0,0,0.12);z-index:1070;display:flex;flex-direction:column;transition:right 0.25s cubic-bezier(0.4,0,0.2,1);overflow:hidden;}
.bot-panel.open{right:0;}
.bot-panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-200);font-weight:600;font-size:0.88rem;color:var(--text-800);flex-shrink:0;}
.bot-panel-close{background:none;border:none;color:var(--text-400);cursor:pointer;font-size:1rem;padding:4px;border-radius:6px;transition:background 0.15s,color 0.15s;}
.bot-panel-close:hover{background:var(--bg-100);color:var(--text-700);}
.bot-panel-agents{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-100);flex-wrap:wrap;flex-shrink:0;}
.bot-agent-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:0.68rem;font-weight:500;background:var(--bg-100);color:var(--text-500);border:1px solid var(--border-200);}
.bot-agent-chip .agent-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.bot-agent-chip .agent-dot.online{background:var(--status-success);box-shadow:0 0 4px var(--status-success-bg);}
.bot-agent-chip .agent-dot.offline{background:var(--status-danger);}
.bot-agent-chip .agent-dot.unknown{background:var(--text-400);}
.bot-panel-list{flex:1;overflow-y:auto;padding:0;}
.bot-task-item{padding:12px 16px;border-bottom:1px solid var(--border-100);cursor:pointer;transition:background 0.12s;}
.bot-task-item:hover{background:var(--bg-50);}
.bot-task-row{display:flex;align-items:flex-start;gap:10px;}
.bot-task-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.bot-task-dot.running{background:var(--status-success);box-shadow:0 0 6px var(--status-success-bg);animation:tkiPulse 1.5s ease-in-out infinite;}
.bot-task-dot.queued{background:var(--accent);opacity:0.8;}
.bot-task-dot.completed{background:var(--ink-faint);opacity:0.4;}
.bot-task-dot.failed{background:var(--status-danger);}
.bot-task-dot.cancelled{background:var(--text-300);}
.bot-task-body{flex:1;min-width:0;}
.bot-task-title{font-size:0.8rem;font-weight:600;color:var(--text-800);line-height:1.3;display:flex;align-items:center;gap:6px;}
.bot-task-title .task-status{font-size:0.62rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:1px 6px;border-radius:4px;}
.bot-task-title .task-status.running{background:rgba(34,197,94,0.12);color:#22c55e;}
.bot-task-title .task-status.queued{background:rgba(240,224,80,0.06);color:#f0e050;}
.bot-task-title .task-status.completed{background:rgba(100,116,139,0.1);color:var(--text-400);}
.bot-task-title .task-status.failed{background:rgba(239,68,68,0.1);color:#ef4444;}
.bot-task-title .task-status.cancelled{background:rgba(100,116,139,0.08);color:var(--text-300);}
.bot-task-meta{font-size:0.7rem;color:var(--text-400);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bot-task-meta .meta-client{color:#f0e050;font-weight:600;}
.bot-task-meta .meta-agent{color:var(--text-500);}
.bot-task-expand{display:none;margin-top:10px;padding:10px 12px;background:var(--bg-100);border-radius:8px;border:1px solid var(--border-200);font-size:0.74rem;color:var(--text-600);line-height:1.5;}
.bot-task-item.expanded .bot-task-expand{display:block;}
.bot-task-expand-section{margin-bottom:8px;}
.bot-task-expand-section:last-child{margin-bottom:0;}
.bot-task-expand-label{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-400);margin-bottom:3px;}
.bot-task-expand-value{white-space:pre-wrap;word-break:break-word;}
.bot-task-expand-value a{color:#f0e050;text-decoration:none;}
.bot-task-expand-value a:hover{text-decoration:underline;}
.bot-task-chevron{color:var(--text-300);font-size:0.7rem;transition:transform 0.2s;flex-shrink:0;margin-top:4px;}
.bot-task-item.expanded .bot-task-chevron{transform:rotate(90deg);}
.bot-panel-empty{text-align:center;padding:40px 16px;color:var(--text-400);font-size:0.82rem;}
.bot-panel-empty i{font-size:2rem;display:block;margin-bottom:8px;opacity:0.4;}
.bot-panel-filters{padding:10px 16px;border-bottom:1px solid var(--border-200);flex-shrink:0;display:flex;flex-direction:column;gap:6px;}
.bot-filter-row{display:flex;align-items:center;gap:6px;}
.bot-filter-input-wrap{position:relative;flex:1;}
.bot-filter-summary{font-size:0.65rem;color:var(--text-400);min-height:14px;}
.bot-task-output{margin-top:8px;padding:10px 12px;background:var(--bg-0);border:1px solid var(--border-200);border-radius:6px;max-height:300px;overflow-y:auto;font-size:0.72rem;font-family:var(--font-mono,monospace);color:var(--text-600);white-space:pre-wrap;word-break:break-word;line-height:1.5;}
.bot-task-output a{color:#f0e050;text-decoration:none;}
.bot-task-output a:hover{text-decoration:underline;}
.bot-task-output .output-error{color:#ef4444;}
.bot-task-output .output-url{display:inline-flex;align-items:center;gap:3px;background:rgba(240,224,80,0.04);padding:1px 6px;border-radius:4px;margin:2px 0;}

@keyframes tkiPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Global search dropdown
   ───────────────────────────────────────────────────────────────────────── */
/* Global search dropdown — verbatim mirror of inline <style> block that
   was formerly at base.html:1586-1596. Legacy var refs preserved to
   match exact rendered output. */
#globalSearchResults .gs-section { padding:0.4rem 0.75rem;font-size:0.65rem;font-weight:700;color:var(--text-400);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border-100);background:var(--bg-50); }
#globalSearchResults .gs-item { display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0.75rem;text-decoration:none;color:var(--text-900);border-bottom:1px solid var(--border-50);cursor:pointer;font-size:0.8rem;transition:background 0.1s; }
#globalSearchResults .gs-item:hover { background:var(--bg-hover, rgba(255,255,255,0.05)); }
#globalSearchResults .gs-item .gs-icon { color:var(--text-400);font-size:0.95rem;width:20px;text-align:center;flex-shrink:0; }
#globalSearchResults .gs-item .gs-body { flex:1;min-width:0; }
#globalSearchResults .gs-item .gs-title { font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#globalSearchResults .gs-item .gs-sub { font-size:0.7rem;color:var(--text-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px; }
#globalSearchResults .gs-dot { width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0; }
#globalSearchResults .gs-badge { font-size:0.6rem;padding:1px 5px;border-radius:3px;font-weight:600; }


/* ─────────────────────────────────────────────────────────────────────────────
   Celebration toast animation
   ───────────────────────────────────────────────────────────────────────── */
@keyframes optCelebSlide {
    to { opacity: 1; transform: translateX(0); }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Platform Support chat widget (bottom-left)
   ───────────────────────────────────────────────────────────────────────── */
.ce-chat-widget {
    position: fixed;
    bottom: var(--sp-9);
    left: var(--sp-9);
    z-index: 9998;
    font-family: var(--font-body);
}
.ce-chat-toggle {
    width: 48px;
    height: 48px;
    border-radius: var(--r-xl);
    border: 1px solid var(--accent-border);
    background: var(--surface-1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-ghost);
    transition: all var(--motion-base) var(--ease-standard);
    font-size: 20px;
}
.ce-chat-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-gold-glow);
}

.ce-chat-panel {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 440px;
    max-height: 70vh;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: ceChatSlideUp var(--motion-base) var(--ease-standard);
    display: flex;
    flex-direction: column;
}
@keyframes ceChatSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ce-chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.ce-chat-panel-close {
    background: none;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    line-height: 1;
}
.ce-chat-panel-close:hover { color: var(--ink-strong); background: var(--surface-2); }

.ce-chat-clear {
    background: none;
    border: none;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    transition: all var(--motion-fast) var(--ease-standard);
}
.ce-chat-clear:hover { color: var(--status-danger); background: var(--status-danger-bg); }

.ce-chat-messages {
    flex: 1;
    max-height: calc(70vh - 120px);
    overflow-y: auto;
    padding: var(--sp-7) var(--sp-8);
    scroll-behavior: smooth;
}
.ce-chat-welcome-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
    margin-bottom: var(--sp-2);
}
.ce-chat-welcome-desc {
    font-size: 0.75rem;
    color: var(--ink-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--sp-5);
}
.ce-chat-quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ce-chat-quick-btn {
    font-size: 11px;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-standard);
    font-family: inherit;
}
.ce-chat-quick-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-tint);
}

.ce-chat-msg {
    margin-bottom: var(--sp-4);
    font-size: 12px;
    line-height: var(--leading-normal);
}
.ce-chat-msg-user { text-align: right; }
.ce-chat-msg-user .ce-chat-bubble {
    display: inline-block;
    background: var(--accent-ghost);
    color: var(--ink-strong);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
    max-width: 85%;
    text-align: left;
    word-break: break-word;
}
.ce-chat-msg-user .ce-chat-bubble img.ce-chat-thumb {
    max-width: 160px;
    max-height: 100px;
    border-radius: var(--r-sm);
    margin-top: 4px;
    display: block;
    border: 1px solid var(--border-subtle);
}
.ce-chat-msg-bot .ce-chat-bubble {
    display: inline-block;
    background: var(--surface-2);
    color: var(--ink-strong);
    padding: var(--sp-5) var(--sp-7);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
    max-width: 95%;
    text-align: left;
    font-size: 12.5px;
    line-height: var(--leading-normal);
    word-break: break-word;
}
.ce-chat-msg-bot .ce-chat-bubble h1,
.ce-chat-msg-bot .ce-chat-bubble h2,
.ce-chat-msg-bot .ce-chat-bubble h3 {
    color: var(--accent);
    font-size: 13px;
    font-weight: var(--weight-bold);
    margin: var(--sp-5) 0 var(--sp-2);
}
.ce-chat-msg-bot .ce-chat-bubble h1:first-child,
.ce-chat-msg-bot .ce-chat-bubble h2:first-child,
.ce-chat-msg-bot .ce-chat-bubble h3:first-child { margin-top: 0; }
.ce-chat-msg-bot .ce-chat-bubble p { margin: var(--sp-2) 0; }
.ce-chat-msg-bot .ce-chat-bubble ul,
.ce-chat-msg-bot .ce-chat-bubble ol { margin: var(--sp-2) 0; padding-left: var(--sp-8); }
.ce-chat-msg-bot .ce-chat-bubble li { margin: 3px 0; }
.ce-chat-msg-bot .ce-chat-bubble strong { color: var(--accent); font-weight: var(--weight-semibold); }
.ce-chat-msg-bot .ce-chat-bubble code {
    background: var(--accent-ghost);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    color: var(--accent);
}
.ce-chat-msg-bot .ce-chat-bubble pre {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-sm);
    overflow-x: auto;
    margin: var(--sp-3) 0;
    font-size: 11px;
}
.ce-chat-msg-bot .ce-chat-bubble pre code { background: none; padding: 0; color: var(--ink-body); }
.ce-chat-msg-bot .ce-chat-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-3) 0;
    font-size: 11.5px;
}
.ce-chat-msg-bot .ce-chat-bubble th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    text-transform: uppercase;
}
.ce-chat-msg-bot .ce-chat-bubble td {
    padding: 5px var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ce-chat-msg-bot .ce-chat-bubble blockquote {
    border-left: 3px solid var(--accent);
    margin: var(--sp-3) 0;
    padding: 4px var(--sp-5);
    color: var(--ink-muted);
    font-style: italic;
}
.ce-chat-msg-bot .ce-chat-bubble hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--sp-4) 0;
}

.ce-chat-msg-thinking {
    color: var(--ink-faint);
    font-size: 11px;
    font-style: italic;
}
.ce-chat-msg-thinking .ce-chat-dots span {
    animation: agentDots 1.4s ease-in-out infinite;
    display: inline-block;
}
.ce-chat-msg-thinking .ce-chat-dots span:nth-child(2) { animation-delay: 0.2s; }
.ce-chat-msg-thinking .ce-chat-dots span:nth-child(3) { animation-delay: 0.4s; }

.ce-chat-bug-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--sp-3);
    padding: 5px var(--sp-5);
    border-radius: var(--r-sm);
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    background: var(--status-danger-bg);
    border: 1px solid var(--status-danger-border);
    color: var(--status-danger);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-standard);
}
.ce-chat-bug-badge:hover { background: rgba(224, 96, 96, 0.2); }

.ce-chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.ce-chat-attach {
    cursor: pointer;
    color: var(--ink-muted);
    padding: var(--sp-2);
    display: flex;
    align-items: center;
    transition: color var(--motion-fast) var(--ease-standard);
    flex-shrink: 0;
}
.ce-chat-attach:hover { color: var(--accent); }

.ce-chat-input-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#ceChatAttachPreview {
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
#ceChatAttachPreview img {
    max-height: 48px;
    border-radius: var(--r-xs);
    border: 1px solid var(--border-subtle);
}
#ceChatAttachPreview .ce-chat-attach-remove {
    font-size: 0.6rem;
    color: var(--status-danger);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
#ceChatAttachPreview .ce-chat-attach-remove:hover { background: var(--status-danger-bg); }

.ce-chat-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-5);
    color: var(--ink-strong);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.ce-chat-input:focus { border-color: var(--accent-border); }
.ce-chat-input::placeholder { color: var(--ink-faint); }

.ce-chat-send {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    border: none;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--motion-fast) var(--ease-standard);
    flex-shrink: 0;
}
.ce-chat-send:hover { opacity: 0.85; }
.ce-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
    .ce-chat-widget { bottom: 16px; left: 16px; }
    .ce-chat-panel  { width: calc(100vw - 32px); left: 0; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Autonomous agent widget (bottom-right)
   ───────────────────────────────────────────────────────────────────────── */
.agent-widget {
    position: fixed;
    bottom: var(--sp-9);
    right: var(--sp-9);
    z-index: 9999;
    font-family: var(--font-body);
}
.agent-toggle {
    width: 48px;
    height: 48px;
    border-radius: var(--r-xl);
    border: 1px solid var(--accent-border);
    background: var(--surface-1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md), 0 0 0 1px var(--accent-ghost);
    transition: all var(--motion-base) var(--ease-standard);
    position: relative;
}
.agent-toggle:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-gold-glow);
}
.agent-toggle-pulse {
    position: absolute;
    inset: -3px;
    border-radius: var(--r-2xl);
    border: 1px solid var(--accent);
    opacity: 0;
    animation: agentPulse 3s ease-in-out infinite;
}
@keyframes agentPulse {
    0%, 100% { opacity: 0;   transform: scale(1); }
    50%      { opacity: 0.3; transform: scale(1.05); }
}

.agent-panel {
    position: fixed;
    bottom: var(--sp-9);
    right: var(--sp-9);
    width: 560px;
    height: 70vh;
    max-height: 700px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: agentSlideUp var(--motion-base) var(--ease-standard);
}
@keyframes agentSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-7);
    border-bottom: 1px solid var(--border-subtle);
}
.agent-panel-title {
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1;
}
.agent-panel-header-actions { display: flex; align-items: center; gap: 4px; }
.agent-panel-close,
.agent-panel-fullscreen {
    background: none;
    border: none;
    color: var(--ink-faint);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.agent-panel-close:hover,
.agent-panel-fullscreen:hover { color: var(--ink-strong); }

.agent-panel.fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    z-index: 10001;
}
.agent-panel.fullscreen .agent-messages { padding: 20px 10%; }
.agent-panel.fullscreen .agent-msg-agent .agent-msg-bubble { max-width: 80%; font-size: 13.5px; line-height: 1.7; }
.agent-panel.fullscreen .agent-input-wrap { padding: 12px 10%; }

.agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-7) var(--sp-8);
}
.agent-welcome-title {
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--ink-strong);
    margin-bottom: var(--sp-5);
}
.agent-quick-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.agent-quick-btn {
    font-size: 11px;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    color: var(--ink-muted);
    cursor: pointer;
    transition: all var(--motion-fast) var(--ease-standard);
    font-family: inherit;
}
.agent-quick-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-ghost);
}

.agent-msg { margin-bottom: var(--sp-4); font-size: 12px; line-height: var(--leading-normal); }
.agent-msg-user { text-align: right; }
.agent-msg-user .agent-msg-bubble {
    display: inline-block;
    background: rgba(240, 224, 80, 0.05);
    color: var(--ink-strong);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
    max-width: 85%;
    text-align: left;
}
.agent-msg-agent .agent-msg-bubble {
    display: inline-block;
    background: var(--surface-2);
    color: var(--ink-strong);
    padding: var(--sp-5) var(--sp-7);
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
    max-width: 95%;
    text-align: left;
    font-size: 12.5px;
    line-height: var(--leading-normal);
}
.agent-msg-agent .agent-msg-bubble h1,
.agent-msg-agent .agent-msg-bubble h2,
.agent-msg-agent .agent-msg-bubble h3 {
    color: var(--accent);
    font-size: 13px;
    font-weight: var(--weight-bold);
    margin: var(--sp-5) 0 var(--sp-2);
    padding: 0;
}
.agent-msg-agent .agent-msg-bubble h1:first-child,
.agent-msg-agent .agent-msg-bubble h2:first-child,
.agent-msg-agent .agent-msg-bubble h3:first-child { margin-top: 0; }
.agent-msg-agent .agent-msg-bubble p { margin: var(--sp-2) 0; }
.agent-msg-agent .agent-msg-bubble ul,
.agent-msg-agent .agent-msg-bubble ol { margin: var(--sp-2) 0; padding-left: var(--sp-8); }
.agent-msg-agent .agent-msg-bubble li { margin: 3px 0; }
.agent-msg-agent .agent-msg-bubble strong { color: var(--accent); font-weight: var(--weight-semibold); }
.agent-msg-agent .agent-msg-bubble em { color: var(--ink-muted); }
.agent-msg-agent .agent-msg-bubble code {
    background: var(--accent-ghost);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11.5px;
    color: var(--accent);
}
.agent-msg-agent .agent-msg-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-3) 0;
    font-size: 11.5px;
}
.agent-msg-agent .agent-msg-bubble th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--accent);
    font-weight: var(--weight-semibold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.agent-msg-agent .agent-msg-bubble td {
    padding: 5px var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.agent-msg-agent .agent-msg-bubble tr:hover td { background: var(--accent-ghost); }
.agent-msg-agent .agent-msg-bubble hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--sp-5) 0;
}
.agent-msg-agent .agent-msg-bubble blockquote {
    border-left: 3px solid var(--accent);
    margin: var(--sp-3) 0;
    padding: 4px var(--sp-5);
    color: var(--ink-muted);
    background: var(--accent-ghost);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.agent-msg-thinking { color: var(--ink-faint); font-size: 11px; font-style: italic; }
.agent-msg-thinking .agent-dots span {
    animation: agentDots 1.4s ease-in-out infinite;
    display: inline-block;
}
.agent-dots span:nth-child(2) { animation-delay: 0.2s; }
.agent-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes agentDots {
    0%, 80%, 100% { opacity: 0.3; }
    40%           { opacity: 1; }
}

.agent-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border-subtle);
}
.agent-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-5);
    color: var(--ink-strong);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.agent-input:focus { border-color: var(--accent-border); }
.agent-input::placeholder { color: var(--ink-faint); }
.agent-send {
    width: 32px;
    height: 32px;
    border-radius: var(--r-md);
    border: none;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--motion-fast) var(--ease-standard);
}
.agent-send:hover { opacity: 0.85; }
.agent-send:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 640px) {
    .agent-panel { width: calc(100vw - 16px); right: 8px; left: 8px; height: 80vh; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Debug toggle button
   ───────────────────────────────────────────────────────────────────────── */
#debug-toggle-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.1);
}
#debug-toggle-btn.debug-active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    animation: pulse-debug 2s infinite;
}
@keyframes pulse-debug {
    0%   { box-shadow: 0 0 0 0 rgba(229, 160, 0, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(229, 160, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 160, 0, 0); }
}