/* ============================================
   Livefeed Page — Mobile Overrides (≤768px)
   Sticky ticker (reused), live pulse strip,
   view chips, compact trade feed rows.
   ============================================ */

@media (max-width: 768px) {

    /* ── Hide desktop side panels & old ticker ── */
    body.cardboard .cb-livefeed-left,
    body.cardboard .cb-livefeed-right {
        display: none !important;
    }

    body.cardboard #navbar-container {
        display: none !important;
    }

    /* Override desktop top offset — mobile uses its own ticker */
    body.cardboard {
        padding-top: 0 !important;
    }

    /* Hide old floating CTAs — replaced by view chips at top */
    body.cardboard .livefeed-ctas {
        display: none !important;
    }

    /* ── Main body layout ── */
    body.cardboard .cb-livefeed-body {
        display: block !important;
        grid-template-columns: unset !important;
        padding: 0 !important;
        padding-top: 56px !important; /* sticky ticker height */
        padding-bottom: 72px !important; /* bottom nav + safe area */
        min-height: 100vh;
        max-width: 100%;
    }

    body.cardboard .cb-livefeed-tape {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── Live Pulse Strip (sticky below ticker) ── */
    .lf-mobile-pulse {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 10px 14px;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        font-family: 'Manrope', sans-serif;
        position: sticky;
        top: 56px;
        z-index: 101;
    }

    .lf-mobile-pulse-live {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .lf-mobile-pulse-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
        animation: lf-pulse-dot 1.6s ease-in-out infinite;
    }

    .lf-mobile-pulse-dot.disconnected {
        background: rgba(255, 255, 255, 0.25);
        box-shadow: none;
        animation: none;
    }

    @keyframes lf-pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.3); }
    }

    .lf-mobile-pulse-label {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.55);
    }

    .lf-mobile-pulse-stat {
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }

    .lf-mobile-pulse-stat-value {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--cb-text-primary, #fff);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .lf-mobile-pulse-stat-label {
        font-size: 0.58rem;
        color: rgba(255, 255, 255, 0.35);
        text-transform: lowercase;
    }

    .lf-mobile-pulse-divider {
        width: 1px;
        height: 12px;
        background: rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
    }

    /* ── View Chip Row ── */
    .lf-mobile-chips {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: sticky;
        top: 94px; /* 56px ticker + 38px pulse strip */
        z-index: 100;
        background: rgba(10, 10, 10, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .lf-mobile-chips::-webkit-scrollbar { display: none; }

    .lf-mobile-chip {
        flex-shrink: 0;
        padding: 6px 12px;
        font-family: 'Manrope', sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        cursor: pointer;
        white-space: nowrap;
        text-transform: lowercase;
        letter-spacing: 0.01em;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .lf-mobile-chip:active {
        background: rgba(255, 255, 255, 0.08);
    }

    .lf-mobile-chip.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }

    /* Preserve original case for value chips ("1-10L", "10L-1Cr") */
    .lf-mobile-chip[data-chip="value"] {
        text-transform: none;
    }

    /* Category chip dots */
    .lf-mobile-chip-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* Search icon chip */
    .lf-mobile-chip-search {
        padding: 6px 10px;
    }

    .lf-mobile-chip-search svg {
        width: 12px;
        height: 12px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Expanded inline search — compact */
    .lf-mobile-search-bar {
        display: none;
        padding: 6px 12px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: sticky;
        top: 145px; /* 56 ticker + 38 pulse + 51 chips */
        z-index: 99;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .lf-mobile-search-bar.visible {
        display: block;
    }

    .lf-mobile-search-bar input {
        width: 100%;
        padding: 5px 12px;
        font-family: 'Manrope', sans-serif;
        font-size: 0.72rem;
        color: var(--cb-text-primary, #fff);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        outline: none;
        -webkit-appearance: none;
        height: 28px;
        box-sizing: border-box;
    }

    .lf-mobile-search-bar input::placeholder {
        color: rgba(255, 255, 255, 0.3);
    }

    /* ── Disclaimer (yield asterisk note) ── */
    body.cardboard .cb-livefeed-disclaimer {
        padding: 8px 14px !important;
        font-size: 0.58rem !important;
        background: rgba(255, 183, 77, 0.04) !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(255, 183, 77, 0.1) !important;
    }

    body.cardboard .cb-livefeed-disclaimer-text {
        color: rgba(255, 183, 77, 0.7) !important;
    }

    /* ── Trade Feed (hero) ── */
    body.cardboard #tradeFeed {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Time separators */
    body.cardboard .cb-trade-time-sep {
        display: flex !important;
        align-items: center !important;
        gap: 8px;
        padding: 14px 14px 6px !important;
        margin: 0 !important;
        font-size: 0.6rem !important;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.3) !important;
        text-transform: lowercase;
        letter-spacing: 0.08em;
        background: transparent !important;
        border: none !important;
    }

    body.cardboard .cb-trade-time-sep::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Individual trade card — redesigned as feed row */
    body.cardboard .cb-trade-card {
        display: block !important;
        padding: 10px 14px 10px 28px !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 0 !important;
        position: relative;
        transition: background 0.15s ease;
    }

    body.cardboard .cb-trade-card:active {
        background: rgba(255, 255, 255, 0.02) !important;
    }

    /* Category dot (leading) */
    body.cardboard .cb-trade-card::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 17px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
    }

    body.cardboard .cb-trade-card[data-category="Government"]::before { background: #4FC3F7; }
    body.cardboard .cb-trade-card[data-category="Corporate"]::before { background: #66BB6A; }
    body.cardboard .cb-trade-card[data-category="SGB"]::before { background: #FFB74D; }
    body.cardboard .cb-trade-card[data-category="Tax-free"]::before { background: #CE93D8; }

    /* Large trade accent (≥1Cr) */
    body.cardboard .cb-trade-card--large {
        background: rgba(255, 255, 255, 0.015) !important;
    }

    body.cardboard .cb-trade-card--large::after {
        content: '';
        position: absolute;
        left: 0;
        top: 6px;
        bottom: 6px;
        width: 2px;
        background: rgba(255, 255, 255, 0.25);
    }

    /* Line 1: name + yield */
    body.cardboard .cb-trade-card .cb-trade-line1 {
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 2px;
    }

    body.cardboard .cb-trade-card .cb-trade-name {
        font-size: 0.82rem !important;
        font-weight: 500;
        color: var(--cb-text-primary, #fff) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    body.cardboard .cb-trade-card .cb-trade-yield {
        font-size: 0.88rem !important;
        font-weight: 600;
        color: #4FC3F7 !important;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body.cardboard .cb-trade-card .cb-trade-yield-suffix {
        font-size: 0.6rem;
        font-weight: 400;
        color: rgba(79, 195, 247, 0.7);
        margin-left: 1px;
    }

    /* Line 2: meta + value */
    body.cardboard .cb-trade-card .cb-trade-line2 {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    body.cardboard .cb-trade-card .cb-trade-line2-left {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    body.cardboard .cb-trade-card .cb-trade-time {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }

    body.cardboard .cb-trade-card .cb-trade-meta {
        font-size: 0.62rem !important;
        color: rgba(255, 255, 255, 0.35) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: lowercase;
    }

    body.cardboard .cb-trade-card .cb-trade-meta::before {
        content: '·';
        margin-right: 6px;
        color: rgba(255, 255, 255, 0.2);
    }

    body.cardboard .cb-trade-card .cb-trade-value {
        font-size: 0.72rem !important;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.65) !important;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
        white-space: nowrap;
    }

    body.cardboard .cb-trade-card--large .cb-trade-value {
        font-size: 0.78rem !important;
        font-weight: 600;
        color: var(--cb-text-primary, #fff) !important;
    }

    /* Entrance animation for new trades */
    body.cardboard .cb-trade-card--initial {
        animation: lfFadeSlideUp 0.4s ease both;
        animation-delay: calc(var(--stagger-index, 0) * 0.02s);
    }

    @keyframes lfFadeSlideUp {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── New Trades Floating Pill ── */
    /* NOTE: JS toggles inline `display: flex` / `display: none`. Do NOT use !important on `display`. */
    body.cardboard .cb-livefeed-new-badge {
        position: fixed !important;
        left: 50% !important;
        bottom: 80px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        padding: 8px 16px !important;
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        color: #fff !important;
        background: rgba(10, 10, 10, 0.92) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 20px !important;
        backdrop-filter: blur(20px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
        z-index: 9000 !important;
        cursor: pointer;
        align-items: center;
        gap: 6px;
        animation: lfPillPulse 2s ease-in-out infinite;
        -webkit-tap-highlight-color: transparent;
    }

    body.cardboard .cb-livefeed-new-badge::before {
        content: '↑';
        font-size: 0.8rem;
        color: #22c55e;
    }

    @keyframes lfPillPulse {
        0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 197, 94, 0.1); }
        50% { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 197, 94, 0.3); }
    }

    /* ── Empty / Loading States ── */
    body.cardboard .cb-trade-card--loading,
    body.cardboard .cb-livefeed-loading,
    body.cardboard .cb-livefeed-empty,
    body.cardboard .cb-livefeed-empty-state {
        padding: 40px 20px !important;
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        font-size: 0.8rem;
    }

    body.cardboard .cb-livefeed-empty-state a,
    body.cardboard .cb-livefeed-empty-state .cb-livefeed-clear-link {
        color: #4FC3F7;
        text-decoration: none;
        cursor: pointer;
    }

    /* Skeleton loading shimmer */
    .lf-mobile-skeleton {
        padding: 10px 14px 10px 28px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        position: relative;
    }

    .lf-mobile-skeleton-line {
        height: 10px;
        border-radius: 4px;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
        background-size: 200% 100%;
        animation: lfShimmer 1.4s ease-in-out infinite;
        margin-bottom: 6px;
    }

    .lf-mobile-skeleton-line:first-child { width: 60%; }
    .lf-mobile-skeleton-line:last-child { width: 40%; margin-bottom: 0; }

    @keyframes lfShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    /* ── Hide the existing mobile filter bar (old desktop remnant) ── */
    body.cardboard .mobile-filter-bar {
        display: none !important;
    }

    /* ── Mobile filter panel tweaks (reused for view chip panel) ── */
    body.cardboard .livefeed-sheet {
        z-index: 10002 !important;
    }
}

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .lf-mobile-pulse,
    .lf-mobile-chips,
    .lf-mobile-search-bar {
        display: none !important;
    }
}