/* ══════════════════════════════════════════════════════════════
   TRAINING — SPA panel styles (SIM Desk, Agent Scoring, House
   Rules, Agent Progress). Self-contained — only relies on
   portal.css's shared --lmm-* tokens and base .lmm-* classes.
══════════════════════════════════════════════════════════════ */

.trn-wrap { display: flex; flex-direction: column; height: 100%; }

.trn-tabbar { display: flex; gap: 6px; flex-wrap: wrap; }
.trn-tab {
    background: var(--lmm-surface2); border: 1px solid var(--lmm-border); color: var(--lmm-text2);
    padding: 8px 16px; border-radius: var(--lmm-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.trn-tab:hover { border-color: var(--lmm-green); color: var(--lmm-text); }
.trn-tab.is-active { background: var(--lmm-green); border-color: var(--lmm-green); color: #fff; }

.trn-panel { display: none; flex: 1; min-height: 0; flex-direction: column; }
.trn-panel.is-active { display: flex; }

.trn-card { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 20px 22px; margin-bottom: 16px; }
.trn-card-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lmm-text2); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lmm-border); }
.trn-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lmm-text3); margin: 4px 0 10px; }
.trn-field { margin-bottom: 14px; }
.trn-field:last-child { margin-bottom: 0; }
.trn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trn-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.trn-readonly { background: var(--lmm-surface2) !important; color: var(--lmm-text2); }
.trn-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.trn-msg { padding: 9px 12px; border-radius: var(--lmm-radius-sm); font-size: 13px; margin: 10px 0; }
.trn-msg-success { background: rgba(82,176,67,.12); border: 1px solid rgba(82,176,67,.3); color: var(--lmm-green-light); }
.trn-msg-error   { background: rgba(224,82,82,.12); border: 1px solid rgba(224,82,82,.3); color: var(--lmm-danger); }
.trn-notice { background: var(--lmm-surface2); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius-sm); padding: 10px 12px; font-size: 12.5px; color: var(--lmm-text2); line-height: 1.5; }

/* ── Scenario / quiz cards ─────────────────────────────────────────────────── */
.trn-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.trn-pick-card { border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 16px; cursor: pointer; transition: all .15s; background: var(--lmm-surface); }
.trn-pick-card:hover { border-color: var(--lmm-green); }
.trn-pick-card.is-sel { border-color: var(--lmm-green); background: var(--lmm-green-glow); }
.trn-pick-title { font-size: 14px; font-weight: 700; color: var(--lmm-text); margin-bottom: 6px; }
.trn-pick-meta { font-size: 11.5px; color: var(--lmm-text3); display: flex; gap: 6px; flex-wrap: wrap; }
.trn-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.trn-b-easy { background: rgba(82,176,67,.15); color: var(--lmm-green-light); }
.trn-b-medium { background: rgba(245,158,11,.15); color: #e0a352; }
.trn-b-hard { background: rgba(224,82,82,.15); color: var(--lmm-danger); }
.trn-b-extreme { background: rgba(167,139,250,.15); color: #a78bfa; }

/* ── Chat conversation (live call practice) ───────────────────────────────── */
.trn-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.trn-chat-log { flex: 1; min-height: 200px; max-height: 420px; overflow-y: auto; background: var(--lmm-surface2); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.trn-msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.trn-msg-agent { align-self: flex-end; background: var(--lmm-green); color: #fff; border-bottom-right-radius: 3px; }
.trn-msg-debtor { align-self: flex-start; background: var(--lmm-surface3); color: var(--lmm-text); border-bottom-left-radius: 3px; }
.trn-chat-input-row { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.trn-mic-btn {
    width: 42px; height: 42px; border-radius: 50%; background: var(--lmm-surface2); border: 1px solid var(--lmm-border);
    color: var(--lmm-text2); font-size: 18px; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.trn-mic-btn.is-recording { background: var(--lmm-danger); border-color: var(--lmm-danger); color: #fff; animation: trn-pulse 1s infinite; }
@keyframes trn-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Score grid (call scoring criteria / rubric) ──────────────────────────── */
.trn-rubric-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--lmm-border); }
.trn-rubric-row:last-child { border-bottom: none; }
.trn-rubric-label { font-size: 13.5px; color: var(--lmm-text); }
.trn-rubric-input { width: 70px; text-align: center; }

/* ── KPI cards (Agent Progress) ───────────────────────────────────────────── */
.trn-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.trn-kpi { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 16px 18px; }
.trn-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lmm-text3); margin-bottom: 6px; }
.trn-kpi-value { font-size: 24px; font-weight: 700; color: var(--lmm-text); }

/* ── Module checklist ──────────────────────────────────────────────────────── */
.trn-module-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lmm-border); }
.trn-module-row:last-child { border-bottom: none; }
.trn-module-check { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.trn-module-check.is-done { background: var(--lmm-green); color: #fff; }
.trn-module-check.is-pending { background: var(--lmm-surface2); border: 1px solid var(--lmm-border); color: var(--lmm-text3); }
.trn-module-label { flex: 1; font-size: 13.5px; color: var(--lmm-text); }
.trn-module-date { font-size: 11.5px; color: var(--lmm-text3); }

/* ── House rules content ──────────────────────────────────────────────────── */
.trn-rule-card { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 18px 20px; margin-bottom: 14px; }
.trn-rule-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.trn-rule-num { width: 32px; height: 32px; border-radius: 50%; background: var(--lmm-green-glow); color: var(--lmm-green-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.trn-rule-title { font-size: 15px; font-weight: 700; color: var(--lmm-text); }
.trn-rule-subtitle { font-size: 11.5px; color: var(--lmm-text3); text-transform: uppercase; letter-spacing: .04em; }
.trn-rule-body { font-size: 13.5px; color: var(--lmm-text2); line-height: 1.6; margin-bottom: 10px; }
.trn-rule-checklist { list-style: none; padding: 0; margin: 0 0 10px; }
.trn-rule-checklist li { font-size: 13px; color: var(--lmm-text2); padding: 4px 0 4px 20px; position: relative; }
.trn-rule-checklist li::before { content: '✓'; position: absolute; left: 0; color: var(--lmm-green-light); font-weight: 700; }
.trn-rule-alert { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.3); border-radius: var(--lmm-radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--lmm-text2); line-height: 1.5; }
.trn-exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 14px 0; }
.trn-exp-item { display: flex; align-items: center; gap: 10px; background: var(--lmm-surface2); border-radius: var(--lmm-radius-sm); padding: 12px 14px; font-size: 13px; color: var(--lmm-text); }

/* ── Quiz ─────────────────────────────────────────────────────────────────── */
.trn-quiz-option { display: block; padding: 12px 16px; border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius-sm); margin-bottom: 8px; cursor: pointer; font-size: 13.5px; color: var(--lmm-text); transition: all .15s; }
.trn-quiz-option:hover { border-color: var(--lmm-green); }
.trn-quiz-option.is-sel { border-color: var(--lmm-green); background: var(--lmm-green-glow); }
.trn-quiz-option.is-correct { border-color: var(--lmm-green); background: rgba(82,176,67,.15); }
.trn-quiz-option.is-wrong { border-color: var(--lmm-danger); background: rgba(224,82,82,.1); }
.trn-quiz-progress { height: 6px; background: var(--lmm-surface2); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.trn-quiz-progress-bar { height: 100%; background: var(--lmm-green); transition: width .3s; }

/* ── Ported training module content (uses the original content's own class
   names — m-sub, m-section, script-box, m-table — restyled for this theme) ── */
.trn-module-content { font-size: 13.5px; color: var(--lmm-text2); line-height: 1.7; }
.trn-module-content h2 { font-size: 19px; font-weight: 700; color: var(--lmm-text); margin-bottom: 8px; }
.trn-module-content .m-sub { color: var(--lmm-text3); font-size: 13px; margin-bottom: 20px; }
.trn-module-content .m-section { margin-bottom: 22px; }
.trn-module-content .m-section h3 {
    font-size: 13px; font-weight: 700; color: var(--lmm-green-light); text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--lmm-border);
}
.trn-module-content .m-section p { margin-bottom: 10px; }
.trn-module-content .m-section ul { padding-left: 18px; margin-bottom: 10px; }
.trn-module-content .m-section li { margin-bottom: 5px; }
.trn-module-content .m-section li strong { color: var(--lmm-text); }
.trn-module-content .script-box {
    background: var(--lmm-surface2); border-left: 3px solid var(--lmm-green); border-radius: 0 var(--lmm-radius-sm) var(--lmm-radius-sm) 0;
    padding: 12px 16px; margin: 10px 0; font-style: italic; color: var(--lmm-text);
}
.trn-module-content .m-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.trn-module-content .m-table th, .trn-module-content .m-table td { padding: 8px 12px; border-bottom: 1px solid var(--lmm-border); text-align: left; }
.trn-module-content .m-table th { color: var(--lmm-text3); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }

/* ── Resource cards (training module grid — matches legacy layout: icon +
   title + description, colored tag pills, status footer) ──────────────────── */
.trn-resource-card {
    background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius);
    padding: 16px 18px; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; gap: 12px;
}
.trn-resource-card:hover { border-color: var(--lmm-green); }
.trn-rc-header { display: flex; gap: 12px; align-items: flex-start; }
.trn-rc-icon { font-size: 22px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--lmm-surface2); border-radius: var(--lmm-radius-sm); }
.trn-rc-meta h3 { font-size: 14px; font-weight: 700; color: var(--lmm-text); margin-bottom: 4px; }
.trn-rc-meta p { font-size: 12.5px; color: var(--lmm-text2); line-height: 1.5; }
.trn-rc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.trn-tag { padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; }
.trn-tag-blue { background: rgba(59,130,246,.15); color: #60a5fa; }
.trn-tag-purple { background: rgba(167,139,250,.15); color: #a78bfa; }
.trn-tag-gold { background: rgba(245,158,11,.15); color: #e0a352; }
.trn-tag-green { background: rgba(82,176,67,.15); color: var(--lmm-green-light); }
.trn-tag-red { background: rgba(224,82,82,.15); color: var(--lmm-danger); }
.trn-tag-orange { background: rgba(251,146,60,.15); color: #fb923c; }
.trn-rc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--lmm-border); }
.trn-rc-status { font-size: 12px; color: var(--lmm-text3); }
.trn-rc-status.is-done { color: var(--lmm-green-light); font-weight: 600; }

/* ── Live Call — 3-column layout matching the legacy simulator ────────────── */
.trn-lc-layout { display: grid; grid-template-columns: 240px 1fr 220px; gap: 16px; flex: 1; min-height: 0; }
.trn-lc-left { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); display: flex; flex-direction: column; overflow: hidden; }
.trn-lc-left-header { padding: 14px; border-bottom: 1px solid var(--lmm-border); }
.trn-lc-left-header h3 { font-size: 13px; font-weight: 700; color: var(--lmm-text); margin-bottom: 10px; }
.trn-type-btns { display: flex; gap: 5px; margin-bottom: 9px; }
.trn-type-btn { flex: 1; padding: 5px 6px; border-radius: 7px; border: 1px solid var(--lmm-border); background: none; color: var(--lmm-text3); font-size: 11px; font-weight: 600; cursor: pointer; }
.trn-type-btn.is-active { border-color: var(--lmm-green); color: var(--lmm-green-light); background: var(--lmm-green-glow); }
.trn-random-btn { width: 100%; padding: 8px; border-radius: 8px; background: var(--lmm-green); color: #fff; border: none; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.trn-random-btn:hover { opacity: .85; }
.trn-scenario-list { flex: 1; overflow-y: auto; padding: 8px; }
.trn-scenario-item { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--lmm-border); margin-bottom: 6px; cursor: pointer; background: var(--lmm-surface2); transition: all .15s; }
.trn-scenario-item:hover { border-color: var(--lmm-green); }
.trn-scenario-item.is-sel { border-color: var(--lmm-green); background: var(--lmm-green-glow); }
.trn-si-title { font-size: 12px; font-weight: 600; color: var(--lmm-text); margin-bottom: 5px; line-height: 1.3; }
.trn-si-meta { display: flex; gap: 4px; flex-wrap: wrap; }

.trn-lc-center { display: flex; flex-direction: column; align-items: center; gap: 14px; overflow-y: auto; min-width: 0; }
.trn-phone-chrome { width: 100%; max-width: 300px; flex-shrink: 0; background: linear-gradient(160deg, var(--lmm-surface2), var(--lmm-surface)); border: 1px solid var(--lmm-border); border-radius: 32px; padding: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.trn-phone-top { display: flex; justify-content: center; margin-bottom: 12px; }
.trn-phone-speaker { width: 40px; height: 5px; background: rgba(128,128,128,.25); border-radius: 99px; }
.trn-phone-screen { background: #04060e; border-radius: 20px; padding: 18px; min-height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.trn-ps-idle { text-align: center; }
.trn-ps-icon { font-size: 42px; margin-bottom: 10px; }
.trn-ps-label { font-size: 12px; color: rgba(255,255,255,.35); line-height: 1.6; }
.trn-ps-ringing { text-align: center; width: 100%; }
.trn-ring-pulse { width: 64px; height: 64px; border-radius: 50%; background: rgba(82,176,67,.15); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; animation: trn-ring-pulse 1s ease-in-out infinite; }
@keyframes trn-ring-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(82,176,67,.4); } 50% { box-shadow: 0 0 0 16px rgba(82,176,67,0); } }
.trn-ring-name { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.trn-ring-sub { font-size: 12px; color: rgba(255,255,255,.4); }
.trn-ps-active { width: 100%; text-align: center; }
.trn-active-name { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.trn-call-timer { font-size: 12px; color: var(--lmm-green-light); font-family: var(--lmm-mono); margin-bottom: 9px; }
.trn-call-bars { display: flex; align-items: flex-end; gap: 3px; justify-content: center; height: 18px; }
.trn-call-bars div { width: 4px; background: var(--lmm-green); border-radius: 2px; animation: trn-bar-bounce .8s ease-in-out infinite; }
.trn-call-bars div:nth-child(1) { height: 7px; animation-delay: 0s; }
.trn-call-bars div:nth-child(2) { height: 14px; animation-delay: .15s; }
.trn-call-bars div:nth-child(3) { height: 10px; animation-delay: .3s; }
.trn-call-bars div:nth-child(4) { height: 18px; animation-delay: .1s; }
.trn-call-bars div:nth-child(5) { height: 8px; animation-delay: .25s; }
@keyframes trn-bar-bounce { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.trn-speaking-indicator { display: none; align-items: center; gap: 3px; justify-content: center; margin-top: 8px; }
.trn-speaking-indicator.is-active { display: flex; }
.trn-speaking-indicator div { width: 4px; border-radius: 2px; background: var(--lmm-danger); animation: trn-sp-wave .6s ease-in-out infinite; }
.trn-speaking-indicator div:nth-child(1) { height: 6px; animation-delay: 0s; }
.trn-speaking-indicator div:nth-child(2) { height: 12px; animation-delay: .07s; }
.trn-speaking-indicator div:nth-child(3) { height: 18px; animation-delay: .14s; }
.trn-speaking-indicator div:nth-child(4) { height: 12px; animation-delay: .21s; }
.trn-speaking-indicator div:nth-child(5) { height: 6px; animation-delay: .28s; }
@keyframes trn-sp-wave { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.trn-speaking-indicator span { font-size: 10px; color: rgba(255,255,255,.4); margin-left: 6px; }
.trn-phone-btns { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 13px; }
.trn-ph-btn { padding: 10px 4px; border-radius: 12px; border: none; cursor: pointer; font-size: 10px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trn-ph-call { background: rgba(82,176,67,.14); color: var(--lmm-green-light); border: 1px solid rgba(82,176,67,.28); }
.trn-ph-call:hover:not(:disabled) { background: var(--lmm-green); color: #000; }
.trn-ph-hangup { background: rgba(224,82,82,.14); color: var(--lmm-danger); border: 1px solid rgba(224,82,82,.28); }
.trn-ph-hangup:hover:not(:disabled) { background: var(--lmm-danger); color: #fff; }
.trn-ph-mute { background: var(--lmm-surface2); color: var(--lmm-text2); border: 1px solid var(--lmm-border); }
.trn-ph-mute.is-active { background: rgba(224,82,82,.14); color: var(--lmm-danger); border-color: rgba(224,82,82,.3); }
.trn-ph-btn:disabled { opacity: .28; cursor: not-allowed; }

.trn-transcript-wrap { width: 100%; max-width: 560px; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.trn-mic-only-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; padding: 12px 16px; background: var(--lmm-surface2); border: 1px solid var(--lmm-border); border-radius: 14px; }
.trn-mic-push-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--lmm-border); cursor: pointer; background: rgba(82,176,67,.1); color: var(--lmm-green-light); font-size: 20px; flex-shrink: 0; transition: all .2s; }
.trn-mic-push-btn:hover:not(:disabled) { background: rgba(82,176,67,.22); border-color: var(--lmm-green); transform: scale(1.06); }
.trn-mic-push-btn.is-listening { background: rgba(224,82,82,.14); border-color: var(--lmm-danger); color: var(--lmm-danger); animation: trn-mic-ring 1s ease-in-out infinite; }
.trn-mic-push-btn:disabled { opacity: .22; cursor: not-allowed; }
@keyframes trn-mic-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(224,82,82,.45); } 50% { box-shadow: 0 0 0 12px rgba(224,82,82,0); } }
.trn-mic-instruction { font-size: 12px; color: var(--lmm-text3); line-height: 1.5; }
.trn-mic-instruction strong { color: var(--lmm-text); }
.trn-mic-live-text { font-size: 12.5px; color: var(--lmm-text2); font-style: italic; margin-top: 4px; }

.trn-lc-right { display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.trn-rp-label { font-size: 10px; font-weight: 700; color: var(--lmm-text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; }
.trn-rp-card { background: var(--lmm-surface2); border: 1px solid var(--lmm-border); border-radius: 9px; padding: 11px; font-size: 12px; }
.trn-mic-status-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
.trn-mic-test-badge { padding: 2px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; background: var(--lmm-surface3); color: var(--lmm-text3); }
.trn-mic-test-badge.is-ok { background: rgba(82,176,67,.15); color: var(--lmm-green-light); }
.trn-mic-test-badge.is-fail { background: rgba(224,82,82,.15); color: var(--lmm-danger); }
.trn-mic-level-bar { height: 8px; background: var(--lmm-surface3); border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.trn-mic-level-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--lmm-green), #e0a352); transition: width .05s linear; }
.trn-mic-transcript-box { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: 7px; padding: 7px 9px; font-size: 11px; color: var(--lmm-text3); min-height: 36px; font-style: italic; }
.trn-mic-transcript-box.has-text { color: var(--lmm-text); font-style: normal; }

.trn-mic-status-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lmm-text2); margin-top: 8px; }
.trn-mic-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lmm-text3); flex-shrink: 0; }
.trn-mic-status-dot.is-listening { background: var(--lmm-danger); animation: trn-pulse .8s infinite; }
.trn-mic-status-dot.is-thinking { background: #e0a352; animation: trn-pulse .8s infinite; }
.trn-mic-status-dot.is-speaking { background: var(--lmm-green); animation: trn-pulse .8s infinite; }
.trn-call-transcript { flex: 1; min-height: 160px; max-height: 280px; overflow-y: auto; background: var(--lmm-surface2); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.trn-sys-msg { text-align: center; font-size: 11.5px; color: var(--lmm-text3); font-style: italic; }

/* ── Feedback modal — scorecard style ──────────────────────────────────────── */
.trn-fb-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.8); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 30px 16px; }
.trn-fb-modal { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: 18px; padding: 26px; width: 100%; max-width: 460px; }
.trn-fb-header { text-align: center; margin-bottom: 18px; }
.trn-fb-score { font-size: 44px; font-weight: 800; color: var(--lmm-text); }
.trn-fb-grade { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lmm-text3); margin-bottom: 6px; }
.trn-fb-title { font-size: 16px; font-weight: 700; color: var(--lmm-text); }
.trn-fb-scale { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10.5px; color: var(--lmm-text3); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--lmm-border); }
.trn-fb-scale span { display: flex; align-items: center; gap: 4px; }
.trn-fb-scale i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.trn-fb-cat { margin-bottom: 12px; }
.trn-fb-cat-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; font-weight: 700; color: var(--lmm-text); }
.trn-fb-cat-bar-wrap { height: 5px; background: var(--lmm-surface2); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.trn-fb-cat-bar { height: 100%; border-radius: 99px; }
.trn-fb-cat-comment { font-size: 11px; color: var(--lmm-text3); line-height: 1.5; }

/* ── Rebuttal playbooks — accordion by client ──────────────────────────────── */
.trn-rb-playbook { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); margin-bottom: 12px; overflow: hidden; }
.trn-rb-playbook-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; }
.trn-rb-playbook-head:hover { background: var(--lmm-surface2); }
.trn-rb-pb-icon { font-size: 20px; }
.trn-rb-pb-title { font-size: 14px; font-weight: 700; color: var(--lmm-text); flex: 1; }
.trn-rb-pb-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--lmm-surface2); color: var(--lmm-text3); }
.trn-rb-pb-count { font-size: 11px; color: var(--lmm-text3); }
.trn-rb-playbook-body { display: none; padding: 0 16px 14px; }
.trn-rb-playbook.is-open .trn-rb-playbook-body { display: block; }
.trn-rb-objection { border-top: 1px solid var(--lmm-border); padding: 12px 0; }
.trn-rb-q { font-size: 13px; font-weight: 600; color: var(--lmm-text); margin-bottom: 8px; }
.trn-rb-a { font-size: 12.5px; color: var(--lmm-text2); line-height: 1.6; background: var(--lmm-surface2); border-left: 3px solid var(--lmm-green); border-radius: 0 8px 8px 0; padding: 10px 12px; margin-bottom: 8px; }
.trn-rb-practice-toggle { font-size: 12px; color: var(--lmm-green-light); cursor: pointer; font-weight: 600; }
.trn-rb-practice-body { display: none; margin-top: 10px; padding: 12px; background: var(--lmm-surface2); border-radius: 8px; }
.trn-rb-practice-body.is-open { display: block; }
.trn-rb-step-label { font-size: 10.5px; font-weight: 700; color: var(--lmm-text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

/* ── Quick References ──────────────────────────────────────────────────────── */
.trn-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.trn-qr-card { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 16px 18px; }
.trn-qr-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.trn-qr-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--lmm-border); font-size: 12.5px; }
.trn-qr-item:last-child { border-bottom: none; }
.trn-qr-code { font-weight: 700; min-width: 62px; flex-shrink: 0; }
.trn-qr-def { color: var(--lmm-text2); }

/* ── CRM Video Library ─────────────────────────────────────────────────────── */
.trn-video-section { margin-bottom: 22px; }
.trn-video-section-head { font-size: 13px; font-weight: 700; color: var(--lmm-text); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--lmm-border); }
.trn-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.trn-video-btn {
    display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px;
    background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius-sm);
    cursor: pointer; transition: all .15s; color: var(--lmm-text);
}
.trn-video-btn:hover { border-color: var(--lmm-green); }
.trn-video-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--lmm-green-glow); color: var(--lmm-green-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; }
.trn-video-text { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.trn-video-modal { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.85); display: none; align-items: center; justify-content: center; padding: 24px 16px; }
.trn-video-modal-inner { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: 16px; width: 100%; max-width: 900px; padding: 20px; }
.trn-video-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.trn-video-modal-header strong { font-size: 15px; color: var(--lmm-text); }
.trn-video-frame-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 10px; overflow: hidden; background: #000; }
.trn-video-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Sub-tab bar (Training Settings' nested config screens) ────────────────── */
.trn-subtabbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--lmm-border); }
.trn-subtab {
    background: var(--lmm-surface); border: 1px solid var(--lmm-border); color: var(--lmm-text2);
    padding: 6px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.trn-subtab:hover { border-color: var(--lmm-green); color: var(--lmm-text); }
.trn-subtab.is-active { background: var(--lmm-green-glow); color: var(--lmm-green-light); border-color: var(--lmm-green-dim); }
.trn-subpanel { display: none; }
.trn-subpanel.is-active { display: block; }

/* ── Daily Schedule ─────────────────────────────────────────────────────────── */
.trn-sched-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.trn-sched-card { background: var(--lmm-surface); border: 1px solid var(--lmm-border); border-radius: var(--lmm-radius); padding: 16px 18px; }
.trn-sched-card h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.trn-sched-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--lmm-border); font-size: 12.5px; }
.trn-sched-row:last-child { border-bottom: none; }
.trn-sched-time { font-weight: 700; color: var(--lmm-text3); min-width: 52px; flex-shrink: 0; font-size: 11px; text-transform: uppercase; }
.trn-sched-task { color: var(--lmm-text2); line-height: 1.4; }
.trn-sched-task strong { display: block; color: var(--lmm-text); margin-bottom: 2px; }

@media (max-width: 1100px) {
    .trn-grid-2, .trn-grid-3 { grid-template-columns: 1fr; }
    .trn-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}