/* Bảng trò chuyện giọng nói (sb-voice.js) cho trang KHÔNG nạp mathbuddy-kids.css/sb-learn.css — hiện dùng ở Cổng phụ huynh.
   Chép từ mathbuddy-kids.css + sb-learn.css; biến màu đặt trong .sbv-overlay để không phụ thuộc :root của trang. */
.sbv-overlay { --red:#FF6B6B; --orange:#FF6B35; --yellow:#FFCB45; --green:#2ED573; --teal:#1FCBA6; --teal-d:#11917A; --blue:#1E90FF;
  --purple:#A55EEA; --bg:#F2FBF9; --card:#FFFFFF; --text1:#1A2340; --text2:#5A6890; }
body.sbv-open { overflow:hidden; }
.sbv-overlay { position:fixed; inset:0; z-index:1300; background:rgba(18,49,74,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; }
.sbv-overlay[hidden] { display:none; }
.sbv-card { width:min(520px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; gap:12px; background:var(--card); border-radius:26px; padding:18px 20px 16px; box-shadow:0 20px 60px rgba(0,0,0,.25); font-family:'Nunito',Arial,sans-serif; color:var(--text1); overflow:hidden; }
.sbv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sbv-kicker { font-size:12px; font-weight:900; color:var(--teal-d); text-transform:uppercase; letter-spacing:.08em; }
.sbv-title { font-family:'Baloo 2','Nunito',sans-serif; font-size:24px; line-height:1.2; margin-top:2px; }
.sbv-x { border:0; background:var(--bg); color:var(--text2); border-radius:50%; width:38px; height:38px; font-size:22px; cursor:pointer; flex-shrink:0; }

.sbv-stage { display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 2px; }
.sbv-orb { --lvl:0; --c:var(--teal); position:relative; width:118px; height:118px; display:grid; place-items:center; }
.sbv-orb img, .sbv-emoji { position:relative; z-index:1; width:92px; height:92px; border-radius:50%; background:#fff; object-fit:contain; box-shadow:0 0 0 4px var(--c); display:grid; place-items:center; font-size:52px; transition:box-shadow .2s; }
.sbv-ring { position:absolute; inset:8px; border-radius:50%; background:var(--c); opacity:.18; transform:scale(calc(1 + var(--lvl) * .35)); transition:transform .08s linear, background .2s; }
.sbv-ring.r2 { inset:0; opacity:.10; transform:scale(calc(1 + var(--lvl) * .6)); }
.sbv-stage[data-state="hearing"] .sbv-orb { --c:var(--green); }
.sbv-stage[data-state="thinking"] .sbv-orb { --c:var(--yellow); }
.sbv-stage[data-state="thinking"] .sbv-ring { animation:sbvPulse 1.1s ease-in-out infinite; }
.sbv-stage[data-state="speaking"] .sbv-orb { --c:var(--purple); }
.sbv-stage[data-state="speaking"] .sbv-ring { animation:sbvPulse .7s ease-in-out infinite; }
.sbv-stage[data-state="connecting"] .sbv-ring, .sbv-stage[data-state="reconnecting"] .sbv-ring { animation:sbvPulse 1.4s ease-in-out infinite; }
.sbv-stage[data-state="reconnecting"] .sbv-orb { --c:var(--orange); }
.sbv-stage[data-state="muted"] .sbv-orb, .sbv-stage[data-state="ended"] .sbv-orb, .sbv-stage[data-state="idle"] .sbv-orb { --c:#C9D3E6; }
.sbv-stage[data-state="error"] .sbv-orb { --c:var(--red); }
@keyframes sbvPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .sbv-ring { animation:none !important; transition:none; } }

.sbv-status { text-align:center; min-height:46px; }
.sbv-label { font-size:18px; font-weight:900; }
.sbv-sub { font-size:13px; font-weight:700; color:var(--text2); margin-top:2px; overflow-wrap:anywhere; }
.sbv-stage[data-state="error"] .sbv-label { color:#D64545; }

.sbv-intro ul { margin:0; padding:10px 14px 10px 30px; background:#F0FBF7; border:1px solid #D7F1E8; border-radius:14px; font-size:13px; font-weight:700; color:var(--text2); line-height:1.6; }
.sbv-intro[hidden] { display:none; }
.sbv-transcript { flex:1 1 auto; min-height:0; max-height:32vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.sbv-transcript:empty { display:none; }
.sbv-line { max-width:88%; padding:8px 12px; border-radius:16px; font-size:14px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.sbv-line.me { align-self:flex-end; background:linear-gradient(135deg,var(--teal),var(--teal-d)); color:#fff; border-bottom-right-radius:6px; }
.sbv-line.ai { align-self:flex-start; background:var(--bg); border:1px solid #D7F1E8; border-bottom-left-radius:6px; }
.sbv-line.cut { opacity:.75; }
.sbv-who { display:block; font-size:11px; font-weight:900; opacity:.8; text-transform:uppercase; letter-spacing:.06em; }

.sbv-controls { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.sbv-btn { border:0; border-radius:16px; padding:12px 18px; font:900 15px 'Nunito',Arial,sans-serif; cursor:pointer; color:#fff; transition:transform .15s, box-shadow .15s; min-height:48px; }
.sbv-btn[hidden] { display:none; }
.sbv-btn:active { transform:translateY(2px); }
.sbv-btn:focus-visible, .sbv-x:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.sbv-start { background:linear-gradient(135deg,var(--teal),var(--teal-d)); box-shadow:0 5px 0 rgba(17,145,122,.35); }
.sbv-mic { background:linear-gradient(135deg,#A55EEA,#3742FA); box-shadow:0 5px 0 rgba(55,66,250,.3); }
.sbv-mic[aria-pressed="true"] { background:#8A94AD; box-shadow:0 5px 0 rgba(0,0,0,.15); }
.sbv-stop { background:linear-gradient(135deg,#FFCB45,#FF9F1C); color:#5A3B00; box-shadow:0 5px 0 rgba(200,130,20,.3); }
.sbv-end { background:linear-gradient(135deg,#FF6B35,#FF6B6B); box-shadow:0 5px 0 rgba(200,50,30,.35); }

.sbv-privacy { border-top:1px dashed #E3E7F5; padding-top:10px; font-size:12px; font-weight:600; color:var(--text2); line-height:1.5; }
.sbv-privacy p { margin-top:4px; }
.sbv-switch { display:flex; align-items:center; gap:8px; font-weight:800; color:var(--text1); cursor:pointer; }
.sbv-switch input { width:18px; height:18px; accent-color:var(--teal-d); }
.sbv-chat-note { font-size:12px; font-weight:900; color:var(--teal-d); }
@media (max-width: 480px) {
  .sbv-card { padding:14px 14px 12px; border-radius:22px; }
  .sbv-btn { flex:1 1 40%; padding:12px 10px; }
}
.sbv-chip:focus-visible { outline:3px solid #1E90FF; outline-offset:2px; }
.sbv-line.me.interim{ opacity:.8; }
.sbv-line.me.interim .sbv-text::after{ content:' …'; }
.sbv-line.note{ align-self:center; max-width:100%; background:#FFF8E9; border:1px dashed #F5C97A; color:#7A5532; font-size:12.5px; }
.sbv-line.note .sbv-who{ display:none; }
.sbv-idea{ display:block; }
.sbv-idea + .sbv-idea{ margin-top:4px; }
.sbv-figure{ flex-shrink:0; max-height:46vh; overflow:auto; }
.sbv-figure[hidden]{ display:none; }
.sbv-figure .sb-fig{ margin:0 auto; }
.sbv-quick{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.sbv-quick[hidden]{ display:none; }
.sbv-chip{ border:1.5px solid #CFEDE6; background:#F2FBF8; color:#0E8F7E; border-radius:999px; padding:6px 12px; min-height:36px; font:800 12.5px 'Nunito',Arial,sans-serif; cursor:pointer; }
.sbv-share-note{ font-size:12px; }
.sbv-share-note[hidden], .sbv-switch[hidden]{ display:none; }

/* Bảng voice có hình: desktop 2 cột (lời nói | hình), điện thoại xếp dọc và nhường chỗ cho cả hai */
@media (min-width:900px){
  .sbv-card.has-fig{ width:min(1000px,100%); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); column-gap:18px; align-content:start; }
  .sbv-card.has-fig > *{ grid-column:1; }
  .sbv-card.has-fig > .sbv-figure{ grid-column:2; grid-row:1 / span 9; max-height:calc(100vh - 64px); align-self:start; }
  .sbv-card.has-fig .sbv-transcript{ max-height:40vh; min-height:120px; }
}
@media (max-width:899px){
  .sbv-card.has-fig .sbv-orb{ display:none; }
  .sbv-card.has-fig .sbv-figure{ max-height:42vh; }
  .sbv-card.has-fig .sbv-transcript{ min-height:72px; max-height:22vh; }
  .sbv-card.has-fig .sbv-fig-steps, .sbv-card.has-fig .sb-fig-steps{ display:none; }