/* ═══════════════════════════════════════════════════════════════════════
   css/market-ai-news.css
   TauQuantX Market AI Command Center — v5 UI/UX pass.
   Frontend-only redesign: centered hero, TauQuantX-first branding,
   horizontal auto-scroll rails (Symbol Sentiment / Today's Events /
   Event Impact Map), compact cards, capped-height scrollable feed +
   calendar, controlled color language (navy/white/cyan/green/red/amber
   only). Data/JS contract and IDs are unchanged from the prior version.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --mai-bg-0:      #eef1f6;
    --mai-bg-1:      #f6f8fb;
    --mai-glass:      rgba(255, 255, 255, 0.66);
    --mai-glass-soft: rgba(255, 255, 255, 0.46);
    --mai-glass-strong: rgba(255, 255, 255, 0.85);
    --mai-border:     rgba(15, 23, 42, 0.10);
    --mai-border-2:   rgba(15, 23, 42, 0.18);

    --mai-text:      #101828;
    --mai-text-dim:  #545e73;
    --mai-text-mute: #838aa0;

    --mai-blue:   #2563eb;
    --mai-cyan:   #0891b2;
    --mai-gold:   #b7791f;

    --mai-bull:   #15803d;
    --mai-bull-bg: rgba(21, 128, 61, 0.12);
    --mai-bear:   #b91c1c;
    --mai-bear-bg: rgba(185, 28, 28, 0.12);
    --mai-neutral: #64748b;
    --mai-neutral-bg: rgba(100, 116, 139, 0.12);
    --mai-conflict: #92400e;
    --mai-conflict-bg: rgba(217, 119, 6, 0.14);
    --mai-mixed: #6d28d9;
    --mai-mixed-bg: rgba(109, 40, 217, 0.11);

    --mai-high:   #b91c1c;
    --mai-high-bg: rgba(185, 28, 28, 0.12);
    --mai-medium: #b7791f;
    --mai-medium-bg: rgba(183, 121, 31, 0.14);

    --mai-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.06);
    --mai-shadow-lg: 0 4px 10px rgba(16, 24, 40, 0.05), 0 20px 44px rgba(16, 24, 40, 0.10);

    --mai-radius: 16px;
    --mai-radius-sm: 12px;

    --mai-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mai-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mai-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
html, body { margin: 0; padding: 0; }

/* ══════════════════════════════════════════════════════════════════════
   WALLPAPER BACKGROUND — unchanged concept from prior round
   ══════════════════════════════════════════════════════════════════════ */
.mai-root {
    position: relative;
    min-height: 100vh;
    color: var(--mai-text);
    font-family: var(--mai-font-body);
    padding-bottom: 60px;
    background-image:
        linear-gradient(180deg, rgba(238,241,246,0.88) 0%, rgba(238,241,246,0.93) 40%, rgba(238,241,246,0.97) 100%),
        url('../assets/apply-ib-wallpaper.png');
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--mai-bg-0);
}
.mai-root::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(1100px 560px at 12% -8%, rgba(37,99,235,0.10), transparent 60%),
        radial-gradient(900px 480px at 92% 4%, rgba(8,145,178,0.09), transparent 55%),
        radial-gradient(700px 420px at 50% 100%, rgba(183,121,31,0.06), transparent 60%);
}
.mai-root > * { position: relative; z-index: 1; }
@media (max-width: 900px) { .mai-root { background-attachment: scroll; } }

.mai-mono { font-family: var(--mai-font-mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR — used on every horizontal rail + the two scrollable panels
   ══════════════════════════════════════════════════════════════════════ */
.mai-scrollbar-x { scrollbar-width: thin; scrollbar-color: rgba(37,99,235,0.35) rgba(15,23,42,0.05); }
.mai-scrollbar-x::-webkit-scrollbar { height: 6px; }
.mai-scrollbar-x::-webkit-scrollbar-track { background: rgba(15,23,42,0.05); border-radius: 999px; }
.mai-scrollbar-x::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.35); border-radius: 999px; }
.mai-scrollbar-x::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.55); }

.mai-scrollbar-y { scrollbar-width: thin; scrollbar-color: rgba(37,99,235,0.3) transparent; }
.mai-scrollbar-y::-webkit-scrollbar { width: 6px; }
.mai-scrollbar-y::-webkit-scrollbar-track { background: transparent; }
.mai-scrollbar-y::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.3); border-radius: 999px; }

/* ── Top bar — [Dashboard] [MARKET AI] [LIVE/time] in one 3-col grid.
      ONE dominant title, centered relative to the FULL header width, not
      duplicated as a separate hero below (spec §25-26). ── */
.mai-topbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 12px 24px;
    background: var(--mai-glass-strong);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--mai-border);
    position: sticky; top: 0; z-index: 40;
}
.mai-topbar-title {
    justify-self: center;
    font-family: var(--mai-font-heading); font-weight: 900; font-size: 22px;
    letter-spacing: -0.02em; white-space: nowrap;
    background: linear-gradient(90deg, var(--mai-text) 20%, var(--mai-blue) 65%, var(--mai-cyan) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    opacity: 0; animation: mai-hero-in .6s cubic-bezier(.2,.7,.3,1) forwards;
}
.mai-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: rgba(255,255,255,0.75); border: 1px solid var(--mai-border-2);
    color: var(--mai-text); font-size: 13px; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: all .15s ease;
    justify-self: start;
}
.mai-back-btn:hover { background: #fff; box-shadow: var(--mai-shadow); transform: translateY(-1px); }
.mai-topbar-right { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--mai-text-dim); justify-self: end; }
.mai-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--mai-bull);
    display: inline-block; margin-right: 6px;
    animation: mai-pulse 2s infinite;
}
@keyframes mai-pulse {
    0% { box-shadow: 0 0 0 0 rgba(21,128,61,.5); }
    70% { box-shadow: 0 0 0 9px rgba(21,128,61,0); }
    100% { box-shadow: 0 0 0 0 rgba(21,128,61,0); }
}

/* ── Header important-event strip (speed now set dynamically via JS
      based on item count — see js/market-ai-news.js stripDuration()) ── */
.mai-strip-wrap {
    border-bottom: 1px solid var(--mai-border);
    background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(8,145,178,0.08));
    backdrop-filter: blur(6px);
    overflow: hidden; position: relative; min-height: 38px;
}
.mai-strip-label {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 2;
    display: flex; align-items: center; padding: 0 28px 0 14px;
    font-size: 11px; font-weight: 800; letter-spacing: .08em;
    color: var(--mai-blue);
    background: linear-gradient(90deg, var(--mai-bg-1) 65%, transparent);
}
.mai-strip-track {
    display: flex; gap: 34px; white-space: nowrap;
    padding: 10px 0 10px 130px;
    animation: mai-scroll-left 60s linear infinite; /* default; JS overrides duration per content length */
    width: max-content;
}
.mai-strip-track.paused { animation-play-state: paused; }
@keyframes mai-scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mai-strip-item {
    font-size: 12.5px; color: var(--mai-text-dim); display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.mai-strip-item strong { color: var(--mai-text); font-family: var(--mai-font-mono); }
.mai-strip-impact { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; }
.mai-strip-impact.HIGH { color: var(--mai-high); background: var(--mai-high-bg); }
.mai-strip-impact.MEDIUM { color: var(--mai-medium); background: var(--mai-medium-bg); }
.mai-strip-empty { padding: 10px 24px; font-size: 12.5px; color: var(--mai-text-mute); }

/* ── Skeleton shimmer ── */
.mai-skel {
    position: relative; overflow: hidden;
    background: rgba(15,23,42,0.06); border-radius: 8px;
}
.mai-skel::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-100%);
    animation: mai-shimmer 1.6s ease-in-out infinite;
}
@keyframes mai-shimmer { 100% { transform: translateX(100%); } }
.mai-skel-line { height: 12px; margin-bottom: 8px; }
.mai-skel-card {
    background: var(--mai-glass); border: 1px solid var(--mai-border);
    border-radius: var(--mai-radius); padding: 14px; box-shadow: var(--mai-shadow);
    min-width: 220px;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════ */
.mai-container { max-width: 1450px; margin: 0 auto; padding: 0 24px; }
.mai-section { margin-top: 30px; }
.mai-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 6px; }
.mai-section-title {
    font-family: var(--mai-font-heading); font-weight: 800; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--mai-text);
    display: flex; align-items: center; gap: 8px; position: relative; padding-bottom: 6px;
    opacity: 0; transform: translateY(10px);
    animation: mai-fade-up .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.mai-section-title::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 28px;
    background: linear-gradient(90deg, var(--mai-blue), var(--mai-cyan));
    border-radius: 2px;
    animation: mai-underline-sweep .7s ease .3s forwards;
    transform-origin: left; transform: scaleX(0);
}
@keyframes mai-underline-sweep { to { transform: scaleX(1); } }
@keyframes mai-fade-up { to { opacity: 1; transform: translateY(0); } }
.mai-section-title .mai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mai-cyan); animation: mai-pulse-soft 2.4s infinite; }
@keyframes mai-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.mai-section-sub { font-size: 11.5px; color: var(--mai-text-mute); }

/* ══════════════════════════════════════════════════════════════════════
   SUB-HEADER — one-line guide + compact status. The dominant MARKET AI
   title itself now lives in the top header row (.mai-topbar-title) — no
   duplicate title here (spec §25-26).
   ══════════════════════════════════════════════════════════════════════ */
.mai-hero { margin-top: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; }
@keyframes mai-hero-in { to { opacity: 1; transform: translateY(0); } }
.mai-guide-line {
    font-size: 12px; color: var(--mai-text-mute); font-weight: 500;
    opacity: 0; transform: translateY(8px);
    animation: mai-hero-in .5s cubic-bezier(.2,.7,.3,1) .15s forwards;
}

/* ── Engine status — one tiny line, no boxed content-block (spec §10) ── */
.mai-engine-card {
    max-width: 320px; margin: 12px auto 0; text-align: center;
    padding: 7px 16px; border-radius: 999px;
    background: var(--mai-glass); border: 1px solid var(--mai-border);
    box-shadow: var(--mai-shadow); font-size: 11.5px; font-weight: 600; color: var(--mai-text-dim);
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    opacity: 0; transform: translateY(10px);
    animation: mai-hero-in .5s cubic-bezier(.2,.7,.3,1) .45s forwards;
}
.mai-engine-error { color: var(--mai-conflict); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   HORIZONTAL RAILS — Today's Important Events / Symbol Sentiment /
   Event Impact Map. Native overflow-x:auto (so manual drag/scroll/
   scrollbar always works) + a slow setInterval-driven auto-scroll,
   implemented via a duplicated-track (Track A + Track B) + a halfway-
   point instant reset — see initAutoScrollRail() in js/market-ai-news.js.

   BUG FIX THIS ROUND: the rail previously had `scroll-behavior: smooth`
   PLUS `scroll-snap-type: x proximity` PLUS `scroll-snap-align: start`
   on every card, while JS drove it via `scrollLeft += 2.2` every 45ms.
   Those three together actively fight a JS-driven auto-scroll: each tiny
   increment queues a competing smooth-scroll animation, and the snap
   points continuously pull the container back toward the nearest card —
   which is exactly why Symbol Sentiment (and the other rails) appeared
   frozen in production despite the JS interval genuinely running. Fixed
   by removing scroll-snap and smooth-behavior from the auto-scrolling
   rails entirely — manual dragging/scrolling still works perfectly
   without them; only the animated *snapping* was the problem.
   ══════════════════════════════════════════════════════════════════════ */
.mai-rail {
    display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 12px;
    -webkit-overflow-scrolling: touch;
}
.mai-rail > * { flex: 0 0 auto; }
/* .mai-snap intentionally does nothing now — see bug-fix note above.
   Kept as a no-op class (rather than removed from the HTML) so this file
   alone fixes the bug without also requiring an HTML edit for this rule. */
.mai-rail.mai-snap { scroll-snap-type: none; }

/* ── Full-width horizontal rail wrapper (Today's Calendar / Yesterday's
      Market AI use this instead of the narrower content-column rails) ── */
.mai-full-rail-wrap { width: 100%; }

/* ── Today's important events rail cards (compact) ── */
.mai-event-card {
    background: var(--mai-glass); border: 1px solid var(--mai-border);
    border-radius: var(--mai-radius); padding: 13px 15px; box-shadow: var(--mai-shadow);
    width: 240px;
    opacity: 0; transform: translateY(10px); animation: mai-fade-up .4s cubic-bezier(.2,.7,.3,1) forwards;
}
.mai-event-top { display: flex; justify-content: space-between; align-items: center; }
.mai-event-time { font-family: var(--mai-font-mono); font-weight: 700; font-size: 12.5px; }
.mai-event-state { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .03em; }
.mai-event-state.UPCOMING { background: rgba(37,99,235,0.12); color: var(--mai-blue); }
.mai-event-state.LIVE { background: var(--mai-bear-bg); color: var(--mai-bear); animation: mai-pulse-text 1.6s infinite; }
.mai-event-state.RELEASED { background: var(--mai-bull-bg); color: var(--mai-bull); }
@keyframes mai-pulse-text { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.mai-event-name { font-weight: 700; font-size: 12.5px; margin-top: 7px; line-height: 1.3; }
.mai-event-cur { font-size: 10px; color: var(--mai-text-mute); margin-top: 2px; }
.mai-event-nums { display: flex; gap: 10px; margin-top: 7px; font-size: 10.5px; flex-wrap: wrap; }
.mai-event-nums span { color: var(--mai-text-mute); }
.mai-event-nums b { font-family: var(--mai-font-mono); color: var(--mai-text); }
.mai-event-affected { margin-top: 7px; font-size: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.mai-event-affected em { font-style: normal; font-family: var(--mai-font-mono); font-weight: 600; }

/* ── Symbol sentiment cards (compact, rail-based) ── */
.mai-symbol-card {
    background: var(--mai-glass); border: 1px solid var(--mai-border);
    border-radius: var(--mai-radius); padding: 15px; box-shadow: var(--mai-shadow);
    width: 250px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    opacity: 0; transform: translateY(12px);
    animation: mai-fade-up .45s cubic-bezier(.2,.7,.3,1) forwards;
}
.mai-symbol-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mai-shadow-lg), 0 0 0 1px rgba(37,99,235,0.12);
    border-color: rgba(37,99,235,0.35);
}
.mai-symbol-card:hover .mai-meter-fill { filter: brightness(1.15); }
.mai-symbol-top { display: flex; align-items: center; justify-content: space-between; }
.mai-symbol-name { font-family: var(--mai-font-mono); font-weight: 800; font-size: 15px; }
.mai-symbol-label { font-size: 9.5px; color: var(--mai-text-mute); margin-top: 1px; text-transform: uppercase; letter-spacing: .03em; }
.mai-badge { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap; }
.mai-badge.BULLISH { color: var(--mai-bull); background: var(--mai-bull-bg); }
.mai-badge.BEARISH { color: var(--mai-bear); background: var(--mai-bear-bg); }
.mai-badge.NEUTRAL { color: var(--mai-neutral); background: var(--mai-neutral-bg); }
.mai-badge.CONFLICTED { color: var(--mai-conflict); background: var(--mai-conflict-bg); }
.mai-badge.MIXED { color: var(--mai-mixed); background: var(--mai-mixed-bg); }

.mai-signal-badge {
    font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .04em;
    border: 1px solid transparent;
}
.mai-signal-badge.CONFIRMED { color: var(--mai-bull); border-color: rgba(21,128,61,0.35); background: var(--mai-bull-bg); }
.mai-signal-badge.WATCH { color: var(--mai-medium); border-color: rgba(183,121,31,0.3); background: var(--mai-medium-bg); }

.mai-meter { margin-top: 11px; }
.mai-meter-labels { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--mai-text-mute); margin-bottom: 3px; letter-spacing: .03em; }
.mai-meter-track { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--mai-bear-bg), var(--mai-neutral-bg), var(--mai-bull-bg)); }
.mai-meter-fill {
    position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 3px; background: var(--mai-text);
    left: 50%; transition: left 1s cubic-bezier(.16,1,.3,1);
}
.mai-meter-conf { font-size: 10px; color: var(--mai-text-dim); margin-top: 7px; }
.mai-meter-conf b { color: var(--mai-text); font-family: var(--mai-font-mono); }

.mai-no-news { font-size: 9.5px; color: var(--mai-text-mute); font-style: italic; margin: 2px 0 3px; }
.mai-technical-callout {
    margin-top: 8px; font-size: 10px; color: var(--mai-text-dim);
    background: rgba(37,99,235,0.06); border: 1px dashed rgba(37,99,235,0.25);
    border-radius: var(--mai-radius-sm); padding: 6px 9px;
}
.mai-technical-callout b.BULLISH { color: var(--mai-bull); }
.mai-technical-callout b.BEARISH { color: var(--mai-bear); }
.mai-technical-callout b.NEUTRAL { color: var(--mai-neutral); }

.mai-bias-split { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mai-bias-box { background: rgba(15,23,42,0.035); border-radius: var(--mai-radius-sm); padding: 8px 9px; }
.mai-bias-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.mai-bias-box-head .lbl { color: var(--mai-text-mute); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.mai-bias-meta { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--mai-text-dim); margin-top: 3px; }
.mai-bias-meta b { font-family: var(--mai-font-mono); color: var(--mai-text); }
.mai-tag { font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: .03em; }
.mai-tag.source { background: rgba(37,99,235,0.12); color: var(--mai-blue); }
.mai-tag.HIGH { background: var(--mai-high-bg); color: var(--mai-high); }
.mai-tag.MEDIUM { background: var(--mai-medium-bg); color: var(--mai-medium); }
.mai-tag.LOW { background: var(--mai-neutral-bg); color: var(--mai-neutral); }
.mai-tag.sources { background: rgba(8,145,178,0.12); color: var(--mai-cyan); }

.mai-symbol-stats { display: flex; gap: 10px; margin-top: 9px; font-size: 9.5px; color: var(--mai-text-mute); flex-wrap: wrap; }
.mai-symbol-stats b { color: var(--mai-text); font-family: var(--mai-font-mono); }

.mai-why-toggle {
    margin-top: 10px; font-size: 10.5px; font-weight: 700; color: var(--mai-blue);
    cursor: pointer; display: flex; align-items: center; gap: 5px; user-select: none;
}
.mai-why-toggle .chev { transition: transform .2s ease; display: inline-block; }
.mai-why-toggle.open .chev { transform: rotate(90deg); }
.mai-why-panel {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
}
.mai-why-panel.open { max-height: 420px; opacity: 1; margin-top: 9px; }
.mai-why-section { margin-bottom: 7px; }
.mai-why-section .hd { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--mai-text-mute); margin-bottom: 3px; }
.mai-why-driver { font-size: 10.5px; padding: 2px 0; display: flex; justify-content: space-between; color: var(--mai-text-dim); }
.mai-why-driver.positive { color: var(--mai-bull); }
.mai-why-driver.negative { color: var(--mai-bear); }
.mai-why-conclusion { font-size: 10.5px; color: var(--mai-text-dim); background: rgba(15,23,42,0.035); border-radius: var(--mai-radius-sm); padding: 8px 10px; margin-top: 7px; line-height: 1.5; }

/* ── Event impact map cards (compact, rail-based) ── */
.mai-impact-card {
    background: var(--mai-glass); border: 1px solid var(--mai-border); border-radius: var(--mai-radius);
    padding: 13px 15px; box-shadow: var(--mai-shadow); width: 250px;
    opacity: 0; transform: translateY(12px); animation: mai-fade-up .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.mai-impact-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
.mai-impact-title { font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.mai-impact-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 11px; }
.mai-impact-row .sym { font-family: var(--mai-font-mono); font-weight: 600; }
.mai-impact-split { display: flex; gap: 8px; font-size: 9px; color: var(--mai-text-mute); }
.mai-impact-split b { font-family: var(--mai-font-mono); }
.mai-impact-bar-track { flex: 1; height: 4px; margin: 0 8px; border-radius: 999px; background: rgba(15,23,42,0.07); position: relative; overflow: hidden; }
.mai-impact-bar-fill { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 999px; transition: width 1s cubic-bezier(.16,1,.3,1); }
.mai-impact-bar-fill.pos { background: var(--mai-bull); left: 50%; }
.mai-impact-bar-fill.neg { background: var(--mai-bear); right: 50%; }
.mai-arrow-up { color: var(--mai-bull); } .mai-arrow-down { color: var(--mai-bear); } .mai-arrow-flat { color: var(--mai-neutral); }
.mai-impact-why { font-size: 10px; color: var(--mai-text-dim); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--mai-border-2); line-height: 1.4; }
.mai-impact-why b { color: var(--mai-blue); }

/* ══════════════════════════════════════════════════════════════════════
   YESTERDAY'S MARKET AI — the main detailed feed section (full width;
   the old side-by-side Feed+Calendar two-column layout is removed this
   round — Today's Calendar is now its own full-width rail higher up the
   page, see .mai-full-rail-wrap above).
   ══════════════════════════════════════════════════════════════════════ */
.mai-news-list {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 650px; overflow-y: auto; padding-right: 6px;
}
.mai-news-card {
    background: var(--mai-glass); border: 1px solid var(--mai-border);
    border-radius: var(--mai-radius); padding: 14px 16px; box-shadow: var(--mai-shadow);
    cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    opacity: 0; transform: translateY(10px) scale(.985); animation: mai-card-in .55s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes mai-card-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.mai-news-card:hover { transform: translateY(-2px); box-shadow: var(--mai-shadow-lg); border-color: rgba(37,99,235,0.3); }
.mai-news-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.mai-news-title { font-weight: 700; font-size: 13.5px; line-height: 1.4; margin: 3px 0 5px; }
.mai-news-desc { font-size: 11.5px; color: var(--mai-text-dim); line-height: 1.5; margin-bottom: 8px; }
.mai-news-affected { font-size: 10.5px; color: var(--mai-text-mute); margin-bottom: 7px; }
.mai-news-affected b { font-family: var(--mai-font-mono); color: var(--mai-text); }
.mai-news-view { font-size: 10.5px; color: var(--mai-text-dim); background: rgba(15,23,42,0.035); border-radius: var(--mai-radius-sm); padding: 8px 10px; margin-bottom: 7px; line-height: 1.5; }
.mai-news-view b { color: var(--mai-blue); }
.mai-news-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--mai-text-mute); }
.mai-tag.yesterday { background: rgba(100,116,139,0.14); color: var(--mai-text-dim); }

/* ── Empty / waiting states ── */
.mai-empty {
    padding: 26px 18px; text-align: center; color: var(--mai-text-mute); font-size: 12.5px; line-height: 1.6;
    background: var(--mai-glass-soft); border: 1px dashed var(--mai-border-2); border-radius: var(--mai-radius);
}
.mai-empty b { color: var(--mai-text-dim); }
.mai-empty .mai-live-dot { vertical-align: middle; }

/* ── Today's Calendar — full-width horizontal rail (moved above Today's
      Important Events this round) + a small non-scrolling Upcoming list
      beside/below it when future events exist ── */
.mai-calendar-today-rail { min-height: 90px; }
.mai-upcoming-block { margin-top: 14px; }
/* Compact horizontal auto-scroll rail — matches the pattern already used
   successfully by Today's Calendar / Today's Important Events / Symbol
   Sentiment / Event Impact Map. Was previously a full-width vertical
   stack (flex-direction: column + width: auto on cards) — that's the
   only thing this fix changes; the event card markup/content is untouched. */
.mai-upcoming-list {
    display: flex; flex-direction: row; gap: 12px;
    overflow-x: auto; padding: 4px 4px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(37,99,235,0.35) rgba(15,23,42,0.05);
}
.mai-upcoming-list::-webkit-scrollbar { height: 6px; }
.mai-upcoming-list::-webkit-scrollbar-track { background: rgba(15,23,42,0.05); border-radius: 999px; }
.mai-upcoming-list::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.35); border-radius: 999px; }
.mai-upcoming-list::-webkit-scrollbar-thumb:hover { background: rgba(37,99,235,0.55); }
.mai-upcoming-list .mai-event-card {
    width: 280px; flex: 0 0 auto; margin-bottom: 0;
    padding: 11px 13px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mai-upcoming-list .mai-event-card:hover {
    transform: translateY(-2px); box-shadow: var(--mai-shadow-lg); border-color: rgba(37,99,235,0.3);
}
.mai-calendar-section-label {
    font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--mai-text-mute); margin: 0 0 8px;
}
.mai-calendar-section-label.upcoming { color: var(--mai-blue); }

/* ── Infinite bottom feed — restyled this round to visually MATCH the
      main news card language (category/impact/sentiment badges +
      TAUQUANTX AI VIEW), just compact and horizontal, per spec §13/§41.
      Dynamic width-aware duration set via JS (computeTrackDuration). ── */
.mai-ticker-wrap {
    margin-top: 36px; border-top: 1px solid var(--mai-border); border-bottom: 1px solid var(--mai-border);
    background: var(--mai-glass-strong); overflow: hidden; position: relative; min-height: 130px;
    padding: 14px 0;
}
.mai-ticker-label {
    position: absolute; left: 14px; top: 14px; z-index: 2;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--mai-cyan);
    display: flex; align-items: center; gap: 6px;
}
.mai-ticker-track { display: flex; gap: 14px; white-space: nowrap; padding: 34px 0 0 14px; animation: mai-scroll-left 120s linear infinite; width: max-content; }
.mai-ticker-track.paused { animation-play-state: paused; }
.mai-ticker-card {
    display: inline-flex; flex-direction: column; white-space: normal; width: 280px;
    background: var(--mai-glass); border: 1px solid var(--mai-border); border-radius: var(--mai-radius-sm);
    padding: 10px 12px; box-shadow: var(--mai-shadow); cursor: pointer; vertical-align: top;
}
.mai-ticker-card:hover { border-color: rgba(37,99,235,0.3); }
.mai-ticker-card .mai-news-tags { margin-bottom: 5px; }
.mai-ticker-card .mai-ticker-title { font-weight: 700; font-size: 12px; line-height: 1.35; margin-bottom: 4px; }
.mai-ticker-card .mai-ticker-view { font-size: 10px; color: var(--mai-text-dim); line-height: 1.4; }
.mai-ticker-card .mai-ticker-view b { color: var(--mai-blue); }
.mai-ticker-card .mai-ticker-time { font-size: 9.5px; color: var(--mai-text-mute); margin-top: 5px; }

/* ── Filters — horizontally scrollable on small screens ── */
.mai-filters {
    display: flex; flex-wrap: nowrap; gap: 7px; margin-bottom: 14px;
    overflow-x: auto; padding-bottom: 4px;
}
@media (min-width: 720px) { .mai-filters { flex-wrap: wrap; overflow-x: visible; } }
.mai-filter-btn {
    font-size: 11px; font-weight: 700; padding: 6px 13px; border-radius: 999px;
    background: rgba(255,255,255,0.68); border: 1px solid var(--mai-border-2); color: var(--mai-text-dim);
    cursor: pointer; transition: all .15s ease; white-space: nowrap; flex: 0 0 auto;
}
.mai-filter-btn:hover { background: #fff; transform: translateY(-1px); }
.mai-filter-btn.active { background: var(--mai-blue); border-color: var(--mai-blue); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .mai-topbar-title { font-size: 16px; }
    .mai-container { padding: 0 14px; }
    .mai-topbar { padding: 10px 12px; }
    .mai-topbar-right { font-size: 10px; gap: 6px; }
    .mai-news-list { max-height: none; }
}
@media (max-width: 480px) {
    /* Header stays 3-column even on the smallest screens (spec §25) —
       shrink the outer columns instead of dropping to a stacked layout,
       so MARKET AI stays centered relative to the full header. */
    .mai-back-btn { padding: 6px 10px; font-size: 11px; }
    .mai-topbar-title { font-size: 14px; }
}