/* =========================================
   SETUP TERMINAL THEME (The Floating Window)
   ========================================= */

/* 1. GLOBAL RESET (Critical: Prevents padding from increasing width/height) */
/* --- CRITICAL RESET (Fixes the Scrollbar) --- */
/* 1. THE VOID (Page Background) */
/* 1. LOCK THE ROOT (Removes the Browser Scrollbar) */
/* 1. GLOBAL RESET (This is the missing link from your old file) */
* {
    box-sizing: border-box;
}

/* 2. THE VOID (Container) */
html, body {
    width: 100%;
    height: 100%;       /* Locks the height to the window size */
    margin: 0;
    padding: 0;         /* Remove padding from the container */
    overflow: hidden;   /* NUCLEAR OPTION: Forces the scrollbar to disappear */
}

/* 3. THE BODY (Layout) */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    line-height: 1.5;

    /* Background Styles */
    background-color: #050505;
    /* Option 2: Very faint Gold lines (Matches your text theme) */
    background-image: linear-gradient(rgba(85, 85, 85, 0.4) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(85, 85, 85, 0.4) 1px, transparent 1px);
    background-size: 30px 30px;
    background-position: center;
}

/* 2. THE FLOATING FRAME */
.terminal-frame {
    width: 100%;
    max-width: 1008px; /* Standard Terminal Width */
    max-height: 672px;
    background-color: var(--background); /* Pure Black inside */

    height: 100%;            /* Force it to fill the screen height (minus padding) */
    display: flex;           /* Enables stacking logic */
    flex-direction: column;  /* Stacks Header on top of Body */
    
    /* The "Float" Effect */
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8), /* Deep Drop Shadow */
        0 0 0 1px rgba(255, 255, 255, 0.05); /* Subtle inner rim */
    
    overflow: hidden; /* Clips content to rounded corners */
    animation: 
        floatUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
        pranaPulse 6s ease-in-out infinite;
}

/* 1. THE WATERMARK (Attached to the fixed Frame) */
.terminal-frame::after {
    content: "";
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 105px;
    
    /* The Art */
    background-image: url('../images/radha-watermark.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 38%; /* Adjust as needed */
    opacity: 0.10; 
    pointer-events: none;
    
    /* Layering Logic: Sits at Level 0 */
    z-index: 0;
}

/* 2. THE CONTENT (Must sit ABOVE the watermark) */
/* We force all children of the frame to be higher than the watermark */
.window-bar, 
.terminal-body, 
.cmd-bar,
.status-bar {
    position: relative;
    z-index: 1; /* Level 1: Sits on top of the art */
}

/* 3. WINDOW TITLE BAR */
.window-bar {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;

    background-color: #080808; /* Slightly darker than main terminal */
    border-bottom: 1px solid #222; /* Subtle divider from input */
    padding: 0.4rem 1rem;
}

.window-controls {
    display: flex;
    gap: 8px;
}

/* NEW SACRED GEOMETRY CONTROLS */
.geo-icon {
    width: 14px;
    height: 14px;
    display: block; /* Ensures they align properly */
    
    /* The Look: Thin Bronze Lines */
    fill: none;
    stroke: var(--primary); /* Bronze */
    stroke-width: 2px;
    vector-effect: non-scaling-stroke; /* Keeps lines sharp */
    
    opacity: 0.6; /* Subtle by default */
    transition: all 0.3s ease;
    cursor: pointer;
}
/* Hover Effects */
.window-controls .geo-icon:hover {
    opacity: 1;
    stroke: var(--mystic2); /* Turns Gold on hover */
    filter: drop-shadow(0 0 2px var(--mystic2));
    transform: scale(1.1);
}

/* The Layout adjustments */
.window-controls {
    display: flex;
    gap: 12px; /* A bit more breathing room than dots */
    align-items: center;
    z-index: 10; /* Ensures they sit above the title */
}

.window-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--secondary);
    font-size: 0.8rem;
    font-family: 'Source Code Pro', monospace;
    pointer-events: none; /* Let clicks pass through */
}

/* Update the existing window-status to flex */
.window-status {
    display: flex;
    gap: 15px; /* Spacing between OP status and Uptime */
    align-items: center;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.7rem;
    color: var(--secondary); 
    font-weight: 700;
}

/* The Auth Indicator Default (Offline) */
.auth-status {
    color: var(--secondary);
    transition: all 0.3s ease;
}

/* The Auth Indicator Active (Online) */
.auth-status.online {
    color: var(--highlight); /* Uses your Mystic Green */
    text-shadow: var(--glow-monitor); /* Gives it that CRT hum */
    letter-spacing: 0.5px;
}

/* --- BOOT SEQUENCE STYLES --- */
.boot-text {
    font-family: 'Source Code Pro', monospace;
    color: var(--secondary);
    
    /* REMOVED: min-height: 100% and justify-content */
    /* NEW: Just adds space below the logs before the logo starts */
    /* margin-bottom: 1.5em; */ 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* --- BOOT SEQUENCE STYLES --- */
#boot-sequence {
    margin-bottom: 0;
    /* Optional: keeps layout stable while loading */
    min-height: 2rem; 
}

.boot-line {
    font-family: 'Source Code Pro', monospace;
    
    /* 1. FIX SIZE: Match the terminal standard */
    
    /* 2. FIX COLOR: Use secondary (Grey) for system logs */
    color: var(--secondary); 
    
    margin: 0;
}

/* The specific style for the "Mount Success" line */
.highlight-green {
    color: #fff; /* Pure Light */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* Holy Glow */
}

.boot-line.mystic {
    color: var(--mystic2);
    text-shadow: 0 0 5px rgba(0, 255, 127, 0.4);
}

/* UTILITY: Initial Hide State */
.hidden {
    display: none !important; /* Force it to hide */
    opacity: 0;
}

/* TERMINAL REVEAL: The "Optical Snap" */
.fade-in {
    /* Change animation name to 'snapIn' */
    animation: snapIn 0.5s cubic-bezier(0.1, 0.9, 0.2, 1.0) forwards;
    
    /* Ensure it is visible during animation */
    display: block !important; 
}

@keyframes snapIn {
    0% {
        opacity: 0;
        transform: scale(0.98) translateY(10px); /* Slightly small & low */
        filter: blur(4px) brightness(300%); /* Blurry & blindingly bright */
    }
    40% {
        opacity: 1;
        /* It snaps to visibility quickly */
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0); /* Locks into place */
        filter: blur(0) brightness(100%); /* Sharp & clean */
    }
}


/* 4. TERMINAL INTERIOR */
.terminal-body {
    padding: 1rem;
    font-family: 'Source Code Pro', monospace;

    flex: 1;           /* Grow to fill empty space */
    overflow-y: auto;  /* Scroll vertically when needed */
    min-height: 0;     /* A fix to ensure scrolling works in Flexbox */
    
    /* OPTIONAL: Makes the scrollbar look nicer/thinner */
    scrollbar-width: thin; 
    scrollbar-color: var(--primary) transparent;
}

/* --- REUSED CONTENT STYLES --- */

.cmd-title {
    color: var(--highlight);
    margin: 0;
    font-weight: 700;
}

.sys-msg {
    color: var(--highlight);
    text-shadow: 0 0 8px rgba(200, 159, 123, 0.7);
}

.sys-msg .body-text{
    color: var(--secondary);
}

.body-text {
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 1.5em;
    
    /* border: 1px solid var(--mystic2) */
}

.tm-note { 
    color: var(--secondary);
    margin-top: 0;   
    margin-bottom: 0; 
    
    display: block;
}
.gold { color: var(--highlight); }
.mystic { color: var(--mystic2); }

/* DIVIDERS */
/* Make the divider less intrusive */
.divider {
    color: var(--secondary);
    opacity: 0.4;
    margin: 0;        /* Reduced from 2rem */
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}

/* INSTRUCTION LISTS */
.section-title {
    color: var(--secondary);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;   /* Reduced from 1.2rem (Critical change) */
    display: flex;
    align-items: center;
    font-weight: 500;        /* Ensure it pops even when small */
}

/* Optional: Keep the first title snug against the top intro text */
.section-title:first-of-type {
    margin-top: 1rem; 
}

.section-title::before {
    content: '>';
    color: var(--highlight);
    margin-right: 10px;
}

/* --- TERMINAL LISTS --- */
.tm-list {
    list-style: none; /* Remove default round bullets */
    padding-left: 0; /* no indent */
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.tm-list li {
    font-family: 'Source Code Pro', monospace;
    /* color: var(--primary); -- Gold/Bronze */
    color: rgba(230, 230, 230, 0.85);
    margin-bottom: 0; /* Spacing between items */
    display: flex; /* Ensures alignment if text wraps */
}

/* The Marker (* or - or >) */
.tm-list .marker {
    color: var(--highlight); /* Bright Gold */
    margin-right: 0.8rem; /* Space between * and text */
    font-weight: 700;
}

/* Optional: Make the bold terms (Discipline etc) pop */
.tm-list strong {
    color: var(--primary);
    /* color: #fff;  or var(--accent) */
    font-weight: 700;
    margin-right: 0.5rem; /* Pushes the text away from the label */
}

.step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-list li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
}

.step-num {
    color: var(--secondary);
    margin-right: 0.8rem;    /* Pulls numbers closer to text */
    min-width: 30px;         /* Tighter width */
}

.step-text {
    color: var(--primary);
}

.icon-simulation {
    color: var(--mystic2);
    font-weight: bold;
}

/* DIRECTORY / PACKAGES */
.pkg-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* --- PACKAGE LINKS (Refined) --- */
.pkg-link {
    display: flex;
    align-items: center;
    width: fit-content;
    text-decoration: none;
    padding: 0.2rem 0.5rem;
    
    /* Start invisible but present to prevent layout jumping */
    border: 1px dashed transparent; 
    
    transition: all 0.2s ease;
    background: transparent;
}

.pkg-link:hover {
    /* 1. Green Border instead of Grey */
    border-color: var(--mystic2); 
    
    /* 2. NO Background (keeps it crisp) */
    background: transparent; 
    
    /* 3. Keep the slide, maybe boost it slightly */
    transform: translateX(4px); 
    
    /* 4. Optional: Add a tiny glow to the border */
    box-shadow: 0 0 5px rgba(0, 255, 127, 0.2);
}

/* CRITICAL: Make the text inside light up Green too */
.pkg-link:hover .pkg-name,
.pkg-link:hover .pkg-desc {
    color: var(--mystic2);
    transition: color 0.2s ease;
}

.pkg-name {
    color: var(--mystic2);
    font-weight: 500;
    margin-right: 1rem;
}

.pkg-desc {
    color: var(--secondary);
}

/* --- MODULE ACCORDION (FULLY CONTAINED BOX) --- */
.module-accordion {
    /* Shift left and pad so the text aligns, but the border draws AROUND it */
    margin: 0 0 0 -0.5em; 
    padding: 0; 
    border: 1px solid transparent; 
    border-radius: 4px;
    transition: all 0.2s;
}

.module-accordion.active {
    border: 1px solid rgba(85, 85, 85, 0.4);
    background: rgba(0, 0, 0, 0.3);

    padding: 0.5em;
    
    /* Grid Spacing: Push away from other items */
    margin-top: 0.5em; 
    margin-bottom: 0.5em;
    margin-left: -0.5em; /* Keep the left shift active */

    /* box-shadow: 0 0 15px rgba(0, 255, 127, 0.08);  8% opacity Mystic Green */
    /* border-left: 1px solid var(--mystic2);  Snaps the left wall to full green */
    background: radial-gradient(circle at top left, rgba(0, 255, 127, 0.05) 0%, rgba(0, 0, 0, 0.3) 50%);
}

/* --- THE HEADER --- */
.module-header {
    display: flex;
    justify-content: flex-start; 
    align-items: baseline;
    cursor: pointer;
    line-height: 1.5;
    padding: 0; /* Box padding handles the breathing room now */
    color: rgba(200, 159, 123, 0.8);
}

.module-header:hover {
    color: #C89F7B; 
}

.module-header .title {
    margin-right: 1.5em; 
    font-weight: bold; 
}

.module-header .status {
    color: rgba(85, 85, 85, 0.8); 
}

/* --- THE SVG ICON --- */
.module-header .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em; /* Fixed width so all titles align perfectly */
}

.module-header .icon svg {
    width: 12px;
    height: 12px;
    fill: rgba(85, 85, 85, 0.8); 
    transform: rotate(-90deg); /* POINTS RIGHT */
    transition: transform 0.2s ease, fill 0.2s ease;
}

.module-accordion.active .icon svg {
    transform: rotate(0deg); /* POINTS DOWN */
    fill: var(--mystic2); 
}

/* --- THE CONTENT AREA (Strict TUI Grid) --- */
.module-content {
    display: none; 
}

.module-accordion.active .module-content {
    display: block; 
    /* Top: 0 | Right: 0.5em | Bottom: 0.5em (shrunk!) | Left: 1.5em */
    /* Reduced the top padding since the header is no longer floating above it */
    padding: 0 0.5em 0.5em 1.5em;
}

/* Interior Typography Locking */
.module-content .tm-note {
    margin: 0; /* Snap directly to the description */
    color: rgba(85, 85, 85, 0.8);
}

/* 1. Standard Output (The bulk of the reading text) */
/* Swapping from dimmed gold to a crisp, soft off-white for readability */
.body-text,
.module-content .desc {
    margin: 0 0 1.5em 0; /* Exactly one blank row after description */
    
    color: rgba(230, 230, 230, 0.85); /* Soft white/light grey. Adjust opacity to taste. */
    /* color: rgba(200, 159, 123, 0.65);  -- soft gold */
}

/* The CTA Button */
.cmd-btn {
    display: block; /* Forces it into the grid blocks */
    width: fit-content;
    margin: 0; /* Snap directly to the final note below it */
    
    color: var(--highlight);
    text-decoration: none;
    font-weight: bold;
    text-transform: none;
    transition: all 0.2s;
}

.cmd-btn:hover {
    background-color: var(--mystic2); 
    color: #000; 
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.3); 
}

.module-content .tm-note.small {
    margin: 0; 
}

/* FOOTER */
.sys-footer {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.return-cmd {
    text-decoration: none;
    color: var(--highlight);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: 1px solid var(--highlight);
    transition: all 0.3s ease;
}

.return-cmd:hover {
    background-color: var(--highlight);
    color: var(--background);
    box-shadow: 0 0 10px var(--highlight);
}

.signature {
    color: var(--secondary);
    margin-top: 1rem;
}

.blink { animation: blink 1.5s infinite; }

/* ANIMATIONS */
@keyframes floatUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- ANIMATION: PRANA PULSE --- */
@keyframes pranaPulse {
    0% {
        /* Exhale: Darker, standard shadow */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(166, 123, 91, 0.1);
        border-color: #333;
    }
    50% {
        /* Inhale: Glows slightly Bronze/Gold */
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 15px rgba(166, 123, 91, 0.15);
        border-color: var(--primary); /* subtle bronze rim light */
    }
    100% {
        /* Exhale: Return to center */
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(166, 123, 91, 0.1);
        border-color: #333;
    }
}

/* --- THE COMMAND BAR (Pinned Bottom) --- */
.cmd-bar {
    background-color: #0D0D0D; /* Matches terminal bg */
    padding: 0.25rem 0;
    margin-top: 0.5rem;  /* Small gap from the history/content above */
    margin-bottom: 0;    /* Flush against the Status Bar */
    border-top: 1px solid var(--secondary); /* Separator line */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0; /* Prevents it from squishing */
}

.cmd-prompt {
    color: var(--highlight); /* Gold prompt */
    font-weight: bold;
    padding-left: 0.5rem; 
}

.cmd-input {
    background: transparent;
    border: none;
    color: var(--primary); /* Bronze text */
    font-family: 'Source Code Pro', monospace;
    width: 100%;
    outline: none; /* Removes the blue browser glow */
    caret-color: var(--mystic2); /* Green blinking cursor */
    height: 1.5rem;      /* Force a compact height */
    padding-left: 0.5rem;
}

.cmd-input::placeholder {
    color: #444; /* Dim placeholder */
    font-style: italic;
}

/* Styling for dynamically added lines */
.user-cmd {
    margin-top: 0; /* 0.5rem Gap before user types */
    font-weight: bold;
}

/* --- COMMAND HISTORY AREA --- */
#cmd-history {
    
    /* Optional: Add a little top margin to separate it from the instructions */
    margin-top: 1rem;
}

/* Ensure the lines inside inherit this smaller size */
#cmd-history .boot-line {
    font-size: inherit;
    margin-bottom: 0; /* 0.3rem Tighter spacing for history logs */
    white-space: pre-wrap;
}

/* --- EXTERNAL NAVIGATION (Outside) --- */
.external-nav {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-family: 'Source Code Pro', monospace;
    padding-bottom: 0;
}

.nav-item {
    color: var(--secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.nav-item: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);
}

/* --- INTERNAL STATUS BAR (Bottom Taskbar) --- */
.status-bar {
    background-color: #080808; /* Slightly darker than main terminal */
    border-top: 1px solid #222; /* Subtle divider from input */
    padding: 0.4rem 1rem;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    
    font-size: 0.75rem; /* Very small, technical text */
    color: var(--secondary);
    font-family: 'Source Code Pro', monospace;
    cursor: default; /* Shows it's info, not a button */
}

.status-link {
    color: var(--secondary);
    text-decoration: none;
    margin-right: 0.8rem;
    font-weight: 700;
    transition: color 0.2s;
}

.status-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);
}

.status-bar .mystic {
    /* Optional: Make the "online" text glow slightly */
    text-shadow: 0 0 5px rgba(0, 255, 127, 0.5);
}

/* --- LOWERCASE SYSTEM AESTHETIC --- */
.window-title,
.status-light,
.cmd-title,
.section-title,
.tm-note,
.step-num,
.pkg-desc,
.signature,
.return-cmd {
    text-transform: lowercase;
}

/* --- FINAL POLISH: CUSTOM SELECTION --- */
::selection {
    background: var(--primary); /* Bronze background */
    color: #000; /* Black text for contrast */
    text-shadow: none;
}
/* For Firefox */
::-moz-selection {
    background: var(--primary);
    color: #000;
}

/* --- PORTAL TRANSITION --- */
body {
    transition: opacity 1s ease, filter 1s ease;
}

body.portal-active {
    opacity: 0;
    filter: blur(5px); /* Blurs reality as you leave */
    transform: scale(1.02); /* Slight zoom into the screen */
}

/* --- HOMEPAGE SPECIFIC STYLES --- */

/* Simulates a command that was already typed in the past */
.cmd-line-static {
    font-family: 'Source Code Pro', monospace;
    color: var(--primary);
    margin-bottom: 0;
    font-weight: 700;
}

.prompt {
    color: var(--highlight); /* Gold prompt color */
    margin-right: 0.5rem;
}

/* Container for each "Conversation" chunk */
.history-block {
    margin-top:0;
    margin-bottom: 1.5em; /* Exactly one blank terminal line */
}

/* --- HELP COMMAND FORMATTING --- */
.help-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Tight vertical spacing */
    margin-bottom: 1.5em;
    padding-left: 0;
}

.help-row {
    display: flex;
    align-items: flex-start;
}

.help-cmd {
    color: var(--primary); /* Keeps the commands in your Gold/Bronze */
    width: 120px; /* Forces the description column to start at the exact same spot */
    flex-shrink: 0; 
}

.help-desc {
    color: rgba(230, 230, 230, 0.85); /* Matches your crisp reading text */
}

/* --- ASCII CMD RENDERER --- */
/* The :not() tells it: Make this bronze UNLESS it also has .tm-note or .error! */
.boot-line.ascii-cmd:not(.tm-note):not(.error):not(.txt-anantam):not(.txt-buddhi) {
    white-space: pre; 
    font-family: 'Courier New', 'Courier', monospace; 
    color: #E8E3DF; 
    line-height: 1.5; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* Ensure the layout rules still apply even if it IS tm-note or error */
.boot-line.ascii-cmd {
    white-space: pre; 
    font-family: 'Courier New', 'Courier', monospace; 
    line-height: 1.5; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* --- LV8 COLOR UTILITIES --- */
.txt-green { color: var(--mystic2) !important; } /* mystic-green */
.txt-blue  { color: var(--ethereal-blue) !important; } /* etereal blue */
.txt-white  { color: var(--pure-white) !important; }
.txt-swhite { color: var(--soft-white) !important; }
.txt-gold   { color: var(--citrine) !important; }
.txt-red  { color: var(--error)  !important; } /* error red */
.txt-mystic { color: var(--mystic-blue) !important; }

.gold-glow {
    color: var(--brand-gold);
    text-shadow: var(--glow-gold);
}

/* --- LV8 TERMINAL FORMATTING --- */
.terminal-indent {
    display: block; /* Forces the browser to respect padding/indent on spans */
    padding-left: 12ch;
    text-indent: -12ch;
}

/* ASCII Logo styling */
.ascii-logo {
    font-family: 'Courier New', 'Courier', monospace;
    white-space: pre;
    overflow: hidden; 
    color: var(--primary);
    font-weight: normal;
    margin:0;
    margin-bottom: 0;
    line-height: 1.5;
    max-width: 100%; 
    font-size: clamp(11px, 2vw, 11px);

    animation: breathe 4s infinite ease-in-out;
}

@keyframes breathe {
    0% { opacity: 0.6; text-shadow: 0 0 0 var(--highlight); }
    50% { opacity: 0.8; text-shadow: 0 0 15px rgba(200, 159, 123, 0.4); }
    100% { opacity: 0.6; text-shadow: 0 0 0 var(--highlight); }
}

    /* ======== TERMINAL PRANAYAMA PACER ======== */
    .cmd-pacer-module {
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5em;
        padding: 0;
        border: none;
        background: transparent;
        width: fit-content;
    }

    .cmd-pacer-header {
        display: flex;
        justify-content: flex-start; /* Snaps the timer to the left */
        align-items: center;
        gap: 2rem; /* Gives it a nice, clean space after the title */
        margin-bottom: 1.5em;
        padding-bottom: 0;
    }

    .cmd-pacer-timer {
        font-size: 1.2em;
        font-weight: bold;
        color: var(--highlight);
        text-shadow: var(--glow-monitor);
    }

    /* 1. Pack tightly to the left */
    .pacer-container {
        display: flex;
        justify-content: flex-start; 
        align-items: flex-end;
        gap: 2rem; /* Reduced from 3rem to tighten the visualizer */
        width: 100%;
        padding: 0 0 1.5em 1em; 
    }

    /* 2. Keep the track and "Inhale/Exhale" text aligned with each other */
    .pacer-core {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centers the text OVER the track, not the screen */
    }

    /* 2. Strip default <pre> tag margins that cause drifting */
    .mantra-side-text {
        font-family: 'Noto Sans Devanagari', 'Source Code Pro', monospace;
        font-size: 1.2em;
        line-height: 1.5;
        color: var(--secondary);
        margin: 0; /* Kills the default spacing */
        padding: 0; /* Kills the default spacing */
        position: relative;
        bottom: 0.5em;
        animation-duration: 10s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    /* 3. Force all terminal text to align to the left edge */
    .mantra-left { 
        text-align: right; /* Overrides the old right-alignment */
        animation-name: highlight-mantra-sync-5-5; 
    }

    .mantra-right { 
        text-align: left; 
        animation-name: highlight-mantra-sync-5-5; 
    }

    .pacer-track {
        width: 2px;
        height: 100px;
        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;
        animation: pacer-coherence-5-5 10s ease-in-out infinite;
    }

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

    .pacer-text::before { content: 'Inhale...'; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .pacer-text::after { content: 'Exhale...'; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }

    .pacer-text.timing-5-5::before { animation: pacer-text-inhale-5-5 10s ease-in-out infinite; }
    .pacer-text.timing-5-5::after { animation: pacer-text-exhale-5-5 10s ease-in-out infinite; }

    

    /* 5s in (rise), 5s out (fall) */
    @keyframes pacer-coherence-5-5 {
    0%   { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
    50%  { transform: translateY(0);     box-shadow: 0 0 20px 5px var(--highlight); }
    100% { transform: translateY(100px); box-shadow: 0 0 0 0px var(--highlight); }
    }
    @keyframes pacer-text-inhale-5-5 { 0% {opacity:0;} 5% {opacity:1;} 45% {opacity:1;} 50% {opacity:0;} 100% {opacity:0;} }
    @keyframes pacer-text-exhale-5-5 { 0% {opacity:0;} 50% {opacity:0;} 55% {opacity:1;} 95% {opacity:1;} 100% {opacity:0;} }
    @keyframes highlight-mantra-sync-5-5 { 0% {color:var(--secondary);} 50% {color:var(--highlight);} 100% {color:var(--secondary);} }

    /* Kills the inhale/exhale pseudo-elements when the timer hits zero */
    /* 1. Set the static completion text and keep it visible */
    .pacer-text.session-complete::before {
        animation: none !important;
        opacity: 1 !important;
        content: '[sync_ok]' !important; /* Feel free to change this text! */
        color: var(--secondary) !important; /* Muted color shows the active process is over */
        letter-spacing: 1px;
    }

    /* 2. Completely kill the exhale text so they don't overlap */
    .pacer-text.session-complete::after {
        animation: none !important;
        opacity: 0 !important;
        content: '' !important;
    }

    /* 2s up, 2s down (4s total loop) */
    /* --- 2s up / 2s down (4s total loop) --- */
    .pacer-ball.timing-2-2 {
        animation-duration: 4s;
    }

    /* Re-use the existing percentage keyframes, but force them to run in 4 seconds */
    .pacer-text.timing-2-2::before { 
        animation: pacer-text-inhale-5-5 4s ease-in-out infinite; 
    }
    .pacer-text.timing-2-2::after { 
        animation: pacer-text-exhale-5-5 4s ease-in-out infinite; 
    }

    /* Sync the glowing side mantras to pulse at the new 4s speed */
    .mantra-side-text.timing-2-2 {
        animation-duration: 4s;
    }

/* Module List Styling (The Offerings) */
.pkg-container {
    margin-bottom: 0;
}

/* UTILITY CLASS: Forces zero bottom margin for tight stacking */
.mb-0 {
    margin-bottom: 0 !important; 
}

/* Specific styling for links inside the terminal history */
.terminal-link {
    color: var(--highlight);
    text-decoration: none;
    font-weight: bold;
    text-transform: none;
    transition: all 0.1s; /* Faster snap for terminal feel */
    display: inline-block;
    line-height: 1.5; /* Matches your terminal line height */
    padding: 0 2px; /* Tiny bit of breathing room for the highlight */

}

.terminal-link:hover {
    background-color: var(--mystic2); 
    color: #000 !important; /* Force text dark when background glows */
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 127, 0.3); 
    cursor: pointer;
}

.cmd-click {
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
    padding: 0 2px; /* Tiny bit of breathing room for the highlight */
}

.cmd-click:hover {
    background-color: var(--mystic2);
    color: #000 !important;
    border-radius: 2px;
}

/* --- THE TRIANGLE EASTER EGG (SOURCE GLOW) --- */

/* Ensure the normal state fades in and out very slowly */
.terminal-frame::after {
    transition: opacity 2s ease, filter 2s ease;
}

/* When the Easter Egg is activated */
.terminal-frame.source-active::after {
    opacity: 0.8; 
    
    /* THE OVERDRIVE STACK
       1. Brightness: Illuminates the dark bronze core slightly
       2. Tight shadow: The intensely hot edge (100% opacity)
       3. Mid shadow: The ambient aura (90% opacity)
       4. Wide shadow: The atmospheric bleed (50% opacity) */
    filter: brightness(1.3) 
            drop-shadow(0 0 8px rgba(0, 255, 127, 1)) 
            drop-shadow(0 0 25px rgba(0, 255, 127, 0.9)) 
            drop-shadow(0 0 60px rgba(0, 255, 127, 0.5));
}

/* --- dot-grid loading animation --- */
.loading-container {
      display: flex;
      align-items: center;
      gap: 12px;           /* space between grid and text */
      border:#555555 solid 1px;
      padding: 10px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      width: 12px;
      height: 12px;
      place-items: center; /* Ensures the dots stay perfectly centered in the smaller box */
    }

    .dot {
      width: 2px;
      height: 2px;
      background: var(--secondary);           /* very dark when off */
      border-radius: 50%;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
      --delay: 20s;
      animation: glow 0.24s infinite;
      animation-delay: var(--delay);
    }

    @keyframes glow {
      0%    { 
        background: var(--secondary); 
        box-shadow: 0 0 6px rgba(0,0,0,0.5); 
        transform: scale(1); 
      }
      15%   { 
        background: var(--mystic2); 
        box-shadow: 
          0 0 12px var(--mystic2),
          0 0 24px color-mix(in srgb, var(--mystic2) 60%, transparent),
          inset 0 0 6px var(--sattva-glow);
        transform: scale(1.18); 
      }
      35%   { 
        background: var(--mystic2); 
        box-shadow: 
          0 0 12px var(--mystic2),
          0 0 24px color-mix(in srgb, var(--mystic2) 60%, transparent),
          inset 0 0 6px var(--sattva-glow);
        transform: scale(1.12); 
      }
      50%   { 
        background: var(--secondary); 
        box-shadow: 0 0 6px rgba(0,0,0,0.5); 
        transform: scale(1); 
      }
      100%  { 
        background: var(--secondary); 
        box-shadow: 0 0 6px rgba(0,0,0,0.5); 
        transform: scale(1); 
      }
    }

    /* Timing — 9 steps × 0.12s = ~1.08s active + pause */
    .dot:nth-child(7) { animation: glow 1.8s infinite; animation-delay: 0.0s;  }
    .dot:nth-child(4) { animation: glow 1.8s infinite; animation-delay: 0.12s; }
    .dot:nth-child(1) { animation: glow 1.8s infinite; animation-delay: 0.24s; }
    .dot:nth-child(2) { animation: glow 1.8s infinite; animation-delay: 0.36s; }
    .dot:nth-child(3) { animation: glow 1.8s infinite; animation-delay: 0.48s; }
    .dot:nth-child(6) { animation: glow 1.8s infinite; animation-delay: 0.6s;  }
    .dot:nth-child(9) { animation: glow 1.8s infinite; animation-delay: 0.72s; }
    .dot:nth-child(8) { animation: glow 1.8s infinite; animation-delay: 0.84s; }
    .dot:nth-child(5) { animation: glow 1.8s infinite; animation-delay: 0.96s; }

    /* Optional: slightly brighter center when off */
    .dot.center {
      background: color-mix(in srgb, var(--tamas-color) 70%, var(--secondary));
    }

    .prompt {
      white-space: nowrap;
    }

    /* yantra loader */
    /* Set the SVG to exactly match the cap-height of 13px text */
    .yantra-loader {
      width: 14px;
      height: 14px;
      overflow: visible; /* Allows the glow to bleed outside the box */
    }

    /* Base styling for all lines */
    .tri-line {
      stroke: var(--secondary);
      stroke-width: 1.5;
      stroke-linecap: round; /* Gives the lines a smooth, premium tech edge */
      fill: none;
      /* Increased duration to 1.5s for a longer, smoother tail fade */
      animation: yantra-glow 1.5s infinite; 
    }

    /* The Chasing Glow Keyframes (Snake Effect) */
    @keyframes yantra-glow {
      0%, 10% { 
        stroke: var(--mystic2); /* Swapped to Mystic Green */
        filter: drop-shadow(0 0 5px var(--mystic-glow)); 
      }
      50%, 100% { 
        stroke: var(--secondary); 
        filter: none; 
      }
    }

    /* --- The Timing Sequence (Spiraling Inward) --- */
    /* Delays are perfectly spaced by 0.15s to match the 10% hold in the keyframes */
    /* Outer Triangle */
    .outer-top   { animation-delay: 0.0s; }
    .outer-right { animation-delay: 0.15s; }
    .outer-left  { animation-delay: 0.30s; }
    
    /* Inner Triangle */
    .inner-top   { animation-delay: 0.45s; }
    .inner-right { animation-delay: 0.60s; }
    .inner-left  { animation-delay: 0.75s; }

    /* ========================================= */
/* --- YANTRA DOT LOADER (Vertices Only) --- */
/* ========================================= */

/* Base styling for the dots */
    .yantra-dot {
      fill: var(--secondary);
      /* 0.9s duration makes the loop noticeably faster */
      animation: dot-glow 0.9s infinite; 
    }

    /* The Chasing Glow Keyframes for Dots */
    @keyframes dot-glow {
      0%, 16.66% { 
        fill: var(--mystic2); 
        filter: drop-shadow(0 0 5px var(--mystic-glow)); 
      }
      50%, 100% { 
        fill: var(--secondary); 
        filter: none; 
      }
    }

    /* --- The Timing Sequence (Clockwise Perimeter Chaser) --- */
    .dot-1 { animation-delay: 0.00s; } /* Top Left Corner */
    .dot-2 { animation-delay: 0.15s; } /* Top Midpoint */
    .dot-3 { animation-delay: 0.30s; } /* Top Right Corner */
    .dot-4 { animation-delay: 0.45s; } /* Right Midpoint */
    .dot-5 { animation-delay: 0.60s; } /* Bottom Center Corner */
    .dot-6 { animation-delay: 0.75s; } /* Left Midpoint */

    /* ========================================= */
    /* --- BUDDHI LOADER (8+1 Prakriti Spin) --- */
    /* ========================================= */

    /* The Center Dot: Purusha (Unchanging, permanently illuminated) */
    .buddhi-center {
        fill: var(--buddhi-active);
        filter: drop-shadow(0 0 4px var(--buddhi-glow));
    }

    /* The Outer Dots: Prakriti (Inherit standard 'off' color) */
    .buddhi-dot {
        fill: var(--secondary);
        /* 1.2s perfectly divides into our 8 animation frames */
        animation: buddhi-spin 1.2s infinite; 
    }

    /* The Chasing Glow Keyframes for the 8 Elements */
    @keyframes buddhi-spin {
        0%, 12.5% { 
            fill: var(--buddhi-active); 
            filter: drop-shadow(0 0 5px var(--buddhi-glow)); 
        }
        50%, 100% { 
        fill: var(--secondary); 
        filter: none; 
        }
    }

    /* --- The Timing Sequence (8-Step Clockwise Rotation) --- */
    /* Each delay is exactly 0.15s apart (1.2s total / 8 dots) */
    .b-dot-1 { animation-delay: 0.00s; } /* Top */
    .b-dot-2 { animation-delay: 0.15s; } /* Top Right */
    .b-dot-3 { animation-delay: 0.30s; } /* Right */
    .b-dot-4 { animation-delay: 0.45s; } /* Bottom Right */
    .b-dot-5 { animation-delay: 0.60s; } /* Bottom */
    .b-dot-6 { animation-delay: 0.75s; } /* Bottom Left */
    .b-dot-7 { animation-delay: 0.90s; } /* Left */
    .b-dot-8 { animation-delay: 1.05s; } /* Top Left */

    /* A custom text class so the loading text matches the cyan dots */
    .txt-buddhi {
    color: var(--buddhi-active);
    text-shadow: 0 0 5px var(--buddhi-glow);
    }

    .txt-anantam {
        color: var(--anantam-active);
        text-shadow: 0 0 5px var(--anantam-glow);
        font-weight: bold; /* Make it feel slightly heavier/louder */
    }

    /* --- AI CHAT STATE VISUALS --- */
    body.persona-acharya #cmd-input, 
    body.persona-acharya #prompt-symbol {
        color: var(--buddhi-active);
        text-shadow: 0 0 5px var(--buddhi-glow);
    }

    body.persona-anantam #cmd-input, 
    body.persona-anantam #prompt-symbol {
        color: var(--anantam-active);
        text-shadow: 0 0 5px var(--anantam-glow);
    }

    /* --- ADMIN / TESTING TEXT CLASSES --- */
    .txt-raw {
        color: var(--raw-active);
        text-shadow: none !important; /* Strips the glow for a naked terminal look */
    }

    .txt-jyotishi {
        color: var(--jyotishi-active);
        text-shadow: 0 0 5px var(--jyotishi-glow);
    }

    /* --- ADMIN CHAT STATE VISUALS --- */
    body.persona-raw #cmd-input, 
    body.persona-raw #prompt-symbol {
        color: var(--raw-active);
        text-shadow: none !important;
    }

    body.persona-jyotishi #cmd-input, 
    body.persona-jyotishi #prompt-symbol {
        color: var(--jyotishi-active);
        text-shadow: 0 0 5px var(--jyotishi-glow);
    }

    /* --- AI CHAT VISUAL DISTINCTION --- */
    .user-echo {
        opacity: 0.6; /* Dims the user's text */
        text-shadow: none !important; /* Removes the glowing effect */
        margin-bottom: 15px; /* Adds space before the bot replies */
        padding-left: 10px; /* Slight indent */
    }

    /* --- Textarea Specific Overrides --- */
    /* This keeps your 1.5rem grid but allows downward growth */
    textarea.cmd-input {
        resize: none;
        overflow-y: hidden;
        vertical-align: middle; 
        /* Ensures the text aligns with the prompt symbol */
        margin: 0; 
        font-size: inherit;  /* Forces it to match the old input size exactly */
        line-height: 1.5rem; 
    
        /* THE FIX: Strip out the browser's default textarea padding */
        padding-top: 0;
        padding-bottom: 0;
        box-sizing: border-box; /* Forces padding to stay inside your 1.5rem height */
    }

    .mask-text {
        -webkit-text-security: disc !important;
    }

    /* The Wheel Trigger */
    .easter-egg-trigger {
        position: relative;
        cursor: crosshair;
        transition: color 0.4s ease;
    }

    /* Glows with your primary bronze theme */
    .easter-egg-trigger:hover {
        color: var(--primary, #c5832b); 
        text-shadow: 0 0 8px rgba(197, 131, 43, 0.6);
    }

    /* The Ghost Text Setup */
    .easter-egg-trigger::after {
        content: '// try: init anantam';
        position: absolute;
        bottom: 140%; 
        left: 50%;
        transform: translateX(-50%);
        
        font-family: monospace;
        font-size: 0.85rem;
        white-space: nowrap; 
        
        /* Brighter bronze text with a dark outline to pop against the background */
        color: var(--primary, #e2a65a); 
        text-shadow: 0px 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(197, 131, 43, 0.5);
        
        opacity: 0;
        pointer-events: none; 
        transition: opacity 0.5s ease, transform 0.5s ease; 
    }

    /* Materialize and float up slightly when hovered */
    .easter-egg-trigger:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
    }

    .synth-visualizer {
        display: block;
        width: 100%;
        max-width: 40ch; /* Locks it to 40 characters wide */
        height: 40px;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        opacity: 1;
    }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    body {
        padding: 0.4rem; /* padding for the terminal screen border */
        align-items: stretch;
    }

    .auth-status {
        display: none !important;
    }
    
    .terminal-frame {
        max-width: 100%;
        height: 100%; /* Fill screen */
        border-color: var(--primary);
        border-radius: 4px;
      /*  border: none; */
        animation: none;
        box-shadow: none;
    }

    /* TIGHTEN MAIN CONTENT */
    .terminal-body {
        /* Match the 0.5rem spacing of your command line */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        
        /* Optional: Adjust top padding if needed */
        padding-top: 1rem; 
    }
    
    .window-bar {
        /* Keep title bar but maybe simpler on mobile */
        border-bottom: 1px solid #333;
    }

    .boot-line {
        font-size: 0.9em;
    }   

    /* 1. Stack the Header Text */
    .module-header {
        flex-wrap: wrap; /* Allows children to drop to the next line */
        padding: 0.5em 0; /* Add a little vertical touch-padding for thumbs */
    }

    .module-header .title {
        margin-right: 0; 
        width: calc(100% - 1.5em); /* Take up the rest of the top line next to the icon */
    }

    .module-header .status {
        width: 100%; /* Force it to dominate its own row */
        margin-left: 1.5em; /* Indent exactly past the 1.5em triangle icon */
        margin-top: 0.25em; /* Tiny breather between title and status */
        line-height: 1.3; 
    }

    /* 3. Fix the interior padding since the header is no longer absolute */
    .module-accordion.active .module-content {
        /* Top pad drops from 1.5em to 0.5em since the header is no longer overlapping */
        padding: 0.5em 0.5em 0.5em 1.5em; 
    }

    .tm-list li {
        /* This turns off the rigid flex columns on mobile */
        display: block; 
    }
    
    .tm-list strong {
        /* Adds a tiny bit of breathing room after the colon when wrapping */
        margin-right: 0.3rem; 
    }

    .tm-note {
        display: block !important;
        margin: 0;  /* Ensure they have breathing room */
    }

    .divider { font-size: 0.6rem; letter-spacing: -1px; }
    .pkg-link { flex-direction: column; align-items: flex-start; }
    .pkg-name { margin-bottom: 0.2rem; }

    .ascii-cmd {
        font-size: 0.55rem !important; /* Shrinks the text to fit the screen */
        line-height: 1.5 !important;   /* Tightens vertical gaps between the blocks */
        letter-spacing: 0 !important;  
    }

    .terminal-indent {
        padding-left: 2ch;  /* Wraps the second line to align with the start of the words */
        text-indent: -2ch;  /* Pulls the first line back to the left edge */
    }

    /* 2. TIGHTEN COMMAND BAR CONTAINER */
    .cmd-bar {
        margin-bottom: 0; /* Reduce gap below it */
        padding: 0.2rem 0;     /* Reduce internal padding */
        min-height: auto;      /* Remove any default minimum heights */
    }
    
    /* 3. SHORTEN THE INPUT FIELD */
    .cmd-input {
        height: 1.5rem;        /* Force a shorter height */
        /* font-size: 0.8rem;      Keep text readable */
        font-size: 16px; /* CRITICAL: 16px prevents iOS from zooming in */
        /* Ensure it doesn't have huge default padding */
        padding: 0; 
        width: 100%; /* Ensure it doesn't overflow the container */
    }

    /*
    .status-bar {
        display: none; 
    }
        */

    .status-center {
        display: none !important;
    }

    .external-nav {
        border-top: 1px solid var(--secondary);
        padding-top: 1rem;       /* Space between line and buttons */
        /* Extra breathing room on mobile */
        padding-bottom: 1rem; 
        margin-top: 0;           /* Pull it closer to the input line */
        
        /* Pro Move: Respect the iPhone "Home Swipe" area */
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}