/* Телефон и планшет: страница эфира с плеером сверху и шторкой брони снизу.
   Шторка (#modal .sheet) не уводит со страницы: видео и звук продолжают идти под ней. */

/* шторка поверх эфира на любой ширине — без размытия, эфир остаётся виден */
body.sheet-on-stream .modal{backdrop-filter:none;background:#0006}
.sheet{transition:transform .2s ease}
/* выдача в шторке — в цветах ленты (светлая карточка в тёмной теме прятала «Все выдачи») */
body.live-home .sheet .ticket{background:var(--feed-active);border-color:var(--feed-accent)}
body.live-home .sheet .ticket p{color:var(--feed-muted)}
body.live-home .sheet .ticket .code{color:var(--feed-accent)}

/* 721–1180px (планшет): старое .rail{grid-column:1/-1} из live.css/premium.css растягивало меню на всю строку,
   и эфир уезжал ниже первого экрана — ставим меню в свою колонку, как b12d678 сделал для ленты */
@media (max-width:1180px) and (min-width:721px){
  .body.youtube-layout{grid-template-rows:auto}
  .youtube-layout .rail{grid-column:1;grid-row:1/span 2;align-self:start}
  .youtube-layout .stage{grid-column:2}
  /* шторка брони прижата к низу, плеер сверху остаётся открытым */
  body.sheet-on-stream .modal{place-items:end center;padding-bottom:0}
  body.sheet-on-stream .sheet{border-radius:20px 20px 0 0;width:min(520px,100%);max-height:55dvh;animation:sheet-up .22s ease-out}
}

@media (max-width:720px){
  /* плеер прилипает под шапкой, чат и описание прокручиваются под ним */
  .youtube-detail{padding:0 0 calc(16px + env(safe-area-inset-bottom))!important;gap:0!important}
  .youtube-detail .stage{display:contents}
  .youtube-detail .screen.video{position:sticky;top:62px;z-index:15;border-radius:0;border-inline:0;border-top:0;aspect-ratio:16/10}
  .youtube-detail .screen.video{order:1}
  .youtube-detail .under{order:2;padding:12px 12px 0}
  .youtube-detail .side{order:3;padding:12px}
  .youtube-detail .side.side-live{flex-direction:column;align-items:stretch}
  /* чат занимает остаток экрана под прилипшим плеером */
  .youtube-detail .side.side-live>.chat-panel{height:max(320px,calc(100dvh - 62px - 62.5vw - 24px));min-height:320px}
  .youtube-detail .watch-meta h1{font-size:18px;line-height:1.25}
  .youtube-detail .watch-host{gap:8px}
  .youtube-detail .watch-host .btn{min-height:40px;padding-inline:12px;font-size:12px;flex:0 1 auto}
  .youtube-detail .player-tools button{min-height:32px}
  .youtube-detail .live-drop-buy{min-height:40px;padding-inline:14px}

  /* шторка на 55% экрана снизу, сверху 45% — живое видео */
  body.sheet-on-stream{overflow:hidden}
  body.sheet-on-stream .modal{place-items:end stretch;padding:0;background:transparent}
  body.sheet-on-stream .youtube-detail .screen.video{position:fixed;top:0;left:0;right:0;height:45dvh;aspect-ratio:auto;z-index:49}
  body.sheet-on-stream .youtube-detail .live-drop-slot,
  body.sheet-on-stream .youtube-detail .player-tools [data-chat-toggle],
  body.sheet-on-stream .youtube-detail .player-tools [data-fullscreen]{display:none}
  body.sheet-on-stream .sheet{width:100%;height:55dvh;max-height:55dvh;border-radius:20px 20px 0 0;border-inline:0;border-bottom:0;
    padding:8px 18px calc(18px + env(safe-area-inset-bottom));align-content:start;overscroll-behavior:contain;
    box-shadow:0 -12px 40px #0008;animation:sheet-up .22s ease-out}
  body.sheet-on-stream .sheet::before{content:"";justify-self:center;width:40px;height:4px;border-radius:2px;background:var(--feed-line,#ccc);margin-bottom:6px}
  body.sheet-on-stream .sheet h2{font-size:22px}
  body.sheet-on-stream .sheet .btn,body.sheet-on-stream .sheet .qty button{min-height:44px}
  body.sheet-on-stream .sheet .qty button{min-width:44px}
  body.sheet-on-stream .sheet .linkish{min-height:44px}

  /* обычные шторки (район, место) на телефоне тоже снизу */
  body:not(.sheet-on-stream) .modal{place-items:end stretch;padding:0}
  body:not(.sheet-on-stream) .sheet{width:100%;max-height:88dvh;border-radius:20px 20px 0 0;padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:sheet-up .22s ease-out}
}

@media (max-width:420px){
  /* лента в одну колонку: превью пониже, чтобы на экран помещалась карточка целиком */
  .board-home .board-preview{aspect-ratio:16/11}
}

@media (max-width:480px){
  .youtube-detail .screen.video{aspect-ratio:4/3}
  .youtube-detail .side.side-live>.chat-panel{height:max(320px,calc(100dvh - 62px - 75vw - 24px))}
  /* плашка партии компактнее, чтобы не закрывать мастера */
  .youtube-detail .live-drop-eyebrow{display:none}
  .youtube-detail .live-drop-card{padding:8px 10px;gap:4px}
}

@keyframes sheet-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none!important;transition:none}}
/* бронь «Привезёт мастер»: адрес доставки в шторке */
.sheet .delivery-address{display:grid;gap:6px;font-size:13px;color:var(--feed-muted,var(--muted))}
.sheet .delivery-address input{min-height:44px;padding:0 12px;border:1px solid var(--feed-line,var(--line));border-radius:10px;background:transparent;color:inherit;font:inherit}