/* Slider Customization */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #0071e3;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: transparent;
    border-radius: 4px;
}

/* Toggle Active State (Handled by Tailwind classes in HTML, but helper here for JS logic) */
.toggle-btn.active {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dark .toggle-btn.active {
    background-color: #636366;
    color: #ffffff;
}

/* Verdict Backgrounds (Applied by JS) */
.verdict-container.verdict-bg-email {
    background-color: #eff6ff; /* Blue-50 */
    border-color: #bfdbfe;
}
.verdict-container.verdict-bg-borderline {
    background-color: #fefce8; /* Yellow-50 */
    border-color: #fef08a;
}
.verdict-container.verdict-bg-meeting {
    background-color: #f0fdf4; /* Green-50 */
    border-color: #bbf7d0;
}
.verdict-container.verdict-bg-special {
    background-color: #fdf2f8; /* Pink-50 */
    border-color: #fbcfe8;
}

/* Dark Mode Verdict Overrides */
.dark .verdict-container.verdict-bg-email { background-color: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); }
.dark .verdict-container.verdict-bg-borderline { background-color: rgba(234, 179, 8, 0.2); border-color: rgba(234, 179, 8, 0.3); }
.dark .verdict-container.verdict-bg-meeting { background-color: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.3); }
.dark .verdict-container.verdict-bg-special { background-color: rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.3); }

/* Text colors inside verdicts need to adapt in dark mode via simple override */
.dark .verdict-result { color: #fff; }

/* Animation: Shake */
@keyframes screenShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-0.5deg); }
  20%, 40%, 60%, 80% { transform: translateX(2px) rotate(0.5deg); }
}
.shake-it {
  animation: screenShake 0.3s cubic-bezier(.36,.07,.19,.97) both;
}