/* ═══════════════════════════════════════
   FEED LAYOUT: ANALYST (LAYOUT ONLY)
═══════════════════════════════════════ */

/*
   HEIGHT BUDGET:
   calc(100vh - 100px) accounts for topbar (~48px) + tabbar (~48px) + 4px margin.
   The split pane intentionally fills the remaining viewport so both list and
   detail panels scroll independently without the page scrolling behind them.
*/

/* Feed grid — takes full height of feed container */
.analyst-grid {
    display: flex;
    width: 100%;
    height: calc(100vh - 100px);
    min-height: 600px;
}

.analyst-grid .card-slot.full-width {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
}

/* Card container — flex column for body split */
.analyst-grid .analyst-ratings-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    overflow: hidden;
    margin: 0;
}

/* 2-pane body split */
.analyst-grid .card-body.analyst-body-split {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    width: 100%;
    gap: 12px;
    padding: 0;
    overflow: hidden;
}

/* Left pane: stream */
.analyst-stream-pane {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.analyst-stream-pane::-webkit-scrollbar       { width: var(--scrollbar-w); }
.analyst-stream-pane::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.analyst-stream-pane::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }

/* Right pane: detail
   No justify-content here — .detail-placeholder uses flex:1 to self-center,
   and .detail-content uses flex:1 to fill from top. */
.analyst-detail-pane {
    flex: 0 0 50%;
    max-width: 50%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.analyst-detail-pane::-webkit-scrollbar       { width: var(--scrollbar-w); }
.analyst-detail-pane::-webkit-scrollbar-track { background: var(--scrollbar-track); }
.analyst-detail-pane::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-full); }


/* ════════════════════════════════════════
   RESPONSIVE LAYOUTS (ANALYST TAB)
════════════════════════════════════════ */

/* ── 1440px: Laptops ── */
@media (max-width: 1440px) {
    .analyst-grid { height: calc(100vh - 100px); min-height: 560px; }
    .analyst-grid .analyst-ratings-card { max-height: 90vh; }
}

/* ── 1280px: Standard Laptops ── */
@media (max-width: 1280px) {
    /* Give the detail pane slightly more width on medium screens */
    .analyst-stream-pane { flex: 0 0 45%; max-width: 45%; }
    .analyst-detail-pane { flex: 0 0 55%; max-width: 55%; }
}

/* ── 1100px: Tablets / iPads — stack the two panes ── */
@media (max-width: 1100px) {
    .analyst-grid {
        height: auto;
        min-height: auto;
    }

    .analyst-grid .analyst-ratings-card {
        max-height: none;
        overflow: visible;
    }

    .analyst-grid .card-body.analyst-body-split {
        flex-direction: column;
        overflow: visible;
        gap: 0;
    }

    .analyst-stream-pane {
        flex: none;
        max-width: 100%;
        height: 55vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .analyst-detail-pane {
        flex: none;
        max-width: 100%;
        height: 55vh;
        padding: 16px;
    }
}

/* ── 768px: Mobile ── */
@media (max-width: 768px) {
    .analyst-stream-pane,
    .analyst-detail-pane {
        height: 50vh;
    }
}

/* ── 480px: Small Mobile ── */
@media (max-width: 480px) {
    .analyst-stream-pane { height: 45vh; }
    .analyst-detail-pane { height: auto; min-height: 300px; padding: 12px; padding-bottom: 80px; }
}