/**
 * Trade tape — own grid column between `.main-area` and `.right-sidebar`.
 *
 * History: previously the tape lived inside `.main-area` as part of a
 * `.chart-tape-row` flex wrapper. That worked visually but altered the
 * scroll geometry of `.main-area`, so the user lost the ability to scroll
 * the middle column vertically (chart wheel events stopped propagating to
 * the column scrollbar). Promoting the tape to a sibling grid column at
 * the app-container level leaves `.main-area` byte-identical to its
 * pre-tape state — chart, resizer, tabs all behave exactly as before.
 *
 * The grid override below adds a fourth column. Width chosen so:
 *   - "15m ago" worst-case time label fits the 56px TIME cell
 *   - "$1.54M" worst-case notional fits the 56px SIZE cell
 *   - 8-char prices ("80802.5") get the flex slack in the middle
 * Total: 56 + flex + 56 + paddings = 175px feels balanced.
 */

/* Override the 3-column grid declared in minimal-dark.css. The layout
   becomes: left-sidebar | main-area | pro-side (screener+depth) | trade-tape | right-sidebar.
   pro-side hosts the inline symbol screener + depth chart stacked vertically
   — replaces the horizontal strip that used to sit below the chart. */
.app-container {
    grid-template-columns: 1fr 320px 175px 360px !important;
}

.pro-side {
    height: 100vh;
    background: #0d1117;
    border-left: 1px solid #21262d;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pro-side .pro-side-section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.pro-side .pro-side-section + .pro-side-section {
    border-top: 1px solid #21262d;
}

.pro-side .pro-side-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    font: 600 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #8b949e;
    text-transform: uppercase;
    flex-shrink: 0;
}

.pro-side .pro-side-header .badge-active {
    color: #3fb950;
    font-weight: 700;
}

.pro-side .pro-side-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Mobile (< 700px): collapse — hide trade-tape and pro-side. */
@media (max-width: 700px) {
    .app-container {
        grid-template-columns: 1fr 360px !important;
    }
    .pro-side, .trade-tape {
        display: none;
    }
}

/* Narrow desktop (700-1400px): trim widths so all 5 columns still fit.
   pro-side bumped to 280px so the screener's 6 numeric columns don't
   collide and the depth chart canvas has breathing room. */
@media (min-width: 701px) and (max-width: 1400px) {
    .app-container {
        grid-template-columns: 1fr 280px 130px 200px !important;
    }
}

.trade-tape {
    position: relative;                      /* contains the absolute-positioned
                                                tt-audio-toggle button. Without
                                                this, the button anchors to the
                                                viewport edge and lands far away
                                                from the tape (~1494px), invisible
                                                in the user's perception even
                                                though it's technically in DOM. */
    height: 100vh;                           /* full app-container row */
    background: rgba(15, 15, 22, 0.95);
    border-left: 1px solid rgba(80, 200, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 10px;
    color: #aab;
    user-select: none;
    overflow: hidden;
}

.trade-tape-head {
    display: grid;
    /* Columns mirror .tt-row exactly so header labels line up with body
       cells. Time fits the longest relative-age string ("15m ago" = 7
       chars) in 56px; size shows USDT notional like "$120K" / "$1.54M"
       (≤ 6 chars) in 56px; price takes the slack. */
    grid-template-columns: 56px 1fr 56px;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #667;
    font-size: 9px;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.25);
    flex: 0 0 auto;
}

.trade-tape-head .tt-h-price { text-align: right; }
.trade-tape-head .tt-h-size  { text-align: right; }

/* Threshold breadcrumb — populated when the backend emits trade_tape_meta
   on each chart switch. Empty string when no meta yet (initial load), so
   normally invisible until the first symbol settles. */
.trade-tape-subhead {
    padding: 2px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 9px;
    color: #556;
    background: rgba(0, 0, 0, 0.15);
    flex: 0 0 auto;
    letter-spacing: 0.3px;
    min-height: 14px;
}
.trade-tape-subhead:empty { display: none; }

.trade-tape-rows {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The tape auto-trims to MAX_ROWS so users shouldn't need to scroll back —
   keep the scrollbar minimal but interactive. */
.trade-tape-rows::-webkit-scrollbar { width: 4px; }
.trade-tape-rows::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }

.tt-row {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    gap: 4px;
    padding: 1px 6px;
    line-height: 14px;
    /* `--tt-alpha` is set inline per-row by the renderer (size band). Both
       tints share hue so transitions between sizes feel continuous. */
}

.tt-row.tt-buy {
    background: hsla(140, 70%, 38%, var(--tt-alpha, 0.18));
    color: #c8f5d8;
}

.tt-row.tt-sell {
    background: hsla(355, 70%, 50%, var(--tt-alpha, 0.18));
    color: #f7c5c5;
}

/* Newest row gets a subtle highlight so the eye locks onto incoming
   prints without paying for a full animation. */
.tt-row:first-child {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tt-time  { text-align: left;  opacity: 0.7; }
.tt-price { text-align: right; font-variant-numeric: tabular-nums; }
.tt-size  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* Audio toggle — anchored top-right of the tape, sits ABOVE the
   header row's z-stack so it doesn't get clipped by the rows
   scroller. Slightly translucent at rest, brightens on hover and
   glows yellow when audio is active so users see "is the buzz
   coming from this tab?" at a glance. */
.tt-audio-toggle {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 3;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #4a4a55;
    font-size: 13px;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tt-audio-toggle:hover {
    color: #aaa;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.tt-audio-toggle.on {
    color: #f0da18;
    background: rgba(240, 218, 24, 0.12);
    border-color: rgba(240, 218, 24, 0.4);
}

/* Hide on phones — the chart needs full width there. Collapsing the
   third grid track too so main-area + right-sidebar reflow correctly. */
@media (max-width: 720px) {
    .trade-tape { display: none; }
    .app-container {
        grid-template-columns: 1fr 360px !important;
    }
}