/* Экран эфира. Всё общее (цвета, кнопки, точки) — в ui.css.
   Центр пустой: там живёт только визуализация. Что играет —
   набрано скромно в нижнем левом углу. */

html{height:100%}
body.stream{overflow:hidden;height:100%;font-family:var(--mono)}

#viz{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

#app{
  position:relative;z-index:1;height:100dvh;
  display:flex;flex-direction:column;justify-content:space-between;
  /* снизу отступ меньше: нижняя строка прижата к краю и не съедает
     место у эфира */
  padding:calc(var(--pad) * .45) var(--pad) calc(var(--pad) * .38);
  gap:var(--pad);pointer-events:none
}
#app a,#app button{pointer-events:auto}
/* Дорожка громкости — не ссылка и не кнопка, под правило выше она
   не попадает и остаётся глухой к мыши. Включаем ей события явно. */
#app .vol__pop,#app .vol__track{pointer-events:auto}

/* ── верхняя строка ───────────────────────────────────── */
/* три колонки: часы ровно по центру экрана, а не «между» блоками */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.bar__l{display:flex;align-items:center;gap:18px;min-width:0}
.bar__r{display:flex;justify-content:flex-end}
.clock{text-align:center}
.mark{font-size:clamp(14px,1.4vw,18px);font-weight:800;letter-spacing:.44em;text-indent:.44em}
.status{display:flex;align-items:center;gap:9px;font-size:9.5px;letter-spacing:.28em}
.clock{font-size:10px;letter-spacing:.24em;color:var(--dim);font-variant-numeric:tabular-nums}

/* ── низ ──────────────────────────────────────────────── */
.foot{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"now" "prog" "tail";
  gap:12px
}

/* строка эфира: кнопка · что играет · время */
.foot__now{
  grid-area:now;display:flex;align-items:center;gap:clamp(14px,2vw,26px)
}
.play{
  flex:0 0 auto;padding:10px 22px;font-size:9.5px;letter-spacing:.26em
}
.play.is-on{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}

/* название и артист — одной строкой */
.foot__meta{
  min-width:0;flex:1;display:flex;align-items:baseline;gap:10px;
  overflow:hidden;white-space:nowrap
}
/* Название и артист одного кегля — иерархию держат вес и цвет,
   а не размер: строка получается ровной. */
.now{
  font-size:clamp(14px,1.35vw,18px);font-weight:800;letter-spacing:.02em;line-height:1.1;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto
}
/* Артист стоит первым, поэтому ему нельзя съедать всю строку:
   при длинном имени сжимается он, а название остаётся целым. */
.now__artist{
  font-size:clamp(14px,1.35vw,18px);font-weight:500;letter-spacing:.02em;line-height:1.1;
  color:var(--dim);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0
}
.now__dash{color:var(--faint);flex:0 0 auto;font-size:clamp(14px,1.35vw,18px);font-weight:300}
/* жанр — перед временем, справа */
.now__block{flex:0 0 auto;white-space:nowrap}
.now__time{
  flex:0 0 auto;font-size:10px;letter-spacing:.16em;color:var(--dim);padding-bottom:2px
}

/* линия-разделитель работает шкалой трека */
.progress{grid-area:prog;height:1px;background:var(--line);position:relative}
.progress i{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--paper);display:block;transition:transform .25s linear
}

.foot__tail{
  grid-area:tail;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:2px;
  font-size:9px;letter-spacing:.22em;color:var(--dim)
}

@media (max-width:820px){
  .foot__now{flex-wrap:wrap;gap:10px}
  .now__block{order:4}
  .now__time{order:5;margin-left:auto}
  .legal{display:none}
}

/* ── громкость ─────────────────────────────────────────────
   Панель выпадает по клику под иконкой. При наведении она ловила
   курсор по дороге к соседним иконкам и дёргалась, поэтому раскрытие
   только явное — клик по иконке, клик мимо или Escape закрывают. */
.vol{position:relative;display:flex;align-items:center}
.vol__pop{
  position:absolute;top:calc(100% + 8px);right:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:34px;                       /* ровно по иконке над ней */
  padding:12px 0 10px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:5
}
.vol.is-open .vol__pop{opacity:1;visibility:visible;transform:none}

/* дорожка вертикальная: отсчёт снизу вверх, как у пультового фейдера */
/* Полоса тонкая, но брать её надо во всю ширину панели: попасть
   курсором в линию шириной в пиксель невозможно. */
.vol__track{
  position:relative;width:100%;height:92px;
  cursor:pointer;touch-action:none
}
.vol__track::before{
  content:'';position:absolute;left:50%;margin-left:-.5px;
  top:0;bottom:0;width:1px;background:var(--line)
}
.vol__track i{
  position:absolute;left:50%;margin-left:-.5px;
  bottom:0;width:1px;background:var(--paper)
}
/* бегунок — квадрат, как и всё остальное в интерфейсе */
.vol__track::after{
  content:'';position:absolute;left:50%;width:7px;height:7px;
  margin-left:-3.5px;margin-top:-3.5px;
  top:var(--vol,0%);background:var(--paper)
}
.vol__track:focus-visible{outline:none}
.vol__track:focus-visible::after{box-shadow:0 0 0 3px var(--panel-2)}

.vol__mute{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-dim)
}
.vol__mute:hover{color:var(--paper)}
.vol--off .vol__mute{color:var(--paper)}

/* состояния иконки: волны гаснут по мере убывания */
.vol--mid .vol__w2{opacity:.18}
.vol--low .vol__w1,.vol--low .vol__w2{opacity:.18}
.vol__x{opacity:0}
.vol--off .vol__w1,.vol--off .vol__w2{opacity:0}
.vol--off .vol__x{opacity:1}

/* ── проценты поверх эфира ─────────────────────────────────
   Цифра появляется только на время изменения и не перехватывает
   мышь: она часть фона, а не элемент управления. */
.volhud{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;opacity:0;transition:opacity .5s var(--ease)
}
.volhud.is-on{opacity:1;transition-duration:.1s}
.volhud b{
  font-size:clamp(72px,14vw,190px);font-weight:400;line-height:.9;
  letter-spacing:-.04em;color:var(--paper);opacity:.13
}
.volhud span{
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--paper);opacity:.22
}

/* ── «нравится» ────────────────────────────────────────────
   Кнопка показана всем, включая гостей: отказ сервера открывает
   вход, и человек регистрируется из живого желания, а не с пустой
   формы. Сердце пустое, пока не нажато. */
.like{
  /* Рядом с кнопкой эфира, а не у дальнего края: рука уже здесь,
     и отметка относится к тому, что играет, а не к строке справа. */
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  margin:0 calc(clamp(14px,2vw,26px) * -0.45);
  background:none;border:0;padding:6px;cursor:pointer;color:var(--dim);
  transition:color .15s var(--ease)
}
.like:hover{color:var(--paper)}
.like svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.like.is-on{color:var(--paper)}
.like.is-on svg{fill:currentColor}
/* Числа рядом с сердцем нет намеренно: оно меняет ширину кнопки,
   и от каждого нажатия дёргалась вся строка с названием. Слушателю
   важно своё нажатие, а общий счёт осмыслен на странице трека и в
   чарте — там он и живёт. При наведении число есть в подсказке. */
.like.is-busy{opacity:.4;pointer-events:none}
/* короткий толчок в ответ на нажатие — единственная анимация здесь */
.like.is-hit svg{animation:like-hit .32s var(--ease)}
@keyframes like-hit{40%{transform:scale(1.35)}100%{transform:none}}

/* ── привет в эфир ─────────────────────────────────────────
   Живёт в той же выезжающей справа панели, что и вход: эфир
   остаётся на виду, а центр экрана — за визуализацией. */
.say__text{resize:none;line-height:1.55;min-height:96px}
/* Заготовки: подставляют начало фразы и оставляют курсор в конце,
   дописывать надо самому — иначе в эфир пойдут одинаковые строки. */
.say__seeds{display:flex;flex-wrap:wrap;gap:7px;margin-top:-4px}
.say__seeds button{
  font:inherit;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line);color:var(--dim);
  height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);box-sizing:border-box;
  cursor:pointer;transition:.14s var(--ease)
}
.say__seeds button:hover{border-color:var(--paper);color:var(--paper)}

.say__foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.say__left{
  font-size:10px;letter-spacing:.16em;color:var(--dim);
  font-variant-numeric:tabular-nums
}
.say__left.is-low{color:var(--paper)}
.say__note{
  margin:2px 0 0;font-size:10.5px;line-height:1.7;letter-spacing:.06em;
  color:var(--dim)
}

.say__done{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:26px 18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)
}
.say__done[hidden]{display:none}
.say__done b{font-size:22px;letter-spacing:.02em}
.say__done span{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)
}
.say__link{margin-top:4px;font-size:11px;letter-spacing:.1em;color:var(--paper-dim)}
.say__link:hover{color:var(--paper)}
.say__done .ui-btn{margin-top:10px}

/* ── панель с вкладками ────────────────────────────────────
   Привет и чат живут в одном месте: два разных угла экрана под
   вещи одного смысла — это два места, где надо искать. */
.pnl__tabs{display:flex;gap:0;margin-top:4px}
.pnl__tab{
  font:inherit;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  background:transparent;border:0;border-bottom:2px solid transparent;
  color:var(--dim);padding:8px 14px 10px;cursor:pointer;transition:.15s var(--ease)
}
.pnl__tab:first-child{padding-left:0}
.pnl__tab:hover{color:var(--paper)}
.pnl__tab.is-on{color:var(--paper);border-bottom-color:var(--paper)}
.modal__box [hidden]{display:none}

/* ── чат ───────────────────────────────────────────────────
   Лента растёт вверх от поля ввода: новое всегда внизу, у руки. */
.chat{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0}
.chat__feed{
  flex:1;min-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;
  padding-right:4px
}
.chat__msg{font-size:12px;line-height:1.55}
.chat__who{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin-right:8px
}
.chat__who b{color:var(--paper);font-weight:700}
/* сообщения станции набраны иначе: это не собеседник, а эфир */
.chat__msg--station{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  padding-left:12px;border-left:1px solid var(--line)
}
.chat__msg--station a{color:var(--paper-dim);border-bottom:1px solid var(--line)}
.chat__msg--station a:hover{color:var(--paper)}
.chat__form{display:flex;gap:8px}
.chat__input{flex:1;font-size:12px}
.chat__note{margin:0;font-size:10px;letter-spacing:.08em;color:var(--dim);line-height:1.6}
.chat__note.is-err{color:var(--paper)}

/* ── лента фоном ───────────────────────────────────────────
   Сообщения всплывают в углу и гаснут сами. Это фон, а не
   элемент управления: мышь сквозь неё проходит, читать можно,
   трогать нечего. */
.tick{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) + 96px);
  z-index:2;pointer-events:none;
  width:min(360px,42vw);display:flex;flex-direction:column;
  align-items:flex-end;gap:8px;text-align:right
}
.tick__msg{
  font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--paper);
  animation:tick-in .45s var(--ease)
}
.tick__msg b{font-weight:700}
.tick__msg span{color:var(--dim);margin-right:7px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
/* реплики станции набраны иначе — это эфир, а не собеседник */
.tick__msg--station{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)
}
@keyframes tick-in{from{opacity:0;transform:translateY(6px)}to{transform:none}}

.chat__tick{
  align-self:flex-start;font:inherit;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;background:transparent;border:1px solid var(--line);
  color:var(--dim);height:var(--ctl-h-sm);padding:0 var(--ctl-px-sm);
  box-sizing:border-box;display:inline-flex;align-items:center;
  cursor:pointer;transition:.15s var(--ease)
}
.chat__tick:hover{border-color:var(--paper);color:var(--paper)}
.chat__tick.is-on{color:var(--paper);border-color:var(--paper)}

@media (max-width:700px){
  .tick{display:none}   /* на телефоне углы заняты, фон только мешает */
}