/* =============================================================================
   Chrome — shared app header styling across main chat page and all sub-pages.
   Mirrors the chat-page header from style.css so sub-pages feel cohesive with
   the main app. Loaded LAST in each sub-page so it overrides page-specific
   .header rules that predate the unification.
   ============================================================================= */

/* Header bar */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background: var(--bg-secondary, var(--bg-card, #12121a));
    border-bottom: 1px solid var(--bg-tertiary, var(--bg-elevated, #1a1a24));
    position: relative;
    z-index: 100;
    flex-wrap: nowrap;
}

/* Logo cluster */
.header .logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
}

.header .logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    text-decoration: none;
    color: inherit;
}

.header .logo-symbol {
    font-size: 1.5rem;
    color: var(--accent, #C4A77D);
    line-height: 1;
}

.header .logo-text {
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--text-primary, #E8E6E3);
}

/* Right cluster */
.header .header-right {
    display: flex;
    align-items: center;
    gap: var(--space-md, 1rem);
    position: relative;
}

.header .user-section {
    display: flex;
    align-items: center;
    position: relative;
}

/* Connection status (chat page only, harmless elsewhere) */
.header .connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    font-size: 0.85rem;
    color: var(--text-secondary, #A09A92);
}
.header .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted, #6B665E);
    transition: background 0.2s;
}
.header .connection-status.connected .status-dot {
    background: #4CAF50;
    box-shadow: 0 0 8px #4CAF50;
}
.header .connection-status.error .status-dot { background: #F44336; }

/* User profile row (appears on chat page once logged in) */
.header .user-profile {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
}
.header .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--accent, #C4A77D);
}
.header .user-name {
    font-size: 0.85rem;
    color: var(--text-primary, #E8E6E3);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nav buttons: unified look across main + sub-pages */
.header .nav-btn {
    background: transparent;
    border: none;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-secondary, #A09A92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    border-radius: 10px;
}
.header .nav-btn:hover,
.header .nav-btn:focus-visible {
    background: var(--bg-elevated, rgba(255,255,255,0.06));
    color: var(--accent, #C4A77D);
    outline: none;
}
.header .nav-btn.active {
    background: rgba(196, 167, 125, 0.15);
    color: var(--accent, #C4A77D);
}

/* Nav-btn SVG sizing */
.header .nav-btn > svg,
.header .logout-btn > svg,
.header .admin-btn > svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* Logout */
.header .logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-muted, #6B665E);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.header .logout-btn:hover {
    background: var(--bg-secondary, var(--bg-card, #12121a));
    color: var(--accent, #C4A77D);
}
.header .logout-btn > svg { width: 16px; height: 16px; }

/* Admin */
.header .admin-btn {
    background: none;
    border: none;
    text-decoration: none;
    padding: var(--space-xs, 0.25rem);
    opacity: 0.7;
    color: var(--text-secondary, #A09A92);
    cursor: pointer;
    transition: opacity 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header .admin-btn:hover { opacity: 1; color: var(--accent, #C4A77D); }
.header .admin-btn.hidden { display: none; }

/* Older sub-page nav clusters used <nav class="header-nav">. Give that
   the same visual treatment as .user-profile nav-btn row. */
.header .header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
}

/* Page title section (sits below the header on some sub-pages) */
.page-title-section {
    padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem) var(--space-md, 1rem);
    text-align: center;
}
.page-title {
    font-family: var(--font-display, 'Crimson Pro', serif);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--text-primary, #E8E6E3);
    margin: 0 0 0.5rem;
}
.page-subtitle {
    color: var(--text-secondary, #A09A92);
    font-size: 0.95rem;
    margin: 0;
}

/* Safety indicator (sanctum only — preserved, just aligned) */
.header .safety-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #A09A92);
}
.header .safety-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CAF50;
}