/* ==========================================================================
   layout.css — Top nav, view containers, main content area, chat container
   ========================================================================== */

/* App wrapper.
   UI13: edge-to-edge layout — the chat-container fills the entire viewport
   instead of being a centered card with body padding. Body no longer flex-
   centers (see base.css). The .main-content children (chat hero / messages
   / input) are width-capped at --chat-column-max-width and centered, so
   prose stays readable while the unified-sidebar docks at the right edge
   inside this same wrapper. */
.app-container,
.chat-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: var(--color-bg-elevated);
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
}

/* ----- Top Navigation Bar ----- */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding: 0 var(--space-lg);
    background: var(--color-nav-bg);
    border-bottom: 2px solid var(--color-accent);
    flex-shrink: 0;
    z-index: 100;
    position: relative;
}

[data-theme="light"] .top-nav {
    background: #151576;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.nav-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

/* nav-logo Beacon SVG size is set below after .nav-search-compact */

.nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 var(--space-lg);
    gap: var(--space-xs);
}

/* Smaller nav icon variant for + and history buttons */
.nav-icon.nav-icon-sm {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.nav-icon.nav-icon-sm svg {
    width: 21px;
    height: 21px;
}

.nav-search-compact {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    width: 100%;
}

.nav-search-compact:hover {
    background: rgba(255, 255, 255, 0.15);
}

.nav-search-compact img {
    width: 16px;
    height: 16px;
    opacity: 0.9;
    filter: brightness(0) invert(1);
}

.nav-logo .beacon-logo {
    height: 42px;
    width: auto;
    display: block;
}

.beacon-logo {
    display: block;
    overflow: visible;
    transition: opacity 240ms ease;
}

.beacon-logo__body,
.beacon-logo__cross-wrap,
.beacon-logo__orbit {
    transform-box: fill-box;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.beacon-logo__wing,
.beacon-logo__body-left-light,
.beacon-logo__body-left-mid,
.beacon-logo__body-left-dark,
.beacon-logo__body-right-light,
.beacon-logo__body-right-mid,
.beacon-logo__body-right-dark,
.beacon-logo__disc,
.beacon-logo__disc-highlight,
.beacon-logo__cross {
    transition: fill 320ms ease;
}

.beacon-logo__wing {
    transform-box: fill-box;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), fill 320ms ease;
    will-change: transform;
    fill: var(--beacon-wing-fill);
}

.beacon-logo__body-left-light {
    fill: var(--beacon-body-left-light);
}

.beacon-logo__body-left-mid {
    fill: var(--beacon-body-left-mid);
}

.beacon-logo__body-left-dark {
    fill: var(--beacon-body-left-dark);
}

.beacon-logo__body-right-light {
    fill: var(--beacon-body-right-light);
}

.beacon-logo__body-right-mid {
    fill: var(--beacon-body-right-mid);
}

.beacon-logo__body-right-dark {
    fill: var(--beacon-body-right-dark);
}

.beacon-logo__disc {
    fill: var(--beacon-disc-fill);
}

.beacon-logo__disc-highlight {
    fill: var(--beacon-disc-highlight-fill);
}

.beacon-logo__cross {
    fill: var(--beacon-cross-fill);
}

.beacon-logo__wing--left-top {
    transform-origin: right bottom;
    transform: scale(0.927, 0.846);
}

.beacon-logo__wing--left-bottom {
    transform-origin: right top;
    transform: scale(0.927, 0.846);
}

.beacon-logo__wing--right-top {
    transform-origin: left bottom;
    transform: scale(0.927, 0.846);
}

.beacon-logo__wing--right-bottom {
    transform-origin: left top;
    transform: scale(0.927, 0.846);
}

.beacon-logo__orbit,
.beacon-logo__cross-wrap {
    transform-origin: center center;
    transform: scale(0.859);
}

.beacon-logo__body--left,
.beacon-logo__body--right {
    transform-origin: center bottom;
}

.beacon-logo--white {
    --beacon-wing-fill: #fff;
    --beacon-body-left-light: #0390df;
    --beacon-body-left-mid: #0264d2;
    --beacon-body-left-dark: #083faf;
    --beacon-body-right-light: #0de6c4;
    --beacon-body-right-mid: #0297ad;
    --beacon-body-right-dark: #00557f;
    --beacon-disc-fill: #0264d2;
    --beacon-disc-highlight-fill: #0de6c4;
    --beacon-cross-fill: #fff;
}

.beacon-logo--color {
    --beacon-wing-fill: #083faf;
    --beacon-body-left-light: #0390df;
    --beacon-body-left-mid: #0264d2;
    --beacon-body-left-dark: #083faf;
    --beacon-body-right-light: #0de6c4;
    --beacon-body-right-mid: #0297ad;
    --beacon-body-right-dark: #00557f;
    --beacon-disc-fill: #0264d2;
    --beacon-disc-highlight-fill: #0de6c4;
    --beacon-cross-fill: #0de6c4;
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo,
.beacon-logo:is(:hover, :active) {
    opacity: 1;
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo__wing--left-top,
.beacon-logo:is(:hover, :active) .beacon-logo__wing--left-top,
.beacon-logo-trigger:is(:hover, :active) .beacon-logo__wing--left-bottom,
.beacon-logo:is(:hover, :active) .beacon-logo__wing--left-bottom,
.beacon-logo-trigger:is(:hover, :active) .beacon-logo__wing--right-top,
.beacon-logo:is(:hover, :active) .beacon-logo__wing--right-top,
.beacon-logo-trigger:is(:hover, :active) .beacon-logo__wing--right-bottom,
.beacon-logo:is(:hover, :active) .beacon-logo__wing--right-bottom {
    transform: scale(1);
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo__orbit,
.beacon-logo:is(:hover, :active) .beacon-logo__orbit,
.beacon-logo-trigger:is(:hover, :active) .beacon-logo__cross-wrap,
.beacon-logo:is(:hover, :active) .beacon-logo__cross-wrap {
    transform: scale(1);
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo__body--left,
.beacon-logo:is(:hover, :active) .beacon-logo__body--left,
.beacon-logo-trigger:is(:hover, :active) .beacon-logo__body--right,
.beacon-logo:is(:hover, :active) .beacon-logo__body--right {
    transform: scale(1.04);
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo__disc,
.beacon-logo:is(:hover, :active) .beacon-logo__disc {
    fill: #0de6c4;
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo__disc-highlight,
.beacon-logo:is(:hover, :active) .beacon-logo__disc-highlight {
    fill: #0297ad;
}

.beacon-logo-trigger:is(:hover, :active) .beacon-logo--white .beacon-logo__cross,
.beacon-logo--white:is(:hover, :active) .beacon-logo__cross {
    fill: #0de6c4;
}

@media (prefers-reduced-motion: reduce) {
    .beacon-logo,
    .beacon-logo * {
        transition: none !important;
    }
}

.nav-search-compact span {
    color: var(--color-text-on-dark-muted);
    font-size: var(--fs-sm);
    font-family: var(--font-nav);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ----- View Container System ----- */
.view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    /* UI12: min-height:0 critical so this flex child can shrink below
       its content height and let descendant overflow-y:auto engage.
       Without it, content taller than the viewport just expands the
       flex item and the inner scroll container never overflows. */
    min-height: 0;
}

.view {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.view.view-active {
    display: flex;
}

/* ----- Main content area (inside view) ----- */
.main-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* UI12: min-height:0 lets this flex child shrink so its overflow-y
       can actually take effect when content is taller than available. */
    min-height: 0;
    /* UI13: align-items lets us center the width-capped children
       horizontally inside the (now wider) main-content. Each direct
       child gets max-width: var(--chat-column-max-width). */
    align-items: center;
}

/* UI13: cap the chat column at --chat-column-max-width (1400px) so
   prose stays readable on wide viewports. The main-content itself
   still fills its flex slot — only direct children are constrained.
   This pairs with the edge-to-edge .chat-container above. */
.main-content > .chat-hero,
.main-content > .chat-messages,
.main-content > .chat-input-container,
.main-content > .ai-disclaimer,
.main-content > .legal-footer,
.main-content > .context-chip-bar {
    width: 100%;
    max-width: var(--chat-column-max-width, 1400px);
    align-self: center;
}

/* UI13: tighter cap on the messages list specifically — prose bubbles
   read more comfortably at ~900px than at the wider 1400px the
   surrounding chat-column uses. Hero / input / disclaimer keep the
   wider cap so sample chips and the input bar still feel roomy. */
.main-content > .chat-messages {
    max-width: 900px;
}

/* UI13: when the unified sidebar is open, .main-content takes the
   viewport's left portion only — its center is to the LEFT of the
   actual viewport center, which reads as "left-aligned" to the eye.
   Balance the right-side sidebar with an equal left padding so the
   chat column's center lands at the true viewport center.

   Naive `padding-left: sidebar-width` double-discounts available chat
   space: as the sidebar grows, main-content shrinks by sidebar-width
   AND padding eats another sidebar-width, so the chatbox shrinks at
   ~2:1 with sidebar growth. Cap the padding so chat NEVER drops below
   `--chat-column-max-width` (the .chat-messages cap, 900px in UI13).

   Available chat space inside main-content = main_content_width − padding_left
                                            = (100vw − sidebar) − padding_left
   For chat to keep its max width:  (100vw − sidebar) − padding_left ≥ chat_max
   => padding_left ≤ 100vw − sidebar − chat_max

   So: padding_left = clamp(0, sidebar_width, 100vw − sidebar − chat_max).
   At small sidebars this gives perfect viewport centering; as the
   sidebar grows past the breakpoint, the balancing padding gracefully
   degrades to zero rather than crushing the chat column.

   `:has()` is widely supported in modern Chromium / Safari / Firefox. */
.content-with-sidebar:has(.unified-sidebar.unified-sidebar-open) .main-content {
    padding-left: max(
        0px,
        min(
            var(--user-sidebar-width, var(--sidebar-width)),
            calc(100vw - var(--user-sidebar-width, var(--sidebar-width)) - 900px)
        )
    );
    box-sizing: border-box;
    /* Smooth the shift as the user drags the sidebar wider/narrower so
       the chat column doesn't snap. Cheap because only padding animates. */
    transition: padding-left 180ms ease;
}
/* Cancel the balancing padding on mobile — the sidebar there is a
   fullscreen drawer that overlays everything, not an in-flow sibling,
   so no off-center adjustment is needed. */
@media (max-width: 768px) {
    .content-with-sidebar:has(.unified-sidebar.unified-sidebar-open) .main-content {
        padding-left: 0;
    }
}

/* Content + sidebar layout (for desktop tool sidebar) */
.content-with-sidebar {
    display: flex;
    flex: 1;
    /* UI12: was overflow:hidden — that was clipping the reopen-tab
       tooltip ("Reopen sid...") and making the tab look like it was
       eating chat width. The sidebar slide animation works fine
       without this (sidebar uses its own overflow + width:0 baseline)
       and main-content has its own overflow-y. */
    position: relative;
    overflow: visible;
    min-height: 0;
}

.content-with-sidebar .main-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* ----- Legacy header (Phase 1 compat, hidden when top-nav is active) ----- */
.chat-header {
    background: var(--color-bg-elevated);
    border-bottom: 2px solid var(--color-accent);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.header-title {
    font-family: var(--font-title);
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-title .logo-mark {
    color: var(--color-accent);
    font-weight: var(--fw-black);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.session-info {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
}

.session-info code {
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-family: 'Courier New', monospace;
}

/* DEV / User view: hide dev-only elements in user view */
.user-view .dev-only {
    display: none !important;
}

/* Dev info overlay - fixed bottom-left */
.dev-info-overlay {
    position: fixed;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    pointer-events: auto;
}

.dev-info-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    height: 20px;
}

.dev-info-toggle:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.7);
}

.dev-info-toggle.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-on-dark);
}

.dev-info-detail {
    font-family: monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

[data-theme="light"] .dev-info-toggle {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .dev-info-toggle:hover {
    border-color: rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .dev-info-detail {
    color: rgba(0, 0, 0, 0.15);
}

/* ----- Page title utility - match AI chat response h2 style ----- */
.page-title {
    font-family: var(--font-title);
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-bubble-h2);
    margin: 0;
}