/* ==========================================================================
   theSkyARC DOER | V6.0 Master Stylesheet (Chronos UI Update)
   ========================================================================== */

body, html { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #000; color: #00ffcc; font-family: 'Courier New', Courier, monospace; overflow: hidden; }

#authGate { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5,5,5,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(10px); }
.auth-box { border: 1px solid rgba(0,255,204,0.3); padding: 40px; background: rgba(17,17,17,0.7); text-align: center; max-width: 500px; box-shadow: 0 0 30px rgba(0,255,204,0.1); }

.btn { padding: 8px 12px; font-weight: bold; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all 0.3s ease; font-size: 11px; }
.btn-primary { background: rgba(0,255,204,0.1); color: #00ffcc; border-color: #00ffcc; }
.btn-primary:hover:not(:disabled) { background: #00ffcc; color: #000; box-shadow: 0 0 10px rgba(0,255,204,0.5); }

#unity-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; }
#unity-canvas { width: 100vw; height: 100vh; background: #050505; position: absolute; top: 0; left: 0; }

.glass-panel { background: rgba(10,10,10,0.85); backdrop-filter: blur(12px); border: 1px solid #333; box-shadow: 0 0 20px rgba(0,0,0,0.8); position: absolute; z-index: 10; }

#socraticBar { bottom: 20px; left: 50%; transform: translateX(-50%); width: 600px; padding: 15px; border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }

textarea { 
    width: 100%; height: 60px; background: rgba(0,0,0,0.6); color:#fff; 
    border:1px solid #444; padding: 10px; box-sizing: border-box; font-family: inherit; 
    resize: vertical; border-radius: 5px; transition: border-color 0.3s ease;
}
textarea:focus { outline: none; border-color: #00ffcc; background: rgba(15,15,15,0.95); }

#inspectorPanel { top: 20px; right: 20px; width: 350px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 15px; border-radius: 10px; }

details { margin-bottom: 8px; background: rgba(0,0,0,0.4); border: 1px solid #222; border-radius: 4px; }
summary { padding: 10px; cursor: pointer; font-weight: bold; background: rgba(25,25,25,0.8); color: #fff; list-style: none; display: flex; align-items: center; font-size: 12px; border-radius: 4px; transition: background 0.2s;}
summary:hover { background: rgba(40,40,40,0.9); }
summary::before { content: '►'; margin-right: 10px; font-size: 10px; color: #00ffcc; transition: transform 0.2s; }
details[open] summary::before { content: '▼'; }
.details-content { padding: 15px; border-top: 1px solid #222; display: flex; flex-direction: column; gap: 10px; }

.telemetry-box { color: #00ff00; font-size: 10px; overflow-y: auto; white-space: pre-wrap; background: rgba(0,0,0,0.8); padding: 10px; border: 1px solid #222; max-height: 120px; margin:0;}
#logBox { font-size: 11px; color: #888; background: rgba(5,5,5,0.8); padding: 10px; border: 1px solid #222; height: 80px; overflow-y: auto; margin:0; }

#socraticBuffer { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.95); border: 1px solid #00ffcc; padding: 20px; z-index: 999; text-align: center; box-shadow: 0 0 50px rgba(0,255,204,0.2); border-radius: 8px;}
#cinematicRender { max-width: 450px; height: auto; border: 1px solid #444; margin: 15px 0; }

.inspector-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; background: rgba(255,255,255,0.02); padding: 3px 6px; border: 1px solid rgba(255,255,255,0.05); border-radius: 2px; }
.label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 0.8px; font-weight: bold; }

/* FIXED NUMBER INPUT UX */
.num-input {
    width: 85px; /* Wider so numbers aren't blocked by spinners */
    background: #000;
    border: 1px solid #333;
    color: #00ffcc;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    text-align: right;
    padding: 6px 6px; /* Taller for easier clicking */
    border-radius: 3px;
    cursor: text; /* Explicitly forces the text-typing cursor */
}
.num-input:focus { border-color: #00ffcc; outline: none; box-shadow: 0 0 8px rgba(0,255,204,0.4); background: #111; }

select { width: 100%; background: #111; color: #eee; border: 1px solid #333; font-family: inherit; font-size: 11px; padding: 6px; margin-bottom: 8px; border-radius: 3px; cursor: pointer; }
select:hover { border-color: #555; }

/* ==========================================================================
   V6.0 CHRONOS MATRIX: TABBED INSPECTOR STYLES
   ========================================================================== */
.tab-header { 
    display: flex; 
    border-bottom: 1px solid #333; 
    margin-bottom: 15px; 
    position: sticky; 
    top: -15px; /* Sticks flush to the top of the glass panel */
    z-index: 100; 
    background: rgba(10,10,10,0.95); /* Prevents text from bleeding through */
    padding-top: 15px;
}
.tab-btn { flex: 1; background: rgba(0,0,0,0.5); color: #888; border: 1px solid transparent; padding: 10px 5px; font-size: 10px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.tab-btn:hover { color: #00ffcc; background: rgba(0, 255, 204, 0.1); }
.tab-btn.active { background: rgba(20,20,20,0.9); color: #00ffcc; border-top: 1px solid #00ffcc; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: none; }
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: flex; flex-direction: column; gap: 10px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* MASTER EXECUTE BUTTON */
.btn-execute { width: 100%; padding: 15px; background: rgba(0, 255, 100, 0.15); color: #00ff66; border: 1px solid #00ff66; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s ease; border-radius: 4px; margin-top: 15px;}
.btn-execute:hover { background: #00ff66; color: #000; box-shadow: 0 0 20px rgba(0, 255, 100, 0.4); }

/* NUMBER INPUTS (Replacing Sliders) */
.number-input { width: 100%; padding: 8px; background: #050505; color: #fff; border: 1px solid #444; font-family: inherit; font-size: 12px; box-sizing: border-box; }
.number-input:focus { border-color: #00ffcc; outline: none; }

/* FIXED NUMBER INPUT UX (Bypasses Unity WebGL Hijack) */
.num-input {
    width: 100%;
    background: #000;
    border: 1px solid #333;
    color: #00ffcc;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 8px;
    border-radius: 3px;
    cursor: text; /* Explicitly forces the text-typing cursor */
    box-sizing: border-box;
}
.num-input:focus { 
    border-color: #00ffcc; 
    outline: none; 
    box-shadow: 0 0 8px rgba(0,255,204,0.4); 
    background: #111; 
}
/* ==========================================================================
   V6.4 MOBILE UX OVERHAUL (iPhone SE / Mobile Devices)
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. Prevent iOS Auto-Zoom on inputs */
    input, select, textarea, .num-input {
        font-size: 16px !important; 
    }

    /* 2. Anchor Socratic Bar to the bottom, full width */
    #socraticBar {
        bottom: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        border-radius: 15px 15px 0 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
    }

    /* 3. The Slide-Away Inspector Panel */
    #inspectorPanel {
        top: auto !important;
        bottom: -100% !important; /* Hidden off-screen by default */
        right: 0 !important;
        width: 100vw !important;
        height: 80vh !important; /* Takes up 80% of screen when open */
        border-radius: 20px 20px 0 0 !important;
        transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1000;
        box-sizing: border-box;
    }

    /* JavaScript will add this class to slide it up */
    #inspectorPanel.mobile-open {
        bottom: 0 !important;
    }

    /* 4. Make Auth Gate fit mobile */
    .auth-box {
        width: 90vw;
        padding: 20px;
    }
    
    /* 5. Mobile UI Toggle Button (Visible only on phones) */
    #mobileMenuBtn {
        display: block !important;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 999;
        background: rgba(0, 255, 204, 0.2);
        color: #00ffcc;
        border: 1px solid #00ffcc;
        padding: 10px 15px;
        border-radius: 5px;
        font-weight: bold;
    }
}

/* Hide mobile button on Desktop */
#mobileMenuBtn { display: none; }