:root {
    /* Matches the fixed .chim-navbar height so no blank band is left below it. */
    --hub-navbar-offset: 64px;
    --hub-navigation-gap: 8px;
}

body.hub-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: var(--hub-navbar-offset);
}

body.hub-page > main {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: calc(100vh - var(--hub-navbar-offset));
    padding-top: 0 !important;
}

body.hub-page > main .tab-container {
    margin-top: 0 !important;
}

body.hub-page > main > .top-area {
    margin-top: 0;
}

body.hub-page .config-navigation {
    margin-top: var(--hub-navigation-gap);
}

/*
 * Compact hub navigation shared by Config Hub, Roleplay, Control Panel and the
 * AI Responses page. Everything below is scoped under .config-navigation so
 * content-level .tab-buttons on embedded pages keep their own styling.
 */
.config-navigation {
    margin: 6px 0;
    padding: 5px;
    border: 1px solid var(--chim-border, #404040);
    border-radius: 10px;
    background: var(--chim-surface-3, #1d1d1d);
    box-shadow: none;
}

/* Desktop groups size from their own labels and buttons, then shrink and wrap
   their buttons together if the row is tighter. They never grow merely to
   absorb unused space, so any remainder stays at the right edge. */
.config-navigation .tab-groups {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 5px;
    align-items: flex-start;
}

.config-navigation .tab-group {
    flex: 0 1 max-content;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 4px 6px;
    overflow: visible;
    border: 1px solid var(--chim-border, #404040);
    border-radius: 8px;
    background: var(--chim-surface-1, #232323);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.config-navigation .tab-group.active {
    border-color: rgba(242, 124, 17, 0.62);
    box-shadow: inset 0 0 0 1px rgba(242, 124, 17, 0.08);
}

.config-navigation .tab-group-label {
    padding: 0 0 3px;
    border-bottom: 1px solid rgba(242, 124, 17, 0.22);
    color: #d5a56f;
    font-family: 'MagicCards', sans-serif;
    font-size: 0.68em;
    letter-spacing: 0.9px;
    line-height: 1.2;
    word-spacing: 2px;
    text-transform: uppercase;
}

/* Buttons pack by their own width instead of sitting in fixed columns, so a
   short label no longer reserves a full column. */
.config-navigation .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

/* border-box keeps the declared height honest: as content-box the old 38px
   buttons painted 54px once padding and border were added. */
body .config-navigation .tab-button {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    min-width: 0;
    height: 32px !important;
    min-height: 32px !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 6px;
    margin: 0 !important;
    padding: 4px 8px !important;
    overflow: hidden;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: #303030;
    color: #f0f0f0;
    cursor: pointer;
    font-family: 'MagicCards', sans-serif !important;
    font-size: 0.82em !important;
    font-weight: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0.6px;
    text-decoration: none;
    word-spacing: 1px;
    white-space: nowrap;
    box-shadow: none;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.config-navigation .tab-button span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-navigation .tab-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 0.95em;
    line-height: 1;
}

/* Hover and active only repaint colours and the inset rule, so neither moves
   the button or reflows the row. */
.config-navigation .tab-button:hover {
    border-color: rgba(242, 124, 17, 0.45);
    background: #38332f;
    color: rgb(242, 124, 17);
    text-decoration: none;
    box-shadow: none;
}

.config-navigation .tab-button.active {
    border-color: rgba(242, 124, 17, 0.75);
    background: #3a2d23;
    color: rgb(242, 124, 17);
    text-decoration: none;
    box-shadow: inset 0 -2px rgba(242, 124, 17, 0.65);
}

.config-navigation .tab-button:focus,
.config-navigation .tab-button:visited {
    text-decoration: none;
}

/* Outline draws outside the box, so the keyboard ring costs no layout. */
.config-navigation .tab-button:focus-visible {
    outline: 2px solid rgb(242, 124, 17);
    outline-offset: 2px;
}

/* Two-group hubs are small enough to keep their labels beside the buttons on
   ordinary desktops, avoiding a dedicated label row. */
@media (min-width: 901px) {
    .config-navigation .tab-groups.two-groups .tab-group {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .config-navigation .tab-groups.two-groups .tab-group-label {
        flex: 0 0 auto;
        padding: 0 8px 0 0;
        border-bottom: 0;
        border-right: 1px solid rgba(242, 124, 17, 0.22);
        white-space: nowrap;
    }
}

/* Very wide desktops have room to sit each label beside its buttons, which
   drops the label row entirely. The breakpoint is deliberately high: an inline
   label takes width away from the buttons, so below ~1800px the config hubs
   spend more on an extra button row than the label row ever cost. Under it the
   label goes back on top and the buttons keep the full group width. */
@media (min-width: 1800px) {
    .config-navigation .tab-group {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .config-navigation .tab-group-label {
        flex: 0 0 auto;
        padding: 0 8px 0 0;
        border-bottom: 0;
        border-right: 1px solid rgba(242, 124, 17, 0.22);
        white-space: nowrap;
    }
}

/* Smaller desktops: trimming letter-spacing and padding is usually enough to
   save a button row without shrinking the text further. */
@media (max-width: 1200px) {
    body .config-navigation .tab-button {
        padding: 4px 7px !important;
        font-size: 0.78em !important;
        letter-spacing: 0.4px;
    }
}

/* Narrow viewports: one group per row, and buttons stretch to comfortable
   touch targets rather than shrinking. */
@media (max-width: 900px) {
    .config-navigation .tab-groups {
        flex-wrap: wrap;
    }

    .config-navigation .tab-groups .tab-group,
    .config-navigation .tab-groups.two-groups .tab-group {
        flex: 1 1 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding: 5px 8px;
    }

    .config-navigation .tab-group-label {
        flex: 0 0 auto;
        padding: 0 0 5px;
        border-right: 0;
        border-bottom: 1px solid rgba(242, 124, 17, 0.22);
        font-size: 0.72em;
        white-space: normal;
    }

    body .config-navigation .tab-button {
        flex: 1 1 auto;
        height: 38px !important;
        min-height: 38px !important;
        justify-content: center !important;
        font-size: 0.82em !important;
    }
}