/* 
 * layout.css
 * Container und Layout-Strukturen
 */

/* Haupt-App-Layout */
.app-container {
    display: flex;
    min-height: calc(100vh - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
    min-height: calc(100dvh - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
    width: 100%;   /* Volle Breite */
    position: relative; /* Relative Positionierung */
    box-sizing: border-box; /* Padding in Höhe einbeziehen */
    overflow: visible; /* Erlaube sticky-positioning für Kind-Elemente */
    margin-top: var(--sidebar-top-gap, env(safe-area-inset-top, 0px));
}

body:not(.logged-in) {
    --site-header-offset: 0;
}

@media (max-width: 768px) {
    .app-container {
        min-height: calc(100vh - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
        min-height: calc(100dvh - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
        margin-top: var(--sidebar-top-gap, env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 767px) {
    .app-container {
        height: calc(var(--ios-viewport-height, 100dvh) - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
        max-height: calc(var(--ios-viewport-height, 100dvh) - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)));
        overflow: hidden;
    }

    .main-content {
        overflow: hidden;
        overscroll-behavior-y: contain;
    }
}

@media (max-width: 767px) {
    body.single .app-container,
    body.archive .app-container,
    body.public-feed-page .app-container {
        height: auto;
        max-height: none;
        overflow: visible; /* Allow article/archive layouts to grow naturally */
    }

    body.single .main-content,
    body.archive .main-content,
    body.public-feed-page .main-content {
        overflow: visible; /* Re-enable vertical scrolling on content pages */
        overscroll-behavior-y: auto;
    }

    .main-content.is-public-feed {
        overflow-y: visible;
        overflow-x: hidden;
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: auto;
    }
}

@media (max-width: 767px) {
    body.legal-page .app-container,
    body.support-page .app-container {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body.legal-page .main-content,
    body.support-page .main-content {
        overflow: visible;
        overscroll-behavior-y: auto;
    }
}

/* Sidebar Content Scrollable */
.sidebar-content {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-md); /* Oben/unten und links/rechts Padding */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Höhe wird jetzt durch Flexbox bestimmt, kein festes calc() mehr nötig */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.sidebar-content.sidebar-content--no-scroll {
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-x;
}

@media (max-width: 768px) {
    .sidebar-content {
        /* Auf Smartphones: Container bleibt flexibel, kein feste Höhe */
        height: auto;
    }
}

/* Spezifischer Mobile-Fix: Ermögliche, dass die Conversations-Liste wieder eigenständig scrollt */
@media (max-width: 767px) {
    .sidebar-content {
        flex: 1;       /* Füllt verbleibenden Platz in .sidebar */
        min-height: 0; /* WICHTIG: Erlaubt inneren Flexkindern zu schrumpfen und zu scrollen */
        overflow-x: hidden;
        overflow-y: auto; /* Eigener Scroll-Container für Inhalte */
        -webkit-overflow-scrolling: touch;
        padding-top: var(--spacing-sm);
        padding-bottom: calc(var(--spacing-md) + var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px)));
        scrollbar-gutter: stable both-edges;
    }
}

.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 18px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

.sidebar {
    position: fixed; /* Fixiert die Sidebar am Viewport */
    top: var(--sidebar-top-gap, var(--safe-area-inset-top, 0px));
    left: 0;
    width: var(--sidebar-width-desktop); /* Feste Breite für die Sidebar */
    height: calc(var(--ios-viewport-height, 100vh) - var(--sidebar-top-gap, var(--safe-area-inset-top, 0px))); /* Füllt die restliche Höhe */
    background-color: var(--site-header-bg, rgba(255, 255, 255, 0.72));
    backdrop-filter: var(--site-header-backdrop, blur(24px));
    -webkit-backdrop-filter: var(--site-header-backdrop, blur(24px));
    border-right: none;
    z-index: var(--z-sidebar); /* Über dem Inhalt */
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    box-sizing: border-box;
}

.dark-mode .sidebar {
    background: linear-gradient(
        160deg,
        var(--home-container-fill, rgba(255, 255, 255, 0.12)) 0%,
        rgba(255, 255, 255, 0.07) 100%
    );
    border-right: none;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.loaded .sidebar {
    transition: transform 0.3s var(--transition-smooth);
}

/* Nur wenn explizit .open Klasse vorhanden ist, wird die Sidebar sichtbar */
.sidebar.open {
    transform: translateX(0) !important; /* Sichtbar, wenn .open Klasse vorhanden */
}

/* Media Query für mobile Geräte, wo die Sidebar anders behandelt wird */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%) !important;
        top: 0; /* Überlagert Vollbild auf Mobil */
        height: var(--ios-viewport-height, 100vh);
        max-height: var(--ios-viewport-height, 100vh);
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        z-index: 1002; /* Höher als sidebar-overlay (1001) */
        border-right: none; /* Entfernt die Border auf Mobilgeräten */
        display: grid;
        grid-template-rows: auto 1fr;
        row-gap: var(--spacing-sm);
        padding: 0;
        padding-bottom: var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px));
        overflow: hidden;
        scrollbar-gutter: stable both-edges;
    }

    .sidebar.open {
        transform: translateX(0) !important;
    }
}

/* Mobile: Hintergrund-Scroll sperren, wenn Sidebar offen ist */
body.sidebar-is-open {
    overflow-x: hidden;         /* Verhindert horizontales Verschieben des Layouts */
}

@media (max-width: 767px) {
    body.sidebar-is-open {
        overflow: hidden;           /* Verhindert Body-Scroll */
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        top: var(--sidebar-scroll-offset, 0px);
        overscroll-behavior: none;  /* Kein Scroll-Chaining */
    }

    body.sidebar-is-open .app-container,
    body.sidebar-is-open .main-content {
        overflow: hidden !important; /* Deaktiviert Scrollen im Inhalt */
    }
}


.main-content {
    flex-grow: 1;
    height: 100;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding-top: 64px; /* Platz für fixierten Site Header (64px) */
    box-sizing: border-box;
    transition: none;
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    min-width: 0;
}

body.sidebar-transitions .main-content {
    transition: margin-left 0.3s var(--transition-smooth);
}

.ios-app .sidebar {
    top: var(--sidebar-top-gap, var(--safe-area-inset-top, 0px));
    height: calc(var(--ios-viewport-height, 100vh) - var(--sidebar-top-gap, var(--safe-area-inset-top, 0px)));
}

@media (max-width: 767px) {
    .ios-app .sidebar {
        top: 0;
        height: var(--ios-viewport-height, 100vh);
        /* Safe areas for notch and Home Indicator */
        padding-bottom: var(--sidebar-bottom-gap, var(--safe-area-inset-bottom, 0px)); /* Home Indicator safe area */
    }
}
@media (min-width: 768px) {
    .sidebar + .main-content {
        margin-left: var(--sidebar-width-desktop);
        width: calc(100% - var(--sidebar-width-desktop));
        --site-header-offset: var(--sidebar-width-desktop);
    }

    body.sidebar-ready .sidebar + .main-content {
        margin-left: 0;
        width: 100%;
        --site-header-offset: 0;
    }

    .sidebar.open + .main-content,
    body.sidebar-ready .sidebar.open + .main-content {
        margin-left: var(--sidebar-width-desktop);
        width: calc(100% - var(--sidebar-width-desktop));
        --site-header-offset: var(--sidebar-width-desktop);
    }

    html.sidebar-prefers-closed .sidebar {
        transform: translateX(-100%) !important;
    }

    html.sidebar-prefers-closed .sidebar + .main-content {
        margin-left: 0;
        width: 100%;
        --site-header-offset: 0;
    }

    body.sidebar-ready .sidebar:not(.open) {
        transform: translateX(-100%) !important;
    }

    body.sidebar-ready .sidebar.open {
        transform: translateX(0) !important;
    }

    .sidebar.open ~ .main-content {
        --site-header-offset: var(--sidebar-width-desktop);
    }

    body.sidebar-is-open {
        --site-header-offset: var(--sidebar-width-desktop);
    }

    html.sidebar-prefers-open {
        --site-header-offset: var(--sidebar-width-desktop);
    }
}

/* iOS App: main-content uses base padding-top (64px); no extra safe-area to avoid double gap */
/* Site Header Styling */
.site-header {
    --scroll-progress-horizontal-padding: var(--spacing-lg);
    position: fixed;
    top: var(--sidebar-top-gap, env(safe-area-inset-top, 0px));
    right: 0;
    left: var(--site-header-offset, 0px); /* Standardmäßige Breite 0, kann via Variable verschoben werden */
    width: calc(100% - var(--site-header-offset, 0px));
    z-index: var(--z-header);
    height: 64px;
    display: flex !important; /* Force visibility */
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--site-header-bg, rgba(255, 255, 255, 0.72));
    border-bottom: 1px solid var(--site-header-border, rgba(255, 255, 255, 0.45));
    backdrop-filter: var(--site-header-backdrop, blur(24px));
    -webkit-backdrop-filter: var(--site-header-backdrop, blur(24px));
    transition: width 0.3s var(--transition-smooth);
    visibility: visible !important; /* Ensure visibility */
    opacity: 1 !important; /* Ensure opacity */
}

.dark-mode .site-header {
    background: linear-gradient(
        160deg,
        var(--home-container-fill, rgba(255, 255, 255, 0.12)) 0%,
        rgba(255, 255, 255, 0.07) 100%
    );
    border-bottom: 1px solid var(--home-container-border, rgba(255, 255, 255, 0.34));
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

@media (max-width: 768px) {
    .site-header {
        --scroll-progress-horizontal-padding: var(--spacing-sm);
        left: 0;
        width: 100%;
        top: env(safe-area-inset-top, 0px);
    }
}

.site-header__shell > .scroll-progress-container {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 2;
}

/* iOS App-specific alignment handled via --safe-top; no per-selector overrides needed */

.site-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* Erzwingt Linksbündigkeit */
    flex-grow: 1; /* Nimmt verfügbaren Platz ein */
    margin-left: var(--spacing-sm); /* Abstand zum linken Element (z.B. Menü-Icon) */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
}

.site-title h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
    letter-spacing: -0.01em; /* Leicht engere Buchstabenabstände für modernen Look */
}

.site-subtitle {
    font-size: 0.85rem;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 8px;
}

.header-actions #login-header-button {
    order: 99;
}

.header-logo {
    color: var(--color-text-primary);
}

.header-logo a {
    color: inherit;
    text-decoration: none;
}

/* Webkit-Scrollbar für main-content */
.main-content::-webkit-scrollbar {
    width: 6px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 18px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Vorhandener Container und Layout */
.container {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    background: transparent;
    position: relative;
    transform-style: preserve-3d;
    perspective: 2000px;
    padding: 0;
    overflow: visible;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: floatIn 0.8s var(--animation-curve) forwards;
    box-sizing: border-box;
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-intensity));
    padding: 8px 12px;
    border-radius: 18px;
    z-index: 1000;
    box-shadow: var(--elevation-2);
    border: 1px solid var(--glass-border);
}

/* Premium Editorial Chrome */
.main-content {
    padding-top: var(--site-header-height, 112px);
}

.site-header {
    --scroll-progress-horizontal-padding: var(--spacing-lg);
    top: var(--sidebar-top-gap, env(safe-area-inset-top, 0px));
    height: var(--site-header-height, 112px);
    padding: 10px var(--spacing-lg) 12px;
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header--public-feed {
    padding-top: 14px;
    padding-bottom: 18px;
}

.site-header__shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 340px) minmax(0, 0.92fr);
    gap: 10px;
    align-items: stretch;
    width: 100%;
    min-height: calc(var(--site-header-height, 112px) - 22px);
    padding: 12px 14px;
    border-radius: var(--chrome-shell-radius, 30px);
    border: 1px solid var(--chrome-shell-border, rgba(16, 18, 28, 0.1));
    background:
        linear-gradient(180deg, var(--chrome-shell-highlight, rgba(255, 255, 255, 0.86)) 0%, transparent 48%),
        var(--chrome-shell-fill, rgba(255, 255, 255, 0.88));
    box-shadow: var(--chrome-shell-shadow, 0 18px 42px rgba(16, 18, 28, 0.12));
    backdrop-filter: var(--site-header-backdrop, blur(24px));
    -webkit-backdrop-filter: var(--site-header-backdrop, blur(24px));
}

.site-header--public-feed .site-header__shell {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) auto;
    min-height: calc(var(--site-header-height, 112px) - 32px);
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.dark-mode .site-header__shell,
body.dark-mode .site-header__shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
        var(--chrome-shell-fill, rgba(17, 20, 24, 0.9));
    border-color: var(--chrome-shell-border, rgba(255, 255, 255, 0.12));
    box-shadow: var(--chrome-shell-shadow, 0 26px 72px rgba(0, 0, 0, 0.4));
}

.site-header__zone {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.site-header__zone--actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}

.site-header__brand-cluster {
    display: grid;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.site-header__brand-copy {
    display: grid;
    min-width: 0;
    overflow: hidden;
}

.site-header__brand-kicker {
    color: var(--color-text-tertiary);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header--public-feed .site-header__brand-kicker {
    display: none;
}

.site-header__brand-name {
    color: var(--color-text-primary);
    font-size: 1.18rem;
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header--public-feed .site-header__brand-cluster {
    gap: 0;
}

.site-header--public-feed .site-header__brand {
    min-height: 40px;
}

.site-title {
    gap: 4px;
    margin-left: 0;
    cursor: default;
    overflow: hidden;
}

.site-title__top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.site-title__icon {
    width: 16px;
    height: 16px;
    color: var(--color-accent-secondary);
    flex: 0 0 auto;
}

.site-title__icon.nj-icon,
.site-header__signal-icon.nj-icon {
    width: 16px;
    height: 16px;
}

.site-title h2 {
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-subtitle {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header__zone--discover {
    justify-content: center;
}

.site-header__menu-button {
    border: 1px solid var(--chrome-pill-border, rgba(16, 18, 28, 0.08));
    background: var(--chrome-pill-fill, rgba(255, 255, 255, 0.72));
}

#header-post-search-toggle.site-header__discover-button {
    width: min(100%, 340px);
    height: auto;
    min-height: 56px;
    flex: 1 1 auto;
    align-self: center;
    padding: 0 12px 0 10px;
    border-radius: 22px;
}

.site-header__signals {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
    overflow: hidden;
}

.site-header__story-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 12px;
    flex: 0 1 252px;
    min-width: 0;
    max-width: 252px;
    border-radius: 22px;
}

.header-actions {
    gap: 8px;
    margin-left: 0;
    flex: 0 0 auto;
}

.site-header__menu-button {
    flex: 0 0 auto;
}

.site-header__story-copy {
    min-width: 0;
}

.site-header__story-label,
.site-header__story-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header__discover-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.site-header__discover-icon .nj-icon,
.site-header__story-icon .nj-icon {
    width: 18px;
    height: 18px;
}

.site-header__discover-hint {
    min-height: 30px;
    margin-left: auto;
    padding: 0 9px;
    font-size: 0.72rem;
}

.site-header__zone--actions {
    display: flex;
    gap: 10px;
}

.site-header__signal {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-header__story-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.site-header__story-meta {
    line-height: 1.1;
}

.site-header--app .site-header__brand {
    display: none;
}

.site-header--app .site-header__brand-cluster {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header--app .site-header__discover-meta,
.site-header--app .site-header__discover-hint,
.site-header--app .site-header__story-meta {
    display: none;
}

.site-header--app .site-header__signals .site-header__signal:nth-child(n+3) {
    display: none;
}

.site-header--app .site-header__story-link {
    min-height: 42px;
    padding: 0 11px;
    flex-basis: 208px;
    max-width: 208px;
}

.site-header--app .site-header__story-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.site-header--reader .site-header__shell {
    grid-template-columns: minmax(0, 1.16fr) minmax(220px, 300px) minmax(0, 0.88fr);
}

.site-header--reader .site-header__brand-kicker,
.site-header--reader .site-header__discover-meta,
.site-header--reader .site-header__discover-hint,
.site-header--reader .site-header__story-meta {
    display: none;
}

.site-header--reader .site-header__signals {
    max-width: 128px;
}

.site-header--reader .site-header__story-link {
    min-height: 48px;
    flex-basis: 188px;
    max-width: 188px;
}

.site-header--reader .site-header__shell > .scroll-progress-container {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

@media (max-width: 1480px) and (min-width: 768px) {
    .site-header__shell {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) minmax(0, 0.8fr);
        gap: 8px;
    }

    .site-header--public-feed .site-header__shell {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) auto;
    }

    .site-header__brand-kicker,
    .site-header__discover-meta,
    .site-header__discover-hint,
    .site-header__story-meta {
        display: none;
    }

    .site-header__signals {
        max-width: 132px;
    }

    .site-header__story-link {
        min-height: 44px;
        flex-basis: 172px;
        max-width: 172px;
        padding: 0 11px;
    }

    .site-header--app .site-subtitle {
        display: none;
    }

    .site-header--public-feed .site-header__story-link {
        flex-basis: 160px;
        max-width: 160px;
    }
}

.sidebar {
    padding: 12px 12px 14px;
    background: transparent;
    border-right: none;
    box-shadow: none;
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 10px 12px 12px;
    border-radius: 30px;
    border: 1px solid var(--chrome-shell-border, rgba(16, 18, 28, 0.1));
    background:
        linear-gradient(180deg, var(--chrome-shell-highlight, rgba(255, 255, 255, 0.86)) 0%, transparent 48%),
        var(--chrome-shell-fill, rgba(255, 255, 255, 0.88));
    box-shadow: var(--chrome-shell-shadow, 0 18px 42px rgba(16, 18, 28, 0.12));
    backdrop-filter: var(--site-header-backdrop, blur(24px));
    -webkit-backdrop-filter: var(--site-header-backdrop, blur(24px));
    pointer-events: none;
}

.dark-mode .sidebar::before,
body.dark-mode .sidebar::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
        var(--chrome-shell-fill, rgba(17, 20, 24, 0.9));
    border-color: var(--chrome-shell-border, rgba(255, 255, 255, 0.12));
    box-shadow: var(--chrome-shell-shadow, 0 26px 72px rgba(0, 0, 0, 0.4));
}

.sidebar-header,
.sidebar-content {
    position: relative;
    z-index: 1;
}

.sidebar-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid transparent;
}

.sidebar-brand {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sidebar-brand__meta {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.sidebar-home-link {
    align-items: flex-start;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(16, 18, 28, 0.98), rgba(31, 38, 50, 0.92));
    color: #ffffff;
    box-shadow: none;
}

.sidebar-home-link__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
}

.sidebar-home-link__copy {
    display: grid;
    gap: 2px;
}

.sidebar-home-link__label {
    font-size: 0.98rem;
    font-weight: 700;
}

.sidebar-home-link__meta {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.76);
}

/* Unified floating header: public + reader + app */
.main-content {
    padding-top: var(--site-header-height, 118px);
}

.site-header {
    top: calc(var(--sidebar-top-gap, env(safe-area-inset-top, 0px)) + 12px);
    padding: 0 var(--spacing-lg, 2rem) 18px;
    height: var(--site-header-height, 118px);
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header--public-feed,
.site-header--reader,
.site-header--app,
.site-header--public {
    padding-top: 0;
    padding-bottom: 18px;
}

.site-header__shell,
.site-header--public-feed .site-header__shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: calc(var(--site-header-height, 118px) - 30px);
    padding: 12px 16px;
    border-radius: var(--chrome-shell-radius, 30px);
    border: 1px solid var(--chrome-shell-border, rgba(16, 18, 28, 0.1));
    background:
        linear-gradient(180deg, var(--chrome-shell-highlight, rgba(255, 255, 255, 0.86)) 0%, transparent 48%),
        var(--chrome-shell-fill, rgba(255, 255, 255, 0.88));
    box-shadow: var(--chrome-shell-shadow, 0 18px 42px rgba(16, 18, 28, 0.12));
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

.site-header__zone--brand,
.site-header__zone--actions {
    overflow: visible;
}

.site-header__zone--brand {
    gap: 12px;
}

.site-header__zone--discover {
    justify-content: flex-start;
}

.site-header__zone--actions {
    justify-content: flex-end;
    gap: 10px;
}

.site-header__signals,
.site-header__brand-kicker,
.site-title,
.site-subtitle,
.site-header__story-link {
    display: none !important;
}

.site-header__brand-cluster {
    gap: 0;
}

.site-header__brand,
.site-header--app .site-header__brand {
    display: inline-flex;
    min-height: 44px;
    gap: 12px;
}

.site-header__brand-copy {
    display: flex;
    align-items: center;
}

.site-header__brand-name {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.site-header__menu-button {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: none;
    background: rgba(255, 255, 255, 0.72);
}

#header-post-search-toggle.site-header__discover-button {
    width: min(100%, 540px);
    min-width: min(100%, 300px);
    height: auto;
    min-height: 52px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(16, 18, 28, 0.08);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    justify-content: flex-start;
}

.site-header__discover-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
}

.site-header__discover-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: visible;
}

.site-header__discover-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.96rem;
    line-height: 1.24;
    font-weight: 600;
}

.site-header__discover-meta,
.site-header__discover-hint {
    display: none !important;
}

.site-header__quick-action,
.header-actions > .icon-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.72);
}

.site-header__quick-action-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(201, 123, 61, 0.14);
    color: var(--color-accent-primary, #c97b3d);
}

.header-actions {
    margin-left: 0;
    gap: 10px;
}

.header-actions #login-header-button {
    order: unset;
}

.site-header__profile-pill.header-avatar-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: 44px;
    min-width: 0;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(16, 18, 28, 0.08);
    background: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    overflow: visible;
}

.site-header__profile-name {
    display: block;
    max-width: 132px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    font-weight: 700;
}

.site-header__profile-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.site-header__profile-avatar .header-avatar-image,
.site-header__profile-avatar .header-avatar-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 999px;
}

.site-header__profile-avatar .header-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-primary, #c97b3d);
    color: #fff;
    font-weight: 700;
}

.dark-mode .site-header__shell,
body.dark-mode .site-header__shell,
.dark-mode .site-header--public-feed .site-header__shell,
body.dark-mode .site-header--public-feed .site-header__shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
        rgba(17, 20, 24, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--chrome-shell-shadow, none);
}

.dark-mode #header-post-search-toggle.site-header__discover-button,
.dark-mode .site-header__quick-action,
.dark-mode .header-actions > .icon-button,
.dark-mode .site-header__profile-pill.header-avatar-button,
body.dark-mode #header-post-search-toggle.site-header__discover-button,
body.dark-mode .site-header__quick-action,
body.dark-mode .header-actions > .icon-button,
body.dark-mode .site-header__profile-pill.header-avatar-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
}

/* Unified floating header 2026-04-20 */
body {
    --site-header-height: var(--page-header-height-desktop, 118px);
}

#primary-navigation.site-header {
    top: calc(var(--sidebar-top-gap, env(safe-area-inset-top, 0px)) + 12px);
    padding: 0 clamp(12px, 2.2vw, 28px) clamp(12px, 2vw, 20px);
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition:
        transform var(--motion-slow, 320ms) var(--motion-snappy, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity var(--motion-standard, 220ms) ease;
    will-change: transform;
}

#primary-navigation.site-header.site-header--scroll-hidden:not(:focus-within) {
    transform: translate3d(0, calc(-100% - var(--sidebar-top-gap, env(safe-area-inset-top, 0px)) - 28px), 0);
    opacity: 0;
    pointer-events: none;
}

#primary-navigation.site-header .site-header__shell,
#primary-navigation.site-header.site-header--public-feed .site-header__shell {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 1.6vw, 18px);
    width: min(100%, var(--page-shell-max-width, 1280px));
    max-width: var(--page-shell-max-width, 1280px);
    margin: 0 auto;
    padding: 14px 16px;
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface-panel-fill, rgba(255, 255, 255, 0.86)) 88%, transparent) !important;
    border: 1px solid var(--surface-panel-border, rgba(16, 18, 28, 0.09)) !important;
    box-shadow: var(--chrome-shell-shadow, none);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    overflow: hidden;
}

#primary-navigation.site-header .site-header__zone--brand {
    min-width: 0;
    gap: 12px;
    justify-content: flex-start;
}

#primary-navigation.site-header .site-header__brand-cluster,
#primary-navigation.site-header .site-header__brand-copy {
    min-width: 0;
}

#primary-navigation.site-header .site-header__brand-name {
    font-size: clamp(1.05rem, 0.92rem + 0.4vw, 1.35rem);
    white-space: nowrap;
}

#primary-navigation.site-header.site-header--app .site-header__brand {
    display: inline-flex !important;
}

body.logged-in.sidebar-is-open #primary-navigation.site-header.site-header--app .site-header__brand-cluster {
    display: none;
}

#primary-navigation.site-header .site-header__zone--discover {
    min-width: 0;
    justify-content: flex-start;
}

#primary-navigation.site-header #header-post-search-toggle.site-header__discover-button {
    width: min(100%, 760px);
    max-width: 760px;
    min-width: 0;
    min-height: 54px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 18px 0 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: none;
}

#primary-navigation.site-header .site-header__discover-copy {
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: visible;
}

#primary-navigation.site-header .site-header__discover-label {
    font-size: 0.98rem;
    line-height: 1.24;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

#primary-navigation.site-header .site-header__zone--actions {
    min-width: max-content;
    justify-content: flex-end;
    gap: 10px;
}

#primary-navigation.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
}

#primary-navigation.site-header .site-header__menu-button {
    display: none;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    color: #111318;
}

#primary-navigation.site-header .site-header__quick-action,
#primary-navigation.site-header .header-actions > .icon-button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #111318;
}

#primary-navigation.site-header .site-header__profile-pill.header-avatar-button {
    min-height: 48px;
    padding: 0 10px 0 14px;
    border-radius: 999px;
    gap: 10px;
    flex: 0 0 auto;
    border: 1px solid rgba(16, 18, 28, 0.08);
    background: rgba(255, 255, 255, 0.72);
}

#primary-navigation.site-header .site-header__quick-action-icon,
#primary-navigation.site-header .site-header__discover-icon {
    width: auto;
    height: auto;
    flex: 0 0 auto;
    background: transparent;
    color: #111318;
}

#primary-navigation.site-header .site-header__quick-action .nj-icon,
#primary-navigation.site-header .header-actions > .icon-button .nj-icon,
#primary-navigation.site-header #header-post-search-toggle.site-header__discover-button .nj-icon,
#primary-navigation.site-header .site-header__menu-button .nj-icon {
    color: #111318;
}

#primary-navigation.site-header .site-header__quick-action .nj-icon,
#primary-navigation.site-header .header-actions > .icon-button .nj-icon {
    width: 22px;
    height: 22px;
}

.dark-mode #primary-navigation.site-header.site-header--public,
body.dark-mode #primary-navigation.site-header.site-header--public {
    border-bottom-color: transparent !important;
}

.dark-mode #primary-navigation.site-header.site-header--public .site-header__shell,
body.dark-mode #primary-navigation.site-header.site-header--public .site-header__shell {
    border-color: transparent !important;
}

.dark-mode #primary-navigation.site-header.site-header--public #header-post-search-toggle.site-header__discover-button,
body.dark-mode #primary-navigation.site-header.site-header--public #header-post-search-toggle.site-header__discover-button {
    background: rgba(255, 255, 255, 0.9);
    color: #111318;
}

.dark-mode #primary-navigation.site-header.site-header--public .site-header__discover-label,
.dark-mode #primary-navigation.site-header.site-header--public #header-post-search-toggle.site-header__discover-button .nj-icon,
body.dark-mode #primary-navigation.site-header.site-header--public .site-header__discover-label,
body.dark-mode #primary-navigation.site-header.site-header--public #header-post-search-toggle.site-header__discover-button .nj-icon {
    color: #111318;
}

.dark-mode #primary-navigation.site-header.site-header--public .site-header__profile-pill.header-avatar-button,
body.dark-mode #primary-navigation.site-header.site-header--public .site-header__profile-pill.header-avatar-button {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(16, 18, 28, 0.08);
    color: #111318;
}

.dark-mode #primary-navigation.site-header.site-header--public .site-header__quick-action,
.dark-mode #primary-navigation.site-header.site-header--public .header-actions > .icon-button,
.dark-mode #primary-navigation.site-header.site-header--public .site-header__quick-action .nj-icon,
.dark-mode #primary-navigation.site-header.site-header--public .header-actions > .icon-button .nj-icon,
body.dark-mode #primary-navigation.site-header.site-header--public .site-header__quick-action,
body.dark-mode #primary-navigation.site-header.site-header--public .header-actions > .icon-button,
body.dark-mode #primary-navigation.site-header.site-header--public .site-header__quick-action .nj-icon,
body.dark-mode #primary-navigation.site-header.site-header--public .header-actions > .icon-button .nj-icon {
    color: #ffffff;
}

#primary-navigation.site-header #theme-toggle-header .light-icon,
#primary-navigation.site-header #theme-toggle-header .dark-icon {
    width: 22px;
    height: 22px;
}

#primary-navigation.site-header .site-header__signals,
#primary-navigation.site-header .site-header__story-link,
#primary-navigation.site-header .site-header__brand-kicker,
#primary-navigation.site-header .site-title,
#primary-navigation.site-header .site-subtitle {
    display: none !important;
}

#primary-navigation.site-header .site-header__shell > .scroll-progress-container {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

#primary-navigation.site-header .site-header__shell > .scroll-progress-container .scroll-progress-bar {
    background: var(--color-accent-primary, #c97b3d);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    #primary-navigation.site-header {
        transition-duration: 1ms;
    }
}