/* ── Right column - wraps game-sidebar + chronicles-box ── */
#right-col {
    position: fixed;
    top: var(--hud-top);
    right: 0px;
    width: var(--sidebar-width);
    max-width: var(--sidebar-max-width);
    height: var(--hud-height);
    margin: 0 var(--sidebar-margin) 0 0;
    min-width: var(--sidebar-min-width);
    z-index: var(--z-hud);
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    pointer-events: auto;
    overflow: hidden;
}

/* --- Chronicles Sidebar --- */
#game-sidebar {
    position: relative;
    flex-shrink: 0;
    min-height: 120px;
    background: linear-gradient(180deg, rgb(7 8 13 / 90%) 0%, rgb(7 7 13 / 90%) 100%);
    backdrop-filter: blur(8px);
    font-family: var(--font-body);
    box-shadow: var(--shadow-bottom);
    display: flex;
    flex-direction: column;
}

/* Chronicles box - its own framed container */
#chronicles-box {
    position: relative;
    flex: 1;
    min-height: 0;
    background: linear-gradient(180deg, rgb(7 8 13 / 80%) 0%, rgb(7 7 13 / 90%) 100%);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    font-family: var(--font-body);
    pointer-events: auto;
    isolation: isolate;
}

#chronicles-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(/assets/parchment-BIko6U1V.avif);
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
}

/* At narrow viewports (chat portalled to dock), cap height so it doesn't
   overflow the dock. box-sizing: border-box ensures flex-basis includes padding. */
#chronicles-box.chronicles--mini-capable {
    flex: 0 0 240px;
    box-sizing: border-box;
}
/* When mini-capable AND mini: shrink to content height (just the tab bar). */
#chronicles-box.chronicles--mini-capable.chronicles--mini {
    flex: 0 0 auto;
}

/* Wrapper that holds Horizon + Chronicles - inspect panel anchors here */
#lower-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: var(--section-gap);
}

/* When an inspect panel is active, expand to overlay Horizon + Chat area only */
#chronicles-box.chronicles-box--inspect-active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    flex: none;
    overflow-y: auto;
}

/* Nav panel footer - Settings | Logout / Development */
.nav-panel-footer {
    position: absolute;
    bottom: 2.8rem;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.nav-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.nav-footer-link {
    color: #636363;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}
.nav-footer-link:hover {
    color: var(--gold);
}
.nav-footer-sep {
    color: #3d3d3d;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
}

/* Old .cs-* captain summary rules removed - now in char-summary.css */

/* Vertical global navigation panel - sits to the left of #game-sidebar */
#global-nav-panel {
    position: fixed;
    top: var(--hud-top);
    left: var(--panel-gap);
    width: var(--nav-width);
    height: var(--hud-height);
    margin: 0;
    z-index: var(--z-hud);
    background: linear-gradient(180deg, rgb(7 8 13 / 90%) 0%, rgb(7 7 13 / 90%) 100%);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto;
    user-select: none;
    isolation: isolate;
}

#global-nav-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(/assets/parchment-BIko6U1V.avif);
    background-size: cover;
    background-position: center;
    opacity: 0.25;
    z-index: -1;
    pointer-events: none;
}

@media (min-width: 768px) and (pointer: fine) {
    #global-nav-panel {
        display: none;
    }
}

/* Header row: icon + title */
.sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px 13px;
    color: var(--gold);
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
/* Fade-out gradient separator instead of a hard border */
.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.sidebar-header-icon {
    font-size: var(--font-size-2xl);
    line-height: 1;
}