/* ═══════════════════════════════════════════════════════════════
   Voice Mode — صفحه‌ی گفتگوی صوتی
   مینیمال و تاریک؛ همان توکن‌های رنگی style.css
   ═══════════════════════════════════════════════════════════════ */

/* پرده‌ی نیمه‌شفاف: گفتگوی زیرین دیده می‌شود — تا معلوم باشد کجایی —
   ولی پشت حجابی تیره و کمی مات، پس واضح است که الان دست‌نخوردنی است.
   جلوی کلیک را همین لایه می‌گیرد؛ جلوی Tab و صفحه‌کلید را inert در
   voice-mode.js. */
.vm-overlay {
  --vm-energy: 0;
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  background:
    radial-gradient(80% 60% at 50% 38%, rgba(20, 22, 31, .76) 0%, rgba(8, 9, 13, .58) 100%),
    rgba(6, 7, 10, .70);
  -webkit-backdrop-filter: blur(2.5px) saturate(.75);
  backdrop-filter: blur(2.5px) saturate(.75);
  animation: vmIn .35s ease;
}
.vm-overlay.vm-show { display: flex; }
body.vm-on { overflow: hidden; }

/* صفحه‌ی زیرین کمی عقب می‌نشیند تا چشم روی گوی بماند.
   pointer-events پشتیبانِ inert است برای مرورگرهای قدیمی‌تر. */
body.vm-on #mainApp {
  filter: saturate(.55);
  pointer-events: none;
  transition: filter .35s ease;
}

/* بدون backdrop-filter، حجاب کمی پررنگ‌تر تا متنِ زیرین حواس را نبرد */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vm-overlay { background: rgba(6, 7, 10, .86); }
}

@keyframes vmIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════
   صحنه: فقط لوگو، وسطِ صفحه، بزرگ.
   هیچ متنی زیرش نیست — نه چیزی که تو گفتی نه چیزی که سلفا می‌گوید.
   حالت را خودِ لوگو می‌گوید: رنگِ هاله و جنسِ حرکتِ موج‌ها.
   شدتِ موج از ‎--vm-energy می‌آید که JS با هر کلمه بالا می‌برد.
   ═══════════════════════════════════════════════════════════════ */
.vm-inner {
  margin: auto;
  width: min(720px, calc(100% - 40px));
  min-height: 100dvh;
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vm-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* ─── لوگو ─── */
.vm-orb {
  --vm-size: min(46vmin, 400px);
  position: relative;
  width: var(--vm-size);
  height: var(--vm-size);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vm-orb svg {
  width: 62%; height: 62%;
  position: relative; z-index: 3;
  color: var(--gold, #c9a961);
  /* نفسِ ریزِ خودِ لوگو با انرژی — نه آنقدر که بپرد */
  transform: scale(calc(1 + var(--vm-energy) * 0.055));
  transition: transform .12s cubic-bezier(.2,.9,.3,1), opacity .4s ease;
  will-change: transform;
}

/* هاله‌ی نرم پشت لوگو — رنگش حالت را می‌گوید */
.vm-halo {
  position: absolute; inset: 6%;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(201,169,97, calc(.10 + var(--vm-energy) * .26)) 0%,
    rgba(201,169,97, 0) 68%);
  transform: scale(calc(1 + var(--vm-energy) * .16));
  transition: transform .16s ease-out, background .16s linear;
}

/* موج‌ها: سه حلقه که از لوگو بیرون می‌زنند و محو می‌شوند */
.vm-wave {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,.5);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── گوش می‌دهم: تنفسِ آرام، آبی‌مایل ── */
.vm-overlay[data-state="listening"] .vm-halo {
  background: radial-gradient(circle, rgba(122,157,199,.13) 0%, rgba(122,157,199,0) 68%);
}
.vm-overlay[data-state="listening"] .vm-wave {
  border-color: rgba(122,157,199,.42);
  animation: vmBreath 3.4s ease-in-out infinite;
}
.vm-overlay[data-state="listening"] .vm-wave2 { animation-delay: 1.13s; }
.vm-overlay[data-state="listening"] .vm-wave3 { animation-delay: 2.26s; }

/* ── فکر می‌کنم: چرخشِ آرامِ یک کمان ── */
.vm-overlay[data-state="thinking"] .vm-wave {
  border-color: transparent;
  border-top-color: rgba(201,169,97,.55);
  opacity: 1;
  animation: vmSpin 2.6s linear infinite;
}
.vm-overlay[data-state="thinking"] .vm-wave2 { inset: 1%; animation-duration: 3.8s; animation-direction: reverse; border-top-color: rgba(201,169,97,.28); }
.vm-overlay[data-state="thinking"] .vm-wave3 { display: none; }
.vm-overlay[data-state="thinking"] .vm-orb svg { opacity: .55; }

/* ── حرف می‌زنم: موج‌ها بیرون می‌زنند، دامنه از انرژی ── */
.vm-overlay[data-state="speaking"] .vm-wave {
  border-color: rgba(232,200,120, calc(.30 + var(--vm-energy) * .5));
  animation: vmRipple 1.5s cubic-bezier(.22,.7,.3,1) infinite;
}
.vm-overlay[data-state="speaking"] .vm-wave2 { animation-delay: .5s; }
.vm-overlay[data-state="speaking"] .vm-wave3 { animation-delay: 1s; }
.vm-overlay[data-state="speaking"] .vm-halo {
  background: radial-gradient(circle,
    rgba(232,200,120, calc(.12 + var(--vm-energy) * .3)) 0%,
    rgba(232,200,120, 0) 66%);
}

@keyframes vmRipple {
  0%   { transform: scale(1);    opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes vmBreath {
  0%   { transform: scale(1);    opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: scale(1.42); opacity: 0; }
}
@keyframes vmSpin { to { transform: rotate(360deg); } }

/* کسانی که حرکت اذیتشان می‌کند: موج بی‌حرکت، فقط روشنایی */
@media (prefers-reduced-motion: reduce) {
  .vm-wave { animation: none !important; opacity: .28; }
  .vm-orb svg { transition: none; }
}

/* ─── تنها متنِ مجاز: خطا ─── */
.vm-err {
  flex: 0 0 auto;
  font-size: 12.5px;
  line-height: 1.9;
  color: #d99a77;
  margin: 0 auto 14px;
  max-width: 460px;
  min-height: 0;
  opacity: 0;
  transition: opacity .3s ease;
}
.vm-err.vm-err-on { opacity: .92; }

/* ─── نوار کنترل، ته صفحه و کم‌رنگ ─── */
.vm-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 0 34px;
  opacity: .5;
  transition: opacity .3s ease;
}
.vm-bar:hover { opacity: 1; }

.vm-gender {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, .12));
  background: rgba(255, 255, 255, .03);
}
.vm-gender-btn {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  width: 32px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-tertiary, rgba(244, 232, 200, .42));
  cursor: pointer;
  transition: background .2s, color .2s;
}
.vm-gender-btn:hover { color: var(--gold, #c9a961); }
.vm-gender-btn.active {
  background: rgba(201, 169, 97, .16);
  color: var(--gold-bright, #e8c878);
}

.vm-btn {
  font-family: inherit;
  font-size: 12.5px;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, .12));
  color: var(--ink-secondary, rgba(244, 232, 200, .7));
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.vm-btn:hover { color: var(--gold, #c9a961); border-color: rgba(201, 169, 97, .4); }
.vm-btn-end { background: rgba(217, 119, 87, .1); border-color: rgba(217, 119, 87, .3); color: #d97757; }
.vm-btn-end:hover { background: rgba(217, 119, 87, .18); border-color: rgba(217, 119, 87, .5); color: #d97757; }

/* ─── دکمه‌ی ورود در نوار نوشتن ─── */
.btn-voice-mode {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line-strong, rgba(255, 255, 255, .12));
  color: var(--gold, #c9a961);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-voice-mode:hover { background: rgba(201, 169, 97, .12); border-color: rgba(201, 169, 97, .4); transform: scale(1.05); }
.btn-voice-mode svg { width: 17px; height: 17px; }

@media (max-width: 640px) {
  .vm-orb { --vm-size: min(66vmin, 320px); }
  .vm-bar { padding-bottom: 26px; opacity: .75; }
}
@media (max-height: 620px) {
  .vm-orb { --vm-size: min(42vmin, 240px); }
}


/* ═══════════════════════════════════════════════════════════════
   دکمه‌ی «صدای سلفا» در هدر
   حالت خاموش با ‎.btn-icon.muted رنگ ink-quaternary (آلفا ۰٫۲۲) و
   opacity ۰٫۵ می‌گرفت — روی پس‌زمینه‌ی تیره یعنی آلفای مؤثر ۰٫۱۱،
   که عملاً نامرئی است. حالا خاموش هم دیده می‌شود و شکلش (بلندگوی
   خط‌خورده) خودش می‌گوید خاموش است.
   ═══════════════════════════════════════════════════════════════ */
#ttsToggleBtn .tts-ic-off { display: none; }
#ttsToggleBtn.muted .tts-ic-off { display: block; }
#ttsToggleBtn.muted .tts-ic-on  { display: none; }

#ttsToggleBtn.muted {
  color: var(--ink-tertiary, rgba(244, 232, 200, 0.42));
  opacity: .9;
  border-color: rgba(255, 255, 255, 0.10);
}
#ttsToggleBtn.muted:hover {
  color: var(--gold, #c9a961);
  border-color: rgba(201, 169, 97, .35);
  opacity: 1;
}
#ttsToggleBtn.active { color: var(--gold-bright, #e8c878); }