/* ==========================================================================
   MASTER CSS - Variables, Layout, Nav & Loaders
   ========================================================================== */

/* 1. SAFE-AREA INSETS — Honour every device’s living edges (notch, dynamic island, gesture bars) */
:root {
    /* Device-safe padding variables */
    --safe-top:    env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left:   env(safe-area-inset-left);
    --safe-right:  env(safe-area-inset-right);
    
    /* Graceful fallbacks for very old browsers */
    --safe-top-fb:    0px;
    --safe-bottom-fb: 0px;

    /* 2. Default Dark Mode (Solaris Zenith Standard) */
    --bg-main: radial-gradient(circle at center, #1a2a44 0%, #0d1117 100%);
    --panel-bg: rgba(241, 240, 236, 0.1);
    --card-bg: #fdfbf7;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --accent: #B8860B;
    --border: rgba(184, 134, 11, 0.3);
}

/* Automatic fallback when env() is not supported */
@supports not (env(safe-area-inset-top)) {
    :root {
        --safe-top:    var(--safe-top-fb);
        --safe-bottom: var(--safe-bottom-fb);
    }
}

/* 3. Automatic Light Mode (Checks Device Settings) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-main: #f8fafc;
        --panel-bg: rgba(255, 255, 255, 0.9);
        --card-bg: #ffffff;
        --text-main: #1e293b;
        --text-muted: #475569;
        --accent: #B8860B;
        --border: #e2e8f0;
    }
}

/* 4. Apply variables to the body */
body {
    margin: 0;
    padding: 0;
    background: var(--bg-main) !important;
    color: var(--text-main);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

#main-content { margin-left: 80px; height: 100vh; position: relative; }
.page { height: 100%; width: 100%; display: none; }
.page.active { display: block; } /* Controlled by JS showPage() */

/* Sidebar Navigation */
#side-nav {
    position: fixed; left: 0; top: 0; bottom: 0; width: 80px;
    background: var(--bg-main); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    padding-top: 25px; z-index: 2000;
}

.nav-logo { 
    margin-bottom: 35px; width: 100%; display: flex; justify-content: center;
}
.sidebar-logo {
    width: 45px; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.nav-item { 
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; margin-bottom: 40px; opacity: 0.4; transition: 0.2s; width: 100%;
}
.nav-item.active,
body.page-drill #nav-drill,
body.page-horizon #nav-horizon,
body.page-map #nav-map { opacity: 1; color: var(--accent); }

.nav-icon { 
    height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;
}
.nav-icon svg { max-width: 100%; height: auto; display: block; transition: transform 0.2s ease; }
.nav-item:hover .nav-icon svg { transform: scale(1.1); }

#search-trigger-btn { transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Loading Screen */
#initial-loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #fdfbf7; display: flex; justify-content: center; align-items: center; z-index: 20000; transition: opacity 0.8s ease-out;
}
.loader-content { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 0 30px; }
.loader-text { color: #64748b; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 600; margin-top: 25px; margin-bottom: 5px; opacity: 0.7; }
.loader-subtext { color: var(--accent) !important; font-size: 16px !important; font-weight: 500 !important; font-style: italic !important; margin-top: 10px !important; line-height: 1.5; max-width: 400px; text-shadow: 0 0 15px rgba(184, 134, 11, 0.2); animation: quoteFade 3s infinite ease-in-out; }
@keyframes quoteFade { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.02); } }
.spinner { display: flex; justify-content: center; align-items: center; gap: 20px; border: none; animation: none; height: 40px; }
.spinner::before, .spinner::after, .spinner-inner { content: ''; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; filter: blur(0.5px); animation: pulse-star 2s infinite ease-in-out; }
.spinner::before { animation-delay: 0s; } .spinner-inner { animation-delay: 0.4s; } .spinner::after { animation-delay: 0.8s; }
@keyframes pulse-star { 0%, 100% { opacity: 0.2; transform: scale(0.8); box-shadow: 0 0 0px var(--accent); } 50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 25px 5px rgba(184, 134, 11, 0.6); } }
.loader-hidden { opacity: 0; visibility: hidden; }

/* Mobile Overrides */
@media (max-width: 768px) {
    body { overflow-x: hidden; width: 100%; position: relative; }
    #main-content { margin-left: 0 !important; width: 100%; }
    
    #side-nav {
        top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; height: 50px !important; display: flex !important; flex-direction: row !important;
        justify-content: space-around !important; align-items: center !important; padding: 0 !important; margin: 0 !important;
        background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%);
        border-top: 1px solid rgba(184, 134, 11, 0.3); position: fixed !important; transform: translateY(0); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform; z-index: 1000;
    }
    .nav-item { flex: 1 !important; height: 100% !important; margin: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; opacity: 1 !important; }
    .nav-icon { margin: 0 !important; width: 24px !important; height: 24px !important; }
    .nav-label, .nav-logo { display: none !important; }
    #nav-search-toggle .nav-icon svg { color: var(--text-main); width: 24px; height: 24px; }
    #nav-search-toggle { pointer-events: auto !important; cursor: pointer; }

    /* 1. Hide the MAIN top logo only, not the theme icon */
    #side-nav > .nav-logo { display: none !important; }

    /* 2. Ensure the Golden Theme nav-item remains visible at the end */
    #golden-trigger.nav-item,
    .nav-item:last-child {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 3. Ensure the icon inside it doesn't vanish */
    #golden-trigger .nav-icon svg {
        width: 24px !important;
        height: 24px !important;
        color: var(--accent) !important;
    }

    /* FIX: Force dark text for descriptions on all mobile cards when NOT in Golden Mode */
    .timeline-card .prediction-text,
    .drill-card .description, 
    #page-drill .prediction-text {
        color: #1e293b !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure Golden Mode can still override this when active */
    [data-theme="golden"] .prediction-text,
    [data-theme="golden"] .description {
        color: var(--text-main) !important;
    }

    #page-map, #page-drill { left: 80px; bottom: 0; }

    /* MOBILE WISDOM — Gentle awakening of cards only when needed */
    .timeline-card,
    .timeline-row {
        content-visibility: auto;
        contain: layout style paint;
        will-change: scroll-position;
    }

    /* Extra breathing room so first cards feel light */
    #horizon-grid,
    #drill-grid {
        padding-bottom: 120px;
    }
}

/* ==========================================================================
   GOLDEN HOUR THEME — The Veil Thins at Dawn
   ========================================================================== */
[data-theme="golden"] {
    --bg-main: linear-gradient(180deg, #f8f1d9 0%, #e8d9b8 100%);
    --panel-bg: rgba(255, 253, 240, 0.95);
    --card-bg: #fffdf0;
    --text-main: #3f2a1e;
    --text-muted: #6b5c47;
    --accent: #d97706;
    --border: rgba(217, 119, 6, 0.35);
}

[data-theme="golden"] #side-nav,
[data-theme="golden"] .temporal-bar {
    background: linear-gradient(180deg, #f8f1d9 0%, #e8d9b8 100%) !important;
    border-right: 1px solid rgba(217, 119, 6, 0.3);
}

[data-theme="golden"] .timeline-card,
[data-theme="golden"] #left-hand-panel,
[data-theme="golden"] #system-status-box {
    box-shadow: 0 10px 30px -10px rgba(217, 119, 6, 0.3) !important;
}

/* Gentle golden particle container */
#golden-particles {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1; overflow: hidden;
    opacity: 0; transition: opacity 1.2s ease;
}
#golden-particles.active { opacity: 0.65; }

.golden-spark {
    position: absolute;
    background: radial-gradient(circle, #fcd34d 30%, transparent 70%);
    border-radius: 50%;
    animation: goldenDrift linear infinite;
    box-shadow: 0 0 12px 3px #fcd34d;
    filter: blur(0.5px);
}

@keyframes goldenDrift {
    0%   { transform: translateY(100vh) rotate(0deg); }
    100% { transform: translateY(-100vh) rotate(720deg); }
}

.notification-badge { display: none; }
.pulse-active { display: block !important; }

@media (prefers-color-scheme: dark) and (min-width: 769px) and (max-width: 1400px) { #page-drill .prediction-text { color: #1e293b !important; } }