/* ===================================================================
    LV8 MYSTICAL TERMINAL DASHBOARD - STYLESHEET (dashboard.css)
    
    TABLE OF CONTENTS
    -----------------
    1. ROOT VARIABLES & BASE STYLES <-- ADDED COL 2 WIDTH
    2. OPENING SEQUENCE (Loader)
    3. DASHBOARD GRID & MODULE LAYOUT <-- COLUMN 2 WIDTH UPDATE
    4. MODULE-SPECIFIC STYLES
        4.1. System Kernel Info
        4.2. Guna Stream Monitor <-- UPDATED (Secondary Desc Style)
        4.3. Mantra Stream Active 
        4.4. Navigation Directory <-- WIDTH UPDATE
        4.5. Status & Logo Modules
        4.6. Command Interface 
    5. KEYFRAME ANIMATIONS <-- UPDATED (Guna Hover Animations)
    6. RESPONSIVENESS (Mobile)
    =================================================================== */

    /* ======== 1. ROOT VARIABLES & BASE STYLES --- ADDED COL 2 WIDTH --- ======== */
    :root {
        --background: #0D0D0D;
        --primary: #A67B5B;    
        --highlight: #C89F7B;  
        --secondary: #555555;  
        --mystic2: #00FF7F;    
        --status-run: #00FF7F;
        --status-await: #FFD700;
        --status-idle: #555555;
        --online: #39FF14;
        --sattva-glow: #ffffff; 
        --rajas-glow: #ff4444; 
        --tamas-color: #1A1A1A; 
        /* Column Width Variables */
        --col2-width: 40ch; /* <- YOUR NEW COLUMN 2 */
        --col3-width: 50ch; /* <- Old Col 2 is now Col 3 */
        --col4-width: 26ch; /* <- Old Col 3 is now Col 4 */
    }

    body {
        background-color: var(--background); 
        color: var(--primary); 
        font-family: 'Source Code Pro', monospace;
        font-size: 14px; 
        line-height: 1.5; 
        margin: 0; 
        padding: 0.75rem; 
        box-sizing: border-box;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .hidden { display: none !important; }

    /* ======== 2. OPENING SEQUENCE (Loader & Curtain) ======== */

    /* The Curtain starts PITCH BLACK to match the homepage exit */
    #resurrection-curtain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--background);
        z-index: 99999; /* Highest priority */
        pointer-events: none;
        
        /* Default state: Hidden (for normal refreshes) */
        opacity: 0; 
        transition: opacity 1.5s ease-in-out;
    }

/* Hot Boot Class: When this is on body, curtain is visible */
body.hot-boot #resurrection-curtain {
    opacity: 1;
}

    /* ======== 2.1 OPENING SEQUENCE (Loader) ======== */
    #load-in-sequence { 
        /* 1. Match Dashboard Width */
    width: 100%;
    max-width: 1300px;
    
    /* 2. Horizontal Center, Top Align */
    margin: 0 auto; /* Top/Bottom 0, Left/Right Auto */
    
    padding: 1rem 0; /* Adjust padding to match grid gap preference */
    transition: opacity 0.5s ease-out;
     }
    #load-in-sequence .prompt-line { font-size: 0.9em; margin-bottom: 1.25rem; color: var(--highlight); } 
    .cursor { display: inline-block; width: 7px; height: 1.1em; background-color: var(--highlight); animation: blink 2s steps(2) infinite; vertical-align: middle; margin-left: 0.25rem; } 
    #pseudo-container, #mystical-command-container { margin: 0.8rem 0; }

/* 1. SHARED GEOMETRY */
.mystical-line,
.mystical-command {
    font-size: 0.9em !important;
    line-height: 1.2 !important;
    font-family: 'Source Code Pro', monospace;
    margin-bottom: 0;
}

/* 2. THE LOGS (Silver + Phosphor Bloom) */
.mystical-line {
    color: #999999 !important; 
    text-shadow: 0 0 4px rgba(153, 153, 153, 0.6);
    padding-bottom: 0.1rem;
    white-space: pre-wrap;
}

/* 3. THE TRIGGER (Green/Gold + Bloom) */
.mystical-command {
    color: var(--mystic2) !important; 
    margin-top: 0.5rem;
    text-shadow: 0 0 8px var(--mystic2); 
}
    .logo-container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 1rem 0; width: 100%; min-height: 350px; overflow: visible; background: transparent; position: relative; z-index: 2; opacity: 0; transition: opacity 1s ease; } 
    .logo-image { max-width: 250px; width: 100%; height: auto; background: transparent; opacity: 0; } 
    .image-flicker-in-glow { animation: image-flicker-in-glow 3s linear both; }
    .image-flicker-out-glow { animation: image-flicker-out-glow 3s linear both; }

    /* ======== 3. DASHBOARD GRID & MODULE LAYOUT --- COLUMN 2 WIDTH UPDATE --- ======== */
    /* NEW */
    #dashboard-grid {
        display: grid;
        /* UPDATED: Col 1 is flexible with a minimum, 2-4 are fixed */
        grid-template-columns: minmax(30ch, 1fr) var(--col2-width) var(--col3-width) var(--col4-width);
        /* This is now the HORIZONTAL gap between columns */
        column-gap: 0.75rem; 
        width: 100%;
        max-width: 1300px; 
        margin: auto;
        height: 100%;
        max-height: 803px; /* Prevents stretching on huge screens */
    }

    /* New Column Wrapper Style */
    .dashboard-column {
        display: flex;
        flex-direction: column;
        /* This is your new VERTICAL gap between modules */
        gap: 0.75rem; 
    }

    .module {
        border: 1px dashed var(--primary); padding: 0.6rem 0.8rem; 
        opacity: 0; transform: translateY(10px);

        /* --- THIS IS THE LOAD-IN TRANSITION --- */
        /* It only runs once when .visible is added */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;

        position: relative; background-color: var(--background);
    }
    .module.visible { 
        opacity: 1; 
        transform: translateY(0); 
        
        /*          * This is the master transition rule we had.
         * It will conflict, but we are accepting that for now
         * to get the animation back.
        */
        transition: 
            box-shadow 0.3s ease-in-out,
            transform 2s ease-out, 
            filter 3s ease-out,
            color 2s ease, 
            background-color 2s ease;
    }

    .module-title {
        font-size: 0.8em; font-weight: 500; color: var(--secondary);
        margin: 0 0 0.6rem 0; padding-bottom: 0.4rem; 
        border-bottom: 1px dashed var(--secondary);
        white-space: nowrap; text-transform: none;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out; 
        position: relative;
        z-index: 5; /* Puts it on top of the content */
    }
    .module-content { font-size: 0.9em; } 
    .module-content p { margin: 0.3rem 0; }
    .sub-text { color: var(--secondary); font-size: 0.9em; } 

    /* New wrapper to position the button */
.sutra-refresh-wrapper {
    text-align: left;
    margin-top: 0.5rem;
}

.module-refresh-btn {
    /* float: right; <-- REMOVED */
    color: var(--secondary);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.module-refresh-btn:hover {
    background-color: var(--mystic2); 
        color: #000000; 
        
        /* The Structure */
        border-radius: 2px;
        text-decoration: none;
        
        /* Optional: A subtle glow to make it feel like a light source */
        box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
        border-color: var(--mystic2);
}

.module-refresh-btn:active {
    /* Add a "click" effect */
    transform: rotate(90deg);
}


    /* ======== 4. MODULE-SPECIFIC STYLES ======== */

    /* --- 4.1. System Kernel Info --- */

/* This rule makes the text smaller, as you wanted */
#system-kernel-info .module-content {
    font-size: 0.85em; 
}

/* This targets the <p> tags you just added */
#system-kernel-info .module-content p {
    display: flex;
    align-items: baseline; /* Aligns text neatly */
    margin: 0.25rem 0; /* Tighter vertical spacing */
}

/* 1. The Left-side "Key" */
#system-kernel-info .key {
    color: var(--soft-white);
    font-weight: 500;
    flex-shrink: 0; /* Prevents it from shrinking */
}

/* The new Vedic sub-text */
#system-kernel-info .vedic {
    color: var(--secondary);
    font-size: 0.9em;
    margin-left: 0.35rem;
}

/* 2. The "Dot Leader" in the middle */
#system-kernel-info .dots {
    flex-grow: 1; /* Takes all available space */
    border-bottom: 1px dashed var(--secondary);
    margin: 0 0.5rem;
    position: relative;
    bottom: 4px; /* Adjust this to align perfectly */
}

/* 3. The Right-side "Value" */
#system-kernel-info .value {
    color: var(--highlight);
    flex-shrink: 0; /* Prevents it from shrinking */
}

/* Don't forget the online indicator */
#system-kernel-info .online-indicator { 
    color: var(--online); 
    text-shadow: 0 0 5px var(--online); 
}

    /* --- 4.2. Guna Stream Monitor --- UPDATED --- */
    .guna-line {
        font-weight: 500;
        color: var(--highlight);
        cursor: default; 
        margin: 0.5rem 0; 
        transition: transform 0.2s ease, color 0.2s ease, filter 0.2s ease, text-shadow 0.2s ease;
    }
    .guna-indicator {
        display: inline-block; width: 1.5ch; 
        text-align: center; color: var(--highlight);
        margin: 0 0.5ch 0 0.5ch;
    }
    .hover-instruction {
        margin-top: 0.8rem; font-size: 0.9em; color: var(--secondary); 
    }
    .tap-instruction {
        /* 1. Hide it by default (on desktop) */
        display: none;
        
        /* 2. Copy the same styles */
        margin-top: 0.8rem; 
        font-size: 0.85em; 
        color: var(--secondary);
    }
    .guna-divider {
        border: none; border-top: 1px dashed var(--secondary); margin: 0.8rem 0;
    }
    #gita-verse { 
        font-size: 0.85em; 
        min-height: 12.5em; /* Increased min-height */ 
        color: var(--soft-white); 
        white-space: pre-wrap; /* Allow wrapping */
        word-break: break-word; /* Break long words */
        transition: opacity 0.5s ease-in-out;
    }
    /* Style for cycling descriptor */
    .secondary-desc {
        color: var(--secondary); 
        font-size: 0.9em; 
        margin-left: 0.5ch;
        display: inline-block; 
        min-width: 10ch; 
        /* Add opacity transition for smoother text change */
        transition: opacity 0.3s ease-in-out; 
        opacity: 1; /* Start visible */
    }

    /* Hover Animation Triggers */
    #sattva-line:hover { animation: sattvaHoverGlow 1.5s ease-in-out infinite alternate; }
    #rajas-line:hover { 
        /* animation: rajasGlow 1.5s ease-in-out infinite; --replaced with rajas-jitter-- */
        color: var(--rajas-glow); 
        text-shadow: 0 0 10px var(--rajas-glow), 0 0 20px rgba(255, 102, 102, 0.6); 
        animation: rajas-jitter 0.15s infinite; 
    }
    #tamas-line:hover { animation: tamasVeil 2s ease-in-out infinite alternate; }

    /* --- 4.3. Mantra Stream Active --- */
    #mantra-stream-active {
        transition: transform 0.3s ease-in-out, z-index 0s linear 0s;
        transform-origin: top right; will-change: transform;
    }
    #mantra-stream-active:hover {
        transform: scale(1.03); z-index: 20; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        transition: transform 0.3s ease-in-out, z-index 0s linear 0s, box-shadow 0.3s ease-in-out;
    }
    #mantra-lines {
        /* Updated to match new line-height */
        min-height: calc((4 * 1.8em) + 2em); 
        max-height: calc((4 * 1.8em) + 2em); /* <-- ADD THIS */
        overflow-y: auto; /* <-- ADD THIS */
    }
    .mantra-line { 
        font-size: 1em; 
        color: var(--soft-white);
        margin: 0; /* <-- Remove margin */
        line-height: 1.8; /* <-- Increase line-height to compensate */
        transition: color 0.3s, text-shadow 0.3s; 
    }
    .typing-active { color: var(--highlight); text-shadow: 0 0 5px var(--highlight); }

    .mantra-controls {
        position: absolute; top: 100%; left: -1px; right: -1px;
        width: calc(var(--col4-width) + 2px); /* <-- UPDATED from --col3-width */
        box-sizing: border-box;
        background-color: var(--background);
        border-left: 1px dashed var(--primary); border-right: 1px dashed var(--primary); border-bottom: 1px dashed var(--primary);
        border-top: 1px dashed var(--secondary);
        padding: 0.6rem 0.8rem; margin-top: -1px; z-index: 10;
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s, transform 0.3s ease-in-out;
    }
    #mantra-stream-active:hover .mantra-controls {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.3s ease-in-out 0.1s, visibility 0s linear 0s, transform 0.3s ease-in-out 0.1s;
    }
    .mantra-control-btn { display: block; color: var(--highlight); cursor: pointer; margin: 0.4rem 0; font-size: 0.85em; text-decoration: none; }
    .mantra-control-btn:hover {
        background-color: var(--mystic2); 
        color: #000000; 
        
        /* The Structure */
        border-radius: 2px;
        text-decoration: none;
        
        /* Optional: A subtle glow to make it feel like a light source */
        box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
        border-color: var(--mystic2);
    }
    .mantra-control-btn.active { 
        color: var(--soft-white); 
        font-weight: bold;
    }

    

    /* --- 4.4. Navigation Directory --- WIDTH UPDATE --- */
    /* #navigation-directory {} -- removed */
        /* Width now controlled by grid column */

    .nav-header {
        display: flex; justify-content: space-between; font-size: 0.85em; color: var(--secondary);
        border-bottom: 1px dashed var(--secondary); padding-bottom: 0.4rem; margin-bottom: 0.4rem;
    }
    .nav-header span:first-child { flex-basis: 50%; }
    .nav-header span:last-child { flex-basis: 50%; }

    .nav-item {
        display: flex; justify-content: space-between; cursor: default; padding: 0.1rem 0;
        position: relative; transition: background-color 0.2s ease-out;
    }
    .nav-item:hover { background-color: rgba(166, 123, 91, 0.1); }
    .nav-command { flex-basis: 50%; color: var(--highlight); cursor: pointer; font-size: 0.95em; }
    .nav-desc { flex-basis: 50%; color: var(--soft-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95em; }
    .nav-item:hover .nav-command { text-decoration: underline; }

    .nav-preview-links {
        position: absolute; top: 100%; left: 0; right: 0;
        background-color: var(--background); border: 1px dashed var(--secondary);
        padding: 0.4rem 0.8rem; margin-top: -1px; z-index: 15;
        box-shadow: 0 3px 8px rgba(0,0,0,0.4);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-5px);
        transition: opacity 0.2s ease-out, visibility 0s linear 0.2s, transform 0.2s ease-out;
    }
    .nav-item:hover .nav-preview-links {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateY(0);
        transition: opacity 0.2s ease-out 0.1s, visibility 0s linear 0s, transform 0.2s ease-out 0.1s;
    }
    .nav-preview-links a { display: block; text-decoration: none; color: var(--primary); padding: 0.15rem 0.4rem; margin: 0.2rem 0; font-size: 0.85em; }
    .nav-preview-links a:hover { 
        background-color: var(--mystic2); 
        color: #000000; 
        
        /* The Structure */
        border-radius: 2px;
        text-decoration: none;
        
        /* Optional: A subtle glow to make it feel like a light source */
        box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
        border-color: var(--mystic2);
     }

    /* --- 4.5. Status & Logo Modules --- */
    #active-processes .status-run { color: var(--status-run); }
    #active-processes .status-await { color: var(--status-await); }
    #active-processes .status-idle { color: var(--status-idle); }
    #system-id-logo pre { font-family: 'Source Code Pro', monospace; color: var(--primary); font-size: 1em; line-height: 1.1; text-align: center; margin: 0; }
    
/* --- 4.12. MOBILE INSTRUCTION MODULE --- */

/* Hide it on desktop by default */
#mobile-instruction {
    display: none;
}

    /* ======== 4.7. COLUMN VERTICAL FLEX LAYOUT ======== */

/* --- Column 1: Single Flex-Grow Module (NEW) --- */

/* 1. Make the top module the *only* "grow" module */
#system-kernel-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; 
}

/* 2. Set fixed heights for the other three modules */

#command-interface {
    min-height: 12em; /* Your value */
    max-height: 12em;
    display: flex;
    flex-direction: column;
}

/* ======== 4.8. SYS ID LOGO POP-OUT ======== */

/* --- 1. The Image Logo Styles --- */
.logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    min-height: 10em; 
}

.sys-logo-img {
    max-width: 100%; 
    max-height: 100px; 
    height: auto; 
    animation: image-glow 8s ease-in-out infinite;
}

@keyframes image-glow {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 5px var(--highlight));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--highlight)) drop-shadow(0 0 20px var(--highlight));
  }
}

/* --- 2. Make the module "pop" --- */
#sys-id-logo {
    position: relative; 
    transition: transform 0.3s ease-in-out, z-index 0s linear 0s;
    transform-origin: top left; 
    will-change: transform;
    min-height: 12em; 
    max-height: 12em;
    display: flex;
    flex-direction: column;
}

#sys-id-logo:hover {
    z-index: 20; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: z-index 0s linear 0s, box-shadow 0.3s ease-in-out; 
}

#sys-id-logo .module-content {
    position: relative;
    min-height: 10em;
}

/* --- 3. The Content Swap Logic --- */
.pop-out-reveal {
    position: absolute;
    bottom: -1px;  
    left: -1px; 
    z-index: 10; 
    width: 130%; 
    min-height: 100%; 
    max-height: 25em; 
    overflow-x: auto; 
    overflow-y: auto; 
    padding: 0.6rem 0.8rem; 
    box-sizing: border-box; 
    background-color: var(--background);
    border: 1px dashed var(--highlight); 
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.pop-out-title {
    color: var(--highlight);
    font-size: 0.9em;
    border-bottom: 1px dashed var(--secondary);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
}

.pop-out-reveal p, .pop-out-reveal a {
    font-size: 0.9em;
    margin-bottom: 0.4rem;
    text-decoration: none;
    color: var(--soft-white);
}

.pop-out-reveal a:hover {
    color: var(--highlight);
    text-decoration: underline;
}

/* --- 4. The HOVER Triggers --- */
#sys-id-logo:hover .logo-wrapper {
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

#sys-id-logo:hover .pop-out-reveal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; 
    transition: opacity 0.3s ease-in-out 0.1s; 
}

/* 3. Make content scrollable for all modules in this column */
#system-kernel-info .module-content,
#command-interface .module-content {
    flex-grow: 1;
    overflow-y: auto; 
    min-height: 0; /* This is the key */
}

/* --- New logic for Command Interface --- */

/* 1. Make the .module-content a flex container */
#command-interface .module-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Flexbox fix */
}

/* 2. Make the #terminal-feedback div the scrollable area */
#terminal-feedback {
    flex-grow: 1;       /* <-- Tells it to fill all available space */
    overflow-y: auto;   /* <-- Tells it to scroll */
    min-height: 0;      /* <-- Flexbox fix */
}

/* --- Column 2: Flex-Last Module --- */
/* - moved active-processes to col2 - */
#active-processes {
    flex-grow: 1; /* <-- ADDED */
    display: flex;
    flex-direction: column;
    min-height: 15em;
    max-height: 15em;
}
/* --- Make content scrollable for active-processes --- */
#active-processes .module-content {
    flex-grow: 1;     /* <-- RESTORE */
    overflow-y: auto;  /* <-- RESTORE */
    min-height: 0;     /* <-- RESTORE */
    scroll-behavior: smooth;

}/* --- 4.11. SANKHYA FLOW --- */
#sankhya-flow-pre {
    font-family: 'Source Code Pro', monospace;
    /* Adjust font size to fit your module */
    font-size: 0.9em; 
    line-height: 1.3;
    margin: 0;
    color: var(--sattva-glow);
    /*      * This tells the <pre> tag to wrap lines 
     * if they are too long, instead of overflowing.
    */
    white-space: pre-wrap; 
    word-wrap: break-word;
}

/* This is the class our JS will add to each line */
#sankhya-flow-pre > span {
    /* Start hidden */
    opacity: 0;
    /* Make it fade in smoothly */
    transition: opacity 0.3s ease-in-out;
}

/* This is the "visible" state */
#sankhya-flow-pre > span.sankhya-visible {
    opacity: 1;
}

/* ======== 4.10. PORTAL MODULE (Simple Pop-In) ======== */

/* --- 1. The Module Frame --- */
#portal-module {
    display: flex;
    flex-direction: column;
    position: relative;
    
    /*      * This is the "at-rest" transition.
     * It will smoothly animate the "pop-in" (transform)
     * and the "depth" shadow (box-shadow).
    */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out, border-color 0.4s ease-out;
    flex-grow: 1;
    min-height: 0; /* The flex failsafe */
}

/* --- 2. The "Pop-In" Hover Effect --- */
#portal-module:hover {
    /* 1. Shrink the entire module */
    transform: scale(0.8);
    
    /* 2. Add a GLOWING inset shadow */
    box-shadow: 
        /* 1. A sharp, dark "edge" on top */
        /* inset 0 0 10px 4px rgba(0, 0, 0, 0.75), - testing without*/


        /* --- Shadow 1: The LEFT shadow --- */
        /* (Pushed Right and Up) */
        inset 15px -15px 40px -10px var(--background),
        
        /* --- Shadow 2: The RIGHT shadow --- */
        /* (Pushed Left and Up) */
        inset -15px -15px 40px -10px var(--background);

    
    /* 3. Bring to front */
    z-index: 20; 

    background-color: #081d58; /* <-- YOUR NEW BLUE VOID */
    border-color: var(--background);
    border-style: solid;
}

/* --- 3. The Content "Stage" --- */
#portal-module .module-content {
    /* Make it fill the *entire* module, ignoring the title */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This is to center the content layers */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* This fixes stacking bugs */
    transform-style: preserve-3d;
}

/* --- 4. The Content Layers --- */
/* Base styles for both content blocks */
.portal-default-content,
.portal-hidden-content {
    position: absolute;
    width: 90%;
    opacity: 1;
    
    /* Set the cross-fade animation */
    transition: opacity 0.4s ease-in-out;
    
    /* Prevents weird 3D flickering */
    backface-visibility: hidden;
}
.portal-default-content {
    color: var(--soft-white);
}

/* --- 5. The Content Swap (On Hover) --- */

/* 1. Fade out the title */
#portal-module:hover .module-title {
    opacity: 0;
    border-color: transparent;
    transition: opacity 0.3s ease-in, border-color 0.3s ease-in;
}

/* 2. Fade out the default content */
#portal-module:hover .portal-default-content {
    opacity: 0;
    pointer-events: none;
}

/* 3. Set up the hidden content */
.portal-hidden-content {
    opacity: 0;
    pointer-events: none;
    
    /*      * This is the CRITICAL fix.
     * Your base .module-title has z-index: 5.
     * This *must* be higher to appear on top.
     */
    z-index: 10;

    /* 1. This stacks the art and button */
    display: grid;

   /* 1. Stack and center them on each other again */
    place-items: center; 
    
    /* 2. Push the *entire centered group* up from the bottom */
    /* padding-top: 2rem; <-- REMOVED */
    padding-bottom: 0rem; /* <-- ADDED (adjust this value) */
    
    /* 2. This enables the 3D effect */
    transform-style: preserve-3d;
    
    /* 3. Add back the transition (it was on the hover rule) */
    transition: opacity 0.4s ease-in-out;
}

/* --- NEW styles for the stacked content --- */

/* This tells both children to stack in the same grid cell */

/* Style the ASCII art (Back Layer) */

/* Style the Text/Button (Front Layer) */

/* 4. Fade in the hidden content */
#portal-module:hover .portal-hidden-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.1s; /* Wait for module to shrink */
}

/* --- 6. Content-Specific Styles (The "Feel") --- */

/* Default Icon */
.portal-icon {
    color: var(--highlight);
    font-size: 1.5em;
    margin: 0.5rem 0;
}

/* --- NEW style for the ASCII art --- */
.portal-trapezoid {
    /* Use the correct font */
    font-family: 'Source Code Pro', monospace;
    
    /* Make it a bit faded and glowing */
    color: var(--highlight);
    opacity: 1;
    text-shadow: 0 0 5px var(--highlight), 0 0 15px var(--highlight);
    
    /* Adjust spacing */
    margin: 0;
    margin-top: 0.5rem; /* <-- ADDED (adjust as needed) */
    line-height: 1.2;
    font-size: 1.2em;
    text-align: center;
}

/* Hidden Content Button (with glow) */
.portal-enter-btn {
    display: inline-block;
    
    /* --- 1. The New Shape --- */
    /* width: 80%; <-- REMOVED */
    
    /*      * This controls the height and width:
     * 1.5em (top/bottom) is "twice as tall"
     * 1em (left/right) is "a little wider"
     */
    padding: 3em 0.5em; 
    
    /* border-radius: 20px 20px 0 0; <-- REMOVED */
      
    /* --- 3. Base Styles --- */
    background-color: var(--background);
    color: var(--highlight);
    /* --- 4. ADD THE GLOWING BORDER --- */
    border: 2px solid var(--highlight);
    text-decoration: none;
    font-weight: 500;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#portal-module:hover .portal-enter-btn {
    /* 1. The animation now controls the box-shadow */
    animation: portal-pulse 2s ease-in-out infinite alternate;
    
    /* 2. The text-shadow is separate and can stay */
    text-shadow: 0 0 5px var(--background);
}

/* ======== PORTAL OVERLAY CTA ======== */

.portal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--background);
    color: var(--soft-white);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    padding-top: 30vh;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.portal-overlay.hidden {
    display: none;
}

.portal-overlay-inner {
    width: min(640px, 100%);
    text-align: left;
}

/* Fixed-width text block so typewriter grows left → right, not center-out */
.portal-overlay-text {
    width: min(560px, 100%);
    margin: 0 auto;
    min-height: 2rem;
    white-space: pre-line;
    text-align: left;
    font-family: 'Source Code Pro', monospace;
    font-size: clamp(0.82rem, 1.35vw, 1rem);
    line-height: 1.75;
    color: var(--soft-white);
    text-shadow: 0 0 6px rgba(255,255,255,0.18);
}

.portal-overlay-actions {
    display: none;
    width: min(560px, 100%);
    margin: 1rem auto 0;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portal-overlay-actions.visible {
    display: flex;
}

/* Match dashboard link/button style */
.portal-overlay .cmd-btn {
    display: inline-block;
    text-decoration: none;
    color: var(--highlight);
    background: transparent;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8em;
    line-height: 1.4;
    padding: 0.15rem 0.25rem;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

.portal-overlay .cmd-btn:hover {
    background-color: var(--mystic2);
    color: #000000;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
}

.portal-overlay-close {
    appearance: none;
}

/* --- Set explicit height for Feedback Channel --- */
    #feedback-channel  {
        display: flex; /* Required for the content to fill */
        flex-direction: column;
        min-height: 11em;
        max-height: 11em;
}
    #feedback-channel  .module-content {
    flex-grow: 1; /* Makes content fill the module */
    overflow-y: auto; /* Makes the content scrollable */
    min-height: 0; /* Flexbox fix */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This does the magic */
}

/* --- 4.11. FEEDBACK CHANNEL --- */
/* --- Tweak feedback sub-text spacing --- */
#feedback-channel .sub-text {
    margin-top: 0;
    margin-bottom: 0.4rem; /* Reduced from 0.8rem (adjust as needed) */
}
.feedback-link {
    display: block;
    text-decoration: none;
    color: var(--highlight);
    font-size: 0.8em;
    margin-bottom: 0.2rem;
}
.feedback-link:hover {
    background-color: var(--mystic2); 
    color: #000000; 
    
    /* The Structure */
    border-radius: 2px;
    text-decoration: none;
    
    /* Optional: A subtle glow to make it feel like a light source */
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
    border-color: var(--mystic2);
}

/* This styles your new copyright line */
.copyright-line {
    font-size: 0.7em;
    color: var(--secondary);
    text-align: center;
    margin-top: 0.5rem; /* Space above it */
    padding-top: 0.5rem; /* Space below the border */
    border-top: 1px dashed var(--secondary); /* A clean divider */
    margin-bottom: 0; /* <-- ADD THIS LINE */
}

/* --- Column 3: Flex-Last Module (Navigation) --- */

/* 1. Make the navigation module "grow" */
#navigation-directory {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 2. Make the module's content area fill the new space */
#navigation-directory .module-content {
    flex-grow: 1;
    
    /* We turn this into a flex container too... */
    display: flex;
    flex-direction: column;
    
    /* A flex-fix to prevent overflow bugs */
    min-height: 0;
}

/* 3. Make the *list* (not the header) scrollable */
#nav-list-container {
    flex-grow: 1; /* This makes the list fill the space */
    overflow-y: auto; /* Adds a scrollbar if the list is too long */
}

/* --- Column 4: Flex-Middle Module (Sutra) --- */

/* 1. Make the sutra module "grow" */
#divya-sutra {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative; /* Allows z-index to work */
    /* This smoothly fades the shadow in/out */
    transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
}

/* 2. Make its content area fill the new space */
#divya-sutra .module-content {
    flex-grow: 1;
    overflow-y: auto; /* Adds a scrollbar if sutra text is long */
    
    /* A flex-fix to prevent overflow bugs */
    min-height: 0;
}

#sutra-text {
    color: var(--highlight);
}

#sutra-ref {
    color: var(--soft-white);
}
/* --- New "Levitation" Siddhi Effect --- */
#divya-sutra:hover {
    /* 1. Bring it to the front */
    z-index: 20; 

    /* 2. Apply the "bobbing" animation */
    animation: levitate-bob 3s ease-in-out infinite;

    /* 3. Apply the layered shadows */
    box-shadow: 
        /* The mystical glow (on the module itself) */
        0 0 20px -5px var(--highlight),
        
        /* The detached shadow (on the "ground" below) */
        0 40px 60px -20px var(--mystic2);
}
   

    /* --- 4.6. Command Interface (Now a module) --- */
    #command-interface {
        max-width: none; margin: 0; border-color: var(--primary); padding: 0.6rem 0.8rem;
    }
    #command-interface .module-content { font-size: 0.9em; } 
    #command-interface .prompt-line { display: flex; align-items: center; margin: 0; }
    #terminal-input { background: none; border: none; outline: none; font-family: inherit; font-size: 1em; color: var(--highlight); margin-left: 0.5rem; flex: 1; caret-color: var(--mystic2); }
    #terminal-input::placeholder { color: var(--secondary); }
    #terminal-input:focus + #fake-cursor { display: none; }
    #terminal-feedback { margin-top: 0.5rem; white-space: pre-wrap; font-size: 0.9em; }
    #command-interface .sub-text { font-size: 0.85em; }

    /* ======== 4.9. PRANAYAMA PACER MODULE ======== */

/* --- 1. Layout --- */
/* Make the new pacer module the flex-grow module */
#pranayama-pacer {
    display: flex;
    flex-direction: column;
    min-height: 15em; /* Give it a good minimum height */
    max-height: 15em; /* <-- ADDED (adjust as needed) */
}

/* Center the pacer stage */
#pranayama-pacer .module-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* For the controls */
    min-height: 0;
    padding-bottom: 1.5rem; /* Pushes the centered content up */
    box-sizing: border-box; /* Ensures padding is included in height */
}

/* --- 2. App Styling --- */

.pacer-container {
    /* New 3-column grid layout */
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Left, Center, Right */
    align-items: end; /* <-- UPDATED */
    justify-items: stretch; /* Horizontally center all items */
    width: 100%; /* Make it fill the module */
    column-gap: 1.6rem;
}

/* This new wrapper holds the center pacer */
.pacer-core {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* This styles your new Devanagari text */
.mantra-side-text {
    /* Use the Devanagari font you already imported */
    font-family: 'Noto Sans Devanagari', 'Source Code Pro', monospace;
    font-size: 1.2em;
    line-height: 1.5;
    color: var(--secondary); /* Start in the subtle color */
    margin: 0;
    padding: 0 0.25rem;
    position: relative; /* Allows us to nudge the element */
    bottom: 0.5em;      /* Nudges it UP by 1em (one line-height) */

    /* This will make it animate */
    animation-duration: 10s; /* Default, will be updated by JS */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#mantra-left {
    text-align: right; /* Aligns text towards the center */
    animation-name: highlight-mantra-sync-5-5; /* <-- UPDATED */
}

#mantra-right {
    text-align: left; /* Aligns text towards the center */
    animation-name: highlight-mantra-sync-5-5; /* <-- UPDATED */
}
.pacer-track {
    width: 2px;
    height: 100px; /* The track length */
    background-color: var(--secondary);
    position: relative;
}

.pacer-ball {
    width: 20px;
    height: 20px;
    background-color: var(--highlight);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -10px; /* Center the ball on the track */
    
    /* --- Apply default animations --- */
    /* 10s total: 5s up, 5s down */
    animation: 
        pacer-coherence-5-5 10s ease-in-out infinite;
}

.pacer-text {
    color: var(--highlight);
    font-size: 1.1em;
    margin-bottom: 3rem;
    position: relative;
}

/* --- 1. Inhale Text Logic --- */
.pacer-text::before {
    content: 'inhale...';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* Set animation based on parent class */
.pacer-text.timing-5-5::before { 
    animation: pacer-text-inhale-5-5 10s ease-in-out infinite; 
}
.pacer-text.timing-4-6::before { 
    animation: pacer-text-inhale-4-6 10s ease-in-out infinite; 
}
.pacer-text.timing-6-4::before { 
    animation: pacer-text-inhale-6-4 10s ease-in-out infinite; 
}

/* --- 2. Exhale Text Logic --- */
.pacer-text::after {
    content: 'exhale...';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* Set animation based on parent class */
.pacer-text.timing-5-5::after { 
    animation: pacer-text-exhale-5-5 10s ease-in-out infinite; 
}
.pacer-text.timing-4-6::after { 
    animation: pacer-text-exhale-4-6 10s ease-in-out infinite; 
}
.pacer-text.timing-6-4::after { 
    animation: pacer-text-exhale-6-4 10s ease-in-out infinite; 
}

/* --- 3. Animation Keyframes --- */

/* 5s in (rise), 5s out (fall) */
@keyframes pacer-coherence-5-5 {
  0%   { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); } /* No glow */
  50%  { transform: translateY(0);     box-shadow: 0 0 20px 5px var(--highlight); } /* Full glow */
  100% { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); } /* No glow */
}

/* New inhale text animation (pulses 0-50%) */
@keyframes pacer-text-inhale-5-5 {
    0%   { opacity: 0; }  /* Start faded out */
    5%   { opacity: 1; }  /* Quickly fade in */
    45%  { opacity: 1; }  /* Hold visible */
    50%  { opacity: 0; }  /* Fade out as ball reaches top */
    100% { opacity: 0; }  /* Stay hidden */
}

/* New exhale text animation (pulses 50-100%) */
@keyframes pacer-text-exhale-5-5 {
    0%   { opacity: 0; }  /* Stay hidden */
    50%  { opacity: 0; }  /* Start faded out */
    55%  { opacity: 1; }  /* Quickly fade in as ball starts down */
    95%  { opacity: 1; }  /* Hold visible */
    100% { opacity: 0; }  /* Fade out as ball reaches bottom */
}
/* New keyframe for synced mantra glow */
@keyframes highlight-mantra-sync-5-5 {
  0%   { color: var(--secondary); } /* Start dim (Ball at bottom) */
  50%  { color: var(--highlight); } /* Full glow (Ball at top) */
  100% { color: var(--secondary); } /* Back to dim (Ball at bottom) */
}

/* --- NEW Asymmetric Keyframes (4s In / 6s Out) --- */

@keyframes pacer-coherence-4-6 {
  0%   { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
  40%  { transform: translateY(0);     box-shadow: 0 0 20px 5px var(--highlight); } /* Full glow */
  100% { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
}
@keyframes pacer-text-inhale-4-6 {
    0%   { opacity: 0; }  
    5%   { opacity: 1; }  
    35%  { opacity: 1; }  
    40%  { opacity: 0; }  /* Fades out at 4s */
    100% { opacity: 0; }  
}
@keyframes pacer-text-exhale-4-6 {
    0%   { opacity: 0; }  
    40%  { opacity: 0; }  /* Fades in at 4s */
    45%  { opacity: 1; }  
    95%  { opacity: 1; }  
    100% { opacity: 0; }  
}
@keyframes highlight-mantra-sync-4-6 {
  0%   { color: var(--secondary); } 
  40%  { color: var(--highlight); } /* Peaks at 4s */
  100% { color: var(--secondary); } 
}

/* --- NEW Asymmetric Keyframes (6s In / 4s Out) --- */

@keyframes pacer-coherence-6-4 {
  0%   { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
  60%  { transform: translateY(0);     box-shadow: 0 0 20px 5px var(--highlight); } /* Full glow */
  100% { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
}
@keyframes pacer-text-inhale-6-4 {
    0%   { opacity: 0; }  
    5%   { opacity: 1; }  
    55%  { opacity: 1; }  
    60%  { opacity: 0; }  /* Fades out at 6s */
    100% { opacity: 0; }  
}
@keyframes pacer-text-exhale-6-4 {
    0%   { opacity: 0; }  
    60%  { opacity: 0; }  /* Fades in at 6s */
    65%  { opacity: 1; }  
    95%  { opacity: 1; }  
    100% { opacity: 0; }  
}
@keyframes highlight-mantra-sync-6-4 {
  0%   { color: var(--secondary); } 
  60%  { color: var(--highlight); } /* Peaks at 6s */
  100% { color: var(--secondary); } 
}

/* New keyframe for the left (Krishna) text */
@keyframes highlight-krishna {
    0%   { color: var(--highlight); } /* Start bright (Inhale) */
    45%  { color: var(--highlight); }
    50%  { color: var(--secondary); } /* Fade to dim (Exhale) */
    100% { color: var(--secondary); }
}

/* New keyframe for the right (Rama) text */
@keyframes highlight-rama {
    0%   { color: var(--secondary); } /* Start dim (Inhale) */
    50%  { color: var(--highlight); } /* Fade to bright (Exhale) */
    95%  { color: var(--highlight); }
    100% { color: var(--secondary); } /* Fade to dim */
}

/* --- 4. Controls (Copies mantra-controls logic) --- */

.pacer-controls {
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    background-color: var(--background);
    border: 1px dashed var(--highlight);
    padding: 0.6rem 0.8rem;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
}

#pranayama-pacer:hover .pacer-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.1s, visibility 0s linear 0s, transform 0.3s ease 0.1s;
}

.pacer-control-btn { 
    display: block; 
    color: var(--highlight); 
    cursor: pointer; 
    margin: 0.4rem 0; 
    font-size: 0.85em; 
    text-decoration: none; 
}
.pacer-control-btn:hover {
    background-color: var(--mystic2); 
        color: #000000; 
        
        /* The Structure */
        border-radius: 2px;
        text-decoration: none;
        
        /* Optional: A subtle glow to make it feel like a light source */
        box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
        border-color: var(--mystic2);
}
.pacer-control-btn.active { 
    color: var(--soft-white);
    font-weight: bold;}
    
.pacer-divider {
    border: none; 
    border-top: 1px dashed var(--secondary); 
    margin: 0.5rem 0;
}

    /* ======== 5. KEYFRAME ANIMATIONS --- UPDATED --- ======== */
    @keyframes blink { 0%, 100% { background-color: var(--highlight); } 50% { background-color: transparent; } }
    @keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes image-flicker-in-glow{0%{opacity:0}10%{opacity:0;filter:none}10.1%{opacity:1;filter:none}10.2%{opacity:0;filter:none}20%{opacity:0;filter:none}20.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.25))}20.6%{opacity:0;filter:none}30%{opacity:0;filter:none}30.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}30.5%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}30.6%{opacity:0;filter:none}45%{opacity:0;filter:none}45.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}50%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}55%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}55.1%{opacity:0;filter:none}57%{opacity:0;filter:none}57.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35))}60%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35))}60.1%{opacity:0;filter:none}65%{opacity:0;filter:none}65.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35)) drop-shadow(0 0 100px rgba(255,255,255,.1))}75%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35)) drop-shadow(0 0 100px rgba(255,255,255,.1))}75.1%{opacity:0;filter:none}77%{opacity:0;filter:none}77.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.4)) drop-shadow(0 0 110px rgba(255,255,255,.2)) drop-shadow(0 0 100px rgba(255,255,255,.1))}85%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.4)) drop-shadow(0 0 110px rgba(255,255,255,.2)) drop-shadow(0 0 100px rgba(255,255,255,.1))}85.1%{opacity:0;filter:none}86%{opacity:0;filter:none}86.1%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.6)) drop-shadow(0 0 60px rgba(255,255,255,.45)) drop-shadow(0 0 110px rgba(255,255,255,.25)) drop-shadow(0 0 100px rgba(255,255,255,.1))}100%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.6)) drop-shadow(0 0 60px rgba(255,255,255,.45)) drop-shadow(0 0 110px rgba(255,255,255,.25)) drop-shadow(0 0 100px rgba(255,255,255,.1))}}
    @keyframes image-flicker-out-glow{0%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.6)) drop-shadow(0 0 60px rgba(255,255,255,.45)) drop-shadow(0 0 110px rgba(255,255,255,.25)) drop-shadow(0 0 100px rgba(255,255,255,.1))}13.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.6)) drop-shadow(0 0 60px rgba(255,255,255,.45)) drop-shadow(0 0 110px rgba(255,255,255,.25)) drop-shadow(0 0 100px rgba(255,255,255,.1))}14%{opacity:0;filter:none}14.9%{opacity:0;filter:none}15%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.4)) drop-shadow(0 0 110px rgba(255,255,255,.2)) drop-shadow(0 0 100px rgba(255,255,255,.1))}22.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.4)) drop-shadow(0 0 110px rgba(255,255,255,.2)) drop-shadow(0 0 100px rgba(255,255,255,.1))}23%{opacity:0;filter:none}24.9%{opacity:0;filter:none}25%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35)) drop-shadow(0 0 100px rgba(255,255,255,.1))}34.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35)) drop-shadow(0 0 100px rgba(255,255,255,.1))}35%{opacity:0;filter:none}39.9%{opacity:0;filter:none}40%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35))}42.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.55)) drop-shadow(0 0 60px rgba(255,255,255,.35))}43%{opacity:0;filter:none}44.9%{opacity:0;filter:none}45%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}50%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}54.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}55%{opacity:0;filter:none}69.4%{opacity:0;filter:none}69.5%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}69.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.45)) drop-shadow(0 0 60px rgba(255,255,255,.25))}70%{opacity:0;filter:none}79.4%{opacity:0;filter:none}79.9%{opacity:1;filter:drop-shadow(0 0 30px rgba(255,255,255,.25))}80%{opacity:0;filter:none}89.8%{opacity:0;filter:none}89.9%{opacity:1;filter:none}90%{opacity:0;filter:none}100%{opacity:0}}
    @keyframes image-flicker-in-mobile{0%{opacity:0}25%{opacity:0}25.1%{opacity:1}25.5%{opacity:0}50%{opacity:0}50.1%{opacity:1}50.5%{opacity:0}75%{opacity:0}75.1%{opacity:1}100%{opacity:1}}
    @keyframes image-flicker-out-mobile{0%{opacity:1}25%{opacity:0}25.1%{opacity:1}25.5%{opacity:0}50%{opacity:0}50.1%{opacity:1}50.5%{opacity:0}75%{opacity:0}75.1%{opacity:1}100%{opacity:0}}

    /* -- Guna Hover Animations -- */
    @keyframes sattvaHoverGlow {
        0% { color: var(--primary); transform: scale(1); text-shadow: none; filter: brightness(1); }
        100% { color: var(--sattva-glow); transform: scale(1.03); text-shadow: 0 0 8px var(--sattva-glow), 0 0 16px var(--highlight); filter: brightness(1.2); }
    }
    @keyframes rajasGlow { 
        0%, 100% { filter: drop-shadow(0 0 4px var(--rajas-glow)); transform: translateX(0); color: var(--primary); }
        25% { filter: drop-shadow(0 0 12px var(--rajas-glow)); transform: translateX(1px) rotate(-.2deg); color: var(--highlight); }
        50% { filter: drop-shadow(0 0 6px var(--rajas-glow)); transform: translateX(-1px) rotate(.2deg); color: var(--primary); }
        75% { filter: drop-shadow(0 0 10px var(--rajas-glow)); transform: translateX(.5px) rotate(.1deg); color: var(--highlight); }
    }
    /* Reverted rajasGlow definition was missing, replaced with jitter */
    @keyframes rajas-jitter {
        0%, 100% { transform: translate(0, 0); }
        25% { transform: translate(0.5px, -0.5px); }
        50% { transform: translate(-0.5px, 0.5px); }
        75% { transform: translate(0.5px, 0.5px); }
    }
    @keyframes tamasVeil { 
        0% { color: var(--primary); filter: blur(0); opacity: 1; }
        100% { color: var(--tamas-color); filter: blur(1px); opacity: .6; }
    }

    @keyframes levitate-bob {
        0% {transform: translateY(0);}
        50% {transform: translateY(-8px); /* The "peak" of the bob */}
        100% {transform: translateY(0);}
    }

    /* ----- ANIMATION: SIGNAL LOSS (The Flicker) ----- */
@keyframes signal-loss {
    0% { opacity: 1; filter: brightness(1); }
    10% { opacity: 0.5; filter: brightness(2); } /* Voltage spike */
    20% { opacity: 0; }                          /* Drop out */
    30% { opacity: 0.8; }
    40% { opacity: 0.1; }
    50% { opacity: 1; filter: brightness(1); }
    100% { opacity: 1; }
}


    /* ======== 6. RESPONSIVENESS (Mobile) ======== */
    @media (max-width: 1024px) { 
        body { font-size: 13px; }
        #dashboard-grid { 
            grid-template-columns: 1fr 1fr; /* 2 columns */
            /* Add a vertical gap for the new rows */
            gap: 0.75rem; 
        } 
        
        /* We must tell the columns where to go */
        #col-1 { grid-column: 1 / 2; }
        #col-2 { grid-column: 2 / 3; }
        #col-3 { grid-column: 1 / 2; } /* Stacks under Col 1 */
        #col-4 { grid-column: 2 / 3; } /* Stacks under Col 2 */
        
        /* Reset justification */
        #col-2, #col-3, #col-4 {
            justify-self: stretch;
        } 
    }
    @media (max-width: 768px) { 
        body { font-size: 13px; padding: 0.2rem; overflow-x: hidden; }
        #dashboard-grid { 
            grid-template-columns: 1fr; /* 1 column */
            gap: 0.75rem; /* The gap between column stacks */
        }

        /* --- Mobile Stacking Order --- */
        /* (We force a 1-column layout first) */
        #col-1, #col-2, #col-3, #col-4 {
            grid-column: 1 / 2;
            justify-self: stretch;
            
            /* This is a new helper rule: 
               it makes the columns stack correctly */
            display: contents;
        }
        
        /* Now we set the order for each *module* */
        #system-kernel-info    { grid-row: 2; }
        #command-interface      { grid-row: 3; }
        #navigation-directory   { grid-row: 4; }
        #active-processes        { grid-row: 5; } /* This is Sankhya Flow */
        #mantra-stream-active  { grid-row: 6; }
        #guna-stream-monitor   { grid-row: 7; }
        #divya-sutra            { grid-row: 8; }
        /* #portal-module          { grid-row: 8; } - is display:none */
        #pranayama-pacer        { grid-row: 9; }
        #sys-id-logo            { grid-row: 10; }
        #feedback-channel       { grid-row: 11; }
        
        .module { 
            border: 1px solid transparent; /* Keep 1px space for smooth animation */
            border-bottom: 1px dashed var(--primary); /* The new divider */
            padding: 0.5rem 0.75rem; 
            /* 2. Animate the border and padding changes */
            transition: border-color 0.4s ease-out, 
                padding 0.4s ease-out;
        }
        .module-title { 
            position: relative; /* Anchor for the button */
            cursor: pointer; /* Show it's clickable */
            font-size: 0.85em; } 

        .module-title::after {
            content: '[+]';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            color: var(--highlight);
            transition: transform 0.3s ease;
        }

        /* --- Accordion "Open" State --- */
        .module.active .module-title::after {
            content: '[−]'; /* Change to minus sign */
        }
        
        .module.active {
            /* 1. Draw the full, highlighted border */
            border: 1px dashed var(--highlight);
            
            /* 2. Add back full padding */
            padding: 0.5rem 0.75rem;
        }
        
        /* This is the rule that slides the content open */
        .module.active .module-content {
            max-height: 1000px; /* Animate to this height */
            padding-top: 0.6rem; /* Restore top padding */
            padding-bottom: 0.8rem; /* Restore bottom padding */
        }
        .module-content {
        font-size: 0.95em;
        
        /* --- 2. Collapse all modules by default --- */
        max-height: 0;
        overflow: hidden;
        
        /* 3. Add the "slide" animation */
        transition: max-height 0.4s ease-out;
        
        /* 4. Remove padding when collapsed */
        padding-top: 0;
        padding-bottom: 0;
        }

        #load-in-sequence .prompt-line { font-size: 0.9em; } 
        .logo-container { min-height: 150px; } 
        .logo-image { max-width: 150px; filter: none; } 
        .image-flicker-in-glow { animation: image-flicker-in-mobile 4s linear both; } 
        .image-flicker-out-glow { animation: image-flicker-out-mobile 4s linear both; } 
        
        /* Disable pop-out effects on mobile */
        #mantra-stream-active:hover { transform: none !important; z-index: auto !important; box-shadow: none !important; }
        .mantra-controls { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; border: none; padding: 0.75rem 0 0 0; margin-top: 1rem; border-top: 1px dashed var(--secondary); width: auto;}
        .nav-preview-links { display: none !important; }
        .nav-item:hover { background-color: transparent; }
        #terminal-input { font-size: 1.1em; } 

        /* --- Show & Style Mobile Instruction --- */
        #mobile-instruction {
            display: block; /* 1. Show the module */
            grid-row: 1;    /* 2. Pin it to the top */
        }
        #mobile-instruction .prompt-line {
            font-size: 0.9em;
            color: var(--highlight);
            display: flex;
            flex-direction: column;   /* <-- UPDATED */
            align-items: flex-start; /* <-- UPDATED (to left-align) */
        }
        #mobile-instruction .module-content {
            max-height: 1000px; /* Make it "always-open" */
            padding: 0;
        }
        .typewriter-line {
            /* This ensures the text and cursor stay 
               on the same line */
            display: flex;
            align-items: center;
        }
        /* --- Add space after [Atha] line --- */
        .prompt-static {
            margin-bottom: 0.5rem; /* Adjust this value as needed */
        }

        /* --- 1. Reset all flex-grow modules for accordion --- */
        #system-kernel-info,
        #command-interface,
        #active-processes,
        #navigation-directory,
        #divya-sutra,
        #portal-module,
        #feedback-channel {
            flex-grow: 0;
            min-height: auto;
        }
        /* --- Accordion Exceptions --- */
        /* --- Accordion Exception: Keep Command Open --- */
        #command-interface .module-content,
        #system-kernel-info .module-content {
            /* Override the "max-height: 0" rule */
            max-height: 1000px; /* A large value to ensure it's open */
            
            /* Restore its padding */
            padding-top: 0.6rem;
            padding-bottom: 0.8rem;
        }

        /* --- Accordion Exception: Fix Command Border --- */
        #command-interface {
            /* Override the desktop ID rule */
            border-color: transparent;
            
            /* Re-apply the bottom dashed border */
            border-bottom: 1px dashed var(--primary);
        }

        /* --- Footer Module Fix --- */
        /* Remove the bottom border from the last module */
        #feedback-channel {
            border-bottom: none;
        }

        /* --- Mobile Nav Accordion Fix --- */
    
    /* 1. Force the nav item to allow wrapping */
    .nav-item {
        flex-wrap: wrap !important;
        height: auto !important; /* Allow it to grow */
    }

    /* 2. Reset the preview box completely for mobile */
    .nav-preview-links {
        /* Reset positioning */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        
        /* Ensure it breaks to a new line */
        width: 100% !important;
        flex-basis: 100% !important;
        
        /* Hide it initially */
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        
        /* Styling */
        margin-top: 0.5rem;
        padding-left: 1rem;
        border-left: 1px dashed var(--secondary);
    }

    /* 3. The Open State */
    /* Note: We use !important to override any desktop hover logic */
    .nav-item.active .nav-preview-links {
        display: block !important; 
        pointer-events: auto !important;
    }
    
    /* Optional: Keep the highlight when active */
    .nav-item.active {
        background-color: rgba(166, 123, 91, 0.1);
    }

    /* --- Guna Module Mobile Animations --- */
        
        /* 1. Swap the instruction text */
        .hover-instruction {
            display: none;
        }
        .tap-instruction {
            display: block;
        }
        
        /* 2. Define the "intro" animation classes */
        /* (The .guna-line.guna-intro rule is no longer needed) */
        
        /* This runs the REAL desktop animation for 2s */
        #sattva-line.guna-intro {
            animation: sattvaHoverGlow 1.5s ease-in-out infinite alternate;
       }
        
        /* This runs the REAL desktop animation for 2s */
        #rajas-line.guna-intro {
            color: var(--rajas-glow); 
            text-shadow: 0 0 10px var(--rajas-glow), 0 0 20px rgba(255, 102, 102, 0.6); 
            animation: rajas-jitter 0.15s infinite; 
        }
        
        /* This runs the REAL desktop animation for 2s */
        #tamas-line.guna-intro {
            animation: tamasVeil 2s ease-in-out infinite alternate;
        }

        /* --- Fix Guna Animation Clipping --- */
        #guna-stream-monitor .module-content {
            /* Add 1rem of horizontal padding */
            padding-left: 0.4rem;
            padding-right: 0.4rem;
            
            /* This ensures the padding is added *inside* the
               content box and doesn't make it wider */
            box-sizing: border-box;
        }

    /* --- Mobile Levitation Fix --- */
        
        /* 1. Turn OFF the desktop :hover animation */
        #divya-sutra:hover {
            animation: none;
            box-shadow: none;
            z-index: auto;
        }
        
        /* 2. Turn ON the animation when the accordion is .active */
        .module.active#divya-sutra {
            z-index: 20; 
            animation: levitate-bob 3s ease-in-out infinite;
            box-shadow: 
                /* The mystical glow (on the module itself) */
                0 0 20px -5px var(--highlight),
                /* The detached green glow (on the "ground" below) */
                0 40px 60px -20px var(--mystic2);
        }

        /* --- Pacer Controls Tap-Toggle (Mobile) --- */
        
        /* 1. Make the pacer title clickable */
        #pranayama-pacer .module-title {
            cursor: pointer;
        }
        
        /* 2. Disable the desktop hover-trigger */
        #pranayama-pacer:hover .pacer-controls {
            /* This rule stops the "sticky hover" bug */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }
        
        /* 3. This is the new "tap-to-open" trigger */
        #pranayama-pacer.controls-active .pacer-controls {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
       }

       /* --- Pacer Button State Toggle --- */
        #pranayama-pacer.controls-active .module-title::after {
            content: '[−]';
        }

        /* --- Pacer Stacking Fix --- */
        /* When the controls are active, bring the
           whole module to the front */
        #pranayama-pacer.controls-active {
            z-index: 30; /* 30 is higher than the portal's 20 */
            position: relative; /* z-index requires position */
        }

        /* --- Hide Portal Module on Mobile --- */
        #portal-module {
            display: none;
        }

        /* --- Disable Logo Pop-out on Mobile --- */
        #sys-id-logo:hover {
            /* Disable the pop-out effects */
            transform: none !important;
            z-index: auto !important;
            box-shadow: none !important;
        }
        .pop-out-reveal {
            /* Hide the 130%-width element completely */
            display: none !important;
        }

        /* --- Fix Pacer Spacing on Mobile --- */
        #pranayama-pacer {
            /* 1. Unset the fixed desktop height */
            min-height: auto;
            max-height: none;
        }
        
       /* --- Accordion Exception: Keep Pacer Open --- */
        #pranayama-pacer .module-content {
            max-height: 1000px; 
            overflow: visible;
            padding: 1.5rem 0 2.5rem 0; 
            align-items: center; 
        }
        
        /* --- Fix Logo Module Height --- */
        #sys-id-logo {
            /* Unset the fixed desktop height */
            min-height: auto;
            max-height: none;
        }
        /* --- Accordion Exception: Keep Logo Open --- */
        #sys-id-logo .module-content {
            max-height: 1000px; /* Keep it open */
            overflow: visible; /* Show content */

        /* Add back its normal padding */
            padding: 0.5rem 0.75rem 0 0.75rem; 
        }
        /* --- Make ASCII logo smaller on mobile --- */
        #sys-id-logo pre {
            font-size: 0.9em; /* <-- ADD THIS (adjust as needed) */
            line-height: 1.1; /* Add a tighter line-height */
        }

        /* --- Fix Logo "Sticky Hover" Bug --- */
        
        /* 1. Force the logo wrapper to stay visible */
        #sys-id-logo:hover .logo-wrapper {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* 2. Force the pop-out content to stay hidden */
        #sys-id-logo:hover .pop-out-reveal {
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        
        /* 3. (Optional but good) Disable the pop-out shadow */
        #sys-id-logo:hover {
            box-shadow: none !important;
        }
        
        /* Hide the [+] button on modules that can't collapse */
        #system-kernel-info .module-title::after,
        #command-interface .module-title::after,
        #feedback-channel .module-title::after,
        #sys-id-logo .module-title::after { /* <-- ADD THIS LINE */
            display: none;
        }

        /* --- Fix Feedback Channel Height --- */
        #feedback-channel {
            /* 1. Turn off flex-grow (if it had it) */
            flex-grow: 0;
            
            /* 2. Unset the fixed desktop height */
            min-height: auto;
            max-height: none;
        }
        
        /* 3. Reset the content area inside */
        #feedback-channel .module-content {
            flex-grow: 0;
            min-height: auto;
            overflow-y: visible; /* Show all content */
            /* 1. Override the "max-height: 0" rule */
            max-height: 1000px; /* A large value to ensure it's open */
            
            /* 2. Restore default module padding */
            padding: 0.5rem 0.75rem;
        }

        /* --- Increase Feedback Channel Font on Mobile --- */
        .feedback-link {
            font-size: 1em; /* Larger than the 0.9em desktop rule */
        }
        
        .copyright-line {
            font-size: 1em;   /* Larger than the 0.8em desktop rule */
        }
    }

    /* ======== 7. EASTER EGG STYLES (TRIP MODE) ======== */

/* --- 1. The Breathing Animation --- */
@keyframes trip-breathe {
  0% {transform: scale(1) translateY(0);}
  100% {transform: scale(1.05) translateY(0);}
}

@keyframes slow-hue-rotate {
  0% {filter: hue-rotate(0deg);}
  100% {filter: hue-rotate(360deg);}
}

@keyframes portal-pulse {
  0% {
    /* This is the "dull" state (trough of the pulse) */
    box-shadow: 0 0 5px var(--highlight),
                0 0 20px 0px var(--highlight);
  }
  100% {
    /* This is the "bright" state (peak of the pulse) */
    box-shadow: 0 0 10px var(--highlight),
                0 0 40px 10px var(--highlight);
  }
}



/* --- 3. Make the modules breathe --- */
body.trip-mode .module {
  /* Apply the animations */
  animation: trip-breathe 7s ease-in-out infinite alternate,
             slow-hue-rotate 20s linear infinite;
    transform-origin: center;
}