/* ============================================================
   Audio Recorder — recorder.css
   Light theme, centered, clean card UI.
   High-specificity selectors + !important to override themes.
   ============================================================ */

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

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --ear-bg:           #ffffff;
    --ear-border:       #e5e7eb;
    --ear-accent:       #7c3aed;
    --ear-accent-light: #a78bfa;
    --ear-accent-soft:  #ede9fe;
    --ear-red:          #ef4444;
    --ear-red-soft:     #fee2e2;
    --ear-green:        #16a34a;
    --ear-green-soft:   #dcfce7;
    --ear-text:         #111827;
    --ear-text-muted:   #6b7280;
    --ear-radius:       16px;
    --ear-radius-sm:    10px;
    --ear-font:         'Inter', system-ui, -apple-system, sans-serif;
    --ear-shadow:       0 4px 24px rgba(0, 0, 0, 0.08),
                        0 1px 4px  rgba(0, 0, 0, 0.04);
    --ear-transition:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   WRAPPER — light card, centered
   ══════════════════════════════════════════════════════════════ */
div.audio-recorder {
    font-family:   var(--ear-font) !important;
    background:    var(--ear-bg) !important;
    border:        1px solid var(--ear-border) !important;
    border-radius: var(--ear-radius) !important;
    box-shadow:    var(--ear-shadow) !important;
    padding:       28px 28px 24px !important;
    max-width:     500px !important;
    width:         100% !important;
    box-sizing:    border-box !important;
    color:         var(--ear-text) !important;
    position:      relative !important;
    overflow:      hidden !important;
    /* Center the card */
    margin:        24px auto !important;
    display:       block !important;
}

/* Soft accent stripe on top */
div.audio-recorder::before {
    content:     '' !important;
    position:    absolute !important;
    top:         0 !important;
    left:        0 !important;
    right:       0 !important;
    height:      3px !important;
    background:  linear-gradient(90deg, #7c3aed, #6366f1, #a78bfa) !important;
    border-radius: var(--ear-radius) var(--ear-radius) 0 0 !important;
}

/* ── Header ─────────────────────────────────────────────────── */
div.audio-recorder .ear-header {
    display:       flex !important;
    align-items:   center !important;
    gap:           10px !important;
    margin-bottom: 14px !important;
    margin-top:    4px !important;
}

div.audio-recorder .ear-mic-icon {
    font-size:   1.6rem !important;
    line-height: 1 !important;
}

div.audio-recorder .ear-title {
    font-family:    var(--ear-font) !important;
    font-size:      1.1rem !important;
    font-weight:    700 !important;
    letter-spacing: -0.01em !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    color:          var(--ear-text) !important;
    background:     none !important;
    -webkit-text-fill-color: var(--ear-text) !important;
    line-height:    1.3 !important;
}

/* ── Status bar ─────────────────────────────────────────────── */
div.audio-recorder .ear-status-bar {
    display:       flex !important;
    align-items:   center !important;
    gap:           8px !important;
    font-size:     0.82rem !important;
    color:         var(--ear-text-muted) !important;
    margin-bottom: 14px !important;
}

div.audio-recorder .ear-status-dot {
    width:        8px !important;
    height:       8px !important;
    border-radius:50% !important;
    background:   #d1d5db !important;
    flex-shrink:  0 !important;
    display:      inline-block !important;
    transition:   background var(--ear-transition), box-shadow var(--ear-transition) !important;
}

div.audio-recorder .ear-status-dot.ear-recording {
    background: var(--ear-red) !important;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6) !important;
    animation:  earPulse 1.1s ease-in-out infinite !important;
}

@keyframes earPulse {
    0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0);   }
}

div.audio-recorder .ear-status-text {
    color:     var(--ear-text-muted) !important;
    font-size: 0.82rem !important;
}

div.audio-recorder .ear-timer {
    margin-left:          auto !important;
    font-size:            0.85rem !important;
    font-weight:          600 !important;
    font-variant-numeric: tabular-nums !important;
    color:                var(--ear-accent) !important;
    letter-spacing:       0.04em !important;
}

/* ── Visualiser ─────────────────────────────────────────────── */
div.audio-recorder .ear-visualiser-wrap {
    background:    #f9fafb !important;
    border:        1px solid #e5e7eb !important;
    border-radius: var(--ear-radius-sm) !important;
    overflow:      hidden !important;
    height:        60px !important;
    margin-bottom: 18px !important;
    display:       flex !important;
    align-items:   center !important;
}

div.audio-recorder[data-state="recording"] .ear-visualiser-wrap {
    border-color: rgba(124, 58, 237, 0.4) !important;
    background:   #faf5ff !important;
}

div.audio-recorder[data-state="done"] .ear-visualiser-wrap {
    border-color: rgba(22, 163, 74, 0.3) !important;
}

div.audio-recorder .ear-canvas {
    width:   100% !important;
    height:  60px !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS — theme-resistant, pill shaped
   ══════════════════════════════════════════════════════════════ */
div.audio-recorder .ear-controls {
    display:       flex !important;
    flex-wrap:     wrap !important;
    gap:           10px !important;
    margin-bottom: 14px !important;
}

div.audio-recorder .ear-btn {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             7px !important;
    padding:         10px 22px !important;
    border:          none !important;
    border-radius:   50px !important;
    font-family:     var(--ear-font) !important;
    font-size:       0.875rem !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    transition:      transform var(--ear-transition), box-shadow var(--ear-transition) !important;
    white-space:     nowrap !important;
    text-decoration: none !important;
    outline:         none !important;
    line-height:     1.4 !important;
    letter-spacing:  0.01em !important;
}

div.audio-recorder .ear-btn:hover {
    text-decoration: none !important;
    transform:       translateY(-1px) !important;
}

div.audio-recorder .ear-btn:active {
    transform: scale(0.97) !important;
}

div.audio-recorder .ear-btn:disabled {
    opacity: 0.55 !important;
    cursor:  not-allowed !important;
    transform: none !important;
}

/* Start Recording — violet */
div.audio-recorder .ear-btn-record {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color:      #ffffff !important;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35) !important;
}

div.audio-recorder .ear-btn-record:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5) !important;
}

/* Stop — red */
div.audio-recorder .ear-btn-stop {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color:      #ffffff !important;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35) !important;
}

div.audio-recorder .ear-btn-stop:hover:not(:disabled) {
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.5) !important;
}

/* Re-record — light ghost */
div.audio-recorder .ear-btn-rerecord {
    background: #f3f4f6 !important;
    color:      #374151 !important;
    border:     1px solid #e5e7eb !important;
    box-shadow: none !important;
}

div.audio-recorder .ear-btn-rerecord:hover:not(:disabled) {
    background: #e5e7eb !important;
}

div.audio-recorder .ear-btn-icon {
    font-size:   1rem !important;
    line-height: 1 !important;
}

div.audio-recorder .ear-btn-label {
    color: inherit !important;
}

/* ── Progress bar ────────────────────────────────────────────── */
div.audio-recorder .ear-progress-wrap {
    margin-bottom: 12px !important;
}

div.audio-recorder .ear-progress-bar {
    background:    #f3f4f6 !important;
    border-radius: 50px !important;
    height:        8px !important;
    overflow:      hidden !important;
    margin-bottom: 6px !important;
    border:        1px solid #e5e7eb !important;
}

div.audio-recorder .ear-progress-fill {
    height:        100% !important;
    background:    linear-gradient(90deg, #7c3aed, #6366f1) !important;
    border-radius: 50px !important;
    width:         0% !important;
    transition:    width 0.3s ease !important;
}

div.audio-recorder .ear-progress-label {
    font-size: 0.78rem !important;
    color:     var(--ear-text-muted) !important;
}

/* ── Success result ──────────────────────────────────────────── */
div.audio-recorder .ear-result {
    display:       flex !important;
    align-items:   center !important;
    gap:           8px !important;
    background:    var(--ear-green-soft) !important;
    border:        1px solid #bbf7d0 !important;
    border-radius: var(--ear-radius-sm) !important;
    padding:       12px 16px !important;
    font-size:     0.875rem !important;
    margin-top:    4px !important;
    animation:     earFadeIn 0.35s ease !important;
}

div.audio-recorder .ear-result-icon {
    font-size:   1.1rem !important;
    flex-shrink: 0 !important;
}

div.audio-recorder .ear-result-text {
    color:       var(--ear-green) !important;
    font-weight: 600 !important;
    flex:        1 !important;
}

div.audio-recorder .ear-result-link {
    color:                 var(--ear-accent) !important;
    font-size:             0.8rem !important;
    text-decoration:       underline !important;
    text-underline-offset: 2px !important;
    white-space:           nowrap !important;
    font-weight:           500 !important;
    transition:            color var(--ear-transition) !important;
}

div.audio-recorder .ear-result-link:hover {
    color: #6d28d9 !important;
}

/* ── Error ──────────────────────────────────────────────────── */
div.audio-recorder .ear-error {
    display:       flex !important;
    align-items:   flex-start !important;
    gap:           8px !important;
    background:    var(--ear-red-soft) !important;
    border:        1px solid #fecaca !important;
    border-radius: var(--ear-radius-sm) !important;
    padding:       12px 16px !important;
    font-size:     0.83rem !important;
    margin-top:    8px !important;
    animation:     earFadeIn 0.3s ease !important;
}

div.audio-recorder .ear-error-icon {
    font-size:  1rem !important;
    flex-shrink:0 !important;
    margin-top: 1px !important;
}

div.audio-recorder .ear-error-text {
    color: #b91c1c !important;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes earFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 540px) {
    div.audio-recorder {
        padding:       20px 16px 18px !important;
        border-radius: 12px !important;
        margin:        16px auto !important;
    }

    div.audio-recorder .ear-controls {
        gap: 8px !important;
    }

    div.audio-recorder .ear-btn {
        padding:   9px 16px !important;
        font-size: 0.82rem !important;
    }
}