/* =========================================================================
   voice.css — ხმოვანი ჩათის ინდიკატორი (HUD, ქვედა მარცხენა მხარე, მაპის ზემოთ)
   ფერები: #FF4747 · #EAEAEA · მუქი შავი
   რადარი (.radar) = 300x220, ეკრანის ძირიდან 20px -> მისი ზედა კიდე 240px-ზეა.
   ამიტომ --vi-bottom >= 252px, რომ რადარს არ გადაეფაროს.
   ========================================================================= */
#voice-ind {
  --vi-left: 30px;
  --vi-bottom: 252px;
  position: absolute; left: var(--vi-left); bottom: var(--vi-bottom);
  display: flex; align-items: center; gap: 11px;
  padding: 7px 18px 7px 8px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(14, 14, 17, .80), rgba(8, 8, 10, .80));
  border: 1px solid rgba(234, 234, 234, .10);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #eaeaea; font-family: 'Noto Sans Georgian', 'Manrope', sans-serif;
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .25s ease, border-color .2s ease, box-shadow .2s ease;
}
#voice-ind.on { opacity: 1; transform: none; }
.vi-mic {
  position: relative; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #0b0b0d; border: 2px solid rgba(234, 234, 234, .22); color: rgba(234, 234, 234, .65);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease;
}
.vi-mic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vi-slash { display: none; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; border-radius: 1px;
  background: #ff4747; box-shadow: 0 0 6px rgba(255, 71, 71, .7); transform: translate(-50%, -50%) rotate(-45deg); }

.vi-body { display: flex; flex-direction: column; gap: 4px; }
.vi-label { font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.vi-sub { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: rgba(234, 234, 234, .5); }
.vi-bars { display: flex; align-items: flex-end; gap: 3px; height: 12px; }
.vi-bars i { width: 9px; height: 4px; border-radius: 2px; background: rgba(234, 234, 234, .16); transition: background .08s linear; }
.vi-bars i:nth-child(2) { height: 6px; } .vi-bars i:nth-child(3) { height: 8px; }
.vi-bars i:nth-child(4) { height: 10px; } .vi-bars i:nth-child(5) { height: 12px; }
.vi-bars i.f { background: #eaeaea; }

/* ლაპარაკობს */
#voice-ind.speaking { border-color: rgba(255, 71, 71, .55); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 71, 71, .28); }
#voice-ind.speaking .vi-mic { border-color: #ff4747; color: #fff; background: #1a0b0b; box-shadow: 0 0 14px rgba(255, 71, 71, .55); }
#voice-ind.speaking .vi-mic::after { content: ''; position: absolute; inset: -2px; border-radius: 11px; border: 2px solid #ff4747; opacity: 0; animation: viRing 1.2s ease-out infinite; }
#voice-ind.speaking .vi-bars i.f { background: #ff4747; box-shadow: 0 0 6px rgba(255, 71, 71, .6); }

/* მიკროფონის მდგომარეობები (data-vs) */
#voice-ind[data-vs="none"] .vi-label, #voice-ind[data-vs="quiet"] .vi-label { color: rgba(234, 234, 234, .65); }
#voice-ind[data-vs="none"] .vi-mic { border-color: rgba(234, 234, 234, .3); color: rgba(234, 234, 234, .6); box-shadow: none; background: #0b0b0d; }
#voice-ind[data-vs="none"] .vi-mic::after { animation: none; }
#voice-ind[data-vs="good"] .vi-label { color: #eaeaea; }
#voice-ind[data-vs="loud"] .vi-label, #voice-ind[data-vs="nomic"] .vi-label { color: #ff4747; }
#voice-ind[data-vs="nomic"] .vi-mic { border-color: rgba(255, 71, 71, .45); color: #ff4747; box-shadow: none; }
#voice-ind[data-vs="nomic"] .vi-mic::after { animation: none; }

/* მიკროფონი გამორთულია */
#voice-ind.muted .vi-mic { color: #ff4747; border-color: rgba(255, 71, 71, .45); }
#voice-ind.muted .vi-slash { display: block; }
#voice-ind.muted .vi-label { color: rgba(234, 234, 234, .6); }
#voice-ind.muted .vi-bars { opacity: .35; }

@keyframes viRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }