/* ============================================================================
   header-cluster.css — Instrument Cluster
   ============================================================================
   Replaces the scatter of pills/buttons in the right side of the Habitat and
   Atlas headers with a deliberate, segmented control deck. Three rules:

     1. Every interactive element is exactly 36px tall.
     2. Related actions live inside a `.header-tray` — a single bordered shell
        with hairline 1px vertical dividers between cells (no per-cell borders).
     3. Active state is the only fill in any segment; everything else is glass
        with a hairline outline.

   This file is the dark-mode default. Light-mode overrides live in
   `themes/light.css` under the matching selectors.

   Loaded by:
     - ui/index.html        (Habitat shell)
     - ui/atlas-shell.html  (Atlas shell)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Cluster gap — modules sit 12px apart, tight inside.
   ---------------------------------------------------------------------------- */

.habitat-header__actions,
.atlas-header__actions {
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------------------
   .header-tray — segmented shell with internal hairline dividers
   ---------------------------------------------------------------------------- */

.header-tray {
    --tray-h: 36px;
    --tray-radius: 999px;
    --tray-divider: rgba(255, 255, 255, 0.08);
    --tray-fill: rgba(255, 255, 255, 0.04);
    --tray-border: rgba(255, 255, 255, 0.12);

    display: inline-flex;
    align-items: stretch;
    height: var(--tray-h);
    padding: 0;
    border: 1px solid var(--tray-border);
    border-radius: var(--tray-radius);
    background: var(--tray-fill);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

/* Hairline divider between every adjacent cell */
.header-tray > * + * {
    border-left: 1px solid var(--tray-divider);
}

/* Common cell sizing */
.header-tray > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border-radius: 0;
    transition: background 200ms ease, color 200ms ease;
}

.header-tray > *:hover {
    background: rgba(255, 255, 255, 0.06);
}

.header-tray > *:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: -3px;
    border-radius: calc(var(--tray-radius) - 4px);
}

/* ----------------------------------------------------------------------------
   .header-tray--icons — square 36×36 cells (theme + 💬 + 📬)
   ---------------------------------------------------------------------------- */

.header-tray--icons > * {
    width: 40px;
    padding: 0;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    font-size: 16px;
    line-height: 1;
}

/* Override the standalone .theme-toggle pill so it sits flush in the tray */
.header-tray--icons .theme-toggle {
    width: 40px;
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-tray--icons .theme-toggle:hover {
    background: rgba(88, 215, 196, 0.12);
    transform: none;
    border-color: transparent;
}

.header-tray--icons .theme-toggle__icon {
    width: 17px;
    height: 17px;
    transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 200ms ease;
}

.header-tray--icons .theme-toggle:active .theme-toggle__icon {
    transform: rotate(-25deg) scale(0.92);
}

/* Message + invitation buttons re-skinned as tray cells */
.header-tray--icons .message-badge-container {
    position: relative;
    width: 40px;
    padding: 0;
    background: transparent;
}

.header-tray--icons .message-badge-container > .btn {
    width: 40px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-tray--icons .message-badge-container > .btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    transform: none;
}

.header-tray--icons .message-badge {
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    box-shadow: 0 0 0 2px var(--bg-deep, #0b0f1c);
}

/* ----------------------------------------------------------------------------
   .header-tray--mode — Habitat ↔ Atlas segmented switch
   Joined as a single tray; current page is the only fill.
   ---------------------------------------------------------------------------- */

.habitat-header__mode,
.atlas-header__mode {
    /* Inherit tray base */
    --tray-h: 36px;
    --tray-radius: 999px;
    --tray-divider: rgba(255, 255, 255, 0.1);
    --tray-fill: rgba(255, 255, 255, 0.03);
    --tray-border: rgba(255, 255, 255, 0.14);

    display: inline-flex;
    align-items: stretch;
    height: var(--tray-h);
    gap: 0;
    padding: 0;
    border: 1px solid var(--tray-border);
    border-radius: var(--tray-radius);
    background: var(--tray-fill);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.habitat-header__mode > .btn,
.atlas-header__mode > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 76px;
    padding: 0 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 200ms ease, color 200ms ease;
}

.habitat-header__mode > .btn + .btn,
.atlas-header__mode > .btn + .btn {
    border-left: 1px solid var(--tray-divider);
}

.habitat-header__mode > .btn:hover,
.atlas-header__mode > .btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    transform: none;
}

/* Active page: solid fill drawn from the brand teal (dark) — light.css
   re-tints to warm rose. Defeats the global .btn--primary gradient inside
   the segment so the segmented control reads as a single switch. */
.habitat-header__mode > .btn--primary[aria-current="page"],
.habitat-header__mode > .habitat-header__mode-current,
.atlas-header__mode > .btn--primary[aria-current="page"],
.atlas-header__mode > .atlas-header__mode-current {
    background: linear-gradient(180deg, rgba(88, 215, 196, 0.22), rgba(88, 215, 196, 0.12));
    color: var(--accent-2);
    box-shadow: inset 0 0 0 1px rgba(88, 215, 196, 0.32);
    text-shadow: 0 0 12px rgba(88, 215, 196, 0.35);
}

.habitat-header__mode > .btn--primary,
.atlas-header__mode > .btn--primary {
    /* Strip the global gradient when it lives inside the segment */
    background-image: none;
}

/* ----------------------------------------------------------------------------
   .ws-status — compact status chip with visible label + ambient dot
   ---------------------------------------------------------------------------- */

.ws-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: 98px;
    height: 36px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--tray-border, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--text-secondary, #c8d5ef);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
}

.ws-status::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transition: background 240ms ease, box-shadow 320ms ease;
}

.ws-status[data-state="connected"]::before {
    background: var(--success, #6ef0a8);
    box-shadow: 0 0 0 4px rgba(110, 240, 168, 0.18), 0 0 12px rgba(110, 240, 168, 0.55);
}

.ws-status[data-state="connecting"]::before {
    background: var(--accent-3);
    box-shadow: 0 0 0 4px rgba(245, 184, 122, 0.16), 0 0 10px rgba(245, 184, 122, 0.5);
    animation: ws-pulse 1.6s ease-in-out infinite;
}

.ws-status[data-state="disconnected"]::before,
.ws-status[data-state="error"]::before {
    background: var(--danger, #ff7a7a);
    box-shadow: 0 0 0 4px rgba(255, 122, 122, 0.18), 0 0 10px rgba(255, 122, 122, 0.55);
}

.ws-status[data-state="disconnected"],
.ws-status[data-state="error"] {
    color: var(--danger, #ff7a7a);
}

.ws-status[data-state="ws-unavailable"]::before {
    background: var(--muted, #a7b3d0);
    box-shadow: 0 0 0 4px rgba(167, 179, 208, 0.18), 0 0 10px rgba(167, 179, 208, 0.45);
}

@keyframes ws-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.78); opacity: 0.7; }
}

/* ----------------------------------------------------------------------------
   .world-context-switcher — fuse badge + switch button into ONE segmented chip
   ---------------------------------------------------------------------------- */

.world-context-switcher {
    --tray-h: 36px;
    --tray-radius: 999px;
    --tray-divider: rgba(255, 255, 255, 0.1);
    --tray-border: rgba(255, 255, 255, 0.14);

    display: inline-flex;
    align-items: stretch;
    height: var(--tray-h);
    gap: 0;
    border: 1px solid var(--tray-border);
    border-radius: var(--tray-radius);
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.world-context-switcher__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 14px 0 12px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Color-coded ambient dot before the label */
.world-context-switcher__badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-3);
    box-shadow: 0 0 0 3px rgba(245, 184, 122, 0.18), 0 0 8px rgba(245, 184, 122, 0.55);
    transition: background 240ms ease, box-shadow 320ms ease;
    flex-shrink: 0;
}

.world-context-switcher__badge--shared {
    color: var(--accent-2);
}

.world-context-switcher__badge--shared::before {
    background: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(88, 215, 196, 0.18), 0 0 8px rgba(88, 215, 196, 0.55);
}

.world-context-switcher__badge--private {
    color: var(--accent-3);
}

.world-context-switcher__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 14px;
    border: none;
    border-left: 1px solid var(--tray-divider);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: background 200ms ease, color 200ms ease;
    cursor: pointer;
    white-space: nowrap;
}

.world-context-switcher__button::after {
    content: ' ⇄';
    margin-left: 6px;
    opacity: 0.6;
    font-size: 13px;
    transition: transform 280ms ease, opacity 200ms ease;
    display: inline-block;
}

.world-context-switcher__button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    transform: none;
}

.world-context-switcher__button:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

/* When inserted next to ws-status, tighten the rhythm to feel like one cluster */
.ws-status + .world-context-switcher,
.world-context-switcher + .ws-status {
    margin-left: -4px;
}

/* ----------------------------------------------------------------------------
   Standalone primary CTAs in cluster (Atlas: "+ New City", "Start World")
   Keep their primary-pill identity but unify height to 36px so they align
   with the trays.
   ---------------------------------------------------------------------------- */

.habitat-header__actions > .btn,
.atlas-header__actions > .btn,
.atlas-header__actions > select {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 36px;
}

/* ----------------------------------------------------------------------------
   Theme-flip flourish — a brief atmospheric breath on the header during change
   ---------------------------------------------------------------------------- */

.habitat-header,
.atlas-header {
    transition:
        background 320ms ease,
        backdrop-filter 320ms ease,
        -webkit-backdrop-filter 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .ws-status[data-state="connecting"]::before { animation: none; }
    .header-tray--icons .theme-toggle__icon { transition: none; }
    .world-context-switcher__button::after { transition: none; }
}