/* ── VOICE OVERLAY ───────────────────────────────── */
.voice-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 300;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: #060200;
}
.voice-overlay.open {
  display: flex;
  animation: voFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes voFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

/* ambient blobs */
.voice-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.va-blob { position: absolute; border-radius: 50%; filter: blur(55px); }
.va-blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(224,116,34,0.22) 0%, transparent 62%);
  top: -320px; left: 50%; transform: translateX(-50%);
  animation: blob1 10s ease-in-out infinite alternate;
}
.va-blob-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(160,40,0,0.14) 0%, transparent 65%);
  bottom: -140px; right: -80px;
  animation: blob2 13s ease-in-out 2s infinite alternate;
}
@keyframes blob1 {
  from { opacity: 0.65; transform: translateX(-50%) scale(1);    }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.28); }
}
@keyframes blob2 {
  from { opacity: 0.3; transform: scale(1)   rotate(0deg);  }
  to   { opacity: 0.8; transform: scale(1.45) rotate(30deg);}
}
.voice-ambient::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(224,116,34,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: gridDrift 22s linear infinite;
}

/* header */
.voice-header {
  position: relative; z-index: 2;
  width: 100%; display: flex; align-items: center; justify-content: center;
  padding: 26px 24px 0; flex-shrink: 0;
}
.voice-header-title {
  font-family: 'Cairo', sans-serif;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.voice-close-btn {
  position: absolute; left: 20px; top: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.38); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.3s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.voice-close-btn:hover {
  background: rgba(224,116,34,0.15); border-color: rgba(224,116,34,0.5);
  color: #F5903A; transform: scale(1.1) rotate(90deg);
}

/* center section */
.voice-center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px;
}

/* orb system */
.voice-orb-wrap {
  position: relative;
  width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
}
.vor-ring {
  position: absolute; border-radius: 50%;
  border-style: solid; border-color: transparent;
}
.vor-ring-1 {
  inset: -16px; border-width: 1px;
  border-color: rgba(224,116,34,0.28);
  animation: ringPulse 2.6s ease-in-out infinite;
}
.vor-ring-2 {
  inset: -34px; border-width: 1px;
  border-color: rgba(224,116,34,0.15);
  animation: ringPulse 3.2s ease-in-out 0.55s infinite;
}
.vor-ring-3 {
  inset: -56px; border-width: 1px;
  border-color: rgba(224,116,34,0.07);
  animation: ringPulse 4.0s ease-in-out 1.1s infinite;
}
@keyframes ringPulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%       { transform: scale(1.06); opacity: 0.2; }
}

.voice-orb-btn {
  width: 160px; height: 160px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.voice-orb-btn:hover .voice-orb { transform: scale(1.07); }
.voice-orb-btn:active .voice-orb { transform: scale(0.93); }

.voice-orb {
  width: 148px; height: 148px; border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,215,150,0.32) 0%, transparent 38%),
    radial-gradient(circle at 70% 72%, rgba(50,8,0,0.7) 0%, transparent 45%),
    conic-gradient(from 195deg, #F5903A, #D06020, #A84810, #6B2F06, #3A1402, #F5903A);
  box-shadow:
    0 0 0 1px rgba(224,116,34,0.38),
    0 0 45px rgba(224,116,34,0.7),
    0 0 90px rgba(224,116,34,0.38),
    0 0 150px rgba(224,116,34,0.16),
    0 32px 90px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(255,215,150,0.22),
    inset 0 -12px 30px rgba(0,0,0,0.58);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  animation: orbGlow 3s ease-in-out infinite;
}
@keyframes orbGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(224,116,34,0.38), 0 0 45px rgba(224,116,34,0.7), 0 0 90px rgba(224,116,34,0.38), 0 0 150px rgba(224,116,34,0.16), 0 32px 90px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,215,150,0.22), inset 0 -12px 30px rgba(0,0,0,0.58);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(224,116,34,0.55), 0 0 70px rgba(224,116,34,0.95), 0 0 130px rgba(224,116,34,0.55), 0 0 220px rgba(224,116,34,0.24), 0 32px 90px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,215,150,0.28), inset 0 -12px 30px rgba(0,0,0,0.58);
  }
}

/* spinning highlight layer */
.voice-orb-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(255,180,90,0.09) 25%, transparent 50%, rgba(255,180,90,0.06) 75%, transparent 100%);
  animation: orbSpin 10s linear infinite;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }

.voice-orb-shine {
  position: absolute; top: 16px; left: 22px;
  width: 44px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.18); filter: blur(6px);
  pointer-events: none;
}
.voice-orb-mic {
  font-size: 52px; color: rgba(255,255,255,0.95);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65));
  position: relative; z-index: 1; pointer-events: none;
}

.voice-status {
  font-family: 'Cairo', sans-serif;
  font-size: 17px; font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em; margin: 0; text-align: center;
  transition: color 0.3s;
}

/* waveform */
.voice-waveform {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; height: 64px;
  width: 100%; max-width: 340px; flex-shrink: 0;
}
.vw-bar {
  flex: 1; max-width: 5px; height: 52px;
  border-radius: 99px;
  background: linear-gradient(to top, rgba(224,116,34,0.4), rgba(245,144,58,0.95), rgba(255,186,110,0.85));
  transform-origin: center;
  transform: scaleY(0.07);
  box-shadow: 0 0 8px rgba(245,144,58,0.2);
  animation: wvBar 1.1s ease-in-out infinite alternate;
}
.vw-bar:nth-child(1)  { animation-duration:0.65s; animation-delay:0.00s; }
.vw-bar:nth-child(2)  { animation-duration:0.83s; animation-delay:0.13s; }
.vw-bar:nth-child(3)  { animation-duration:0.71s; animation-delay:0.25s; }
.vw-bar:nth-child(4)  { animation-duration:0.96s; animation-delay:0.07s; }
.vw-bar:nth-child(5)  { animation-duration:0.78s; animation-delay:0.39s; }
.vw-bar:nth-child(6)  { animation-duration:1.06s; animation-delay:0.19s; }
.vw-bar:nth-child(7)  { animation-duration:0.62s; animation-delay:0.31s; }
.vw-bar:nth-child(8)  { animation-duration:0.89s; animation-delay:0.03s; }
.vw-bar:nth-child(9)  { animation-duration:1.13s; animation-delay:0.45s; }
.vw-bar:nth-child(10) { animation-duration:0.74s; animation-delay:0.15s; }
.vw-bar:nth-child(11) { animation-duration:0.93s; animation-delay:0.27s; }
.vw-bar:nth-child(12) { animation-duration:0.67s; animation-delay:0.49s; }
.vw-bar:nth-child(13) { animation-duration:1.09s; animation-delay:0.09s; }
.vw-bar:nth-child(14) { animation-duration:0.76s; animation-delay:0.37s; }
.vw-bar:nth-child(15) { animation-duration:0.87s; animation-delay:0.21s; }
.vw-bar:nth-child(16) { animation-duration:0.64s; animation-delay:0.33s; }
.vw-bar:nth-child(17) { animation-duration:1.01s; animation-delay:0.05s; }
.vw-bar:nth-child(18) { animation-duration:0.73s; animation-delay:0.43s; }
.vw-bar:nth-child(19) { animation-duration:0.91s; animation-delay:0.17s; }
.vw-bar:nth-child(20) { animation-duration:0.69s; animation-delay:0.51s; }
.vw-bar:nth-child(21) { animation-duration:0.85s; animation-delay:0.23s; }
.vw-bar:nth-child(22) { animation-duration:1.11s; animation-delay:0.09s; }
.vw-bar:nth-child(23) { animation-duration:0.77s; animation-delay:0.35s; }
.vw-bar:nth-child(24) { animation-duration:0.61s; animation-delay:0.18s; }
@keyframes wvBar {
  from { transform: scaleY(0.06); opacity: 0.28; }
  to   { transform: scaleY(1);    opacity: 1; }
}
.voice-overlay.muted .vw-bar {
  animation-play-state: paused;
  transform: scaleY(0.06) !important; opacity: 0.18 !important;
  transition: transform 0.5s, opacity 0.5s;
}

/* transcript card */
.voice-transcript-card {
  position: relative; z-index: 2;
  width: calc(100% - 48px); max-width: 460px;
  min-height: 64px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: 16px 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.voice-transcript {
  font-family: 'Cairo', sans-serif;
  font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-align: center; line-height: 1.65;
  width: 100%; direction: ltr;
}
.voice-transcript:empty::before {
  content: attr(data-ph);
  color: rgba(255,255,255,0.18);
  font-size: 14px; font-weight: 400;
}

/* controls */
.voice-controls-wrap {
  position: relative; z-index: 2;
  padding: 20px 24px 52px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex-shrink: 0;
}
.voice-controls-pill {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9999px; padding: 10px 18px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07);
}
.voice-ctrl-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.52); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
}
.voice-ctrl-btn:hover {
  background: rgba(224,116,34,0.18); border-color: rgba(224,116,34,0.5);
  color: #F5903A; transform: scale(1.1);
}
.voice-mute-btn.muted {
  background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.45); color: #F87171;
}
.voice-end-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(145deg, #F87171, #DC2626, #991B1B);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  box-shadow: 0 4px 28px rgba(220,38,38,0.55), 0 0 0 4px rgba(220,38,38,0.1);
}
.voice-end-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 40px rgba(220,38,38,0.78), 0 0 0 8px rgba(220,38,38,0.14);
}
.voice-end-btn:active { transform: scale(0.93); }

@media (max-width: 640px) {
  .voice-orb-wrap { width: 170px; height: 170px; }
  .voice-orb-btn  { width: 130px; height: 130px; }
  .voice-orb      { width: 118px; height: 118px; }
  .voice-orb-mic  { font-size: 40px; }
  .vor-ring-1 { inset: -12px; }
  .vor-ring-2 { inset: -26px; }
  .vor-ring-3 { inset: -44px; }
  .voice-waveform { max-width: 280px; gap: 3px; }
  .vw-bar { max-width: 4px; }
  .voice-controls-wrap { padding-bottom: 38px; }
}