/* ============================================================
   NEOBOT LANDING — MOBILE FIXES (Plan: mobile optimization pass)
   Load LAST, after landing.css and landing-showcase.css:
     <link rel="stylesheet" href="/css/landing-mobile-fixes.css">
   CSS-only: no HTML or JS changes required. All selectors match
   existing markup; nothing is renamed.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   FIX 1 — Root overflow bug (ALL viewports; no-op on desktop).
   style.css sets body{display:flex;flex-direction:column}. The
   .showcase and .sc-comparison sections use margin:0 auto, so as
   flex items with auto cross-axis margins they are sized to
   FIT-CONTENT instead of stretching. Any child with a min-width
   (comparison rows: 500px) inflates the whole section past the
   viewport → clipped headings, off-centre trust counter.
   width:100% restores block-like sizing; max-width still caps it.
   ──────────────────────────────────────────────────────────── */
.showcase,
.sc-comparison {
    width: 100%;
}

/* Nowrap flex/grid children that refuse to shrink (min-width:auto
   keeps them at full text width → sideways overflow on phones). */
.dc-reply { max-width: 100%; }
.dc-reply-text { min-width: 0; }
.dc-warn-meta > span { min-width: 0; }
.ticket-ping-divider { min-width: 0; flex: 1 1 40px; }

/* ────────────────────────────────────────────────────────────
   MOBILE BLOCK — matches the hamburger breakpoint
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── FIX 2 — Previews must read as previews ──────────────
       Discord-chat cards and dashboard mockups run edge-to-edge
       and blend into the page. Give every mockup app-window
       chrome: a title bar with traffic dots + a PREVIEW chip,
       an accent border and a lifted glow. Pure pseudo-elements. */

    .dash-frame,
    .var-dive-preview .dc-chat-card {
        position: relative;
        border-color: rgba(167, 139, 250, 0.30);
        background: linear-gradient(180deg, #12141a 0%, #0b0c10 100%);
        box-shadow:
            0 0 0 1px rgba(167, 139, 250, 0.10),
            0 24px 48px -20px rgba(0, 0, 0, 0.85),
            0 0 56px -16px rgba(167, 139, 250, 0.35);
        padding-top: 48px;
        border-radius: 16px;
        overflow: hidden;
    }

    /* Title bar: traffic dots painted with radial gradients. */
    .dash-frame::after,
    .var-dive-preview .dc-chat-card::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 34px;
        background:
            radial-gradient(circle at 18px 17px, #ff5f57 0 4.5px, transparent 5.5px),
            radial-gradient(circle at 36px 17px, #febc2e 0 4.5px, transparent 5.5px),
            radial-gradient(circle at 54px 17px, #28c840 0 4.5px, transparent 5.5px),
            rgba(255, 255, 255, 0.035);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        pointer-events: none;
        z-index: 2;
    }

    /* Label chip (top-right of the bar). dash-frame::before was a
       decorative radial overlay — repurposed as the chip here. */
    .dash-frame::before,
    .var-dive-preview .dc-chat-card::before {
        content: 'APP PREVIEW';
        position: absolute;
        inset: auto;
        top: 8px; right: 10px;
        background: rgba(167, 139, 250, 0.14);
        border: 1px solid rgba(167, 139, 250, 0.35);
        border-radius: 100px;
        padding: 3px 9px;
        font-family: Consolas, 'SF Mono', ui-monospace, monospace;
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        color: #c5b3ff;
        line-height: 1.4;
        pointer-events: none;
        z-index: 3;
    }
    .dash-frame::before { content: 'DASHBOARD PREVIEW'; }
    .var-dive-preview .dc-chat-card::before { content: 'DISCORD PREVIEW'; }

    /* Slightly stronger halo behind mockups so they detach from
       the page background. */
    .var-dash-mockup::before,
    .var-dive-preview::before {
        background: radial-gradient(ellipse at center, rgba(167, 139, 250, 0.16), transparent 62%);
    }

    /* ── FIX 3 — Capsule carousel (V01) ──────────────────────
       Blurred neighbour cards overflow the stage and collide
       with the header on phones. Show only the active card
       (crossfade still animates via the existing transition);
       JS sets inline opacity/filter, hence the !important. */
    .var-capsule-card:not(.active) {
        opacity: 0 !important;
        filter: none !important;
        pointer-events: none !important;
    }
    .var-capsule-card {
        border-color: rgba(167, 139, 250, 0.28);
        box-shadow:
            0 0 0 1px rgba(167, 139, 250, 0.10),
            0 24px 48px -20px rgba(0, 0, 0, 0.85),
            0 0 56px -16px rgba(167, 139, 250, 0.30);
    }
    .var-capsule-stage { height: 470px; }

    /* Scrubber: 2×2 grid instead of 4 cramped columns. */
    .var-capsule-track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;
        margin-top: 20px;
    }
    .var-capsule-stop { max-width: none; }

    /* ── FIX 4 — Invite Tracker mockup density ───────────────
       Stacked full-width KPI boxes tripled the section height
       (and looked like real page UI). Compact 3-up row. */
    .dash-section-purple {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .dash-section-purple > div:first-child { grid-column: 1 / -1; }
    .dash-stat { min-width: 0; padding: 8px 10px; }
    .dash-stat-label { font-size: 8px; letter-spacing: 0.06em; }
    .dash-stat-value { font-size: 17px; }

    /* AI tip banner: icon + text + button don't fit one row. */
    .dash-ai-tip { flex-wrap: wrap; }
    .dash-ai-tip > div:not(.dash-ai-tip-icon) { flex: 1 1 180px; }
    .dash-ai-tip-icon { flex: 0 0 auto; width: 30px; height: 30px; font-size: 17px; }

    /* ── FIX 5 — AI Insights mockup density ─────────────────── */
    .dash-ai-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .dash-ai-stat { padding: 9px 10px; gap: 4px; min-width: 0; }
    .dash-ai-stat-label { font-size: 8px; letter-spacing: 0.08em; }
    .dash-ai-stat-row { flex-direction: column; align-items: flex-start; gap: 2px; }
    .dash-ai-stat-val { font-size: 18px; }

    /* ── FIX 6 — Commands mockup: cap the wall of cards ──────
       11 stacked cards made the mockup ~1400px tall. Two compact
       cards per category, 2-up. (Marketing mockup — hidden cards
       carry no information loss.) */
    .dash-cmd-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
    .dash-cmd-grid .dash-cmd-card:nth-child(n+3) { display: none; }
    .dash-cmd-card { min-height: 0; padding: 8px; }

    /* Webhook builder: single-column mini fields (2-up inputs were
       ~120px wide and unreadable). */
    .dash-mini-grid { grid-template-columns: 1fr; }

    /* ── FIX 7 — Comparison table UX ─────────────────────────
       Sticky feature column + edge fade + snap, NeoBot column
       re-highlighted (the desktop band ::after is display:none
       on mobile). Table still swipes horizontally. */
    .sc-cmp-frame {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .sc-cmp-cell { scroll-snap-align: start; }
    .sc-cmp-cell.sc-cmp-feat,
    .sc-cmp-row-head .sc-cmp-cell:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: linear-gradient(90deg, #101116 82%, rgba(16, 17, 22, 0));
    }
    .sc-cmp-row-head .sc-cmp-cell:first-child { background: #101116; }
    .sc-cmp-cell.neo {
        background: linear-gradient(180deg, rgba(167, 139, 250, 0.09), rgba(167, 139, 250, 0.03));
        border-left: 1px solid rgba(167, 139, 250, 0.16);
        border-right: 1px solid rgba(167, 139, 250, 0.16);
    }
    /* Always-visible slim scrollbar — the reliable scroll affordance
       (plus the half-cut third column doing its part). */
    .sc-cmp-frame { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.4) rgba(255, 255, 255, 0.05); }
    .sc-cmp-frame::-webkit-scrollbar { height: 6px; }
    .sc-cmp-frame::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.4); border-radius: 100px; }
    .sc-cmp-frame::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
    .sc-cmp-header::after {
        content: '← swipe the table to compare →';
        display: block;
        margin-top: 14px;
        font-family: Consolas, 'SF Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.38);
    }
    .sc-cmp-header { margin-bottom: 20px; }

    /* Trust counter — now truly centred (Fix 1); tighten rhythm. */
    .sc-cmp-trust { margin-top: 40px; }
}

/* ────────────────────────────────────────────────────────────
   SMALL PHONES
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    /* Reply preview indent eats a third of the card at 320-390px. */
    .dc-reply { padding-left: 44px; }
    .dc-reply::before { left: 20px; }

    /* Keep the compact 3-up stats from Fix 4/5 (480px block in
       landing-showcase.css re-stacks some of these). */
    .dash-section-purple { grid-template-columns: repeat(3, 1fr); }
    .dash-ai-stats { grid-template-columns: repeat(3, 1fr); }
    .dash-cmd-grid { grid-template-columns: 1fr 1fr; }

    /* Level-up embed stats: three boxes are 90px wide at 320px —
       stack value boxes full-width instead. */
    .dc-embed-stats { grid-template-columns: 1fr; gap: 6px; }

    /* Capsule stage can hug the shorter cards on small phones. */
    .var-capsule-stage { height: 460px; }

    /* Restore the card label chip (the scrubber labels shrink). */
    .var-capsule-card-label { display: block; }
}