/* ============================================================
   COWORK AudioAI — App Styles
   Edit this file to change UI appearance.
   ============================================================ */

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

body { font-family: 'Anuphan', sans-serif; background: #f0f2f5; }

.glass { background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* ── Transcript lines ─────────────────────────────────────── */
.tx-line { border-radius: 8px; padding: 10px 12px; margin-bottom: 2px; transition: background .15s; }
.tx-line:hover { background: #f8fafc; }
.tx-line.active-line { background: #f0fdf4; border-left: 3px solid #22c55e; }

/* ── Speaker badge colors (A/B/C/D) ──────────────────────── */
.spk-a { background: #dbeafe; color: #1d4ed8; }
.spk-b { background: #dcfce7; color: #15803d; }
.spk-c { background: #fef3c7; color: #b45309; }
.spk-d { background: #fce7f3; color: #9d174d; }

/* ── Clickable word spans ────────────────────────────────── */
.clickable-word { cursor: pointer; padding: 1px 3px; border-radius: 3px; transition: all .15s; }
.clickable-word:hover { background: #dbeafe; color: #1d4ed8; }
.word-active { background: #1d4ed8 !important; color: #fff !important; border-radius: 3px; }

/* ── Waveform ─────────────────────────────────────────────── */
#waveform-container { width: 100%; height: 56px; background: #f8fafc; border-radius: 8px; overflow: hidden; }

/* ── Scrollbars ───────────────────────────────────────────── */
.tx-scroll::-webkit-scrollbar       { width: 4px; }
.tx-scroll::-webkit-scrollbar-track { background: transparent; }
.tx-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ── Active tab ───────────────────────────────────────────── */
.tab-active { background: #111827; color: #fff !important; }

/* ── Context/tag pill ─────────────────────────────────────── */
.ctx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    color: #475569;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes pulse-ring { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
.processing-pulse { animation: pulse-ring 1.5s infinite; }

/* ── Progress step dots ───────────────────────────────────── */
.step-done    .dot { background: #22c55e; color: #fff; }
.step-current .dot { background: #6366f1; color: #fff; animation: pulse-ring 1.5s infinite; }
/* ── Print / PDF export ───────────────────────────────────────── */
@media print {
    nav, aside, #waveform-container, .no-print { display: none !important; }
    body { overflow: visible !important; background: #fff; }
    .flex-1.flex.overflow-hidden { display: block !important; overflow: visible !important; }
    #final-text-display { height: auto !important; overflow: visible !important; }
    .tab-panel.hidden { display: none !important; }
    #panel-transcript { display: block !important; }

    .tx-line { break-inside: avoid; padding: 6px 0; }
    .ctx-tag  { border: 1px solid #ccc !important; }

    @page { margin: 2cm; }
}