/* Touch-first overrides. Kept separate so the desktop layout remains unchanged. */
@media (max-width: 800px), (pointer: coarse) {
  button,
  a,
  input,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(83, 252, 24, 0.18);
  }

  button,
  a,
  [role="button"] { touch-action: manipulation; }

  .chat-tabs {
    min-height: 54px;
    padding: 5px max(6px, env(safe-area-inset-right)) 5px max(6px, env(safe-area-inset-left));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chat-tabs::-webkit-scrollbar { display: none; }
  .chat-source-filters,
  .chat-header-actions { flex: 0 0 auto; }
  .source-toggle,
  .tab,
  .chat-header-btn,
  .chat-hide-btn {
    min-width: 44px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
  .source-toggle { width: auto; padding-inline: 13px; }
  .chat-header-actions { gap: 3px; }
  .chat-header-btn svg { width: 20px; height: 20px; }

  .pinned-title { min-height: 44px; }
  .pinned-title button,
  .pinned-links a,
  .pinned-collapsed-links a,
  .chat-settings button,
  .chat-settings a,
  .chat-auth-pop button,
  .quality-menu button,
  .mention-item,
  .chat-emote-tabs button,
  .user-action-menu button,
  .user-history-actions button,
  .user-history-more,
  .chat-search-form button,
  #chat-search-close,
  .thread-head button {
    min-height: 44px;
  }

  .chat-composer {
    padding: 7px max(9px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  }
  .composer-icon,
  #chat-emote-toggle,
  #chat-send-button,
  .send-targets button {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
  }
  .composer-icon { width: 44px; }
  #chat-emote-toggle { width: 44px; }
  #chat-send-button { padding-inline: 16px; }
  #chat-input-render,
  .chat-search-form input { font-size: 16px; }
  .quick-emotes button,
  .chat-emote-list button { min-width: 44px; min-height: 44px; }

  .msg:not(.system) { min-height: 44px; padding-right: 46px; }
  .msg-reply-btn {
    right: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
  }

  .controls {
    height: 92px;
    grid-template-columns: 36px 36px minmax(44px, 1fr) 34px 34px 34px 36px minmax(44px, 1fr) 36px;
    grid-template-rows: 36px 52px;
    gap: 0 2px;
  }
  .clickcatch { bottom: 92px; }
  .controls .ctl { min-width: 34px; min-height: 44px; padding-inline: 6px; }
  #btn-pip { display: none; }
  .speed { display: block; }
  #btn-play { grid-column: 1; }
  .vol { grid-column: 2; }
  #btn-live { grid-column: 3; }
  #btn-ll { grid-column: 4; }
  #btn-cc { grid-column: 5; }
  #btn-shazam { grid-column: 6; grid-row: 2; }
  .speed { grid-column: 7; grid-row: 2; }
  .quality { grid-column: 8; grid-row: 2; }
  #btn-fs { grid-column: 9; grid-row: 2; }
  .quality-menu { bottom: 56px; }
  .catchup { bottom: 100px; }

  .chat-show-btn { width: 56px; height: 56px; }
  .user-history-card { max-height: calc(100dvh - 24px); }

  .player.pointer-idle:not(.paused):not(.offline) .brand { opacity: 0; }
}

@media (max-width: 350px) {
  .controls {
    grid-template-columns: 34px 34px minmax(42px, 1fr) 34px 34px 34px minmax(42px, 1fr) 34px;
  }
  #btn-cc { display: none; }
  #btn-shazam { grid-column: 5; }
  .speed { grid-column: 6; }
  .quality { grid-column: 7; }
  #btn-fs { grid-column: 8; }
}

@media (hover: none) and (pointer: coarse) {
  .ctl:active,
  .chat-header-btn:active,
  .source-toggle:active,
  .composer-icon:active,
  #chat-send-button:active { filter: brightness(1.25); }
}

/* Compact mobile controls: large enough to hit, without looking like tablets. */
@media (max-width: 800px) {
  .chat-tabs { min-height: 46px; padding-block: 3px; }
  .source-toggle {
    min-width: 42px;
    width: auto;
    height: 36px;
    min-height: 36px;
    padding-inline: 11px;
  }
  .tab,
  .chat-header-btn,
  .chat-hide-btn {
    min-width: 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }
  .chat-header-btn svg { width: 18px; height: 18px; }

  .controls {
    height: 84px;
    grid-template-columns: 40px 40px minmax(46px, 1fr) 38px 36px 40px minmax(46px, 1fr) 40px;
    grid-template-rows: 34px 46px;
  }
  .clickcatch { bottom: 84px; }
  .ctl { min-width: 40px; min-height: 40px; padding: 7px; }
  .catchup { bottom: 92px; }

  .composer-icon,
  #chat-emote-toggle,
  #chat-send-button,
  .send-targets button {
    min-width: 40px;
    min-height: 40px;
    height: 40px;
  }
  .composer-icon,
  #chat-emote-toggle { width: 40px; }

  .pinned { max-height: 112px; }
  .pinned-title { min-height: 32px; padding: 3px 7px; }
  .pinned-title button,
  .pinned-links a,
  .pinned-collapsed-links a {
    min-height: 26px;
    height: 26px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 18px;
  }
  .pinned-title-actions { gap: 3px; }
  .pinned-collapsed-links { gap: 3px; }
  .pinned-scroll { padding: 4px 7px 5px; }
  .pinned-links { gap: 4px; }

  .msg:not(.system) {
    min-height: 0;
    padding: 2px 35px 2px 3px;
    line-height: 1.32;
  }
  .msg.system { padding-block: 2px; }
  .msg-reply-btn {
    top: 1px;
    right: 1px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 7px;
    padding: 0;
    font-size: 12px;
  }
  .msg .reply { margin-bottom: 2px; }

  .chat-composer { padding-block: 5px; }
  .quick-emotes button,
  .chat-emote-list button { min-width: 38px; min-height: 38px; }

  /* Меню не должно быть выше свободной части плеера: иначе overflow у
     видеоконтейнера обрезает верхние Auto/1080p. */
  .quality-menu {
    bottom: 46px;
    max-height: max(104px, calc(56.25vw - 56px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .quality-menu button {
    min-height: 34px;
    height: 34px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 24px;
  }
  .speed-menu { max-height: max(104px, calc(56.25vw - 56px)); }
}

@media (max-width: 350px) {
  .controls {
    grid-template-columns: 38px 38px minmax(42px, 1fr) 36px 38px minmax(42px, 1fr) 38px;
  }
}