:root {
    --bg-color-light: #f4f7f6;
    --panel-bg-light: #ffffff;
    --text-color-light: #333;
    --header-bg-light: #e9ecef;
    --border-color-light: #e0e0e0;
    --input-bg-light: #fff;
    --input-shadow-light: inset 0 1px 2px rgba(0,0,0,0.075);
    --noise-indicator-bg-light: #e9ecef;

    --camera-feed-bg-light: #1a1a1a; /* Darker bg for camera "lens" */
    --camera-sclera-bg-light: #f0f0f0;
    --camera-iris-color-light: #3498db; /* Blue iris */
    --camera-pupil-bg-light: #0a0a0a;
    --camera-eyelid-color-light: #d3b397; /* Skin tone for eyelid */


    --bg-color-dark: #2c3e50;
    --panel-bg-dark: #34495e;
    --text-color-dark: #ecf0f1;
    --header-bg-dark: #1f2b38;
    --border-color-dark: #4a627a;
    --input-bg-dark: #2c3e50;
    --input-shadow-dark: inset 0 1px 2px rgba(0,0,0,0.2);
    --noise-indicator-bg-dark: #22303f;

    --camera-feed-bg-dark: #000;
    --camera-sclera-bg-dark: #c0c0c0; /* Slightly darker white */
    --camera-iris-color-dark: #2980b9; /* Darker blue iris */
    --camera-pupil-bg-dark: #050505;
    --camera-eyelid-color-dark: #a1887f; /* Darker skin tone for eyelid */


    --bg-color: var(--bg-color-light);
    --panel-bg: var(--panel-bg-light);
    --text-color: var(--text-color-light);
    --header-bg: var(--header-bg-light);
    --border-color: var(--border-color-light);
    --input-bg: var(--input-bg-light);
    --input-shadow: var(--input-shadow-light);
    --noise-indicator-bg: var(--noise-indicator-bg-light);

    --camera-feed-bg: var(--camera-feed-bg-light);
    --camera-sclera-bg: var(--camera-sclera-bg-light);
    --camera-iris-color: var(--camera-iris-color-light);
    --camera-pupil-bg: var(--camera-pupil-bg-light);
    --camera-eyelid-color: var(--camera-eyelid-color-light);

    --primary-color: #007bff;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --success-color: #2ecc71;
    --secondary-color: #95a5a6;

    --font-family-base: 'Roboto', 'Arial', sans-serif;
    --font-family-ar: 'Tajawal', 'Arial', sans-serif;
    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 6px 12px rgba(0,0,0,0.1);
    --border-radius: 10px;
}

body {
    font-family: var(--font-family-base);
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme {
    --bg-color: var(--bg-color-dark);
    --panel-bg: var(--panel-bg-dark);
    --text-color: var(--text-color-dark);
    --header-bg: var(--header-bg-dark);
    --border-color: var(--border-color-dark);
    --input-bg: var(--input-bg-dark);
    --input-shadow: var(--input-shadow-dark);
    --noise-indicator-bg: var(--noise-indicator-bg-dark);

    --camera-feed-bg: var(--camera-feed-bg-dark);
    --camera-sclera-bg: var(--camera-sclera-bg-dark);
    --camera-iris-color: var(--camera-iris-color-dark);
    --camera-pupil-bg: var(--camera-pupil-bg-dark);
    --camera-eyelid-color: var(--camera-eyelid-color-dark);
}

body.rtl {
    direction: rtl;
    font-family: var(--font-family-ar);
}

.app-header {
    padding: 10px 20px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-soft);
    z-index: 100;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-title-group { display: flex; align-items: center; gap: 10px; }
.app-logo { height: 35px; width: auto; }
.app-header h1 { margin: 0; font-size: 1.5em; color: var(--primary-color); font-weight: 700; }
.header-controls { display: flex; gap: 10px; }

#timerDisplay { font-size: 5.5em; font-weight: bold; margin: 20px 0; transition: color 0.3s ease; }
#timerDisplay.low-time { color: var(--danger-color); }
.input-group { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; font-size: 1.1em; }
.input-group input[type="number"], .sensitivity-control select { padding: 10px 12px; font-size: 1em; border: 1px solid var(--border-color); border-radius: 6px; text-align: center; background-color: var(--input-bg); color: var(--text-color); box-shadow: var(--input-shadow); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.input-group input[type="number"] { width: 90px; }
body.rtl .input-group input[type="number"] { text-align: right; }
#questionsDisplay { font-size: 1.6em; margin-top: 15px; }

.button { padding: 12px 22px; font-size: 1.15em; font-weight: 500; cursor: pointer; border: none; border-radius: 6px; margin: 6px; color: white; transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; font-family: inherit; box-shadow: var(--shadow-soft); }
.button:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-medium); }
.button:not(:disabled):active { transform: translateY(0px); box-shadow: var(--shadow-soft); }
.button:disabled { opacity: 0.7; cursor: not-allowed; }
.button-primary { background-color: var(--primary-color); }
.button-primary:hover:not(:disabled) { background-color: #0069d9; }
.button-warning { background-color: var(--warning-color); color: #333; }
.button-warning:hover:not(:disabled) { background-color: #e0a800; }
.button-danger { background-color: var(--danger-color); }
.button-danger:hover:not(:disabled) { background-color: #c82333; }
.button-secondary { background-color: var(--secondary-color); }
.button-secondary:hover:not(:disabled) { background-color: #829394; }
body.dark-theme .button-warning { color: #333; }

#noiseIndicatorContainer { width: 80%; max-width: 220px; height: 200px; background-color: var(--noise-indicator-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); position: relative; overflow: hidden; margin-bottom: 10px; transition: background-color 0.3s ease, border-color 0.3s ease; }
#noiseLevelBar { width: 100%; height: 0%; background-color: var(--success-color); position: absolute; bottom: 0; left: 0; transition: height 0.1s linear, background-color 0.3s ease; }
#noiseStatus { font-size: 1.3em; margin-top: 10px; font-weight: bold; }
.sensitivity-control { margin-top: 10px; margin-bottom: 6px; }
.sensitivity-control label { margin-right: 6px; font-size: 1.05em; }
body.rtl .sensitivity-control label { margin-right: 0; margin-left: 6px; }
#loudNoiseCountDisplay, #quietStreakDisplay { font-size: 1.05em; margin-top: 6px; margin-bottom: 6px; }
#loudNoiseCountDisplay span, #quietStreakDisplay span:last-child { font-weight: bold; color: var(--primary-color); }
#quietStreakDisplay span:last-child { min-width: 50px; display: inline-block; }

.instructions { font-size: 0.95em; color: #555; margin-top: 15px; max-width: 85%; line-height: 1.5; }
body.dark-theme .instructions { color: #bdc3c7; }

.fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2500; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; }
.fullscreen-overlay.visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out; }
#startupOverlay { background-color: rgba(0, 0, 0, 0.85); }
#startupText { font-size: 18vw; color: white; font-weight: bold; text-shadow: 0 0 20px rgba(255,255,255,0.5); }
#oneMinuteWarningOverlay { background-color: rgba(243, 156, 18, 0.92); }
#oneMinuteWarningText { font-size: 5vw; color: #333; font-weight: bold; text-align: center; padding: 20px; max-width: 80%;}
.noise-flag { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(231, 76, 60, 0.92); color: white; padding: 30px 50px; font-size: 2.5em; font-weight: bold; border-radius: var(--border-radius); z-index: 2000; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s; box-shadow: var(--shadow-medium); }
.noise-flag.visible { opacity: 1; visibility: visible; transition: opacity 0.4s ease-in-out; }
#themeToggleButton { font-size: 1.2em; padding-left: 15px; padding-right: 15px; }
h2 { margin-top: 0; margin-bottom: 20px; font-size: 2.2em; font-weight: 700; }

.app-container { display: flex; flex-grow: 1; width: 100%; padding: 15px; gap: 15px; }
.panel { flex: 1; padding: 25px; box-sizing: border-box; border: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--panel-bg); text-align: center; position: relative; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); transition: background-color 0.3s ease, border-color 0.3s ease; }

/* Enhanced Camera Eye Styles */
#camera-panel .instructions { margin-top: 10px; margin-bottom: 0; }
.camera-feed-container {
    width: 120px; /* Increased size for more detail */
    height: 120px;
    background-color: var(--camera-feed-bg);
    border: 4px solid #333;
    border-radius: 50%; /* Circular lens */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 15px auto;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6), 0 0 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.camera-eye { /* Sclera */
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at center, var(--camera-sclera-bg) 80%, color-mix(in srgb, var(--camera-sclera-bg) 90%, black));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For pseudo-element eyelids */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
    overflow: hidden; /* To contain iris */
}

/* Eyelids using pseudo-elements */
.camera-eye::before,
.camera-eye::after {
    content: '';
    position: absolute;
    left: -10%; /* Extend slightly beyond eye width */
    width: 120%;
    height: 0%; /* Start closed for animation (height 0 means eye open) */
    background-color: var(--camera-eyelid-color);
    z-index: 10;
    animation: blinkAnimation 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: background-color 0.3s ease;
}

.camera-eye::before { /* Top eyelid */
    top: 0;
    transform-origin: top;
    border-radius: 0 0 50% 50% / 0 0 100% 100%; /* Curved bottom edge */
}

.camera-eye::after { /* Bottom eyelid */
    bottom: 0;
    transform-origin: bottom;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; /* Curved top edge */
}


.camera-iris {
    width: 45px; /* Iris size */
    height: 45px;
    background: radial-gradient(circle at center, var(--camera-iris-color) 60%, color-mix(in srgb, var(--camera-iris-color) 80%, black));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
    position: relative; /* Relative to camera-eye */
    z-index: 1;
    animation: gazeAnimation 10s ease-in-out infinite;
    transition: background-image 0.3s ease; /* For radial gradient theming */
}

.camera-pupil {
    width: 20px; /* Pupil size */
    height: 20px;
    background-color: var(--camera-pupil-bg);
    border-radius: 50%;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.7);
    position: relative; /* For highlight */
    transition: background-color 0.3s ease;
}

.camera-highlight {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    box-shadow: 0 0 2px rgba(255,255,255,0.5);
}

@keyframes gazeAnimation {
    0%   { transform: translate(0px, 0px) scale(1); }
    10%  { transform: translate(-10px, 3px) scale(0.98); } /* Look left-up */
    20%  { transform: translate(-10px, 3px) scale(0.98); } /* Hold */
    30%  { transform: translate(0px, 0px) scale(1); }    /* Center */
    35%  { transform: translate(12px, -2px) scale(0.97); } /* Look right-down */
    50%  { transform: translate(12px, -2px) scale(0.97); } /* Hold */
    60%  { transform: translate(5px, 5px) scale(1); }   /* Look down-right */
    70%  { transform: translate(5px, 5px) scale(1); }   /* Hold */
    80%  { transform: translate(-3px, -8px) scale(0.99); } /* Look up-left */
    90%  { transform: translate(-3px, -8px) scale(0.99); } /* Hold */
    100% { transform: translate(0px, 0px) scale(1); }    /* Back to center */
}


@keyframes blinkAnimation {
    0%, 90%, 100% { height: 0%; } /* Eyelids open */
    93.5% { height: 50%; } /* Eyelids fully closed (covering 50% each from top/bottom) */
    97% { height: 0%; } /* Eyelids open again */
}


.rec-indicator {
    position: absolute;
    top: 5px; /* Adjusted position */
    background-color: var(--danger-color);
    color: white;
    padding: 1px 5px;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 3px;
    animation: blinkRec 1.5s infinite;
    z-index: 15;
}
body.rtl .rec-indicator { right: auto; left: 5px; }
body:not(.rtl) .rec-indicator { right: 5px; left: auto; }

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

@media (max-width: 820px) {
    .app-header { padding: 8px 15px; }
    .app-logo { height: 30px; }
    .app-header h1 { font-size: 1.3em; }
    .header-controls { gap: 8px; }
    .app-container { flex-direction: column; padding: 10px; gap: 10px; overflow-y: auto; }
    .panel { min-height: auto; padding: 20px; flex-shrink: 0; }
    #timerDisplay { font-size: 4em; }
    h2 { font-size: 1.8em; }
    #noiseIndicatorContainer { height: 150px; max-width: 180px; }

    .camera-feed-container { width: 100px; height: 100px; margin: 10px auto; }
    .camera-eye { width: 65px; height: 65px; }
    .camera-iris { width: 38px; height: 38px; }
    .camera-pupil { width: 16px; height: 16px; }
    .camera-highlight { width: 5px; height: 5px; top: 2px; left: 2px; }
    @keyframes gazeAnimation { /* Adjusted for smaller eye */
        0%   { transform: translate(0px, 0px) scale(1); }
        10%  { transform: translate(-7px, 2px) scale(0.98); }
        20%  { transform: translate(-7px, 2px) scale(0.98); }
        30%  { transform: translate(0px, 0px) scale(1); }
        35%  { transform: translate(8px, -1px) scale(0.97); }
        50%  { transform: translate(8px, -1px) scale(0.97); }
        60%  { transform: translate(3px, 3px) scale(1); }
        70%  { transform: translate(3px, 3px) scale(1); }
        80%  { transform: translate(-2px, -5px) scale(0.99); }
        90%  { transform: translate(-2px, -5px) scale(0.99); }
        100% { transform: translate(0px, 0px) scale(1); }
    }

    .noise-flag { font-size: 2em; padding: 25px 35px;}
    #loudNoiseCountDisplay, #quietStreakDisplay { font-size: 1em;}
    .input-group {font-size: 1em;}
    .input-group input[type="number"] {width: 70px;}
    .button {padding: 10px 18px; font-size: 1.1em;}
    #startupText { font-size: 25vw; }
    #oneMinuteWarningText { font-size: 7vw; }
}
@media (max-width: 480px) {
    .app-logo { height: 25px; }
    .app-header h1 { font-size: 1.1em; }
    #timerDisplay { font-size: 3em; }
    h2 { font-size: 1.5em; }
    .camera-feed-container { width: 80px; height: 80px; }
    .camera-eye { width: 50px; height: 50px; }
    .camera-iris { width: 28px; height: 28px; }
    .camera-pupil { width: 12px; height: 12px; }
    .camera-highlight { width: 4px; height: 4px; top: 1px; left: 1px; }
     @keyframes gazeAnimation { /* Further adjusted */
        0%   { transform: translate(0px, 0px) scale(1); }
        10%  { transform: translate(-5px, 1px) scale(0.98); }
        20%  { transform: translate(-5px, 1px) scale(0.98); }
        30%  { transform: translate(0px, 0px) scale(1); }
        35%  { transform: translate(6px, -1px) scale(0.97); }
        50%  { transform: translate(6px, -1px) scale(0.97); }
        60%  { transform: translate(2px, 2px) scale(1); }
        70%  { transform: translate(2px, 2px) scale(1); }
        80%  { transform: translate(-1px, -3px) scale(0.99); }
        90%  { transform: translate(-1px, -3px) scale(0.99); }
        100% { transform: translate(0px, 0px) scale(1); }
    }
    #startupText { font-size: 30vw; }
    #oneMinuteWarningText { font-size: 8vw; }
}