/* SunfirePal — live Medicare compliance coach.
   Branded for Sunfire / Walmart Insurance Services per SUNFIRE_DESIGN_SPEC.md.
   Responsive system-wide themes: default light, media dark override. */
:root {
  /* Common config */
  --font-outfit: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  --radius-control: 0.375rem;
  --radius-modal: 0.75rem;
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────────────── */
  /* ☀️ LIGHT MODE (Default System-Wide Theme)                 */
  /* ──────────────────────────────────────────────────────── */
  --sunfire-blue:       #2b71da;          /* Brand Blue */
  --sunfire-blue-dark:  #1f56a8;
  --sunfire-navy:       #0f1b2e;          /* Navy headings */
  --sunfire-text:       #1e293b;          /* Main dark text */
  --sunfire-gray:       #5b6878;          /* Muted label gray */
  --sunfire-border:     #dde3ee;          /* Solid light border */
  --sunfire-light-bg:   #f5f7fb;          /* Main light canvas background */
  --sunfire-pal-grad:   linear-gradient(135deg, #5bb3ff 0%, #2b71da 100%);
  --sunfire-blue-chip:  #e0ebfb;

  /* Surfaces */
  --surface-card:       #ffffff;
  --surface-pop:        #ffffff;
  --surface-pill:       rgba(15, 27, 46, 0.04);
  --topbar-bg:          rgba(255, 255, 255, 0.85);
  --input-bg:           #ffffff;

  /* State - Success */
  --ok-fill: #10b981; --ok-text: #065f46; --ok-bg: #ecfdf5; --ok-border: #a7f3d0; --ok-emph: #15803d;
  /* State - Warning */
  --warn-dot: #f59e0b; --warn-text: #92400e; --warn-bg: #fef3c7; --warn-border: #fcd34d;
  /* State - Error */
  --err: #dc2626; --err-head: #991b1b; --err-bg: #fef2f2; --err-border: #fecaca;

  /* Dynamic backgrounds */
  --bubble-customer-bg: #f5f7fb;
  --suggested-line-bg:  #f5f7fb;
  --warning-item-bg:    #f5f7fb;
  --disclosure-item-bg: #f5f7fb;
  --plan-card-bg:        #ffffff;

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(15, 27, 46, 0.05);
  --shadow-hover: 0 8px 24px rgba(43, 113, 218, 0.1);
  --shadow-float: 0 16px 36px rgba(15, 27, 46, 0.16);

  --bg-gradient: 
    radial-gradient(at 10% 20%, rgba(43, 113, 218, 0.03) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(43, 113, 218, 0.01) 0px, transparent 50%);
}


body.dark-theme {
  /* 🌙 DARK MODE (User Selection Override Theme)              */
  --sunfire-blue:      #3b82f6;          /* Neon Accent Blue */
  --sunfire-blue-dark: #1d4ed8;
  --sunfire-navy:      #f8fafc;          /* High contrast headings */
  --sunfire-text:      #cbd5e1;          /* Main soft light text */
  --sunfire-gray:      #94a3b8;          /* Muted label color */
  --sunfire-border:    rgba(255, 255, 255, 0.09); /* Glass borders */
  --sunfire-light-bg:  #080b11;          /* Space canvas background */
  --sunfire-pal-grad:  linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --sunfire-blue-chip: rgba(59, 130, 246, 0.15);

  /* Surfaces */
  --surface-card:      rgba(15, 23, 42, 0.65);
  --surface-pop:       rgba(20, 30, 54, 0.95);
  --surface-pill:      rgba(255, 255, 255, 0.04);
  --topbar-bg:         rgba(8, 11, 17, 0.85);
  --input-bg:          rgba(255, 255, 255, 0.05);

  /* State - Success */
  --ok-fill: #10b981; --ok-text: #34d399; --ok-bg: rgba(16, 185, 129, 0.09); --ok-border: rgba(16, 185, 129, 0.2); --ok-emph: #10b981;
  /* State - Warning */
  --warn-dot: #f59e0b; --warn-text: #fbbf24; --warn-bg: rgba(245, 158, 11, 0.09); --warn-border: rgba(245, 158, 11, 0.2);
  /* State - Error */
  --err: #ef4444; --err-head: #f87171; --err-bg: rgba(239, 68, 68, 0.09); --err-border: rgba(239, 68, 68, 0.2);

  /* Dynamic backgrounds */
  --bubble-customer-bg: rgba(255, 255, 255, 0.05);
  --suggested-line-bg:  rgba(255, 255, 255, 0.03);
  --warning-item-bg:    rgba(255, 255, 255, 0.02);
  --disclosure-item-bg: rgba(255, 255, 255, 0.02);
  --plan-card-bg:        rgba(255, 255, 255, 0.02);

  /* Shadows */
  --shadow-card:  0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 12px 28px rgba(59, 130, 246, 0.15);
  --shadow-float: 0 24px 48px rgba(0, 0, 0, 0.5);

  --bg-gradient: 
    radial-gradient(at 10% 20%, rgba(59, 130, 246, 0.1) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.08) 0px, transparent 50%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--sunfire-light-bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--sunfire-text);
  min-height: 100vh;
  font-size: 14.5px;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-outfit); font-weight: 600; color: var(--sunfire-navy); }
.hidden { display: none !important; }
.eyebrow { font-family: var(--font-outfit); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sunfire-gray); }

/* ── Dynamic Layout Engine for Training Mode ── */
body.training-idle-mode .grid {
  grid-template-columns: 1fr;
  max-width: 1200px;
  padding: 24px;
}
body.training-idle-mode .col-coach,
body.training-idle-mode .col-side,
body.training-idle-mode .transcript-card {
  display: none !important;
}
body.training-idle-mode #training-panel {
  width: 100%;
}
body.training-idle-mode .personas-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

/* ── Big warning banner ── */
.warning-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px; color: #fff;
  background: linear-gradient(90deg, #991b1b, #ef4444);
  box-shadow: 0 10px 40px rgba(239, 68, 68, 0.35);
  animation: bannerIn 0.2s cubic-bezier(0.16, 1, 0.3, 1), bannerPulse 1.2s ease-in-out infinite alternate;
  backdrop-filter: blur(8px);
}
@keyframes bannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes bannerPulse { 0% { filter: brightness(0.95); } 100% { filter: brightness(1.15); } }
.warning-banner .wb-icon { font-size: 30px; line-height: 1; }
.warning-banner .wb-body { flex: 1; }
.warning-banner .wb-title { font-family: var(--font-outfit); font-weight: 800; letter-spacing: 0.08em; font-size: 12px; color: rgba(255,255,255,0.8); }
.warning-banner .wb-text { font-size: 16px; font-weight: 700; margin-top: 1px; }
.warning-banner .wb-dismiss {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: var(--radius-control); cursor: pointer; font-size: 12px;
  display: grid; place-items: center; transition: background 0.15s;
}
.warning-banner .wb-dismiss:hover { background: rgba(255,255,255,0.3); }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; 
  background: var(--topbar-bg); 
  border-bottom: 1px solid var(--sunfire-border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand .wmc-logo { 
  height: 32px; 
  width: auto; 
  background: rgba(255, 255, 255, 0.08); 
  padding: 4px 10px; 
  border-radius: var(--radius-control);
}
.brand .divider { width: 1px; height: 28px; background: var(--sunfire-border); }
.brand .product { display: flex; align-items: center; gap: 9px; }
.brand .palbot { width: 28px; height: 28px; border-radius: 50%; background: var(--sunfire-pal-grad); padding: 5px; }
.brand h1 { font-size: 15px; font-weight: 600; line-height: 1.1; color: var(--sunfire-navy); }
.brand .tagline { font-size: 10px; color: var(--sunfire-gray); font-weight: 500; }
.topbar-controls { display: flex; align-items: center; gap: 14px; }
.status-pill {
  font-size: 10.5px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--surface-pill); color: var(--sunfire-gray); border: 1px solid var(--sunfire-border);
  font-weight: 600;
}
.status-pill.ok { color: var(--ok-fill); background: var(--ok-bg); border-color: var(--ok-border); }
.status-pill.err { color: var(--err-head); background: var(--err-bg); border-color: var(--err-border); }
.mode-toggle, .loop-toggle { font-size: 11.5px; color: var(--sunfire-gray); cursor: pointer; user-select: none; transition: color 0.15s; font-weight: 500; }
.mode-toggle:hover, .loop-toggle:hover { color: var(--sunfire-navy); }
.mic-btn {
  background: var(--sunfire-blue); color: #fff; border: none; padding: 8px 16px;
  border-radius: var(--radius-control); font-weight: 600; cursor: pointer; font-size: 12.5px;
  transition: all 0.2s; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.mic-btn:hover { background: var(--sunfire-blue-dark); transform: translateY(-1px); }
.mic-btn.active { background: var(--err); animation: micPulse 1.4s infinite; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.mic-status { font-size: 11.5px; color: var(--sunfire-gray); min-width: 96px; }

/* ── Grid ── */
.grid {
  display: grid; grid-template-columns: 1fr 1.1fr 1fr;
  gap: 16px; padding: 18px 24px; align-items: start; max-width: 1600px; margin: 0 auto;
}
@media (max-width: 1200px) { .grid { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--surface-card); border: 1px solid var(--sunfire-border);
  border-radius: var(--radius-modal); padding: 18px; box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-head h2 { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sunfire-navy); }
.count-badge {
  font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-pill);
  background: var(--sunfire-blue-chip); color: #60a5fa;
}
.hint { font-size: 11.5px; color: var(--sunfire-gray); margin-bottom: 12px; line-height: 1.4; }
.feed-placeholder, .transcript-placeholder {
  color: var(--sunfire-gray); font-size: 12.5px; padding: 20px 4px; text-align: center;
  border: 1px dashed var(--sunfire-border); border-radius: var(--radius-control);
  background: var(--sunfire-light-bg);
}

/* ── Transcript ── */
.transcript-card { max-height: 52vh; display: flex; flex-direction: column; }
.call-summary { font-size: 10.5px; color: var(--sunfire-gray); font-style: italic; max-width: 55%; text-align: right; }
.transcript { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 12px; font-size: 13px; animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bubble .who { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 3px; display: block; text-transform: uppercase; }
.bubble.agent { align-self: flex-end; background: var(--sunfire-blue); color: #fff; border-bottom-right-radius: 2px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }
.bubble.agent .who { color: #93c5fd; }
.bubble.customer { align-self: flex-start; background: var(--bubble-customer-bg); border: 1px solid var(--sunfire-border); color: var(--sunfire-text); border-bottom-left-radius: 2px; }
.bubble.customer .who { color: var(--sunfire-gray); }
.bubble.inaudible { align-self: flex-start; background: transparent; border: 1px dashed var(--sunfire-border); color: var(--sunfire-gray); font-style: italic; }
.bubble.flagged { box-shadow: 0 0 0 2px var(--err); }
.interim { font-size: 11.5px; color: var(--sunfire-gray); font-style: italic; min-height: 18px; padding: 4px 2px; }

/* ── Demo player ── */
.player-stage { font-size: 11px; color: #60a5fa; font-weight: 700; }
.script-select, .cat-select, .zip-input, .query-input {
  background: var(--input-bg); border: 1px solid var(--sunfire-border); color: var(--sunfire-text);
  border-radius: var(--radius-control); padding: 8px 10px; font-size: 13px; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.script-select:focus, .cat-select:focus, .zip-input:focus, .query-input:focus {
  outline: none; border-color: var(--sunfire-blue); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}
.script-select { width: 100%; margin-bottom: 10px; }
.player-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-primary { 
  background: var(--sunfire-blue); color: #fff; border: none; padding: 8px 14px; 
  border-radius: var(--radius-control); font-weight: 700; cursor: pointer; font-size: 13px;
  transition: all 0.2s; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}
.btn-primary:hover { background: var(--sunfire-blue-dark); transform: translateY(-1px); }
.btn-ghost { 
  background: transparent; color: var(--sunfire-gray); border: 1px solid var(--sunfire-border); 
  padding: 8px 12px; border-radius: var(--radius-control); cursor: pointer; font-size: 13px;
  transition: all 0.15s;
}
.btn-ghost:hover:not(:disabled) { background: var(--sunfire-light-bg); color: var(--sunfire-navy); border-color: var(--sunfire-blue); }
.btn-ghost:disabled { opacity: 0.35; cursor: default; }
.script-meta { font-size: 12px; color: var(--sunfire-gray); margin-top: 10px; }

/* ── Coach ── */
.grade { font-size: 18px; font-weight: 900; padding: 2px 12px; border-radius: var(--radius-control); }
.grade-A { background: var(--ok-bg); color: var(--ok-emph); }
.grade-B { background: var(--sunfire-blue-chip); color: #60a5fa; }
.grade-C { background: var(--warn-bg); color: var(--warn-text); }
.grade-bad { background: var(--err-bg); color: var(--err-head); }
.grade-none { background: var(--sunfire-light-bg); color: var(--sunfire-gray); border: 1px solid var(--sunfire-border); }
.encouragement {
  background: var(--ok-bg); border-left: 3px solid var(--ok-fill);
  padding: 9px 12px; border-radius: var(--radius-control); font-size: 13px; color: var(--ok-text); min-height: 18px;
}
.encouragement:empty { display: none; }
.coach-block { margin-top: 12px; }
.coach-label { font-size: 10px; font-weight: 800; letter-spacing: 0.07em; color: var(--sunfire-gray); margin-bottom: 4px; text-transform: uppercase; }
.suggested-line { background: var(--suggested-line-bg); border: 1px solid var(--sunfire-border); border-left: 3px solid var(--sunfire-blue); border-radius: var(--radius-control); padding: 10px 12px; font-size: 14px; color: var(--sunfire-navy); font-weight: 700; }
.next-action, .rapport { font-size: 13px; color: var(--sunfire-text); }
.ask-row { display: flex; gap: 8px; margin-top: 14px; }
.query-input { flex: 1; }

/* ── Warnings feed ── */
.warnings-card { max-height: 46vh; display: flex; flex-direction: column; }
.warnings-feed { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.warning-item { border-radius: var(--radius-control); padding: 11px 13px; border: 1px solid var(--sunfire-border); border-left: 4px solid var(--warn-dot); background: var(--warning-item-bg); animation: fadeIn 0.2s ease-out; }
.warning-item.high { border-left-color: var(--err); background: var(--err-bg); }
.warning-item.medium { border-left-color: var(--warn-dot); background: var(--warn-bg); }
.warning-item.low { border-left-color: var(--warn-dot); }
.wi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.wi-sev { font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: var(--radius-control); letter-spacing: 0.05em; }
.wi-sev.high { background: var(--err); color: #fff; }
.wi-sev.medium { background: var(--warn-dot); color: #2a1500; }
.wi-sev.low { background: var(--warn-dot); color: #2a2200; }
.wi-label { font-size: 13px; font-weight: 800; color: var(--sunfire-navy); }
.wi-quote { font-size: 12px; color: var(--sunfire-gray); font-style: italic; margin: 3px 0; }
.wi-quote b { color: #f87171; font-style: normal; }
.wi-explain { font-size: 12px; color: var(--sunfire-gray); }
.wi-fix { font-size: 12px; margin-top: 5px; color: var(--ok-text); }
.wi-fix b { color: var(--ok-emph); }

/* ── Disclosures ── */
.disclosure-note { font-size: 12px; color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius-control); padding: 8px 10px; margin-bottom: 10px; }
.disclosures-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.disclosure-item { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; padding: 6px 8px; border-radius: var(--radius-control); background: var(--disclosure-item-bg); border: 1px solid var(--sunfire-border); }
.disclosure-item .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.dot.complete { background: var(--ok-fill); color: #fff; }
.dot.partial { background: var(--warn-dot); color: #2a2200; }
.dot.missing { background: transparent; border: 1px solid var(--sunfire-border); color: var(--sunfire-gray); }
.disclosure-item .d-body .d-label { font-weight: 700; color: var(--sunfire-navy); }
.disclosure-item.complete .d-label { color: var(--ok-emph); }
.disclosure-item .d-desc { font-size: 11px; color: var(--sunfire-gray); }
.disclosure-item .req-tag { font-size: 9px; color: var(--sunfire-gray); font-weight: 400; }

/* ── Plan cards ── */
.plans-card { max-height: 60vh; display: flex; flex-direction: column; }
.plans-controls { display: flex; gap: 8px; margin-bottom: 8px; }
.zip-input { width: 80px; }
.cat-select { flex: 1; }
.zip-hint { font-size: 11px; color: var(--sunfire-gray); margin-bottom: 8px; min-height: 14px; }
.plans-feed { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.plan-card { background: var(--plan-card-bg); border: 1px solid var(--sunfire-border); border-radius: var(--radius-control); padding: 11px 13px; cursor: pointer; transition: all 0.2s; }
.plan-card:hover { border-color: var(--sunfire-blue); box-shadow: var(--shadow-hover); background: var(--sunfire-light-bg); transform: translateY(-1px); }
.pc-name { font-size: 13px; font-weight: 800; color: var(--sunfire-navy); }
.pc-type { font-size: 10px; color: var(--sunfire-gray); }
.pc-row { display: flex; gap: 12px; margin-top: 6px; font-size: 12px; }
.pc-metric .pc-k { color: var(--sunfire-gray); font-size: 10px; display: block; }
.pc-metric .pc-v { font-weight: 800; }
.pc-v.zero { color: var(--ok-emph); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pc-chip { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--sunfire-blue-chip); color: var(--sunfire-blue-dark); font-weight: 700; }
.pc-chip.snp { background: var(--warn-bg); color: var(--warn-text); }

/* Captured-from-call strip */
.captured-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 8px 10px; margin-bottom: 8px; background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--radius-control); }
.captured-prefs .cp-label { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--ok-text); text-transform: uppercase; margin-right: 2px; }
.cp-chip { font-size: 11px; padding: 2px 9px; border-radius: var(--radius-pill); font-weight: 700; }
.cp-chip.filter { background: var(--ok-emph); color: #fff; }
.cp-chip.info { background: var(--input-bg); color: var(--sunfire-text); border: 1px solid var(--sunfire-border); }

/* Filter controls */
.plan-filters { margin-bottom: 10px; }
.pf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-input { width: 92px; background: var(--input-bg); border: 1px solid var(--sunfire-border); color: var(--sunfire-text); border-radius: var(--radius-control); padding: 6px 9px; font-size: 12px; font-family: inherit; }
.pf-select { background: var(--input-bg); border: 1px solid var(--sunfire-border); color: var(--sunfire-text); border-radius: var(--radius-control); padding: 6px 9px; font-size: 12px; font-family: inherit; }
.pf-check { font-size: 12px; color: var(--sunfire-gray); cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.pf-reset { margin-left: auto; background: none; border: none; color: var(--sunfire-blue); font-size: 12px; cursor: pointer; text-decoration: underline; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-pill); color: var(--sunfire-gray); border: 1px solid var(--sunfire-border); cursor: pointer; font-weight: 600; transition: all 0.15s; }
.pf-chip:hover { border-color: var(--sunfire-blue); color: var(--sunfire-navy); background: var(--input-bg); }
.pf-chip.active { background: var(--sunfire-blue); color: #fff; border-color: var(--sunfire-blue); }

/* ── Modal ── */
.modal { position: fixed; inset: 0; background: rgba(3, 7, 18, 0.5); display: grid; place-items: center; z-index: 900; padding: 20px; backdrop-filter: blur(6px); }
.modal-body { background: var(--surface-pop); border: 1px solid var(--sunfire-border); border-radius: var(--radius-modal); max-width: 560px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 22px; box-shadow: var(--shadow-float); color: var(--sunfire-text); }
.modal-body h3 { font-size: 18px; margin-bottom: 4px; color: var(--sunfire-navy); }
.modal-section { margin-top: 14px; }
.modal-section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sunfire-gray); margin-bottom: 6px; }
.modal-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--sunfire-border); }
.modal-close { float: right; background: var(--surface-pill); border: 1px solid var(--sunfire-border); color: var(--sunfire-gray); border-radius: var(--radius-control); padding: 4px 10px; cursor: pointer; transition: all 0.15s; }
.modal-close:hover { background: var(--input-bg); color: var(--sunfire-navy); }
.modal ul { padding-left: 18px; font-size: 13px; color: var(--sunfire-gray); }
.modal ul li { margin: 4px 0; }
.ai-summary-box { background: var(--sunfire-light-bg); border-radius: var(--radius-control); padding: 12px; font-size: 13px; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--sunfire-border); border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Training Mode Premium Styles
   ══════════════════════════════════════════════════════════════════════════════ */

/* Mode Switcher in Topbar */
.mode-switcher {
  display: inline-flex;
  background: var(--sunfire-light-bg);
  border: 1px solid var(--sunfire-border);
  padding: 3px;
  border-radius: var(--radius-pill);
  margin-right: 14px;
}
.mode-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--sunfire-gray);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mode-btn:hover {
  color: var(--sunfire-navy);
}
.mode-btn.active {
  background: var(--sunfire-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(43, 113, 218, 0.25);
}

/* Typing Fallback Area inside Transcript Card */
.training-input-area {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--sunfire-border);
  background: var(--sunfire-light-bg);
  border-radius: 0 0 var(--radius-modal) var(--radius-modal);
  align-items: center;
}
.training-text-input {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--sunfire-border);
  color: var(--sunfire-navy);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.15s;
}
.training-text-input:focus {
  outline: none;
  border-color: var(--sunfire-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* Training Panel Layout */
.badge-training {
  background: var(--sunfire-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.btn-full-width {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  margin-top: 15px;
}

/* Persona Selection Cards */
.personas-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.persona-card {
  border: 1px solid var(--sunfire-border);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--surface-card);
}
.persona-card:hover {
  border-color: var(--sunfire-blue);
  background: var(--sunfire-light-bg);
  box-shadow: var(--shadow-card);
}
.persona-card.selected {
  border-color: var(--sunfire-blue);
  background: var(--sunfire-blue-chip);
  box-shadow: 0 0 0 2px var(--sunfire-blue-chip);
}
.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pc-name-big {
  font-weight: 800;
  font-size: 14px;
  color: var(--sunfire-navy);
}
.difficulty-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.difficulty-badge.diff-easy {
  background: var(--ok-bg);
  color: var(--ok-emph);
}
.difficulty-badge.diff-medium {
  background: var(--warn-bg);
  color: var(--warn-text);
}
.difficulty-badge.diff-hard {
  background: var(--err-bg);
  color: var(--err-head);
}
.pc-desc {
  font-size: 12px;
  color: var(--sunfire-gray);
  margin-bottom: 8px;
  line-height: 1.4;
}
.pc-objective {
  font-size: 11px;
  color: var(--sunfire-navy);
  margin-bottom: 8px;
  padding: 4px 8px;
  background: var(--sunfire-blue-chip);
  border-radius: 4px;
}
.pc-cheat-sheet {
  font-size: 11px;
  border-top: 1px dashed var(--sunfire-border);
  padding-top: 8px;
  margin-top: 8px;
}
.pc-cheat-sheet ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
}
.pc-cheat-sheet li {
  font-weight: 700;
  color: var(--sunfire-navy);
}
.pc-cheat-sheet li span {
  font-weight: 400;
  color: var(--sunfire-gray);
}

/* Active Training Controls */
.training-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sunfire-light-bg);
  border: 1px solid var(--sunfire-border);
  border-radius: var(--radius-control);
  padding: 10px 14px;
  margin-bottom: 15px;
}
.pulse-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ok-fill);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  animation: statusPulse 1.6s infinite;
}
@keyframes statusPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.training-status-text {
  font-size: 13px;
  font-weight: 700;
}
.training-btn-row {
  display: flex;
  gap: 10px;
}
.btn-scorecard {
  flex: 1;
  padding: 10px;
}

/* Premium Scorecard Modal Layout */
.scorecard-modal-body {
  max-width: 680px;
  padding: 28px;
}
.scorecard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--sunfire-border);
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.sc-header-left h3 {
  font-size: 22px;
  font-weight: 900;
}
.sc-header-left p {
  font-size: 13px;
  color: var(--sunfire-gray);
  margin-top: 4px;
}
.sc-grade-badge {
  font-size: 32px;
  font-weight: 900;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(15, 27, 46, 0.1);
}
.sc-grade-badge.grade-A { background: var(--ok-bg); color: var(--ok-emph); border: 3px solid var(--ok-fill); }
.sc-grade-badge.grade-B { background: var(--sunfire-blue-chip); color: var(--sunfire-blue-dark); border: 3px solid var(--sunfire-blue); }
.sc-grade-badge.grade-C { background: var(--warn-bg); color: var(--warn-text); border: 3px solid var(--warn-dot); }
.sc-grade-badge.grade-D, .sc-grade-badge.grade-F { background: var(--err-bg); color: var(--err-head); border: 3px solid var(--err); }

.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  background: var(--sunfire-light-bg);
  border-radius: var(--radius-control);
  padding: 16px;
  margin-bottom: 20px;
}
.scorecard-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sm-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sunfire-gray);
}
.sm-bar-outer {
  height: 8px;
  background: var(--sunfire-border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 2px;
}
.sm-bar-inner {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-out;
}
.sm-bar-inner.ok { background: var(--ok-fill); }
.sm-bar-inner.warn { background: var(--warn-dot); }
.sm-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--sunfire-navy);
  margin-top: 2px;
}
.sm-val-tag {
  font-size: 14px;
  font-weight: 800;
  color: var(--ok-emph);
  background: var(--ok-bg);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  align-self: flex-start;
}

.sc-section {
  margin-top: 18px;
}
.sc-section h4, .sc-two-col h4 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sunfire-gray);
  border-bottom: 1px solid var(--sunfire-border);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.sc-summary-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sunfire-navy);
}

.sc-two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 20px;
}
.sc-col ul {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sc-col li {
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  padding-left: 18px;
  color: var(--sunfire-navy);
}
.sc-col li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.sc-col:first-child li::before { background: var(--ok-fill); }
.sc-col:last-child li::before { background: var(--warn-dot); }

/* Violations section in Scorecard */
.violations-section {
  margin-top: 24px;
  padding: 16px;
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  border-radius: var(--radius-modal);
}
.violations-section h4 {
  color: var(--err-head);
  border-color: var(--err-border);
}
.sc-violations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc-violation-item {
  font-size: 13px;
  line-height: 1.45;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--err-border);
}
.sc-violation-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.sc-v-bad { color: var(--err-head); margin-bottom: 3px; }
.sc-v-desc { color: var(--sunfire-gray); font-size: 12px; margin-bottom: 3px; }
.sc-v-good { color: var(--ok-text); font-weight: 700; }

/* Typing animation bubble for simulated customer */
.customer-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}
.customer-typing-dots span {
  width: 4px;
  height: 4px;
  background: var(--sunfire-gray);
  border-radius: 50%;
  display: inline-block;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.customer-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.customer-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Spinner inside loading buttons or status text */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(43, 113, 218, 0.25);
  border-top-color: var(--sunfire-blue);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.8s infinite linear;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* System Message Style */
.bubble.system-message {
  align-self: center;
  background: var(--sunfire-blue-chip);
  color: var(--sunfire-blue-dark);
  font-size: 12px;
  border-radius: var(--radius-pill);
  max-width: 90%;
  padding: 6px 16px;
  text-align: center;
  box-shadow: none;
  margin: 6px 0;
}

/* Training Tabs and Analytics UI Styles */
.training-tabs {
  display: flex;
  gap: 4px;
  background: var(--sunfire-light-bg);
  padding: 2px;
  border-radius: var(--radius-control);
  border: 1px solid var(--sunfire-border);
}

.tab-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  color: var(--sunfire-gray);
  padding: 4px 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn:hover {
  color: var(--sunfire-navy);
}

.tab-btn.active {
  background: var(--surface-card);
  color: var(--sunfire-blue);
  box-shadow: 0 1px 3px rgba(15, 27, 46, 0.08);
}

.analytics-grid .kpi-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.analytics-grid .kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

#history-table-body tr {
  border-bottom: 1px solid var(--sunfire-border);
  transition: background 0.15s ease;
}

#history-table-body tr:hover {
  background: rgba(59, 130, 246, 0.04);
}

#history-table-body tr:nth-child(even) {
  background-color: var(--sunfire-light-bg);
}

#history-table-body tr:nth-child(even):hover {
  background: rgba(59, 130, 246, 0.04);
}

/* Timeline & Decisions Log CSS */
.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
  padding: 10px 0;
  border-left: 2px solid var(--sunfire-border);
  padding-left: 18px;
}

.timeline-item {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--sunfire-border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: var(--shadow-card);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sunfire-border);
  border: 2px solid var(--surface-card);
}

.timeline-item.agent::before {
  background: var(--sunfire-blue);
}

.timeline-item.customer::before {
  background: var(--sunfire-navy);
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.timeline-speaker {
  font-weight: 800;
  font-size: 12px;
  color: var(--sunfire-navy);
  text-transform: uppercase;
}

.timeline-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sunfire-navy);
  margin-bottom: 8px;
}

.monologue-btn {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--sunfire-blue);
  background: rgba(43, 113, 218, 0.05);
  border: 1px solid rgba(43, 113, 218, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.monologue-btn:hover {
  background: rgba(43, 113, 218, 0.1);
  border-color: var(--sunfire-blue);
}

.monologue-drawer {
  margin-top: 10px;
  padding: 10px;
  background: var(--sunfire-light-bg);
  border-radius: 6px;
  border: 1px solid var(--sunfire-border);
}

.monologue-reasoning {
  font-size: 11.5px;
  line-height: 1.4;
  color: #4a5568;
  font-style: italic;
  margin-bottom: 8px;
}

.state-metrics-flex {
  display: flex;
  gap: 12px;
  border-top: 1px dashed var(--sunfire-border);
  padding-top: 8px;
  margin-top: 8px;
}

.state-meter {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.state-meter-label {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--sunfire-gray);
  text-transform: uppercase;
}

.state-meter-bar-outer {
  background: rgba(15, 27, 46, 0.06);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
}

.state-meter-bar-inner {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Custom scenario badge */
.custom-badge {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

/* Live Profile Matching Styles */
.live-match-box {
  margin-top: 8px;
  padding: 8px;
  background: rgba(16, 185, 129, 0.04);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.3;
}
.live-match-box .match-title {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 8.5px;
  color: #10b981;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.live-match-box .match-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
.live-match-box .match-item:last-child {
  margin-bottom: 0;
}
.live-match-box .match-ok {
  color: #10b981;
  font-weight: 600;
}
.live-match-box .match-warn {
  color: #f59e0b;
  font-weight: 600;
}
.live-match-box .match-err {
  color: #ef4444;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* VOICE CALL UI - Full screen voice-first training interface                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.voice-call-ui {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
}

.voice-call-ui.hidden {
  display: none;
}

/* Main two-column layout */
.voice-columns {
  flex: 1;
  display: flex;
  align-items: stretch;
  padding: 40px 60px;
  gap: 40px;
}

.voice-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.voice-agent {
  background: linear-gradient(180deg, rgba(43, 113, 218, 0.08) 0%, rgba(43, 113, 218, 0.02) 100%);
  border-color: rgba(43, 113, 218, 0.2);
}

.voice-customer {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
  border-color: rgba(16, 185, 129, 0.2);
}

/* Avatar section */
.voice-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-avatar {
  background: linear-gradient(135deg, #2b71da 0%, #1f56a8 100%);
  box-shadow: 0 8px 32px rgba(43, 113, 218, 0.4);
}

.customer-avatar {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.4);
}

.voice-column.speaking .avatar-circle {
  transform: scale(1.1);
  box-shadow: 0 12px 48px rgba(255, 255, 255, 0.3);
}

.avatar-icon {
  filter: grayscale(0);
}

/* Voice activity indicator bars */
.voice-indicator {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 40px;
}

.voice-bar {
  width: 6px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  transition: height 0.1s ease, background 0.2s ease;
}

.voice-column.speaking .voice-bar {
  animation: voiceWave 0.5s ease-in-out infinite;
}

.voice-agent.speaking .voice-bar {
  background: #2b71da;
}

.voice-customer.speaking .voice-bar {
  background: #10b981;
}

.voice-bar:nth-child(1) { animation-delay: 0s; }
.voice-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-bar:nth-child(4) { animation-delay: 0.1s; }
.voice-bar:nth-child(5) { animation-delay: 0s; }

@keyframes voiceWave {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}

/* Labels and status */
.voice-label {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.voice-status {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
  min-height: 20px;
}

.voice-column.speaking .voice-status {
  color: #fbbf24;
}

/* Live transcript area */
.voice-transcript-container {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.voice-transcript {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  overflow-y: auto;
  min-height: 200px;
  max-height: 300px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-agent .voice-transcript {
  border-left: 4px solid #2b71da;
}

.voice-customer .voice-transcript {
  border-left: 4px solid #10b981;
}

.transcript-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}

/* Center divider */
.voice-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.call-timer {
  font-size: 48px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-outfit);
  margin-bottom: 16px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.call-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* Coach hints bar */
.voice-coach-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 60px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coach-hint-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coach-hint-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 600;
}

.coach-hint-text {
  color: #fbbf24;
  font-size: 16px;
  font-weight: 500;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coach-grade .coach-hint-value {
  font-size: 28px;
  font-weight: 800;
  color: #10b981;
}

/* Footer controls */
.voice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-footer-left,
.voice-footer-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.voice-footer-right {
  justify-content: flex-end;
  gap: 16px;
}

.voice-footer-center {
  display: flex;
  gap: 16px;
}

.voice-scenario-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.scenario-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
}

.scenario-difficulty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

/* Voice action buttons */
.voice-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voice-btn-end {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.voice-btn-end:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
}

.voice-btn-mute {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.voice-btn-mute:hover {
  background: rgba(255, 255, 255, 0.2);
}

.voice-btn-mute.muted {
  background: #f59e0b;
  color: #000;
  border-color: #f59e0b;
}

.voice-btn-small {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.voice-btn-small:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-icon {
  font-size: 20px;
}

/* Mini diagnostics dots */
.voice-diag-mini {
  display: flex;
  gap: 8px;
}

.diag-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  cursor: help;
}

.diag-dot.diag-ok {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.diag-dot.diag-warn {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.diag-dot.diag-err {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* Expandable diagnostics panel */
.voice-diag-panel {
  position: absolute;
  bottom: 100px;
  right: 60px;
  width: 320px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.voice-diag-panel.hidden {
  display: none;
}

.diag-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.diag-panel-header button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  cursor: pointer;
}

.diag-panel-content {
  padding: 16px;
}

.diag-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

.diag-row:last-of-type {
  border-bottom: none;
}

.diag-logs {
  margin-top: 12px;
  max-height: 120px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
  font-family: monospace;
  font-size: 11px;
}

.diag-log-entry {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .voice-columns {
    padding: 24px 30px;
    gap: 20px;
  }

  .voice-footer,
  .voice-coach-bar {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (max-width: 900px) {
  .voice-columns {
    flex-direction: column;
    padding: 20px;
  }

  .voice-divider {
    flex-direction: row;
    padding: 16px 0;
    gap: 20px;
  }

  .call-timer {
    font-size: 32px;
    margin-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PALVIEW ANIMATION ENGINE - VoiceText SDK Port
   Professional text animations for Medicare coaching UI
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base word/char spans */
.pv-word, .pv-char {
  display: inline;
  transition: all 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPEWRITER - Character by character with blinking cursor
   ─────────────────────────────────────────────────────────────────────────────*/
.pv-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--sunfire-blue, #2b71da);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: pv-blink 0.7s infinite;
}

@keyframes pv-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   WORD HIGHLIGHT - Words glow as they appear
   ─────────────────────────────────────────────────────────────────────────────*/
.pv-word.pv-highlight {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* In voice UI (dark background) */
.voice-call-ui .pv-word.pv-highlight {
  color: #fcd34d;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
}

/* ─────────────────────────────────────────────────────────────────────────────
   WORD FADE - Words fade in smoothly
   ─────────────────────────────────────────────────────────────────────────────*/
.pv-word.pv-fade {
  opacity: 0;
  animation: pv-fadeIn 0.35s ease forwards;
}

@keyframes pv-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   WAVE - Characters bounce up and down
   ─────────────────────────────────────────────────────────────────────────────*/
.pv-char.pv-wave {
  display: inline-block;
  animation: pv-wave 0.5s ease-in-out;
}

@keyframes pv-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOW PULSE - Words pulse with glow (for warnings/alerts)
   ─────────────────────────────────────────────────────────────────────────────*/
.pv-word.pv-glow-active {
  animation: pv-pulse 0.5s ease-in-out;
}

@keyframes pv-pulse {
  0%, 100% { 
    text-shadow: 0 0 0 transparent;
    color: inherit;
  }
  50% { 
    text-shadow: 0 0 16px var(--sunfire-blue, #2b71da), 0 0 32px var(--sunfire-blue, #2b71da);
    color: #60a5fa;
  }
}

/* Warning variant (orange/red glow) */
.pv-warning .pv-word.pv-glow-active {
  animation: pv-pulse-warn 0.5s ease-in-out;
}

@keyframes pv-pulse-warn {
  0%, 100% { 
    text-shadow: 0 0 0 transparent;
    color: inherit;
  }
  50% { 
    text-shadow: 0 0 16px #f59e0b, 0 0 32px #ef4444;
    color: #fbbf24;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATION STYLE CLASSES (for container)
   ─────────────────────────────────────────────────────────────────────────────*/
.anim-typewriter,
.anim-wordHighlight,
.anim-wordFade,
.anim-wave,
.anim-glowPulse {
  /* Common settings for animated containers */
}

/* Voice UI transcript with animations */
.voice-transcript.anim-wordHighlight .pv-word {
  color: rgba(255, 255, 255, 0.95);
}

.voice-transcript.anim-wordHighlight .pv-word.pv-highlight {
  color: #fcd34d;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.8);
}

/* Coaching/suggestion area animations */
.coach-hint-text.animated {
  min-height: 1.5em;
}

/* Smooth scroll for animated content */
.voice-transcript {
  scroll-behavior: smooth;
}