/*
 * Life Simulator reference chrome.
 * Scope: only the shared avatar/logo strip and the main top header on
 * non-Life-Simulator views. Sidebar menu items and page content stay intact.
 */

:root {
    --life-reference-top-bg: #050816;
    --life-reference-top-panel: #071426;
    --life-reference-top-panel-strong: #0a1c31;
    --life-reference-top-cyan: #00e5ff;
    --life-reference-top-cyan-soft: #a9f5ff;
    --life-reference-top-text: #e7fbff;
    --life-reference-top-muted: #7fa9ba;
    --life-reference-top-line: rgba(0, 229, 255, 0.42);
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #sidebar
    > div:first-child {
    border-bottom-color: var(--life-reference-top-line) !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 34, 0.99),
            rgba(5, 10, 24, 0.98) 72%,
            rgba(8, 13, 31, 0.98)
        ) !important;
    box-shadow:
        inset 0 -1px rgba(0, 229, 255, 0.16),
        inset 0 0 18px rgba(0, 229, 255, 0.045) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #sidebar
    > div:first-child
    img {
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.72),
        0 0 8px rgba(0, 229, 255, 0.36),
        0 0 14px rgba(0, 151, 190, 0.18) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #sidebar
    > div:first-child
    .text-white {
    color: var(--life-reference-top-text) !important;
    text-shadow: 0 0 7px rgba(0, 229, 255, 0.14) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #sidebar
    > div:first-child
    .text-neutral-500 {
    color: var(--life-reference-top-muted) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header {
    position: relative;
    border-bottom-color: var(--life-reference-top-line) !important;
    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 34, 0.99),
            rgba(5, 11, 26, 0.98) 61%,
            rgba(10, 10, 28, 0.96)
        ) !important;
    box-shadow:
        inset 0 -1px rgba(0, 229, 255, 0.18),
        0 5px 22px rgba(0, 0, 0, 0.24) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    > :is(#session-toggle-btn, .hidden.lg\:flex) {
    position: relative;
    z-index: 2;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    :is(#breadcrumb-group, .active-life-summary-label) {
    color: rgba(127, 169, 186, 0.86) !important;
    text-shadow: 0 0 7px rgba(0, 229, 255, 0.12) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    #breadcrumb-separator {
    color: rgba(0, 229, 255, 0.82) !important;
    text-shadow: 0 0 7px rgba(0, 229, 255, 0.28) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    :is(#breadcrumb-page, #account-username) {
    color: var(--life-reference-top-text) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.16) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    #account-role {
    color: var(--life-reference-top-muted) !important;
    text-shadow: none !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    :is(#session-toggle-btn, #account-summary button, #lang-toggle) {
    color: rgba(129, 205, 218, 0.84) !important;
    border-color: rgba(0, 229, 255, 0.16) !important;
    background: transparent !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    :is(#session-toggle-btn, #account-summary button, #lang-toggle):hover {
    color: #dffcff !important;
    border-color: rgba(0, 229, 255, 0.48) !important;
    background: rgba(0, 229, 255, 0.08) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.12) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    .active-life-summary {
    border-color: rgba(0, 229, 255, 0.62) !important;
    background:
        linear-gradient(
            135deg,
            rgba(5, 24, 42, 0.98),
            rgba(4, 12, 26, 0.98)
        ) padding-box,
        linear-gradient(
            105deg,
            rgba(0, 229, 255, 0.88),
            rgba(0, 229, 255, 0.46) 76%,
            rgba(82, 136, 178, 0.34)
        ) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(0, 229, 255, 0.07),
        0 0 14px rgba(0, 229, 255, 0.13) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    .active-life-summary::before {
    border-top-color: rgba(0, 229, 255, 0.92) !important;
    background: none !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.62) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    .active-life-summary::after {
    border-bottom-color: rgba(0, 229, 255, 0.72) !important;
    background: none !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.42) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    .active-life-summary-signal {
    background: var(--life-reference-top-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.88) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header
    #active-life-name {
    color: var(--life-reference-top-text) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.16) !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header::before,
body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    clip-path: none !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header::before {
    bottom: -3px !important;
    height: 5px !important;
    background:
        linear-gradient(
            90deg,
            transparent 0 7%,
            rgba(0, 229, 255, 0.12) 16%,
            rgba(0, 229, 255, 0.66) 39%,
            rgba(112, 237, 255, 0.4) 60%,
            rgba(82, 136, 178, 0.18) 82%,
            transparent 96%
        ) !important;
    filter: blur(4px) !important;
    opacity: 0.44 !important;
}

body:not(:has(#view-memory.fantasy-memory-view.active))
    #main-content
    > header::after {
    bottom: -2px !important;
    height: 1px !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 229, 255, 0.72),
            rgba(0, 229, 255, 0.48) 38%,
            rgba(88, 157, 190, 0.34) 66%,
            rgba(0, 229, 255, 0.52) 100%
        ) !important;
    box-shadow: 0 0 7px rgba(0, 229, 255, 0.34) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:not(:has(#view-memory.fantasy-memory-view.active))
        #main-content
        > header
        .active-life-summary {
        width: min(360px, calc(100vw - 132px)) !important;
        height: 32px !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body:not(:has(#view-memory.fantasy-memory-view.active))
        #main-content
        > header::before {
        height: 3px !important;
        filter: blur(3px) !important;
        opacity: 0.36 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(:has(#view-memory.fantasy-memory-view.active))
        #main-content
        > header::before,
    body:not(:has(#view-memory.fantasy-memory-view.active))
        #main-content
        > header::after {
        animation: none !important;
    }
}