/* ===========================================================================
   Элементы управления: современный, спокойный вид.

   Подключается последним и только уточняет уже существующее — палитру и
   раскладку не трогает. Смысл правок:
   · одна геометрия у всех кнопок, без тяжёлых внутренних фасок;
   · волосяная рамка вместо толстой — так поверхность выглядит чище;
   · короткий пружинистый отклик на нажатие вместо линейного;
   · видимое кольцо фокуса на всём, что нажимается, — без него с клавиатуры
     и с озвучкой непонятно, где находишься.
   =========================================================================== */

:root{
  --tap: 120ms cubic-bezier(.2,.8,.2,1);
  --ring: color-mix(in srgb, var(--olive, #585A43) 70%, transparent);
}

/* ------------------------------- иконки в кнопках ------------------------------- */
/* Контурная иконка всегда наследует цвет текста и никогда не растягивается. */
.ic-svg{flex:0 0 auto; display:block}
.iconbtn .ic-svg{width:20px; height:20px}
.iconbtn{display:grid; place-items:center}
.empty .ic-svg{width:34px; height:34px; margin:0 auto 10px; opacity:.45}
.row .ic-svg, .prow .ic-svg{opacity:.9}

/* ---------------------------------- нажатие ---------------------------------- */
/* Отклик короткий и с лёгким перелётом — так кнопка кажется физической. */
.btn, .iconbtn, .tool, .tool-more, .bt, .rbtn, .dm-tool, .dm-send,
.sticker-btn, .sheet-x, .square, .row, .sz, .swatch{
  transition: transform var(--tap), background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.btn:active, .iconbtn:active, .bt:active, .rbtn:active,
.dm-tool:active, .dm-send:active, .sticker-btn:active, .sheet-x:active{
  transform:scale(.94);
}
.square:active{transform:scale(.98)}
.row:active{transform:scale(.995)}

/* Нажатие не должно «прилипать» на тач-устройствах, где нет курсора. */
@media (hover: hover){
  .btn:hover, .iconbtn:hover, .dm-tool:hover, .sticker-btn:hover{
    border-color:color-mix(in srgb, currentColor 26%, transparent);
  }
}

/* ---------------------------------- фокус ---------------------------------- */
/* Только для клавиатуры: мышью кольцо не мешает. */
.btn:focus-visible, .iconbtn:focus-visible, .tool:focus-visible, .tool-more:focus-visible,
.bt:focus-visible, .rbtn:focus-visible, .row:focus-visible, .square:focus-visible,
.field:focus-visible, .dm-input:focus-visible, .dm-tool:focus-visible, .dm-send:focus-visible,
.sticker-btn:focus-visible, .sheet-x:focus-visible, .langchip:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}
/* Убираем двойную обводку там, где уже был свой outline на :focus. */
.field:focus:not(:focus-visible){outline-color:transparent}

/* --------------------------------- геометрия --------------------------------- */
/* Одна шкала скруглений: крупные поверхности, средние кнопки, мелкие значки. */
.btn{border-radius:16px; font-weight:650; letter-spacing:-.005em}
.btn.small{border-radius:13px; padding:11px 14px}
.btn-row{gap:10px}
.iconbtn{border-radius:14px; width:44px; height:44px}
.sheet-x{border-radius:12px}

/* Волосяная рамка: на плотных фонах толстая линия выглядит грубо. */
@media (min-resolution: 2dppx){
  .btn, .iconbtn, .field, .dm-tool, .dm-input, .sticker-btn{border-width:.5px}
}

/* Главная кнопка: без внутренних фасок, только мягкая тень под ней. */
.btn.primary{
  box-shadow:0 6px 18px color-mix(in srgb, var(--olive, #585A43) 28%, transparent);
}
.btn.primary:active{box-shadow:0 3px 10px color-mix(in srgb, var(--olive, #585A43) 24%, transparent)}

/* Отключённая кнопка не должна выглядеть нажимаемой. */
.btn[disabled], .iconbtn[disabled]{opacity:.42; transform:none !important; box-shadow:none}

/* --------------------------------- сегменты --------------------------------- */
.seg{gap:4px; padding:4px; border-radius:14px}
.seg button{border-radius:10px; font-weight:650; transition:background-color 160ms ease, color 160ms ease}

/* --------------------------------- прокрутка --------------------------------- */
/* Прокрутка внутри панели не должна тянуть за собой всю страницу. */
.dm-feed, .panel-body, .list, .sheet{overscroll-behavior:contain}

/* Кому движение мешает — отклик мгновенный, без анимации. */
@media (prefers-reduced-motion: reduce){
  .btn, .iconbtn, .tool, .tool-more, .bt, .rbtn, .dm-tool, .dm-send,
  .sticker-btn, .sheet-x, .square, .row{transition:none}
  .btn:active, .iconbtn:active, .square:active, .row:active{transform:none}
}

@media (forced-colors: active){
  .ic-svg{stroke:CanvasText}
  .btn:focus-visible, .iconbtn:focus-visible{outline-color:Highlight}
}

/* ===========================================================================
   Нижняя панель митинга — плавающая «пилюля».

   Сделано по присланному образцу: панель не приклеена к краю экрана, а
   висит над картинкой отдельной скруглённой плашкой со своей тенью.
   Иконки без кружков — только линия и подпись под ней; кружок появляется
   лишь у включённой кнопки, чтобы состояние читалось с одного взгляда.
   Счётчик — залитый кружок в углу иконки.
   =========================================================================== */

.room-bar{
  position:relative;
  /* Размер кружка иконки и размер «галочки» выбора устройства — именами, а не
     числами: от них считается и место под колонку с галочкой, и её положение.
     Раньше числа стояли в трёх местах врозь, и галочка налезала на иконку. */
  --ci-size:34px;
  --more-size:20px;
  width:min(560px, calc(100% - 24px));
  margin:0 auto calc(10px + var(--safe-b, 0px));
  padding:9px 6px 7px;
  border:none;
  border-radius:30px;
  background:linear-gradient(178deg, var(--cream-bright, #FCFBF3), var(--cream, #EDEBD6));
  box-shadow:0 12px 34px rgba(20,22,12,.42), 0 1px 0 rgba(255,255,255,.9) inset;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  display:flex;
  justify-content:space-around;
  align-items:flex-end;
  gap:2px;
  overflow:visible;          /* иначе счётчик обрезается о край плашки */
}

/* Кнопка: голая линия и подпись, как в образце.

   min-width здесь был 56 px. Восемь кнопок по 56 — это 468 px содержимого в
   баре шириной 364, а overflow у бара visible, то есть лишнее не обрезалось и
   не прокручивалось: «Чат» уходил за край наполовину, а «Выйти» — целиком, и
   доскроллить до неё было нельзя. Из звонка не было выхода на самом обычном
   размере телефона. Теперь дна нет, кнопки делят ширину поровну, а подпись,
   если не помещается, сжимается по правилам ниже. */
.room-bar .tool{
  width:auto; min-width:0; flex:1 1 0; padding:4px 2px 2px;
  color:var(--on-cream, #41432F);
  font-size:11px; font-weight:650;
}
/* Подпись не должна расталкивать кнопку: она обрезается, а полное название
   остаётся в aria-label для экранного диктора. */
.room-bar .tool span{
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.room-bar .tool .ci{
  width:var(--ci-size); height:var(--ci-size); border:none; background:none; box-shadow:none;
  color:inherit;
}
.room-bar .tool .ci .ic-svg{width:26px; height:26px; stroke-width:1.8}
.room-bar .tool span{color:inherit; opacity:.9}

/* Включено — мягкий кружок под иконкой; выключено — красная линия.
   Цветом кружка состояние читается быстрее, чем сменой самой иконки. */
.room-bar .tool.on .ci{
  background:color-mix(in srgb, var(--olive, #585A43) 16%, transparent);
  border-radius:50%;
}
.room-bar .tool.off{color:#B4462F}
.room-bar .tool.leave{color:#B4462F}
.room-bar .tool.leave .ci{background:none}

/* Счётчик: залитый кружок в углу иконки, как «1» в образце. */
.room-bar .tool .nn{
  top:-2px; right:calc(50% - 22px);
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#1FA55C; color:#fff; font-size:10.5px; font-weight:800;
  box-shadow:0 0 0 2px var(--cream-bright, #FCFBF3);
  display:grid; place-items:center;
}

/* «Галочка» выбора устройства — маленькая, у верхнего края иконки.

   Раньше она лежала ПОВЕРХ иконки: при `right:calc(50% - 24px)` её квадрат
   20×20 перекрывался с кружком .ci на 11×16 px при экране 390 и на 13×16 при
   430. Нажатие по правой пятой части микрофона открывало выбор устройства
   вместо выключения звука — проверка elementFromPoint показывала «галочку»
   уже на 70% ширины иконки.

   Теперь у галочки своя колонка справа: кнопке даётся наименьшая ширина под
   иконку И галочку, а сам кружок .ci сдвигается влево на ширину галочки своим
   margin-right. Подпись при этом по-прежнему считает всю ширину кнопки, то
   есть ни одно название не начало обрезаться сильнее, чем раньше.
   Пара «иконка + галочка» остаётся по центру кнопки. */
.room-bar .tool-group{
  flex:1 1 0;
  min-width:calc(var(--ci-size) + var(--more-size) + 4px); /* +4 — боковые отступы .tool */
}
.room-bar .tool-group > .tool{width:100%; padding-right:2px}
.room-bar .tool-group > .tool .ci{margin-right:var(--more-size)}
.room-bar .tool-more{
  /* Левый край галочки встаёт на правый край кружка иконки: половина кнопки
     минус половина иконки минус половина галочки. Ещё 1 px запаса: попадание
     Chromium округляет к ближайшему пикселю, и без зазора крайняя точка иконки
     доставалась галочке. Сама галочка при этом остаётся внутри кнопки: её
     правый край в 1 px от края плашки. */
  top:0; right:calc(50% - var(--ci-size)/2 - var(--more-size)/2 - 1px);
  width:var(--more-size); height:var(--more-size);
  border-radius:6px; opacity:.6; color:var(--on-cream, #41432F);
}
/* Вид у галочки остаётся 20×20 — иначе она начнёт спорить с иконкой. Растёт
   только площадь нажатия: 44 px по высоте (12 сверху и снизу) плюс 2 вправо,
   в зазор между кнопками — до иконки соседней кнопки оттуда ещё 5 px.
   Влево не расширяем ни на пиксель: там своя иконка. */
.room-bar .tool-more::before{
  content:''; position:absolute; inset:-12px -2px -12px 0;
}
.room-bar .tool-more:hover, .room-bar .tool-more:focus-visible{
  opacity:1; background:color-mix(in srgb, var(--olive, #585A43) 14%, transparent);
}
.room-bar .tool-more .ic-svg{width:13px; height:13px}

/* Сцена не должна заезжать под плавающую плашку. */
.room .stage{padding-bottom:0}

/* Порог поднят с 380 до 420: восемь кнопок надо уместить уже при 390 px. */
@media (max-width:420px){
  .room-bar{width:calc(100% - 14px); padding:7px 3px 5px; --ci-size:30px}
  .room-bar .tool{font-size:10px}
  .room-bar .tool .ci .ic-svg{width:23px; height:23px}
}
@media (max-width:360px){
  .room-bar{--ci-size:28px}
  .room-bar .tool{font-size:9.5px}
  .room-bar .tool .ci .ic-svg{width:22px; height:22px}
}

@media (forced-colors: active){
  .room-bar{background:Canvas; border:1px solid CanvasText}
  .room-bar .tool, .room-bar .tool-more{color:CanvasText}
  .room-bar .tool .nn{background:Highlight; color:HighlightText}
}

/* --------------------------- верхняя панель митинга ---------------------------
   Та же плавающая плашка, что и внизу: одна геометрия сверху и снизу
   выглядит цельно, а прозрачная полоса поверх видео читалась мутно. */

.room-top{
  position:relative;
  width:min(560px, calc(100% - 24px));
  margin:calc(10px + var(--safe-t, 0px)) auto 0;
  padding:9px 12px;
  border:none;
  border-radius:26px;
  background:linear-gradient(178deg, var(--cream-bright, #FCFBF3), var(--cream, #EDEBD6));
  box-shadow:0 10px 28px rgba(20,22,12,.38), 0 1px 0 rgba(255,255,255,.9) inset;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:var(--on-cream, #41432F);
  gap:10px;
}
.room-top .who b{color:var(--on-cream, #41432F)}
.room-top .who span{color:color-mix(in srgb, var(--on-cream, #41432F) 62%, transparent)}
.room-top .timer{color:color-mix(in srgb, var(--on-cream, #41432F) 70%, transparent)}

/* Кнопки в шапке — как в нижней панели: линия без кружка.
   44, а не 34: кружка у кнопки нет, поэтому увеличение не видно глазом — сама
   иконка осталась 18 px. Шапка от этого подросла на 2 px (60 → 62). */
.room-top .rbtn{
  width:44px; height:44px; border:none; background:none; box-shadow:none;
  color:var(--on-cream, #41432F);
}
.room-top .rbtn:hover{background:color-mix(in srgb, var(--olive, #585A43) 12%, transparent)}
.room-top .rbtn .ic-svg{width:18px; height:18px}

/* Состояние связи — тихой плашкой, а не ярким пятном. */
.room-top .net{
  background:color-mix(in srgb, var(--olive, #585A43) 12%, transparent);
  border:none; color:color-mix(in srgb, var(--on-cream, #41432F) 75%, transparent);
  font-weight:700;
}
.room-top .net.bad{background:rgba(180,70,47,.16); color:#B4462F}

@media (max-width:380px){
  .room-top{width:calc(100% - 14px); padding:7px 10px; border-radius:22px}
}

@media (forced-colors: active){
  .room-top{background:Canvas; border:1px solid CanvasText; color:CanvasText}
  .room-top .rbtn, .room-top .who b, .room-top .who span, .room-top .timer{color:CanvasText}
}

/* --------------------- плашка состояния видео в митинге ---------------------
   Отдельно от индикатора связи: потеря видео и потеря сети — разные вещи,
   и раньше отказ медиа подписывался «связь…», из-за чего причину искали
   в своём интернете. Плашка держится на экране, пока не получится. */

.media-bar{display:none}
.media-bar.on{
  display:flex; align-items:center; gap:10px;
  width:min(560px, calc(100% - 24px)); margin:8px auto 0; padding:10px 14px;
  border-radius:18px; font-size:13.5px; font-weight:650;
  background:rgba(180,70,47,.16); color:#B4462F;
  border:1px solid rgba(180,70,47,.32);
}
.media-bar .mb-text{flex:1; min-width:0}
.media-bar .mb-retry{
  flex:0 0 auto; padding:7px 13px; border-radius:12px; cursor:pointer;
  font:inherit; font-weight:700; color:var(--cream-bright, #FCFBF3);
  background:#B4462F; border:none;
}
.media-bar .mb-retry:active{transform:scale(.94)}

@media (forced-colors: active){
  .media-bar.on{background:Canvas; color:CanvasText; border:1px solid CanvasText}
  .media-bar .mb-retry{background:Highlight; color:HighlightText}
}