/**
 * feed.css
 *
 * Owns the BEM block `feed-page__*`. Theme tokens, the universal reset, the
 * body baseline, and the @property declarations now live in
 * `shared/browser/design_tokens.css` - this file consumes them and adds the
 * feed-specific layout, tab bar, feed-meta strip, and notification toasts.
 *
 * Component CSS files (topnav.css, post_card.css, ...) own their own BEM
 * namespaces and never style anything outside that namespace.
 *
 * See ai_agents_folder/ai_agent_instructions/03_design_guideline.md.
 */

/* When the off-canvas left rail is open we lock body scroll on mobile. */
body[data-drawer-open="true"] {
    overflow: hidden;
}

/* ---------- Page-scroll model ----------
   The page itself does not scroll. The viewport is divided into a fixed
   top-nav bar and a fixed main grid below it; only the center feed column
   scrolls internally. Rails stay stationary, the compose box scrolls with
   feed content, and the feed header stays sticky inside that center column. */
html, body {
    height: 100%;
    overflow: hidden;
}

/* ---------- Layout grid ----------
   The grid is sized to the viewport (height: calc(100vh - top-nav-h))
   and never scrolls itself. Only its center child (.feed-page__feed)
   has overflow:auto. On wide desktops, the feed is 20% wider than the
   previous 816px target, with that width taken from the right rail. */
.feed-page__main-grid {
    width: min(1720px, calc(100% - 48px));
    margin: 0 auto;
    padding: 24px 0 24px;
    display: grid;
    grid-template-columns: 260px minmax(0, 980px) minmax(340px, 1fr);
    gap: 32px;
    height: calc(100vh - 74px); /* topnav-wrap (74px) consumes the top */
    box-sizing: border-box;
}

.feed-page__topnav-skeleton {
    width: min(1720px, calc(100% - 48px));
    height: 64px;
    margin: 10px auto 0;
    padding: 0 18px;
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(260px, 520px) minmax(132px, auto);
    align-items: center;
    gap: 18px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    box-sizing: border-box;
}

.feed-page__topnav-skeleton-brand,
.feed-page__topnav-skeleton-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.feed-page__topnav-skeleton-actions {
    justify-content: flex-end;
}

.feed-page__topnav-skeleton-logo,
.feed-page__topnav-skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.feed-page__topnav-skeleton-search {
    width: 100%;
    height: 40px;
    border-radius: 999px;
}

/* ---------- Rails: stationary in their grid cells ----------
   Because the grid itself is fixed-height and never scrolls, the rails
   automatically stay put. Each rail scrolls internally only if its
   content exceeds the rail height. */
.feed-page__left-rail,
.feed-page__right-rail {
    height: 100%;
    overflow-y: auto;
    min-height: 0;
}

.feed-page__left-rail-skeleton,
.feed-page__right-rail-skeleton {
    display: grid;
    gap: 14px;
}

.feed-page__left-rail-skeleton {
    padding: 14px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.feed-page__left-rail-skeleton-profile {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: center;
}

.feed-page__left-rail-skeleton-nav,
.feed-page__left-rail-skeleton-stats {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline);
}

.feed-page__left-rail-skeleton-pill {
    width: 100%;
    height: 38px;
    border-radius: 12px;
}

.feed-page__right-rail-skeleton-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.feed-page__feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    /* breathing room at bottom so last post isn't flush against the edge */
    padding-bottom: 80px;
}

/* ---------- Feed header (tab bar + meta strip) ---------- */
.feed-page__feed-header {
    position: sticky;
    top: 0;
    z-index: 35;
    padding: 6px 6px 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

.feed-page__feed-header-skeleton {
    display: grid;
    gap: 10px;
}

.feed-page__feed-header-skeleton-tabs,
.feed-page__feed-header-skeleton-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.feed-page__feed-header-skeleton-tabs {
    padding: 6px;
}

.feed-page__feed-header-skeleton-meta {
    justify-content: space-between;
    padding: 0 8px 4px;
}

.feed-page__feed-header-skeleton-tab {
    width: 86px;
    height: 34px;
    border-radius: 999px;
}

.feed-page__compose-slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.feed-page__compose-skeleton {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--hairline);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.feed-page__compose-skeleton-body {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.feed-page__compose-skeleton-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
}

.feed-page__compose-skeleton-chip {
    width: 90px;
    height: 34px;
    border-radius: 999px;
}

.feed-page__compose-skeleton-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.feed-page__compose-skeleton-post {
    width: 72px;
    height: 34px;
    margin-left: auto;
    border-radius: 999px;
}

.feed-page__tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    position: relative;
}

.feed-page__tabs-list {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.feed-page__tabs-list::-webkit-scrollbar { display: none; }

.feed-page__tabs-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.feed-page__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feed-page__tab:hover {
    color: var(--text);
    background: var(--surface-2);
}
.feed-page__tab--active {
    background: var(--iris-tint);
    color: var(--iris);
    border-color: color-mix(in srgb, var(--iris) 20%, transparent);
}
.feed-page__tab-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.feed-page__tab-close {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    opacity: 0.6;
}
.feed-page__tab-close:hover,
.feed-page__tab-close:focus-visible {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

.feed-page__feed-meta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 6px;
    border-top: 1px solid var(--hairline);
    margin: 0 -6px -6px;
}
.feed-page__feed-meta-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    margin-right: 6px;
}

.feed-page__market-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--green-tint);
    color: var(--green-2);
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.feed-page__market-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1 1 auto;
}
.feed-page__market-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}
.feed-page__market-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}
.feed-page__market-pill--closed {
    background: var(--surface-2);
    color: var(--text-2);
}
.feed-page__market-pill--premarket {
    background: color-mix(in srgb, var(--amber) 14%, transparent);
    color: var(--amber);
}
.feed-page__market-pill--afterhours {
    background: color-mix(in srgb, var(--violet) 14%, transparent);
    color: var(--violet);
}
.feed-page__market-settings-root {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.feed-page__market-settings-btn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
}
.feed-page__market-settings {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, calc(100vh - 140px));
    overflow-y: auto;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}
.feed-page__market-settings-head {
    display: grid;
    gap: 2px;
    padding: 2px 2px 8px;
}
.feed-page__market-settings-head strong {
    color: var(--text);
    font: 800 13px 'Inter Tight', 'Inter', sans-serif;
}
.feed-page__market-settings-head span {
    color: var(--text-3);
    font: 600 11px 'Inter', sans-serif;
}
.feed-page__market-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    color: var(--text);
    font: 650 12px 'Inter', sans-serif;
}
.feed-page__market-option-row:hover {
    background: var(--surface-2);
}
.feed-page__market-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.feed-page__market-option span {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.feed-page__market-option strong {
    color: var(--text);
    font: 700 12px 'Inter', sans-serif;
}
.feed-page__market-option small {
    color: var(--text-3);
    font: 600 11px 'Inter', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-page__market-bell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--text-2);
    font: 700 11px 'Inter Tight', 'Inter', sans-serif;
    white-space: nowrap;
}
.feed-page__market-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 8px;
}
.feed-page__market-selected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    font: 650 11px 'Inter', sans-serif;
}
.feed-page__market-options {
    display: grid;
    gap: 2px;
    margin-top: 6px;
}
.feed-page__market-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
}

.feed-page__live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
}
.feed-page__live-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--iris);
    animation: feedPagePulse 1.6s ease-in-out infinite;
}
@keyframes feedPagePulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iris) 50%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--iris) 0%, transparent); }
}

.feed-page__feed-meta-spacer { flex: 1; }

.feed-page__feed-filter-wrap {
    position: relative;
    display: inline-flex;
}
.feed-page__feed-meta-filter {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.feed-page__feed-meta-filter:hover {
    background: var(--surface);
    color: var(--text);
}
.feed-page__feed-meta-filter--active {
    color: var(--iris);
    border-color: color-mix(in srgb, var(--iris) 24%, var(--hairline));
    background: var(--iris-tint);
}
.feed-page__feed-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: min(260px, calc(100vw - 32px));
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-pop);
}
.feed-page__feed-filter-option {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: 750 12px 'Inter Tight', 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
}
.feed-page__feed-filter-option:hover {
    background: var(--surface-2);
    color: var(--text);
}
.feed-page__feed-filter-option--active {
    background: var(--iris-tint);
    color: var(--iris);
    border-color: color-mix(in srgb, var(--iris) 22%, transparent);
}

/* ---------- Feed posts list ---------- */
.feed-page__feed-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Empty / error envelope inside the feed column. Solid surface card
   matches the rest of the UI. The loading state uses the dedicated
   .feed-page__feed-skeleton block below (post-card shaped shimmer). */
.feed-page__feed-empty {
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.feed-page__feed-empty a {
    color: var(--iris);
    text-decoration: none;
    font-weight: 600;
}
.feed-page__feed-empty a:hover { text-decoration: underline; }

/* Pre-mount skeleton for the feed column. Each card mirrors the real
   .post-card layout 1:1 (header w/ more-button, body lines, ticker-chip
   row, engagement bar) so the loading state has the same height and
   rhythm as the final UI - zero layout shift on swap-in. */
.feed-page__feed-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feed-page__feed-skeleton-card {
    padding: 18px 20px 14px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.feed-page__feed-skeleton-head {
    display: grid;
    grid-template-columns: 40px 1fr 32px;
    gap: 12px;
    align-items: center;
    margin-bottom: 4px;
}
.feed-page__feed-skeleton-more {
    width: 32px;
    height: 24px;
    border-radius: 8px;
}
.feed-page__feed-skeleton-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}
.feed-page__feed-skeleton-chip {
    height: 22px;
    width: 56px;
    border-radius: 999px;
}
.feed-page__feed-skeleton-engage {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}
.feed-page__feed-skeleton-action {
    height: 16px;
    width: 42px;
    border-radius: 6px;
}
.feed-page__feed-skeleton-action--last {
    justify-self: end;
    width: 18px;
}

/* Hide the feed header + compose slots while their components are
   still mounting. Without this rule two empty divs separated by `gap: 16px`
   render an empty band above the skeleton on first paint. */
.feed-page__feed-header:empty,
.feed-page__compose-slot:empty {
    display: none;
}

/* ---------- Right rail wrapping container (becomes 2-col grid <1100px) ---------- */
.feed-page__right-rail-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Notifications toast container ---------- */
.feed-page__notifications {
    position: fixed;
    top: 90px;
    right: 24px;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 360px;
}

.feed-page__toast {
    pointer-events: auto;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-pop);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.feed-page__toast--visible {
    opacity: 1;
    transform: translateY(0);
}
.feed-page__toast--success { border-color: color-mix(in srgb, var(--green) 24%, transparent); }
.feed-page__toast--error   { border-color: color-mix(in srgb, var(--red) 24%, transparent); }
.feed-page__toast--warning { border-color: color-mix(in srgb, var(--amber) 24%, transparent); }
.feed-page__toast--info    { border-color: color-mix(in srgb, var(--iris) 24%, transparent); }

.feed-page__toast-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.feed-page__toast--success .feed-page__toast-dot { background: var(--green); }
.feed-page__toast--error   .feed-page__toast-dot { background: var(--red); }
.feed-page__toast--warning .feed-page__toast-dot { background: var(--amber); }
.feed-page__toast--info    .feed-page__toast-dot { background: var(--iris); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .feed-page__main-grid {
        grid-template-columns: 240px minmax(0, 1fr) 320px;
        gap: 24px;
    }
}

@media (max-width: 1100px) {
    /* Below 1100px we drop the right rail down into the feed column so the
       feed gets full width. To do that we need normal page scroll back. */
    html, body { height: auto; overflow: auto; }
    .feed-page__main-grid {
        grid-template-columns: 240px minmax(0, 1fr);
        height: auto;
        padding-bottom: 80px;
    }
    .feed-page__left-rail,
    .feed-page__right-rail,
    .feed-page__feed { height: auto; overflow: visible; }
    .feed-page__feed { padding-bottom: 0; }
    .feed-page__feed-header { top: 74px; }
    .feed-page__right-rail {
        grid-column: 1 / -1;
    }
    .feed-page__right-rail-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .feed-page__topnav-skeleton {
        width: calc(100% - 24px);
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 0 12px;
    }
    .feed-page__topnav-skeleton-search {
        display: none;
    }
    .feed-page__topnav-skeleton-actions {
        gap: 7px;
    }
    .feed-page__main-grid {
        width: auto;
        grid-template-columns: 1fr;
        padding: 0 16px 80px;
    }
    .feed-page__left-rail {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        height: 100vh;
        background: var(--surface);
        z-index: 80;
        padding: 80px 16px 16px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: 1px solid var(--hairline);
        box-shadow: var(--shadow-pop);
        overflow-y: auto;
    }
    body[data-drawer-open="true"] .feed-page__left-rail {
        transform: translateX(0);
    }
    .feed-page__right-rail-grid {
        grid-template-columns: 1fr;
    }
    .feed-page__notifications {
        top: auto;
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .feed-page__live-pill-dot { animation: none !important; }
}