/* emotion — การจดจำอารมณ์ด้วยเสียง (prefix .vo-) */
.vo-title{text-align:center}
.vo-wrap{padding:2px 18px 14px;display:flex;flex-direction:column;gap:14px;flex:1}

.vo-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.vo-h2{font-size:14px;font-weight:700}

/* ---- สีตามอารมณ์ (ใช้ CSS variable ภายในการ์ดผลลัพธ์) ---- */
.vo-tone-happy{--vo-c:var(--amber);--vo-c-soft:rgba(245,197,66,.18)}
.vo-tone-sad{--vo-c:var(--accent);--vo-c-soft:rgba(47,139,255,.18)}
.vo-tone-surprised{--vo-c:#a78bfa;--vo-c-soft:rgba(167,139,250,.18)}

/* ---- การ์ดอัดเสียง ---- */
.vo-rec-card{align-items:center;text-align:center}
.vo-rec-hint{font-size:13px;font-weight:600}
.vo-mic-zone{position:relative;width:96px;height:96px;margin:6px 0;
  display:flex;align-items:center;justify-content:center}
.vo-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(87,230,168,.7);
  pointer-events:none;animation:voBreathe 2.2s ease-in-out infinite;transition:border-color .3s}
.vo-ring-delay{animation-delay:1.1s}
.vo-ring.recording{border-color:rgba(255,93,93,.8)}
@keyframes voBreathe{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.35);opacity:0}}

.vo-mic{position:relative;width:96px;height:96px;border-radius:50%;
  background:var(--grad-cta);color:#04321f;display:flex;align-items:center;justify-content:center;
  --vo-glow:rgba(87,230,168,.5);animation:voGlow 2.2s ease-in-out infinite;
  transition:transform .12s, filter .15s;user-select:none;touch-action:none}
.vo-mic svg{width:36px;height:36px}
.vo-mic:hover{filter:brightness(1.05)} .vo-mic:active{transform:scale(.95)}
.vo-mic.recording{background:linear-gradient(135deg,#ff8a8a,var(--red));color:#fff;
  --vo-glow:rgba(255,93,93,.6)}
@keyframes voGlow{
  0%,100%{box-shadow:0 0 18px var(--vo-glow),0 0 0 0 var(--vo-glow)}
  50%{box-shadow:0 0 34px var(--vo-glow),0 0 10px 2px var(--vo-glow)}
}

.vo-status-row{height:20px;display:flex;align-items:center;justify-content:center;gap:8px}
.vo-status{font-size:12px;font-weight:600}
.vo-st-rec{color:var(--red)} .vo-st-busy{color:var(--accent)}
.vo-spinner{width:16px;height:16px;border-radius:50%;flex:none;
  border:3px solid rgba(47,139,255,.2);border-top-color:var(--accent);
  animation:voSpin .7s linear infinite}
@keyframes voSpin{to{transform:rotate(360deg)}}

/* คลื่นเสียง 24 แท่ง */
.vo-wave{display:flex;align-items:flex-end;justify-content:center;gap:3px;
  height:40px;width:100%;overflow:hidden}
.vo-wave-bar{width:5px;flex:none;border-radius:var(--r-pill);height:6px;
  background:linear-gradient(to top,#57e6a8,#8ef5c6);transition:height .3s ease, background .3s}
@keyframes voWaveDance{from{height:5px}to{height:var(--h)}}
.vo-wave.recording .vo-wave-bar{
  background:linear-gradient(to top,#ff8a8a,var(--red));
  animation:voWaveDance var(--dur) ease-in-out var(--del) infinite alternate}
.vo-note{font-size:10.5px}

/* ---- การ์ดผลวิเคราะห์ ---- */
.vo-result.vo-in{animation:voPanelIn .32s ease both}
@keyframes voPanelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.vo-emo-head{display:flex;flex-direction:column;align-items:center;gap:4px}
.vo-emo-emoji{font-size:52px;line-height:1}
.vo-emo-label{font-size:16px;font-weight:700;color:var(--vo-c)}

.vo-bar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.vo-bar-title{font-size:11.5px;font-weight:600}
.vo-match-pct{font-size:11.5px;font-weight:700;color:var(--vo-c)}
.vo-track{height:6px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-brd)}
.vo-track-lg{height:10px}
.vo-bar{height:100%;border-radius:var(--r-pill);background:var(--vo-c);
  box-shadow:0 0 10px var(--vo-c-soft);transition:width .7s ease-out, background .3s}

.vo-dims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.vo-dim-head{display:flex;justify-content:space-between;gap:6px;
  font-size:10.5px;color:var(--ink-dim);margin-bottom:3px}
.vo-desc{font-size:12px;line-height:1.55;padding:10px 12px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd)}

/* ---- คำแนะนำการตอบ 3 ใบ ---- */
.vo-replies{display:flex;flex-direction:column;gap:10px}
.vo-reply{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd)}
.vo-reply-body{flex:1;min-width:0}
.vo-reply-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:var(--r-pill);margin-bottom:4px}
.vo-reply-tag-0{background:rgba(87,230,168,.18);color:var(--accent-2)}
.vo-reply-tag-1{background:rgba(245,197,66,.18);color:var(--amber)}
.vo-reply-tag-2{background:rgba(47,139,255,.16);color:var(--accent)}
.vo-reply-text{font-size:12px;line-height:1.5}
.vo-send{flex:none;width:48px;height:36px;border-radius:var(--r-sm);
  background:var(--grad-cta);color:#04223f;font-size:12px;font-weight:700;
  box-shadow:0 0 12px rgba(87,230,168,.4);transition:transform .12s, filter .15s}
.vo-send:hover{filter:brightness(1.05)} .vo-send:active{transform:scale(.95)}
.vo-check{display:inline-flex;animation:voPop .35s ease both}
.vo-check svg{width:16px;height:16px}
@keyframes voPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}

/* ---- ตั้งค่า 3 รายการ ---- */
.vo-settings{display:flex;flex-direction:column}
.vo-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--glass-brd)}
.vo-setting-row:last-child{border-bottom:none;padding-bottom:0}
.vo-setting-label{font-size:12.5px;font-weight:500}
.vo-switch{position:relative;flex:none;width:44px;height:24px;border-radius:var(--r-pill);
  background:rgba(108,134,171,.4);transition:background .3s, box-shadow .3s}
.vo-switch:active{transform:scale(.95)}
.vo-switch .vo-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .3s}
.vo-switch.on{background:var(--grad-cta);box-shadow:0 0 14px rgba(87,230,168,.45)}
.vo-switch.on .vo-knob{transform:translateX(20px)}

/* ---- การจดจำล่าสุด ---- */
.vo-recent{display:flex;flex-direction:column;gap:8px}
.vo-recent-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-brd);text-align:left;color:inherit;
  transition:transform .12s, border-color .15s}
.vo-recent-row:hover{border-color:var(--glass-brd-hi)}
.vo-recent-row:active{transform:scale(.98)}
.vo-recent-row > svg{width:16px;height:16px;flex:none;color:var(--ink-faint)}
.vo-recent-emoji{width:36px;height:36px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:18px}
.vo-re-happy{background:rgba(245,197,66,.2)}
.vo-re-angry{background:rgba(255,93,93,.2)}
.vo-re-neutral{background:rgba(157,180,214,.2)}
.vo-re-sad{background:rgba(47,139,255,.2)}
.vo-re-surprised{background:rgba(167,139,250,.2)}
.vo-recent-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vo-recent-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.vo-recent-name{font-size:12.5px;font-weight:600}
.vo-recent-time{font-size:10.5px;flex:none}
.vo-recent-emotion{font-size:11px;font-weight:500}
.vo-rt-happy{color:var(--amber)} .vo-rt-angry{color:var(--red)} .vo-rt-neutral{color:var(--ink-dim)}
.vo-rt-sad{color:var(--accent)} .vo-rt-surprised{color:#a78bfa}

/* ---- แถบเตือนตรึงล่าง ---- */
.vo-footer{position:sticky;bottom:10px;margin:auto 18px 14px;display:flex;align-items:center;
  gap:10px;padding:10px 14px;border-radius:var(--r-lg);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.vo-warn{flex:1;font-size:10px;line-height:1.5}
.vo-help{flex:none;font-size:11.5px;font-weight:700;color:var(--accent);
  padding:5px 8px;border-radius:var(--r-sm);transition:transform .12s, background .15s}
.vo-help:hover{background:rgba(47,139,255,.12)} .vo-help:active{transform:scale(.95)}

@media (max-width:360px){
  .vo-wrap{padding:2px 14px 12px}
  .vo-card{padding:14px}
  .vo-footer{margin:auto 14px 12px}
  .vo-dims{gap:10px 12px}
}

/* โทนสีเพิ่ม (อารมณ์ที่จำแนกได้จากการวัดจริง) */
.vo-tone-angry{--vo-c:#ff7a8a;--vo-c-soft:rgba(255,122,138,.18)}
.vo-tone-neutral{--vo-c:#9db4d6;--vo-c-soft:rgba(157,180,214,.16)}

/* ค่าที่วัดได้จริงจากคลิป */
.vo-metrics{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.vo-metrics-h{font-size:12px;font-weight:700;color:var(--ink-dim)}
.vo-metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.vo-metric{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-brd);font-size:12.5px}
.vo-metric span{font-size:10.5px}
.vo-recent-empty{font-size:12px;line-height:1.55;padding:6px 2px}