/* Mode suara dua arah: layar penuh dengan bola status (mendengar / berpikir / berbicara). */
.send-btn.voice-start{background:var(--ink);color:var(--bg);opacity:1}
.send-btn.voice-start:hover{opacity:.88}

.voice-mode{--orb:var(--accent,#c0603a);position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));animation:voice-in .2s ease-out}
@keyframes voice-in{from{opacity:0}to{opacity:1}}
.voice-mode-top{display:flex;align-items:center;justify-content:space-between}
.voice-mode-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}
.voice-mode-x{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);cursor:pointer}
.voice-mode-x:hover{background:var(--surface-2);color:var(--ink)}
.voice-mode-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0}
.voice-orb{position:relative;width:min(46vw,190px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;margin-bottom:22px;-webkit-tap-highlight-color:transparent}
.voice-orb:focus-visible{outline:3px solid var(--orb);outline-offset:8px;border-radius:50%}
.voice-orb-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in oklab,var(--orb) 55%,#fff) 0%,var(--orb) 55%,color-mix(in oklab,var(--orb) 70%,#000) 100%);box-shadow:0 18px 50px -12px color-mix(in oklab,var(--orb) 70%,transparent);transition:transform .3s ease}
.voice-orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in oklab,var(--orb) 45%,transparent);opacity:0}
.is-listening .voice-orb-core{animation:orb-breathe 1.6s ease-in-out infinite}
.is-listening .voice-orb-ring{animation:orb-ring 2s ease-out infinite}
.is-listening .voice-orb-ring.r2{animation-delay:1s}
.is-thinking .voice-orb-core{animation:orb-think 1.1s ease-in-out infinite;filter:saturate(.75)}
.is-speaking .voice-orb-core{animation:orb-speak .45s ease-in-out infinite alternate}
.is-speaking .voice-orb-ring{animation:orb-ring 1.2s ease-out infinite}
.is-idle .voice-orb-core,.is-error .voice-orb-core{transform:scale(.86);filter:grayscale(.35)}
.is-error .voice-orb-core{filter:grayscale(1);opacity:.6}
@keyframes orb-breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1)}}
@keyframes orb-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@keyframes orb-think{0%,100%{transform:scale(.9) rotate(0)}50%{transform:scale(.84) rotate(8deg)}}
@keyframes orb-speak{from{transform:scale(.93)}to{transform:scale(1.04)}}
.voice-mode-state{margin:0;font:600 19px/1.3 var(--font)}
.voice-mode-hint{margin:0;font-size:13.5px;color:var(--ink-3)}
.voice-mode-text{width:100%;max-width:640px;margin:0 auto 14px;display:flex;flex-direction:column;gap:10px;max-height:32vh;overflow:auto}
.voice-mode-text p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.voice-mode-text span{display:block;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.voice-reply{color:var(--ink)!important}
.voice-mode-actions{display:flex;justify-content:center;gap:12px}
.voice-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:56px;height:56px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 15px/1 var(--font);cursor:pointer}
.voice-btn:hover{background:var(--surface-2)}
.voice-btn.end{background:#c2413a;border-color:#c2413a;color:#fff}
.voice-btn.end:hover{background:#a8352f}
.voice-btn:focus-visible{outline:2px solid var(--orb);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.voice-mode *{animation:none!important}}

/* Spoken conversation: compact stage, readable transcript, steady controls. */
.voice-mode:has(.voice-reply) .voice-mode-center{flex:0 0 auto;padding:12px 0 18px}
.voice-orb.has-vbuddy,.voice-mode:has(.voice-reply) .voice-orb.has-vbuddy{width:min(72vw,clamp(220px,32dvh,320px));margin-bottom:14px}
.voice-mode:has(.voice-reply) .voice-mode-state{font-size:17px}
.voice-mode-text{width:min(100%,720px);min-height:0;scrollbar-width:thin;scrollbar-gutter:stable;overscroll-behavior:contain}
.voice-mode:has(.voice-reply) .voice-mode-text{flex:1 1 auto;max-height:none;padding:10px 18px 24px;margin-bottom:12px;gap:22px;mask-image:linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.voice-mode-text h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:650 12px/1.5 var(--font);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.voice-mode-text h2 small{font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--sig-clay-strong,var(--accent))}
.voice-mode-text .voice-heard{padding:14px 18px;border:1px solid var(--line-soft);border-radius:16px;background:var(--surface-2);align-self:flex-end;max-width:90%}
.voice-mode-text .voice-heard h2{margin-bottom:5px}
.voice-mode-text .voice-heard p{font-size:14px;line-height:1.65;color:var(--ink-2)}
.voice-mode-text .voice-reply p{font-size:clamp(16px,1.3vw,18px);line-height:1.85;letter-spacing:-.01em;margin:0 0 16px;padding-left:14px;border-left:2px solid transparent;color:var(--ink-2);white-space:normal;overflow-wrap:anywhere}
.voice-mode-text .voice-reply p.is-current{color:var(--ink);border-left-color:var(--sig-clay,var(--accent))}
.voice-mode-actions{flex:0 0 auto;padding-top:10px;border-top:1px solid var(--line-soft)}
@media(max-width:600px){
 .voice-mode:has(.voice-reply) .voice-mode-center{padding:4px 0 12px}
 .voice-mode:has(.voice-reply) .voice-orb.has-vbuddy{width:min(72vw,clamp(220px,32dvh,320px));margin-bottom:10px}
 .voice-mode:has(.voice-reply) .voice-mode-text{padding:10px 3px 18px;gap:18px}
 .voice-mode-text .voice-reply p{font-size:16px;line-height:1.8;padding-left:10px}
 .voice-mode-text .voice-heard{max-width:95%;padding:10px 13px}
}
@media(max-height:650px){.voice-orb.has-vbuddy,.voice-mode:has(.voice-reply) .voice-orb.has-vbuddy{width:min(64vw,36dvh,240px);margin-bottom:6px}}