/* ── cpt/stt/stt.css ── Speech to Text Widget (Blocksy/Tutor LMS friendly) ── */

.lmsai-stt-widget,
.lmsai-stt-widget * {
    font-family: inherit;
    box-sizing: border-box;
}

.lmsai-stt-widget {
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin: 16px 0;
}

/* Header */
.lmsai-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
}

.lmsai-widget-icon {
    font-size: 18px;
    line-height: 1;
}

.lmsai-widget-title {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
}

/* Reference audio */
.lmsai-audio-wrapper {
    padding: 14px 16px 0;
}

.lmsai-reference-audio {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Target / instruction */
.lmsai-target-box {
    margin: 14px 16px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
}

.lmsai-target-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.lmsai-target-text,
.lmsai-target-placeholder {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.6;
}

/* Controls */
.lmsai-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 14px 16px 0;
}

.lmsai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    background: #ffffff;
    color: #0f172a;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.lmsai-btn:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.lmsai-btn:active:not(:disabled) {
    background: #f1f5f9;
}

.lmsai-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.lmsai-btn-record {
    border-color: #2563eb;
    color: #2563eb;
    background: #ffffff;
}

.lmsai-btn-stop {
    border-color: #dc2626;
    color: #dc2626;
    background: #ffffff;
}

.lmsai-btn-retry {
    width: 100%;
    justify-content: center;
    margin-top: 14px;
}

/* Local playback (must be on its own row) */
.lmsai-playback-wrap {
    padding: 0 16px 0;
}

.lmsai-audio-playback {
    display: none;
    width: 100%;
    max-width: 100%;
    margin-top: 15px;
}

/* Status bar */
.lmsai-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: #475569;
    min-height: 40px;
}

.lmsai-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cbd5e1;
    flex-shrink: 0;
}

.lmsai-status-bar.is-recording .lmsai-status-dot { background: #dc2626; }
.lmsai-status-bar.is-processing .lmsai-status-dot { background: #f59e0b; }
.lmsai-status-bar.is-done .lmsai-status-dot { background: #22c55e; }

/* Result */
.lmsai-result {
    border-top: 1px solid #f1f5f9;
    padding: 14px 16px 16px;
    background: #ffffff;
}

.lmsai-result[hidden] { display: none; }

.lmsai-result-header {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
}

.lmsai-result-transcript {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.lmsai-result-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.lmsai-result-value {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.6;
}

/* Highlighted transcript spans (override inline AI style) */
.lmsai-transcript-val span {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.1) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* Score */
.lmsai-result-score-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 12px 0;
}

.lmsai-score-ring {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 12px;
}

.lmsai-score-number {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: #0f172a;
}

.lmsai-score-number.score-high { color: #16a34a; }
.lmsai-score-number.score-mid { color: #d97706; }
.lmsai-score-number.score-low { color: #dc2626; }

.lmsai-score-max {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

/* Evaluation list (Tutor LMS-like) */
.lmsai-eval-list {
    border-top: 1px solid #f1f5f9;
    margin-top: 8px;
}

.lmsai-eval-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.lmsai-eval-row:last-child {
    border-bottom: none;
}

.lmsai-eval-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    flex: 0 0 auto;
    min-width: 140px;
}

.lmsai-eval-value {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    flex: 1 1 auto;
    text-align: left;
}

/* Tips (same list style) */
.lmsai-result-details {
    margin-top: 6px;
}

.lmsai-detail-item {
    border-top: 1px solid #f1f5f9;
    padding: 12px 0;
}

.lmsai-detail-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

.lmsai-detail-value {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}

/* Error */
.lmsai-error-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
}

@media (max-width: 768px) {
    .lmsai-widget-header { padding: 12px 14px; }
    .lmsai-audio-wrapper { padding: 12px 14px 0; }
    .lmsai-target-box { margin: 12px 14px 0; padding: 10px 12px; }
    .lmsai-controls { padding: 12px 14px 0; }
    .lmsai-playback-wrap { padding: 0 14px 0; }
    .lmsai-status-bar { padding: 10px 14px; }
    .lmsai-result { padding: 12px 14px 14px; }
    .lmsai-eval-label { min-width: 120px; }
}