/* Audiofiend: тёмный неон + стекло (Y2K). Шрифты системные, без внешних ресурсов; стили только из этого файла (CSP: style-src 'self'). */
:root {
  --bg: #05070F;
  --blue: #1F4DFF;
  --cyan: #4DA3FF;
  --violet: #7A5CFF;
  --white: #F5F7FF;
  --muted: #8A93B8;
  --track: #151B38;
  --dim: #1A2140;
  --orb: min(52vw, 220px);
  --safe-top: calc(env(safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
  --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--white); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(120% 60% at 50% 38%, rgba(31, 77, 255, 0.20), transparent 60%),
    radial-gradient(70% 40% at 80% 70%, rgba(122, 92, 255, 0.14), transparent 70%),
    var(--bg);
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 18px) 16px calc(var(--safe-bottom) + 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- шапка --- */
.brand { display: flex; align-items: center; gap: 10px; direction: ltr; }
.brand-icon { width: 30px; height: 22px; fill: var(--cyan); filter: drop-shadow(0 0 6px rgba(77, 163, 255, 0.7)); }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: 0.3em; margin-right: -0.3em; }
.brand-name .audio { color: var(--white); }
.brand-name .fiend { color: var(--blue); text-shadow: 0 0 14px rgba(31, 77, 255, 0.65); }

/* --- круг --- */
.stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; padding: 28px 0 12px; }
.orb {
  position: relative;
  width: var(--orb);
  height: var(--orb);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
}
.orb:focus-visible { box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.5); border-radius: 50%; }

.ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 18px rgba(77, 163, 255, 0.45), inset 0 0 14px rgba(77, 163, 255, 0.25);
  opacity: 0;
  pointer-events: none;
}
/* кольца-волны — только при прослушивании (и на «готово»); в покое их нет */
[data-screen="listening"] .ring, [data-screen="done"] .ring { animation: ring 3s ease-out infinite; }
.ring.r2 { border-color: var(--violet); box-shadow: 0 0 18px rgba(122, 92, 255, 0.45), inset 0 0 14px rgba(122, 92, 255, 0.25); animation-delay: -1s; }
.ring.r3 { animation-delay: -2s; }
@keyframes ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.arc { position: absolute; inset: -9%; width: 118%; height: 118%; overflow: visible; pointer-events: none; }
.arc .track { fill: none; stroke: var(--track); stroke-width: 1.6; }
.arc .prog {
  fill: none; stroke: url(#arcGrad); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 295.31; stroke-dashoffset: 295.31;
  filter: drop-shadow(0 0 3px rgba(77, 163, 255, 0.9));
}

.glass {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 40px rgba(31, 77, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -12px 24px rgba(31, 77, 255, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease;
}
.orb:active .glass { transform: scale(0.97); }

.core {
  position: relative;
  width: 66%; height: 66%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #7FB4FF 0%, var(--blue) 52%, #0B2487 100%);
  box-shadow: 0 0 34px rgba(31, 77, 255, 0.75), inset 0 -8px 18px rgba(0, 10, 80, 0.55);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.shine {
  position: absolute; top: 7%; left: 15%;
  width: 46%; height: 26%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  transform: rotate(-24deg);
  pointer-events: none;
}
.bars { position: relative; display: flex; align-items: center; justify-content: center; gap: 7%; width: 56%; height: 56%; direction: ltr; }
.bars i {
  display: block; flex: 1 1 0; max-width: 12%; height: 100%;
  border-radius: 99px;
  background: var(--white);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
  transform-origin: center;
}
/* покой: столбики неподвижны (волна-«эквалайзер» только при прослушивании) */
.bars i:nth-child(1), .bars i:nth-child(5) { transform: scaleY(0.4); }
.bars i:nth-child(2), .bars i:nth-child(4) { transform: scaleY(0.72); }
.bars i:nth-child(3) { transform: scaleY(1); }
[data-screen="idle"] .bars i { animation: none; }
[data-screen="listening"] .bars i, [data-screen="done"] .bars i { animation: bar 1.6s ease-in-out infinite; }
.bars i:nth-child(1) { animation-delay: -0.2s; }
.bars i:nth-child(2) { animation-delay: -0.7s; }
.bars i:nth-child(3) { animation-delay: -1.1s; }
.bars i:nth-child(4) { animation-delay: -0.5s; }
.bars i:nth-child(5) { animation-delay: -0.9s; }
@keyframes bar { 0%, 100% { transform: scaleY(0.28); } 50% { transform: scaleY(1); } }

/* ПОКОЙ: круг мягко «дышит» — только transform (scale 1.00–1.03, сдвиг 3 px), цикл 7 с */
/* то же «дыхание» у тусклого круга на экранах «не нашёл», лимитов, ошибки и «нет микрофона» (цвета не меняются);
   «готово» и «не из Telegram» не дышат. Цикл стартует с transform: none, поэтому скачка при переходе из прослушивания нет */
[data-screen="idle"] .glass, [data-screen="notfound"] .glass, [data-screen="limit"] .glass,
[data-screen="error"] .glass, [data-screen="nomic"] .glass { animation: breathe 7s ease-in-out infinite; will-change: transform; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.03); }
}

/* слушаю: бары быстрее */
[data-screen="listening"] .bars i { animation-duration: 0.9s; }

/* состояния без звука: тусклое ядро, плоские столбики, без колец и дуги */
[data-screen="notfound"] .core,
[data-screen="nomic"] .core,
[data-screen="limit"] .core,
[data-screen="error"] .core,
[data-screen="notgram"] .core {
  background: radial-gradient(circle at 34% 26%, #262F58 0%, var(--dim) 60%, #12172F 100%);
  box-shadow: 0 0 16px rgba(26, 33, 64, 0.8), inset 0 -8px 18px rgba(0, 0, 0, 0.4);
}
[data-screen="notfound"] .bars i,
[data-screen="nomic"] .bars i,
[data-screen="limit"] .bars i,
[data-screen="error"] .bars i,
[data-screen="notgram"] .bars i { animation: none; transform: scaleY(0.14); background: var(--muted); box-shadow: none; }
[data-screen="notfound"] .ring, [data-screen="nomic"] .ring, [data-screen="limit"] .ring,
[data-screen="error"] .ring, [data-screen="notgram"] .ring { animation: none; opacity: 0; }
[data-screen="notfound"] .glass, [data-screen="nomic"] .glass, [data-screen="limit"] .glass,
[data-screen="error"] .glass, [data-screen="notgram"] .glass { box-shadow: 0 10px 30px rgba(10, 14, 40, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2); }
[data-screen="done"] .bars i { animation-duration: 2.4s; }
[data-screen="idle"] .arc .prog, [data-screen="notfound"] .arc .prog, [data-screen="nomic"] .arc .prog,
[data-screen="limit"] .arc .prog, [data-screen="error"] .arc .prog, [data-screen="notgram"] .arc .prog { opacity: 0; }
[data-screen="notgram"] .orb { cursor: default; }

/* --- тексты и кнопки --- */
.copy { width: 100%; text-align: center; padding-top: 8px; min-height: 168px; }
h1 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.copy p { margin: 0 auto; max-width: 340px; font-size: 16px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.copy .hint { margin-top: 6px; font-size: 14px; color: var(--muted); opacity: 0.85; }
.copy .counter { margin-top: 10px; color: var(--cyan); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.copy [hidden] { display: none; }
.actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.btn {
  appearance: none; border: 0; cursor: pointer;
  min-width: 220px; max-width: 100%;
  padding: 14px 26px;
  border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--white);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--violet)); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 6px 26px rgba(31, 77, 255, 0.5); }
.btn.glow { box-shadow: 0 0 22px rgba(122, 92, 255, 0.45); border-color: rgba(122, 92, 255, 0.7); }
.btn:active { transform: scale(0.98); }
.btn[hidden] { display: none; }

/* страница скрыта (visibilitychange) — все анимации на паузе, чтобы не тратить батарею */
#app.paused *, #app.paused *::before, #app.paused *::after { animation-play-state: paused !important; }

/* арабский: текст справа налево, шапка и столбики остаются прежними */
[dir="rtl"] .copy { direction: rtl; }

@media (max-width: 380px) {
  h1 { font-size: 21px; }
  .copy p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ring, [data-screen="listening"] .ring, [data-screen="done"] .ring { animation: none; opacity: 0; }
  [data-screen="idle"] .glass, [data-screen="notfound"] .glass, [data-screen="limit"] .glass,
  [data-screen="error"] .glass, [data-screen="nomic"] .glass { animation: none; will-change: auto; }
  [data-screen="idle"] .bars i, [data-screen="listening"] .bars i, [data-screen="done"] .bars i { animation: none; transform: scaleY(0.6); }
  [data-screen="idle"] .bars i:nth-child(2n), [data-screen="listening"] .bars i:nth-child(2n), [data-screen="done"] .bars i:nth-child(2n) { transform: scaleY(0.9); }
  [data-screen="idle"] .bars i:nth-child(3), [data-screen="listening"] .bars i:nth-child(3), [data-screen="done"] .bars i:nth-child(3) { transform: scaleY(1); }
  .glass, .core, .btn { transition: none; }
}