/* Eye Exercise Timer */

#statusBadge {
    background-color: #6c757d;
    color: white;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#statusBadge.working { background-color: #0d6efd; }
#statusBadge.break { background-color: #20c997; }
#statusBadge.ready { background-color: #ffc107; color: #000; }
#statusBadge.completed { background-color: #198754; }

/* Main Visual */
.eye-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

/* Eye Container */
.eye-container {
    display: flex;
    gap: 30px;
    justify-content: center;
}

/* Eye */
.eye {
    width: 80px;
    height: 80px;
    position: relative;
}

.eye-white {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow:
        inset 0 -5px 15px rgba(0,0,0,0.1),
        0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .eye-white {
    background: linear-gradient(145deg, #e0e0e0, #c0c0c0);
}

.eye-iris {
    width: 40px;
    height: 40px;
    background: radial-gradient(circle at 30% 30%, #6b4423, #3d2817);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.eye-pupil {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle at 30% 30%, #1a1a1a, #000);
    border-radius: 50%;
    position: relative;
}

.eye-pupil::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
}

/* Eye animations */
.eye-visual.working .eye-iris {
    animation: eye-look-screen 4s ease-in-out infinite;
}

.eye-visual.break .eye-iris {
    transform: translateY(-8px);
    animation: eye-look-away 2s ease-in-out infinite;
}

.eye-visual.break .eye-white {
    background: linear-gradient(145deg, #d4edda, #c3e6cb);
}

/* Blinking animation */
.eye-visual.blink .eye-white {
    animation: blink 0.3s ease-in-out;
}

@keyframes eye-look-screen {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(5px, 2px); }
    50% { transform: translate(-5px, 0); }
    75% { transform: translate(3px, -2px); }
}

@keyframes eye-look-away {
    0%, 100% { transform: translateY(-8px); }
    50% { transform: translateY(-10px); }
}

@keyframes blink {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

/* Countdown */
.eye-countdown {
    font-size: 3rem;
    font-weight: 700;
    color: #0d6efd;
    font-family: 'Courier New', monospace;
    transition: color 0.3s ease;
}

.eye-visual.break .eye-countdown {
    color: #20c997;
}

.eye-visual.working .eye-countdown {
    color: #0d6efd;
}

/* Hint Text */
#hintText {
    color: var(--bs-body-color);
    min-height: 30px;
    max-width: 400px;
    margin: 0 auto;
}

.eye-visual.break ~ #hintText {
    color: #20c997;
    font-weight: 500;
}

/* Buttons */
#startBtn { transition: all 0.3s ease; }
#startBtn.btn-warning { color: #000; }
#resetBtn:hover:not(:disabled) { transform: rotate(-180deg); }

#settingsChevron { transition: transform 0.3s ease; }
[aria-expanded="true"] #settingsChevron { transform: rotate(180deg); }
#settingsCollapse .form-control:disabled { opacity: 0.5; }