:root {
    --primary: #ffaa00;
    --primary-dim: rgba(255, 170, 0, 0.2);
    --bg-color: #030100;
    --text-color: #ffdd99;
    --panel-bg: rgba(15, 5, 0, 0.3);
    --border-color: rgba(255, 170, 0, 0.4);
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Rajdhani', sans-serif;
    height: 100vh;
    overflow: hidden;
    background-image: 
        linear-gradient(rgba(255,170,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,170,0,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
}

/* CRT EFFECTS */
.crt-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
    z-index: 999;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

.scanlines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 998;
    opacity: 0.6;
}

.hud-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}

/* HEADER */
.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-line {
    flex-grow: 1;
    height: 1px;
    background: var(--primary);
    opacity: 0.5;
    position: relative;
    box-shadow: 0 0 10px var(--primary);
}

.header-line::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    top: -4px;
    box-shadow: 0 0 15px var(--primary);
}
.header-line.left::after { right: 0; }
.header-line.right::after { left: 0; }

.title-block {
    text-align: center;
    padding: 0 40px;
}

/* GLITCH EFFECT */
.glitch {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    margin: 0;
    letter-spacing: 12px;
    color: var(--primary);
    position: relative;
    text-shadow: 0 0 20px var(--primary);
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff0000;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00ffff;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 82px, 0); }
    5% { clip: rect(32px, 9999px, 14px, 0); }
    10% { clip: rect(74px, 9999px, 99px, 0); }
    15% { clip: rect(0px, 0px, 0px, 0); }
    100% { clip: rect(0px, 0px, 0px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); }
    5% { clip: rect(12px, 9999px, 54px, 0); }
    10% { clip: rect(84px, 9999px, 29px, 0); }
    15% { clip: rect(0px, 0px, 0px, 0); }
    100% { clip: rect(0px, 0px, 0px, 0); }
}

.title-block p {
    font-size: 0.75rem;
    letter-spacing: 3px;
    margin: 5px 0 0 0;
    color: var(--primary);
    opacity: 0.7;
    text-shadow: 0 0 5px var(--primary);
}

/* MAIN LAYOUT */
.main-display {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
    padding-bottom: 20px;
    min-height: 0; /* Prevents text overflow from expanding layout vertically */
}

.panel {
    flex: 1;
    min-width: 0; /* Prevents flex children from stretching the panel */
    min-height: 0; /* Prevents vertical layout bloating from internal text */
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 0 20px var(--primary-dim);
    display: flex;
    flex-direction: column;
    position: relative;
    /* Angled corners for sci-fi look */
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

.corner-bracket {
    position: absolute;
    width: 25px; height: 25px;
    z-index: 5;
}
.corner-bracket.top-left { top: 0; left: 0; border-top: 3px solid var(--primary); border-left: 3px solid var(--primary); }
.corner-bracket.top-right { top: 0; right: 0; border-top: 3px solid var(--primary); border-right: 3px solid var(--primary); }
.corner-bracket.bottom-left { bottom: 0; left: 0; border-bottom: 3px solid var(--primary); border-left: 3px solid var(--primary); }
.corner-bracket.bottom-right { bottom: 0; right: 0; border-bottom: 3px solid var(--primary); border-right: 3px solid var(--primary); }

.panel-header {
    background: rgba(255, 170, 0, 0.15);
    padding: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
}

.panel-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Prevent inner text content from driving overall height */
}

.chart-container {
    height: 180px;
    width: 100%;
    margin-bottom: 20px;
}
.eq-container {
    height: 120px;
    margin: 0 0 20px 0; /* Align perfectly with panel-content boundaries */
}

/* THOR TACTICAL TERMINAL */
.thor-terminal {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
}

.thor-header {
    background: rgba(68, 187, 255, 0.15);
    color: #44bbff;
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #33aaff;
    letter-spacing: 2px;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(68, 187, 255, 0.2);
    text-shadow: 0 0 5px #44bbff;
}

.thor-metrics {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.metric-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
}

.metric-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.metric-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}

.metric-value.profit { color: #55ff55; text-shadow: 0 0 8px #55ff55; }
.metric-value.loss { color: #ff4444; text-shadow: 0 0 8px #ff4444; }

.thor-section-title {
    font-size: 0.7rem;
    color: var(--primary);
    border-bottom: 1px solid rgba(255, 170, 0, 0.3);
    margin-bottom: 8px;
    padding-bottom: 4px;
    letter-spacing: 1px;
}

.thor-portfolio, .thor-trades {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 5px;
    min-height: 0;
}

.thor-portfolio::-webkit-scrollbar, .thor-trades::-webkit-scrollbar { width: 3px; }
.thor-portfolio::-webkit-scrollbar-thumb, .thor-trades::-webkit-scrollbar-thumb { background: #44bbff; }

.thor-empty {
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    font-style: italic;
    padding: 10px;
}

.thor-item {
    display: flex;
    justify-content: space-between;
    background: rgba(68, 187, 255, 0.05);
    border-left: 2px solid #44bbff;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 0 4px 4px 0;
    align-items: center;
}

.thor-item.buy { border-color: #55ff55; background: rgba(85, 255, 85, 0.05); }
.thor-item.sell { border-color: #ff4444; background: rgba(255, 68, 68, 0.05); }

.item-sym { font-weight: bold; color: #fff; }
.item-qty { color: rgba(255, 255, 255, 0.7); font-size: 0.7rem;}
.item-pnl { font-weight: bold; font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; }
.item-pnl.profit { color: #55ff55; }
.item-pnl.loss { color: #ff4444; }

/* CENTER CORE & SVG HUD */
.center-core {
    flex: 1.5;
    min-width: 0; /* Prevents the 3D core layout from collapsing */
    min-height: 0; /* Keeps 3D viewport dimension bounds stable */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#three-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    mix-blend-mode: screen; 
    filter: drop-shadow(0 0 20px var(--primary));
}

#three-container canvas {
    display: block;
}

.svg-hud {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; height: 500px;
    z-index: 1;
    pointer-events: none;
}

.hud-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

.ring-1 { animation: spin 40s linear infinite; }
.ring-2 { animation: spin-reverse 30s linear infinite; }
.ring-3 { animation: spin 20s linear infinite; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }

.controls-overlay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#status-text {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 8px;
    color: var(--primary);
    font-size: 0.9rem;
    text-shadow: 0 0 10px var(--primary);
    margin-bottom: 20px;
}

.mic-btn {
    background: rgba(10, 5, 0, 0.8);
    border: 1px solid var(--primary);
    width: 65px; height: 65px;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.mic-glow {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    box-shadow: inset 0 0 15px var(--primary);
    transition: opacity 0.3s;
    opacity: 0.5;
}

.mic-btn:hover .mic-glow {
    opacity: 1;
    box-shadow: inset 0 0 30px var(--primary);
}

.mic-btn.active {
    border-color: #ff3300;
    color: #ff3300;
    animation: mic-pulse 0.8s infinite alternate;
}
.mic-btn.active .mic-glow {
    box-shadow: inset 0 0 40px #ff3300;
}

@keyframes mic-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(1.1); filter: brightness(1.5); }
}

.mic-btn svg { width: 26px; height: 26px; z-index: 2; }

/* TRANSCRIPT & TYPEWRITER */
.transcript {
    flex: 1;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    text-shadow: 0 0 5px rgba(255,170,0,0.5);
    min-height: 0; /* Ensure overflow scroll operates correctly */
}

.transcript::-webkit-scrollbar { width: 4px; }
.transcript::-webkit-scrollbar-track { background: transparent; }
.transcript::-webkit-scrollbar-thumb { background: var(--primary); }

.message {
    margin-bottom: 15px;
    line-height: 1.6;
    border-left: 2px solid transparent;
    padding-left: 10px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.message.user {
    color: #fff;
    opacity: 0.8;
    border-color: rgba(255,255,255,0.3);
}

.message.jarvis {
    color: var(--primary);
    border-color: var(--primary);
    background: linear-gradient(90deg, rgba(255,170,0,0.1), transparent);
}

.message.stark {
    color: #ff3344;
    border-color: #ff2233;
    background: linear-gradient(90deg, rgba(255, 34, 51, 0.1), transparent);
    text-shadow: 0 0 5px rgba(255, 34, 51, 0.3);
}

.message.thor {
    color: #44bbff;
    border-color: #33aaff;
    background: linear-gradient(90deg, rgba(51, 170, 255, 0.1), transparent);
    text-shadow: 0 0 5px rgba(51, 170, 255, 0.3);
}

.message.natasha {
    color: #aaaaaa;
    border-color: #888899;
    background: linear-gradient(90deg, rgba(136, 136, 153, 0.1), transparent);
    text-shadow: 0 0 5px rgba(136, 136, 153, 0.3);
}

.message.banner {
    color: #55ff55;
    border-color: #33ff33;
    background: linear-gradient(90deg, rgba(51, 255, 51, 0.1), transparent);
    text-shadow: 0 0 5px rgba(51, 255, 51, 0.3);
}

/* Typing cursor animation */
.typewriter-cursor {
    display: inline-block;
    width: 6px;
    height: 1em;
    background-color: var(--primary);
    animation: blink 0.8s infinite;
    vertical-align: bottom;
    margin-left: 4px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ==========================================
   6. DUAL-APPROVAL INTERCEPT CARD STYLING
   ========================================== */
.approval-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 5, 0, 0.85); /* Deep translucent orange-tint */
    backdrop-filter: blur(10px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s;
}

.approval-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.approval-card {
    background: rgba(15, 8, 2, 0.95);
    border: 2px solid #ff3300;
    box-shadow: 0 0 40px rgba(255, 51, 0, 0.4), inset 0 0 20px rgba(255, 51, 0, 0.2);
    width: 90%;
    max-width: 580px;
    padding: 30px;
    position: relative;
    clip-path: polygon(
        0% 0%, 93% 0%, 100% 7%, 
        100% 100%, 7% 100%, 0% 93%
    );
    animation: approval-glow 2s infinite alternate;
}

@keyframes approval-glow {
    0% { border-color: #ff3300; box-shadow: 0 0 25px rgba(255, 51, 0, 0.3); }
    100% { border-color: #ff6600; box-shadow: 0 0 45px rgba(255, 102, 0, 0.6); }
}

.approval-scanner-line {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #ff3300, transparent);
    animation: scan-vertical 3s linear infinite;
    z-index: 10;
}

@keyframes scan-vertical {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.approval-header {
    border-bottom: 1px solid rgba(255, 51, 0, 0.3);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.warning-blink {
    font-family: 'Orbitron', sans-serif;
    color: #ff3300;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 3px;
    animation: quick-flash 1s infinite steps(2);
    display: inline-block;
    margin-bottom: 5px;
}

@keyframes quick-flash {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px #ff3300; }
    50% { opacity: 0.2; text-shadow: none; }
}

.approval-header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
}

.approval-body {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 25px;
    line-height: 1.5;
}

.agent-name-highlight {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
}

.agent-name-highlight.stark {
    color: #ff3344;
    text-shadow: 0 0 8px rgba(255, 51, 68, 0.6);
}
.agent-name-highlight.thor {
    color: #44bbff;
    text-shadow: 0 0 8px rgba(68, 187, 255, 0.6);
}
.agent-name-highlight.natasha {
    color: #aaaaaa;
    text-shadow: 0 0 8px rgba(170, 170, 170, 0.6);
}
.agent-name-highlight.banner {
    color: #55ff55;
    text-shadow: 0 0 8px rgba(85, 255, 85, 0.6);
}
.agent-name-highlight.jarvis {
    color: var(--primary);
    text-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
}

.command-box {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 51, 0, 0.4);
    border-radius: 4px;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
}

.command-box code {
    font-family: 'Courier New', monospace;
    color: #ffaa00;
    font-size: 1rem;
    word-break: break-all;
    text-shadow: 0 0 4px rgba(255, 170, 0, 0.5);
}

.time-stamp {
    font-size: 0.85rem;
    font-family: 'Orbitron', sans-serif;
    opacity: 0.6;
    letter-spacing: 1px;
}

.approval-footer {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.btn {
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 12px 24px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    letter-spacing: 1px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 70%, 85% 100%, 0% 100%, 0% 30%);
}

.btn-deny {
    background: rgba(30, 5, 5, 0.6);
    border-color: #ff2222;
    color: #ff4444;
}

.btn-deny:hover {
    background: #ff2222;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 34, 34, 0.5);
}

.btn-approve {
    background: rgba(5, 30, 5, 0.6);
    border-color: #22ff22;
    color: #44ff44;
}

.btn-approve:hover {
    background: #22ff22;
    color: #000;
    box-shadow: 0 0 15px rgba(34, 255, 34, 0.5);
}