/**
 * Today = Argus chat — content & styling only
 * ─────────────────────────────────────────────────────────────────
 * Layout (viewport-bound, internal scrolling, grid placement of the
 * Argus panel into the main column) lives in shell.css.
 *
 * This file is intentionally narrow:
 *   – Hide the legacy Today dashboard blocks (Daily Brief, Top Crisis,
 *     etc.) that share the same content-section as the chat surface.
 *   – Style the chat head / thread / input / welcome state.
 *   – Hide redundant Argus toggles when Argus IS the main surface.
 *
 * No layout overrides, no !important on positioning. If something
 * here conflicts with shell.css, shell.css wins (it loads after).
 */

/* ──────────────────────────────────────────────────────────────────
   1) Hide the legacy Today dashboard blocks
   ────────────────────────────────────────────────────────────────── */
body[data-section="overview"] .content-section[data-section="overview"] > .today-hero,
body[data-section="overview"] .content-section[data-section="overview"] > #daily-brief-container,
body[data-section="overview"] .content-section[data-section="overview"] > #global-summary,
body[data-section="overview"] .content-section[data-section="overview"] > #today-scan-section,
body[data-section="overview"] .content-section[data-section="overview"] > #top-crisis-cards,
body[data-section="overview"] .content-section[data-section="overview"] > .overview-brief,
body[data-section="overview"] .content-section[data-section="overview"] > div.u-mb-section {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────
   2) Chat head — light, transparent over the canvas background
   ────────────────────────────────────────────────────────────────── */
body[data-section="overview"] #argus-panel .argus-panel__head {
    width: 100%;
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────────
   3) Chat thread — full-width container, padding for breathing room.
      Internal scrolling and flex sizing are owned by shell.css.
   ────────────────────────────────────────────────────────────────── */
body[data-section="overview"] #argus-panel .argus-panel__thread {
    width: 100%;
    margin: 0;
    padding: var(--space-4) var(--space-6) var(--space-5);
    background: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Input bar styling lives in ui-components.css (Perplexity-grade
   bordered + shadowed box). We intentionally DO NOT override it
   on Today — overriding background/margin/padding here in v=2..v=5
   killed the card design and made the bar invisible against the
   cream canvas. */

/* ──────────────────────────────────────────────────────────────────
   5) Welcome state — centered, airy
   ────────────────────────────────────────────────────────────────── */
body[data-section="overview"] #argus-panel .argus-welcome {
    width: 100%;
    max-width: 680px;
    margin: var(--space-4) auto 0;
    padding: 0 var(--space-4);
    text-align: center;
}
body[data-section="overview"] #argus-panel .argus-welcome h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}
body[data-section="overview"] #argus-panel .argus-welcome p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 480px;
    margin: 0 auto var(--space-4);
}
body[data-section="overview"] #argus-panel .argus-welcome__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}
body[data-section="overview"] #argus-panel .argus-welcome__chip {
    padding: 6px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
}
body[data-section="overview"] #argus-panel .argus-welcome__chip:hover {
    background: var(--accent-muted);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ──────────────────────────────────────────────────────────────────
   6) Hide redundant Argus toggles — Argus IS the screen on Today,
      so the navbar toggle and the panel close button have no role.
   ────────────────────────────────────────────────────────────────── */
body[data-section="overview"] #argus-panel-toggle-btn,
body[data-section="overview"] #argus-panel-close,
body[data-section="overview"] .argus-panel__act--close {
    display: none;
}

body[data-section="overview"] .argus-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body[data-section="overview"] #argus-panel-clear {
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--text-primary) 10%, transparent);
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body[data-section="overview"] #argus-panel-clear:hover {
    background: color-mix(in oklab, var(--accent-red, #B5321A) 8%, transparent);
    color: var(--accent-red, #B5321A);
    border-color: color-mix(in oklab, var(--accent-red, #B5321A) 30%, transparent);
}
body[data-section="overview"] .argus-panel__act-label {
    display: inline;
}
@media (max-width: 560px) {
    body[data-section="overview"] .argus-panel__act-label { display: none; }
    body[data-section="overview"] #argus-panel-clear { padding: 6px 8px; }
}

/* ──────────────────────────────────────────────────────────────────
   7) Mobile — tighter horizontal padding for narrow viewports.
      No height/min-height overrides — shell.css owns those.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body[data-section="overview"] #argus-panel .argus-panel__head,
    body[data-section="overview"] #argus-panel .argus-panel__thread,
    body[data-section="overview"] #argus-panel .argus-panel__input {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}