/* ══════════════════════════════════════════════════════
   SESLİ SOHBET OVERLAY
   ══════════════════════════════════════════════════════ */

/* ── KOD BLOĞU + KOPYALA BUTONU ──────────────────────── */
.code-block{
  margin:10px 0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(108,62,244,0.18);
}
.code-block-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;background:rgba(108,62,244,0.08);
  border-bottom:1px solid rgba(108,62,244,0.15);
}
.code-lang{
  font-size:11px;font-weight:600;letter-spacing:.3px;
  color:var(--t3);text-transform:uppercase;
}
.copy-code-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;border:1px solid var(--glassb);
  background:var(--glass);color:var(--t2);
  font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.copy-code-btn:hover{background:var(--glassh);color:var(--t1)}
.copy-code-btn.copied{
  color:#4ade80;border-color:rgba(74,222,128,0.35);
  background:rgba(74,222,128,0.1);
}
.code-block pre{
  margin:0 !important;border:none !important;border-radius:0 !important;
}

.voice-trigger-btn{margin-right:2px}

/* ── TEK MESAJ SESLİ OKUMA BUTONU ─────────────────────── */
.msg-speak-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin-left:6px;margin-top:6px;
  border-radius:50%;border:1px solid transparent;
  background:transparent;color:var(--t3);cursor:pointer;
  vertical-align:middle;
  transition:all .18s ease;
}
.message.assistant:hover .msg-speak-btn{color:var(--t2)}
.msg-speak-btn:hover{
  background:rgba(108,62,244,0.14);color:#c4b5fd;
  border-color:rgba(108,62,244,0.25);
}
.msg-speak-btn.speaking{
  color:#a855f7;background:rgba(168,85,247,0.14);
  border-color:rgba(168,85,247,0.35);
  animation:speakPulse 1.1s ease-in-out infinite;
}
@keyframes speakPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,85,247,0.35)}
  50%{box-shadow:0 0 0 5px rgba(168,85,247,0)}
}

.voice-overlay{
  position:fixed;inset:0;z-index:999999;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:28px 20px 40px;
  opacity:0;pointer-events:none;
  transform:scale(1.02);
  transition:opacity .32s ease, transform .32s ease;
}
.voice-overlay.open{opacity:1;pointer-events:auto;transform:scale(1)}

.vo-bg{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(108,62,244,0.16), transparent 60%), rgba(4,4,9,0.97);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
}

.vo-close{
  position:relative;align-self:flex-end;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--glassb);
  background:var(--glass);color:var(--t2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s;
}
.vo-close:hover{color:var(--t1);background:var(--glassh)}

.vo-center{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  width:100%;max-width:420px;
}

.vo-orb-wrap{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}

.vo-orb{
  width:96px;height:96px;border-radius:50%;
  background:var(--grad2);
  box-shadow:0 0 60px var(--glow);
  transition:transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
  display:flex;align-items:center;justify-content:center;
}

/* ── YÜZ (göz + ağız) ─────────────────────────────────── */
.vo-face{ overflow:visible }
.vo-eye{ fill:#fff; transition:ry .1s ease }
.vo-mouth{ stroke:#fff; stroke-width:5; transition:d .1s ease }

/* göz kırpma */
.vo-orb-wrap.vo-blink .vo-eye{ ry:0.6 }

/* düşünürken gözler yana bakar gibi kayar */
.vo-orb-wrap.vo-thinking-eyes .vo-eye-l{ animation:voGlance 1.1s ease-in-out infinite }
.vo-orb-wrap.vo-thinking-eyes .vo-eye-r{ animation:voGlance 1.1s ease-in-out infinite }
@keyframes voGlance{
  0%,100%{ transform:translateX(0) }
  50%{ transform:translateX(3px) }
}

/* dinlerken gözler biraz büyür (dikkatli bakış) */
.vo-orb-wrap.st-listening .vo-eye{ ry:9 }
.vo-orb-wrap.st-idle .vo-eye{ ry:6 }

.vo-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(168,85,247,0.3);
  opacity:0;
}
.vo-ring.r1{width:120px;height:120px}
.vo-ring.r2{width:150px;height:150px}
.vo-ring.r3{width:180px;height:180px}

/* idle */
.vo-orb-wrap.st-idle .vo-orb{transform:scale(.85);box-shadow:0 0 30px var(--glow)}

/* listening: hafif nefes alma + halkalar yayılıyor */
.vo-orb-wrap.st-listening .vo-orb{animation:voBreath 2.2s ease-in-out infinite}
.vo-orb-wrap.st-listening .vo-ring{animation:voExpand 2.4s ease-out infinite}
.vo-orb-wrap.st-listening .vo-ring.r2{animation-delay:.5s}
.vo-orb-wrap.st-listening .vo-ring.r3{animation-delay:1s}

/* thinking: dönen gradyan */
.vo-orb-wrap.st-thinking .vo-orb{animation:voSpinPulse 1.1s ease-in-out infinite}

/* speaking: daha canlı, hızlı nabız */
.vo-orb-wrap.st-speaking .vo-orb{animation:voTalk .5s ease-in-out infinite}

@keyframes voBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes voExpand{
  0%{opacity:.55;transform:scale(.7)}
  100%{opacity:0;transform:scale(1)}
}
@keyframes voSpinPulse{
  0%,100%{transform:scale(.92) rotate(0deg);filter:hue-rotate(0deg)}
  50%{transform:scale(1.02) rotate(180deg);filter:hue-rotate(40deg)}
}
@keyframes voTalk{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.14)}
}

.vo-status{
  font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:var(--t1);
  letter-spacing:.2px;text-align:center;
}
.vo-transcript{
  min-height:44px;max-width:360px;
  color:var(--t2);font-size:13.5px;line-height:1.6;text-align:center;
  padding:0 8px;
}

.vo-retry{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:100px;
  border:1px solid rgba(108,62,244,0.4);
  background:rgba(108,62,244,0.14);color:var(--t1);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.vo-retry:hover{background:rgba(108,62,244,0.26)}

.vo-controls{
  position:relative;display:flex;align-items:center;justify-content:center;gap:28px;width:100%;
}
.vo-side-btn{
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--glassb);background:var(--glass);color:var(--t2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .2s;
}
.vo-side-btn:hover{color:var(--t1);background:var(--glassh)}
.vo-side-btn.vo-spacer{visibility:hidden;pointer-events:none}
.vo-side-btn.is-muted{color:#f87171;border-color:rgba(248,113,113,0.35)}
.vo-side-btn.is-muted .mute-wave{display:none}
.vo-side-btn:not(.is-muted) .mute-x{display:none}

.vo-mic{
  width:66px;height:66px;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px var(--glow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.vo-mic:hover{transform:scale(1.05)}
.vo-mic:active{transform:scale(.95)}

.vo-fallback{
  position:relative;width:100%;max-width:360px;margin:14px auto 0;
}
.vo-fallback input{
  width:100%;padding:11px 16px;border-radius:100px;
  border:1px solid var(--glassb);background:var(--glass);color:var(--t1);
  font-family:'DM Sans',sans-serif;font-size:13px;outline:none;
  text-align:center;transition:border-color .2s;
}
.vo-fallback input:focus{border-color:rgba(108,62,244,0.5)}
.vo-fallback input::placeholder{color:var(--t3)}

@media (max-width:480px){
  .vo-orb-wrap{width:150px;height:150px}
  .vo-orb{width:80px;height:80px}
  .vo-ring.r1{width:100px;height:100px}
  .vo-ring.r2{width:126px;height:126px}
  .vo-ring.r3{width:150px;height:150px}
}