@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@400;500;600&display=swap');

body { background: #0c0c0c !important; }

.jrn-headline { font-family: 'Playfair Display', Georgia, serif !important; }
.jrn-body     { font-family: 'Inter', system-ui, sans-serif !important; }

/* ── Question card ─────────────────────────────────── */
.jrn-q-card {
    border: 1px solid #2a2a2a;
    background: #141414;
    border-radius: 10px;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    margin-bottom: 10px;
    width: 100%;
}
.jrn-q-card:hover    { border-color: #eab308 !important; background: #1a1500 !important; }
.jrn-q-card.selected { border-color: #eab308 !important; background: #1c1800 !important; }

/* ── Blinking rec dot ──────────────────────────────── */
.rec-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: blink 1s step-start infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Live canvas waveform ───────────────────────────── */
.waveform-canvas-wrap {
    width: 100%;
    background: #111;
    border-radius: 10px;
    padding: 6px 8px;
    box-sizing: border-box;
    overflow: hidden;
}
#jrn-waveform-canvas {
    display: block;
    width: 100%;
    height: 72px;
    border-radius: 6px;
}

/* ── Pulsing "processing" label ────────────────────── */
.processing-label {
    color: #eab308 !important;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ── Answer bar in final transcript ────────────────── */
.answer-bar {
    border-left: 3px solid #eab308;
    padding: 8px 12px;
    color: #9ca3af;
    font-size: 0.9rem;
    margin-top: 4px;
    line-height: 1.65;
}

/* ── CAPTCHA gate ───────────────────────────────────── */
.captcha-box {
    border: 1px solid #2a2a2a;
    background: #141414;
    border-radius: 14px;
    padding: 36px 32px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.captcha-challenge {
    font-size: 2.4rem;
    font-weight: 700;
    color: #eab308;
    letter-spacing: 0.06em;
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    margin: 16px 0;
    user-select: none;
}
.captcha-input input {
    background: #0c0c0c !important;
    color: #e0e0e0 !important;
    font-size: 1.4rem !important;
    text-align: center !important;
    letter-spacing: 0.1em !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}
.captcha-error {
    color: #ef4444;
    font-size: 0.85rem;
    text-align: center;
    min-height: 1.2em;
    animation: shake 0.35s ease;
}
@keyframes shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}