/**
 * Viva / voice-mode animations
 * 
 * Extracted from index.html (inline <style> that began at line 28711).
 * Stylesheet order matters (cascade); index.html links the files in numeric order.
 * See assets/README.md.
 */
@keyframes viva-in { from { transform:translate(-50%,-50%) scale(0.88);opacity:0; } to { transform:translate(-50%,-50%) scale(1);opacity:1; } }
@keyframes vz-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes vz-bar { 0%,100% { height:5px; } 50% { height:17px; } }
@keyframes vz-ring { 0% { transform:scale(.9); opacity:.55; } 100% { transform:scale(1.55); opacity:0; } }
@keyframes vz-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }
#vivaCanvas { background:linear-gradient(180deg,#f8fbff 0%,#eaf3ff 100%); border:1px solid rgba(255,255,255,.95); border-radius:28px; box-shadow:0 34px 90px rgba(26,115,232,.28),0 4px 16px rgba(26,115,232,.10); font-family:'DM Sans',sans-serif; color:#1a2a3a; }
#vivaCanvas *, #vivaCanvas *::before, #vivaCanvas *::after { box-sizing:border-box; }
@supports (height:1dvh) { #vivaCanvas { max-height:92dvh !important; } }
.vz-head { display:flex; align-items:center; gap:10px; padding:14px 18px; background:linear-gradient(135deg,#ffffff,#e3effd); border-bottom:1px solid rgba(26,115,232,.12); flex-shrink:0; }
.vz-logo { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:1.15rem; flex-shrink:0; background:linear-gradient(135deg,#6db0ff,#1a73e8); box-shadow:0 6px 16px rgba(26,115,232,.32); }
.vz-ttl { flex:1; min-width:0; }
.vz-eyebrow { font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7f9bbd; margin-bottom:2px; }
.vz-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:#12305c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-pill { display:flex; align-items:center; gap:6px; flex-shrink:0; background:#fff; border:1px solid rgba(26,115,232,.16); border-radius:20px; padding:6px 12px; font-size:.82rem; font-weight:800; box-shadow:0 2px 8px rgba(26,115,232,.08); }
.vz-pill .ok { color:#1f9d70; } .vz-pill .bad { color:#e0567b; } .vz-pill .mut { color:#9bb2cf; font-weight:600; font-size:.72rem; }
.vz-pill .q { color:#1a73e8; font-size:.74rem; margin-left:3px; }
.vz-timer { color:#1a73e8; font-size:.78rem; }
.vz-prog { height:5px; background:#d6e6fb; flex-shrink:0; }
#vivaProgressBar { height:100%; width:0; background:linear-gradient(90deg,#8ec1ff,#1a73e8); border-radius:0 5px 5px 0; transition:width .5s ease; }
.vz-aiwrap { padding:16px 20px 0; flex-shrink:0; }
.vz-ai { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid rgba(26,115,232,.14); border-radius:22px; padding:16px 18px; box-shadow:0 8px 24px rgba(26,115,232,.10); }
.vz-av { position:relative; width:46px; height:46px; flex-shrink:0; border-radius:16px; display:grid; place-items:center; font-size:1.25rem; background:linear-gradient(135deg,#6db0ff,#1a73e8); box-shadow:0 6px 16px rgba(26,115,232,.3); }
.vz-av .vz-ring { position:absolute; inset:0; border-radius:16px; border:2px solid #6db0ff; opacity:0; pointer-events:none; }
.vz-av.speaking .vz-ring { animation:vz-ring 1.4s ease-out infinite; }
.vz-aibody { flex:1; min-width:0; }
.vz-ailabel { display:flex; align-items:center; gap:8px; font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#7f9bbd; margin-bottom:5px; }
.vz-dot { width:8px; height:8px; border-radius:50%; background:#4f9bff; animation:vz-blink 1s infinite; }
.vz-mini { margin-left:auto; cursor:pointer; background:#eaf3ff; color:#1a73e8; border:1px solid rgba(26,115,232,.2); border-radius:12px; padding:4px 10px; font:700 .68rem 'DM Sans',sans-serif; letter-spacing:0; text-transform:none; }
.vz-aitext { font-size:.97rem; line-height:1.65; color:#27466e; font-weight:500; }
.vz-ph { color:#7f9bbd; font-style:italic; }
.vz-wave { margin-top:10px; gap:3px; align-items:flex-end; height:18px; }
.vz-wave i { display:block; width:3px; border-radius:2px; background:#4f9bff; opacity:.75; height:5px; animation:vz-bar 1.1s ease-in-out infinite; }
.vz-wave i:nth-child(2n) { animation-delay:.15s; } .vz-wave i:nth-child(3n) { animation-delay:.3s; } .vz-wave i:nth-child(5n) { animation-delay:.45s; }
.vz-tap { padding:10px 20px 0; flex-shrink:0; text-align:center; }
.vz-tap button { cursor:pointer; border:none; border-radius:14px; padding:11px 22px; font:800 .86rem 'DM Sans',sans-serif; color:#fff; background:linear-gradient(135deg,#5aa5ff,#1a73e8); box-shadow:0 8px 20px rgba(26,115,232,.32); }
.vz-body { flex:1 1 auto; min-height:70px; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.vz-msg { animation:vz-up .25s ease both; }
.vz-msg.ai { display:flex; gap:8px; align-items:flex-start; }
.vz-msg.ai .b { background:#fff; border:1px solid rgba(26,115,232,.14); border-radius:14px 14px 14px 4px; padding:9px 13px; font-size:.84rem; color:#27466e; line-height:1.6; flex:1; }
.vz-msg.stu { display:flex; justify-content:flex-end; }
.vz-msg.stu .b { max-width:88%; background:linear-gradient(135deg,#dcebff,#cfe3fb); border:1px solid rgba(26,115,232,.2); border-radius:14px 14px 4px 14px; padding:9px 13px; font-size:.86rem; color:#12305c; line-height:1.6; }
.vz-msg.note { display:flex; justify-content:center; }
.vz-msg.note .b { background:#eaf3ff; border:1px dashed rgba(26,115,232,.3); border-radius:20px; padding:5px 14px; font-size:.75rem; color:#40648f; font-style:italic; text-align:center; }
.vz-msg.warn .b { background:#fff6e6; border:1px dashed rgba(255,159,28,.45); color:#a86400; }
.vz-fb { border-radius:16px; padding:12px 15px; font-size:.84rem; line-height:1.6; animation:vz-up .3s ease both; }
.vz-fb .t { font-weight:800; margin-bottom:4px; }
.vz-fb.good { background:#eaf8f1; border:1.5px solid #bfe9d3; color:#1b7f57; }
.vz-fb.bad { background:#fff0f3; border:1.5px solid #ffd0da; color:#c2365f; }
.vz-fb.part { background:#fff6e6; border:1.5px solid #ffe0a8; color:#a86400; }
.vz-fb .ans { margin-top:8px; padding:8px 11px; border-radius:11px; background:rgba(255,255,255,.75); color:#27466e; }
.vz-fb .ans b { color:#12305c; }
.vz-opt { display:flex; align-items:center; gap:12px; width:100%; padding:12px 15px; border-radius:14px; background:#fff; border:1.5px solid rgba(26,115,232,.2); color:#27466e; font:500 .88rem 'DM Sans',sans-serif; text-align:left; cursor:pointer; transition:all .15s; }
.vz-opt:hover:not(:disabled) { background:#eaf3ff; border-color:#4f9bff; }
.vz-opt .l { width:28px; height:28px; border-radius:9px; background:#e3effd; display:grid; place-items:center; font-size:.78rem; font-weight:800; color:#1a73e8; flex-shrink:0; }
.vz-opt.right { background:#eaf8f1; border-color:#6fcf9f; color:#1b7f57; } .vz-opt.right .l { background:#bfe9d3; color:#1b7f57; }
.vz-opt.wrong { background:#fff0f3; border-color:#f3a3b6; color:#c2365f; } .vz-opt.wrong .l { background:#ffd0da; color:#c2365f; }
.vz-opt.dim { opacity:.5; cursor:default; }
.vz-stu { padding:0 20px 14px; flex-shrink:0; }
.vz-stucard { background:#fff; border:1.5px solid rgba(26,115,232,.18); border-radius:20px; padding:14px 16px; box-shadow:0 8px 24px rgba(26,115,232,.10); }
.vz-microw { display:flex; align-items:center; gap:14px; }
.vz-orb { --lv:0; position:relative; width:54px; height:54px; flex-shrink:0; display:grid; place-items:center; }
.vz-orb::before { content:""; position:absolute; inset:0; border-radius:50%; background:rgba(79,155,255,.22); transform:scale(calc(1 + var(--lv) * .75)); transition:transform .09s linear; }
.vz-orbcore { position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; background:linear-gradient(135deg,#6db0ff,#1a73e8); box-shadow:0 6px 16px rgba(26,115,232,.34); }
.vz-orb.hear .vz-orbcore { background:linear-gradient(135deg,#5fd6a4,#1f9d70); box-shadow:0 6px 16px rgba(31,157,112,.34); }
.vz-orb.hear::before { background:rgba(60,190,140,.25); }
.vz-orb.busy .vz-orbcore { background:linear-gradient(135deg,#9cc8ff,#4f9bff); animation:vz-blink 1s infinite; }
.vz-stutxt { flex:1; min-width:0; }
.vz-status { font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#1a73e8; margin-bottom:3px; }
.vz-status.hear { color:#1f9d70; } .vz-status.warn { color:#d97706; }
.vz-transcript { font-size:.9rem; line-height:1.5; color:#27466e; word-break:break-word; }
.vz-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.vz-act { cursor:pointer; font:700 .76rem 'DM Sans',sans-serif; color:#2b62b5; background:#f3f8ff; border:1.5px solid rgba(26,115,232,.2); border-radius:12px; padding:8px 12px; transition:all .15s; }
.vz-act:hover { background:#e3effd; }
.vz-act.main { color:#fff; border-color:transparent; background:linear-gradient(135deg,#5aa5ff,#1a73e8); box-shadow:0 6px 14px rgba(26,115,232,.28); }
.vz-textrow { display:flex; gap:10px; align-items:flex-end; }
.vz-textrow textarea { flex:1; background:#f5f9ff; border:1.5px solid rgba(26,115,232,.25); border-radius:14px; padding:11px 14px; font:500 .9rem 'DM Sans',sans-serif; color:#12305c; outline:none; resize:none; min-height:56px; max-height:120px; line-height:1.6; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; }
.vz-textrow textarea:focus { border-color:#4f9bff; box-shadow:0 0 0 4px rgba(79,155,255,.2); }
.vz-send { width:44px; height:44px; min-width:44px; border:none; border-radius:14px; display:grid; place-items:center; cursor:pointer; background:linear-gradient(135deg,#5aa5ff,#1a73e8); box-shadow:0 6px 14px rgba(26,115,232,.3); }
.vz-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 18px; background:rgba(255,255,255,.75); border-top:1px solid rgba(26,115,232,.12); flex-shrink:0; }
.vz-by { font-size:.68rem; color:#7f9bbd; } .vz-by strong { color:#1a73e8; }
.vz-voice { cursor:pointer; padding:8px 13px; border-radius:12px; background:#eaf3ff; color:#1a73e8; border:1.5px solid rgba(26,115,232,.22); font:700 .76rem 'DM Sans',sans-serif; }
.vz-complete { cursor:pointer; padding:9px 18px; border-radius:14px; border:none; color:#fff; font:800 .82rem 'DM Sans',sans-serif; background:linear-gradient(135deg,#5aa5ff,#1a73e8); box-shadow:0 8px 18px rgba(26,115,232,.32); }
.vz-complete:disabled { opacity:.55; cursor:default; }
.vz-rep { animation:vz-up .4s ease both; }
.vz-repcard { background:linear-gradient(180deg,#ffffff,#f1f7ff); border:1.5px solid rgba(26,115,232,.18); border-radius:22px; padding:22px; text-align:center; margin-bottom:14px; box-shadow:0 10px 28px rgba(26,115,232,.12); }
.vz-eb { font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7f9bbd; margin-bottom:12px; }
.vz-grade { width:76px; height:76px; border-radius:26px; display:grid; place-items:center; margin:0 auto 12px; font:700 2rem 'Fraunces',serif; color:#fff; }
.vz-big { font:700 2.1rem 'Fraunces',serif; color:#12305c; line-height:1.1; }
.vz-pct { font-size:1rem; font-weight:800; margin:4px 0 14px; }
.vz-bar { background:#d6e6fb; border-radius:10px; height:9px; margin:0 auto 16px; max-width:280px; overflow:hidden; }
.vz-bar > div { height:100%; border-radius:10px; transition:width 1s ease; }
.vz-stats { display:flex; justify-content:center; gap:22px; margin-bottom:14px; flex-wrap:wrap; }
.vz-stats b { display:block; font-size:1.1rem; font-weight:800; } .vz-stats span { font-size:.64rem; color:#7f9bbd; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.vz-conf { display:inline-flex; align-items:center; gap:10px; background:#eaf3ff; border:1px solid rgba(26,115,232,.2); border-radius:14px; padding:9px 15px; margin-bottom:14px; font-size:.72rem; font-weight:800; color:#2b62b5; text-transform:uppercase; letter-spacing:.05em; }
.vz-fbk { font-size:.85rem; color:#40648f; line-height:1.75; text-align:left; background:#f3f8ff; border:1px solid rgba(26,115,232,.12); border-radius:14px; padding:12px 14px; margin-bottom:10px; }
.vz-verdict { font-size:.8rem; color:#2b62b5; font-style:italic; border-top:1px solid rgba(26,115,232,.14); padding-top:10px; }
.vz-two { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.vz-box { flex:1; min-width:140px; border-radius:16px; padding:12px 14px; }
.vz-box .h { font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; } .vz-box .c { font-size:.8rem; line-height:1.55; }
.vz-box.g { background:#eaf8f1; border:1px solid #bfe9d3; } .vz-box.g .h { color:#1f9d70; } .vz-box.g .c { color:#2b7a5c; }
.vz-box.r { background:#fff0f3; border:1px solid #ffd0da; } .vz-box.r .h { color:#e0567b; } .vz-box.r .c { color:#a63457; }
.vz-box.b { background:#eaf3ff; border:1px solid rgba(26,115,232,.2); } .vz-box.b .h { color:#1a73e8; } .vz-box.b .c { color:#27466e; line-height:1.7; }
.vz-q { border-radius:16px; padding:12px 14px; margin-bottom:8px; }
.vz-q.ok { background:#f1fbf6; border:1.5px solid #cdeedd; } .vz-q.no { background:#fff6f8; border:1.5px solid #ffdbe3; }
.vz-qh { display:flex; align-items:flex-start; gap:10px; margin-bottom:6px; }
.vz-qn { width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:.72rem; font-weight:800; flex-shrink:0; }
.vz-q.ok .vz-qn { background:#bfe9d3; color:#1b7f57; } .vz-q.no .vz-qn { background:#ffd0da; color:#c2365f; }
.vz-qt { font-size:.83rem; color:#12305c; font-weight:700; line-height:1.4; flex:1; }
.vz-qs { font-size:.76rem; color:#7f9bbd; font-style:italic; padding-left:34px; margin-bottom:4px; }
.vz-qa { font-size:.78rem; color:#27466e; padding-left:34px; line-height:1.55; }
.vz-closebtn { width:100%; margin-top:8px; padding:13px; border:none; border-radius:16px; color:#fff; font:800 .9rem 'DM Sans',sans-serif; cursor:pointer; background:linear-gradient(135deg,#5aa5ff,#1a73e8); box-shadow:0 10px 22px rgba(26,115,232,.32); }
@media (max-width:520px) {
  .vz-head { padding:12px 12px; gap:8px; } .vz-logo { width:36px; height:36px; border-radius:12px; } .vz-pill { padding:5px 9px; }
  .vz-aiwrap { padding:12px 12px 0; } .vz-ai { padding:13px 14px; } .vz-body { padding:12px 12px; } .vz-stu { padding:0 12px 12px; } .vz-foot { padding:10px 12px; }
  .vz-by { display:none; } .vz-foot > div { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce) { #vivaCanvas *, #vivaCanvas *::before { animation:none !important; } }