/* ============================================================
   SITE LAYOUT: PAGE, HEADER, MAIN, PANELS, FOOTER
   (no typography, no component visuals)
   ============================================================ */

/* ----- Page container ----- */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* the page itself does not scroll; panels do */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-header-gray);
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Compact two-line header */
/* Top header row: logo + app label + login/logout */
/* Second header row: context (Chat / Stream name + button) */
    /* Top header row: fixed, token-based height */
    .sticky-header .header-row1 {
        height: var(--header-row1-height);
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Second header row: fixed, token-based height */
    .sticky-header .header-row2 {
        height: var(--header-row2-height);
        padding-top: 0;
        padding-bottom: 0;
    }

        /* In header rows, stretch columns to full row height (override .align-items-center) */
        .sticky-header .header-row1.align-items-center,
        .sticky-header .header-row2.align-items-center {
            align-items: stretch; /* instead of center */
        }

    /* Make header-row1 columns always fill the row vertically */
    .sticky-header .header-row1 > [class^="col-"],
    .sticky-header .header-row1 > [class*=" col-"] {
        height: 100%;
        box-sizing: border-box;
    }


    .sticky-header .header-row2 > [class^="col-"],
    .sticky-header .header-row2 > [class*=" col-"] {
        height: 100%;
        box-sizing: border-box;
    }

    .sticky-header .header-row2 > .col-4 {
        background: var(--color-panel-gray); /* same as left panel */
    }

    .sticky-header .header-row2 > .col-7 {
        background: #ffffff; /* white area for title + button */
    }


/* Small DEMO badge next to logo */
.header-demo-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 999px; /* pill shape */

    background: var(--color-soft-orange);
    color: #ffffff;
}


/* ----- Main area between header and footer ----- */

.main-area {
    flex: 0 0 auto;
    width: 100%;
    /* full viewport minus two header rows and the footer */
    height: calc( 100vh - var(--header-row1-height) - var(--header-row2-height) - var(--footer-height) );
    overflow: hidden; /* main-area itself doesn’t scroll */
    background: #ffffff;
}

    /* Make the Bootstrap container + row fill vertical space */
    .main-area > .container-fluid,
    .main-area > .container-fluid > .row {
        height: 100%;
    }


/* ----- Panels: left (streams) and right (messages) ----- */

.left-panel {
    background: var(--color-panel-gray);
}

.right-panel {
    background: #ffffff;
}

/* Both panels scroll independently on desktop */
.left-panel,
.right-panel {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----- Vertical toolbar column (leftmost) ----- */

.toolbar-col {
    height: 100%;
    width: 100%; /* full column width; no inner side margins */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--color-header-gray); /* same as header chrome */
}

/* ----- Sticky footer chrome ----- */

.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    background: var(--color-header-gray); /* same band as header/toolbar */
    border-top: 1px solid var(--color-border-subtle);
    z-index: 1200;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ----- Global scrollbars (WebKit) ----- */

::-webkit-scrollbar {
    width: 8px;
    background: var(--color-panel-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-subtle);
    border-radius: 4px;
}