@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }

/* 1. BASE LAYOUT */
body { 
    background: #fdf6e9; 
    color: #1e293b; 
    height: 100vh; 
    overflow: hidden; 
    display: flex; flex-direction: column;
}

/* Allow scrolling ONLY if the browser window is shrunk too small */
.dashboard-container { 
    width: 100%; height: 100%; 
    display: flex; flex-direction: column; 
    position: relative; z-index: 1; background: transparent;
    overflow-y: auto; overflow-x: hidden;
}

/* Background Art: Sun and Cloud */
.dashboard-container::before {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 350px; height: 350px; background: #ffe484; 
    border-radius: 50%; z-index: -1;
}
.dashboard-container::after {
    content: ''; position: absolute; top: 180px; right: 240px;
    width: 120px; height: 40px; background: #ffffff; border-radius: 50px; z-index: -1;
    box-shadow: 40px -25px 0 10px #ffffff, 80px 0 0 0 #ffffff; 
    opacity: 0.8;
}

/* ==========================================================================
   2. RESPONSIVE TOP NAV BAR
   ========================================================================== */
.top-bar { 
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;
    padding: 15px 40px; 
    background: #ffffff; 
    border-bottom: 2px solid #e2e8f0; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    z-index: 100; position: relative;
    flex-shrink: 0;
}

.logo-section { display: flex; align-items: center; gap: 15px; flex: 1; min-width: 200px; }
.logo-circles { position: relative; width: 45px; height: 35px; flex-shrink: 0;}
.circle-purple { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #eb4c60; top: 3px; left: 0; z-index: 2; }
.circle-cyan { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #0097b2; bottom: 3px; right: 0; opacity: 0.9; }
.logo-text h1 { font-size: 24px; font-weight: 800; color: #1e293b; letter-spacing: 1px; line-height: 1; }
.logo-text p { font-size: 11px; color: #64748b; font-weight: 500; }

.mode-bar { display: flex; justify-content: center; gap: 10px; flex: 2; flex-wrap: wrap; min-width: 300px;}
.mode-btn { background: #f8fafc; color: #64748b; border: 2px solid transparent; padding: 10px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; cursor: pointer; transition: 0.3s; flex-shrink: 0;}
.mode-btn:hover { background: #f1f5f9; color: #1e293b; }
.mode-btn.active { background: #ffffff; border-color: #f7c04a; color: #1e293b; box-shadow: 0 8px 20px rgba(247, 192, 74, 0.2); }

.top-right-controls { display: flex; align-items: center; justify-content: flex-end; flex: 1; min-width: 200px; }
.network-badge { display: flex; align-items: center; gap: 10px; background: #f8fafc; padding: 8px 16px; border-radius: 20px; border: 1px solid #e2e8f0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background-color: #f43f5e; flex-shrink: 0; }
.dot.connected { background-color: #10b981; }
.net-text-group { display: flex; flex-direction: column; }
.net-title { font-size: 12px; color: #1e293b; font-weight: 700; line-height: 1.2; }
.net-sub { font-size: 10px; color: #64748b; }

/* ==========================================================================
   3. MAIN WORKSPACE (Flex-Start locks panels from shifting up/down)
   ========================================================================== */
.main-workspace { 
    display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; 
    flex: 1; padding: 20px 40px; gap: 30px; position: relative; 
}

/* Panels (Left & Right) */
.panel { 
    background: #ffffff; border: none; border-radius: 20px; padding: 20px; width: 280px; 
    flex-shrink: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.04); z-index: 20; 
    margin-top: 140px; /* Shifted further down to align directly with the 2nd ring / solid sphere */
}
.panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; }
.panel-icon { font-size: 18px; }
.panel-header h3 { font-size: 15px; font-weight: 700; color: #1e293b; }

/* Left Panel - Sub Modes */
.sub-mode-group { display: flex; flex-direction: column; gap: 8px; }
.sub-btn { display: flex; align-items: center; gap: 12px; background: transparent; border: none; color: #64748b; text-align: left; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s; width: 100%; }
.sub-btn .icon { font-size: 18px; }
.sub-btn:hover { background: #f8fafc; color: #1e293b; }
.sub-btn.active { background: #e0f2fe; color: #0097b2; border-left: 4px solid #0097b2; border-radius: 0 12px 12px 0; }

/* Right Panel - Smart Features */
/* Voice Segmented Switch (Just Talk / Hey SOVI) */
.voice-segment-container {
    display: flex;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
    gap: 6px;
    width: 100%;
}

.voice-segment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    padding: 10px 6px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    transition: 0.2s ease;
}

.voice-segment-btn:hover {
    color: #1e293b;
}

/* Exact badge color and border from current design */
.voice-segment-btn.active {
    background: #e0f2fe;
    color: #0097b2;
    border: 1px solid #0097b2;
    border-radius: 8px;
}
.toggle-group { display: flex; flex-direction: column; gap: 10px; }
.toggle-box { display: flex; justify-content: space-between; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; padding: 14px 16px; border-radius: 12px; font-weight: 600; font-size: 13px; cursor: pointer; transition: 0.3s; width: 100%; }
.toggle-box:hover { background: #f8fafc; border-color: #cbd5e1; }
.toggle-label { display: flex; align-items: center; gap: 12px; color: #1e293b; }
.toggle-label .icon { font-size: 16px; }
.toggle-box .state-indicator { background: #e0f2fe; color: #0097b2; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; border: 1px solid #0097b2; }
.toggle-box.off { background: #f8fafc; border-color: #f1f5f9; }
.toggle-box.off .toggle-label { color: #94a3b8; filter: grayscale(1); }
.toggle-box.off .state-indicator { background: #f1f5f9; color: #94a3b8; border-color: transparent; }

/* ==========================================================================
   4. CENTER STAGE (Titles, Cards, Sphere, Transcript)
   ========================================================================== */
.center-stage { 
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; 
    flex: 1; z-index: 10; width: 100%; position: relative;
    margin-top: 40px;
}

.stage-header { text-align: center; position: absolute; top: -40px; }
.stage-header h2 { font-size: 28px; font-weight: 800; color: #1e293b; letter-spacing: 1px; margin-bottom: 5px; }
.stage-header p { font-size: 14px; color: #64748b; font-weight: 500; }

.center-content-wrapper { 
    display: flex; flex-direction: row; justify-content: center; align-items: center; 
    gap: 40px; width: 100%; position: relative; 
    margin-top: 40px; /* Shifted up to match panels and make room */
}

/* THE MAGIC FIX: This Wrapper guarantees the rings have physical space! */
.sphere-wrapper { 
    position: relative; display: flex; justify-content: center; align-items: center; 
    width: 480px; height: 480px; /* Matches the biggest ring physically! */
    z-index: 5; flex-shrink: 0; margin: 0 auto;
}

.ring { position: absolute; border-radius: 50%; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ring-1 { width: 280px; height: 280px; border: 2px dotted rgba(0, 151, 178, 0.4); animation: spin 20s linear infinite; } 
.ring-1::after { content: ''; position: absolute; top: 15px; left: 40px; width: 8px; height: 8px; background: #0097b2; border-radius: 50%; box-shadow: 0 0 10px #0097b2; }
.ring-2 { width: 380px; height: 380px; border: 1px solid rgba(247, 192, 74, 0.4); animation: spin-reverse 30s linear infinite; } 
.ring-2::after { content: ''; position: absolute; top: 50%; right: -3px; width: 7px; height: 7px; background: #f7c04a; border-radius: 50%; box-shadow: 0 0 8px #f7c04a; }
.ring-3 { width: 480px; height: 480px; border: 1px solid rgba(235, 76, 96, 0.15); } 

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

/* Dynamic Sphere Styles */
.center-core {
    position: absolute; width: 220px; height: 220px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 5;
    transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s;
}
.center-core:hover { transform: scale(1.05); }
#particleCanvas { position: absolute; width: 100%; height: 100%; border-radius: 50%; z-index: 6; }

.core-idle { background: #0097b2; box-shadow: 0 15px 35px rgba(0, 151, 178, 0.3); } 
.core-listening { background: linear-gradient(135deg, #f7c04a 0%, #eb4c60 100%); box-shadow: 0 15px 35px rgba(235, 76, 96, 0.4); } 
.core-thinking { background: #8b5cf6; box-shadow: 0 15px 35px rgba(139, 92, 246, 0.3); } 
.core-speaking { background: #eb4c60; box-shadow: 0 15px 35px rgba(235, 76, 96, 0.4); } 
.core-sleeping { background: #e0f2fe; box-shadow: 0 15px 35px rgba(0, 151, 178, 0.15); } /* Soft Pastel Blue sleeping state */

/* Debate Cards */
.debate-card { width: 220px; background: #ffffff; border: none; padding: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); pointer-events: auto; z-index: 4; flex-shrink: 0;}
.debate-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.debate-card p { font-size: 13px; color: #64748b; line-height: 1.5; margin-bottom: 15px; font-weight: 500; }
.card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; }

.affirmative { border-left: 4px solid #10b981; }
.affirmative h4 { color: #10b981; }
.affirmative .card-icon { background: #d1fae5; color: #10b981; }

.negative { border-right: 4px solid #f43f5e; }
.negative h4 { color: #f43f5e; }
.negative .card-icon { background: #ffe4e6; color: #f43f5e; }

/* THE MAGIC FIX: STATUS AND TRANSCRIPT CONTAINERS */
.status-container {
    position: relative; 
    display: flex; flex-direction: column; align-items: center;
    width: 100%; z-index: 50; 
    gap: 8px; 
    padding-bottom: 5px; 
    margin-top: -10px; /* Shifted the status text and transcript further down */
}

/* Status Box & Mic Icon */
.status-box { 
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: #0097b2; 
    background: #ffffff; 
    padding: 8px 24px; border-radius: 30px; border: 1px solid #0097b2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}
.status-mic { width: 16px; height: 16px; color: #0097b2; } 

/* Centered Transcript Box (NOW PUSHES LAYOUT PROPERLY) */
.transcript-box {
    position: relative; 
    width: 100%; max-width: 850px; 
    max-height: 175px; /* Increased to perfectly fit 4 full lines and the header */
    overflow-y: auto; 
    background: #ffffff; border: 2px solid transparent; 
    border-radius: 20px; 
    padding: 10px 25px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.10); 
    animation: fadeIn 0.3s ease-out; 
}
.transcript-header { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.speaker-name { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.transcript-text-content { font-size: 15px; color: #475569; line-height: 1.6; font-weight: 500; }

.transcript-box.user-speaking { border-color: #0097b2; }
.user-speaking .avatar { background: #e0f2fe; color: #0097b2; }
.user-speaking .speaker-name { color: #0097b2; }

.transcript-box.sovi-speaking { border-color: #eb4c60; }
.sovi-speaking .avatar { background: #ffe4e6; color: #eb4c60; }
.sovi-speaking .speaker-name { color: #eb4c60; }

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

/* ==========================================================================
   5. BOTTOM CONTROL BAR
   ========================================================================== */
.bottom-bar { 
    display: flex; justify-content: center; align-items: center; 
    padding: 20px 40px; background: #ffffff; 
    border-top: 2px solid #e2e8f0; box-shadow: 0 -4px 15px rgba(0,0,0,0.02);
    width: 100%; z-index: 100; position: relative; 
    margin-top: auto; /* Pushes it to the bottom */
    flex-shrink: 0;
}

.student-reset-btn {
    background: #eb4c60; color: #ffffff; border: none; font-size: 16px;
    font-weight: 700; padding: 12px 35px; letter-spacing: 1px; border-radius: 40px;
    cursor: pointer; transition: 0.3s; box-shadow: 0 8px 20px rgba(235, 76, 96, 0.3);
}
.student-reset-btn:hover { background: #e11d48; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(225, 29, 72, 0.4); }

/* ==========================================================================
   MODALS
   ========================================================================== */
.hidden { display: none !important; }

.action-btn { background: #eb4c60; color: white; border: none; padding: 12px; border-radius: 12px; width: 100%; cursor: pointer; margin-top: 10px; font-weight: 600; transition: 0.2s;}
.action-btn:hover { background: #e11d48; }

/* Secondary action button for viewing speeches */
.action-btn.secondary { 
    background: #0097b2; 
    margin-top: 8px; 
}
.action-btn.secondary:hover { 
    background: #008197; 
}

.pill-btn { background: #e2e8f0; color: #1e293b; padding: 10px 20px; border: none; border-radius: 20px; cursor: pointer; font-weight: 600;}
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(253, 246, 233, 0.9); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(4px); }
.modal-card { background: #ffffff; padding: 30px; border-radius: 24px; border: none; width: 400px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }

/* Wide Modal for Speech Management */
.wide-modal { 
    width: 580px; 
    max-width: 92vw; 
    max-height: 85vh; 
}

.modal-card h2 { color: #1e293b; font-size: 20px; font-weight: 700; }
.modal-card label { color: #64748b; font-size: 13px; font-weight: 600;}
.modal-card input, .modal-card textarea { background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; padding: 12px; border-radius: 10px; outline: none; font-size: 14px;}
.modal-card input:focus, .modal-card textarea:focus { border-color: #0097b2; }

/* Speech List & Edit UI */
.speech-list-container { 
    max-height: 400px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    padding-right: 5px; 
}

.speech-item-card { 
    background: #f8fafc; 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 14px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
}

.speech-triggers-wrap { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
}

.speech-trigger-tag { 
    background: #e0f2fe; 
    color: #0097b2; 
    font-size: 11px; 
    font-weight: 700; 
    padding: 3px 8px; 
    border-radius: 6px; 
    border: 1px solid rgba(0, 151, 178, 0.3); 
}

.speech-item-body { 
    font-size: 13px; 
    color: #334155; 
    line-height: 1.5; 
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.speech-item-actions { 
    display: flex; 
    justify-content: flex-end; 
    gap: 8px; 
}

.sm-btn { 
    padding: 6px 14px; 
    font-size: 12px; 
    border-radius: 8px; 
    border: none; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.2s;
}
.sm-btn-edit { 
    background: #0097b2; 
    color: #ffffff; 
}
.sm-btn-edit:hover { 
    background: #008197; 
}
.sm-btn-delete { 
    background: #fee2e2; 
    color: #ef4444; 
}
.sm-btn-delete:hover { 
    background: #fecaca; 
}

.shutdown-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fdf6e9; display: flex; justify-content: center; align-items: center; z-index: 9999; }
.shutdown-content { text-align: center; color: #1e293b; }
.shutdown-content h1 { color: #0097b2; font-size: 32px; font-weight: 800; margin-bottom: 10px;}
.hold-wake-container { position: relative; width: 140px; height: 140px; margin: 40px auto; display: flex; justify-content: center; align-items: center; }
.wake-btn { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: #eb4c60; color: #ffffff; border: none; font-weight: 700; font-size: 15px; cursor: pointer; z-index: 2; box-shadow: 0 8px 20px rgba(235, 76, 96, 0.3);}
.progress-ring { position: absolute; top: 0; left: 0; z-index: 1; transform: rotate(-90deg); }
.progress-ring__circle { transition: stroke-dashoffset 0.05s linear; stroke-linecap: round; stroke: #f7c04a; }
.video-modal-card { background: #ffffff; padding: 20px; border-radius: 24px; width: 90vw; max-width: 1100px; height: 80vh; max-height: 750px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }

.video-wrapper { flex: 1; border-radius: 12px; overflow: hidden; background: #000; position: relative; width: 100%; height: 100%; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Word Boost Slider & Card Styling */
.boost-badge {
    background: #e0f2fe;
    color: #0097b2;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(0, 151, 178, 0.3);
}

.boost-slider {
    width: 100%;
    accent-color: #0097b2;
    cursor: pointer;
    height: 6px;
    background: #e2e8f0;
    border-radius: 4px;
    outline: none;
}

.boost-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boost-progress-bg {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

.boost-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0097b2, #f7c04a);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Kiosk Exit Button on Sleep Screen */
.kiosk-exit-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    background: rgba(235, 76, 96, 0.12);
    color: #eb4c60;
    border: 1.5px solid #eb4c60;
    border-radius: 25px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10000;
}

.kiosk-exit-btn:hover {
    background: #eb4c60;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(235, 76, 96, 0.35);
    transform: translateY(-1px);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1200px) {
    .dashboard-container { overflow-y: auto; } /* Restores scrolling for minimized tabs and mobile */
    .main-workspace { flex-direction: column; align-items: center; }
    .panel { width: 100%; max-width: 450px; align-self: center; margin-top: 20px;}
    .center-stage { margin-top: 40px; margin-bottom: 20px; }
    .stage-header { position: relative; top: 0; } 
    .center-content-wrapper { flex-wrap: wrap; margin-top: 20px; }
}

@media (max-width: 768px) {
    .top-bar { flex-direction: column; text-align: center; gap: 20px; }
    .logo-section { justify-content: center; width: 100%; }
    .top-right-controls { justify-content: center; width: 100%; }
    
    .main-workspace { padding: 15px; gap: 20px; }
    .panel { margin-top: 0; width: 100%; max-width: 350px; }
    .center-stage { margin-top: 0; }
    
    .stage-header { position: relative; margin-bottom: 10px; top: 0; } /* Fixes overlap on mobile */
    .center-content-wrapper { flex-direction: column; gap: 20px; margin-top: 0; }
    .debate-card { width: 100%; max-width: 350px; }
    
    /* SHRUNK RINGS FOR MOBILE SO THEY DON'T OVERLAP CONTENT */
    .sphere-wrapper { width: 340px; height: 340px; margin: 20px auto; }
    .center-core { width: 160px; height: 160px; }
    .ring-1 { width: 200px; height: 200px; }
    .ring-2 { width: 260px; height: 260px; }
    .ring-3 { width: 340px; height: 340px; }
}