/* base.css — Reset, typography, colors, animations, utilities */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f6f3eb;
    min-height: 100vh;
    color: #171717;
    line-height: 1.5;
}

.is-hidden {
    display: none !important;
}

/* Messages */
.message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 0.875rem;
}

.message.error { background: #fef2f2; color: #dc2626; }
.message.success { background: #f0fdf4; color: #059669; }

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pulse-record {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#file-input { display: none; }

/* Mobile browser compatibility */
/* Prevent zoom on input focus (iOS & Chrome mobile) */
input, select, textarea, button {
    font-size: 16px !important;
}

/* Prevent text selection during touch (all mobile browsers) */
button, .btn, .toggle-switch {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    -webkit-touch-callout: none;
    user-select: none;
}

/* iOS Safari keyboard handling */
@supports (-webkit-touch-callout: none) {
    .practice-script {
        height: calc(100vh - 400px);
        min-height: 200px;
    }
}

/* Chrome Android keyboard handling */
@supports not (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        .practice-script {
            height: calc(100dvh - 380px);
            min-height: 250px;
        }
    }
}