@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  .layout, .layout.chat-left { height: var(--app-height, 100dvh); min-height: 0; overflow: hidden; padding-top: env(safe-area-inset-top); }
  .stream-col { flex: 0 0 auto; padding: 0 10px 6px; gap: 6px; min-height: 0; overflow: hidden; }
  .watch-header { min-height: 44px; }
  .wordmark { font-size: 15px; }
  .wordmark-symbol { width: 23px; height: 23px; }
  .paste-input, .picker-input, .chat-platform, .cc-channel input, .cc-search, .cc-compose textarea, .cc-settings select { font-size: 16px; }
  .paste-input { min-height: 44px; }
  .btn, .pc-btn, .icon-btn, .cc-icon, .video-button, .cc-login, .cc-channel button { min-height: 44px; }
  .icon-btn, .cc-icon, .video-button { min-width: 44px; }
  .stream-suggestions { max-height: none; flex-shrink: 0; }
  .suggestion-heading { margin-bottom: 3px; }
  .suggestion-refresh { min-width: 44px; min-height: 44px; }
  .suggestion-list { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-height: none; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .suggestion-card { min-height: 58px; flex: 0 0 180px; padding: 6px 9px; gap: 3px 8px; scroll-snap-align: start; }
  .player-frame { height: min(56.25vw, 29dvh); aspect-ratio: auto; max-height: none; border-radius: 4px; }
  .now-playing { margin: 0; min-height: 0; gap: 4px; }
  .np-meta, .np-badge { display: none; }
  .np-actions { width: 100%; justify-content: flex-end; }
  .np-actions { flex-wrap: wrap; }
  .np-actions .btn { min-height: 44px; }
  .chat-col { flex: 1 1 0; height: auto; min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
  .chat-head { height: 44px; padding: 0 8px; }
  #swapSide { display: none; }
  .cc-top { padding: 0 10px; min-height: 44px; }
  .cc-feed { padding: 6px 10px 12px; }
  .cc-bottom { padding: 6px 8px; }
  .cc-compose-actions { min-height: 44px; }
  .cc-send { min-height: 40px; }
  .cc-settings { position: absolute; inset: 0; z-index: 12; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
  .cc-settings-heading { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #101014; z-index: 1; min-height: 52px; margin-bottom: 12px; }
  .cc-settings-close { min-height: 44px; min-width: 60px; color: #eee; border: 1px solid #45454a; border-radius: 6px; background: #18181b; }
  .cc-settings label { min-height: 44px; }
  .cc-settings .cc-back, .cc-send { min-height: 44px; }
  .cc-emote-grid button { min-height: 44px; }
  .cc-emote-grid, .cc-autocomplete [role=listbox] { max-height: min(220px, 28dvh); }
  .cc-autocomplete-option { min-height: 44px; }
  .channel-picker { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-items: safe center; padding: 12px; }
  .picker-icon { display: none; }
  .picker-card { gap: 8px; }
  .layout.theater .stream-col { flex: 0 0 auto; }
  .layout.theater .player-frame { height: min(56.25vw, 35dvh); }
  .layout:is(:fullscreen, .expanded-layout) { height: var(--app-height, 100dvh); }
  .layout:is(:fullscreen, .expanded-layout) .stream-col { flex: 0 0 36%; }
  .layout:is(:fullscreen, .expanded-layout) .chat-col { flex: 1 1 0; }
  .mobile-keyboard .stream-suggestions, .mobile-keyboard .watch-header, .mobile-keyboard .now-playing { display: none; }
  .mobile-keyboard .stream-col:has(.player-frame video), .mobile-keyboard .stream-col:has(.player-frame iframe) { padding-bottom: 0; }
  .mobile-keyboard .player-frame { height: 80px; }
  .mobile-keyboard .stream-col:has(.player-empty:not([hidden])) .player-shell { display: none; }
  .mobile-keyboard .chat-head { display: none; }
}
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) and (max-height: 550px) {
  .layout, .layout.chat-left { flex-direction: row; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .stream-col, .layout.theater .stream-col { flex: 1 1 0; }
  .chat-col { flex: 0 0 42%; border-top: 0; border-left: 1px solid #222; }
  .watch-header, .stream-suggestions, .now-playing { display: none; }
  .player-shell { flex: 1; min-height: 0; }
  .player-frame, .layout.theater .player-frame { height: 100%; }
  .layout:is(:fullscreen, .expanded-layout) .stream-col { flex: 1 1 0; }
  .layout:is(:fullscreen, .expanded-layout) .chat-col { flex: 0 0 42%; }
  .chat-head { display: flex; }
}

@media (max-width: 900px) { .mobile-keyboard.chat-typing .paste-form { display: none; } }

/* Theater keeps the feed and composer, with account options in chat settings. */
@media (max-width: 900px) {
  .layout, .layout.chat-left { position: fixed; top: var(--app-top, 0px); left: 0; width: 100%; box-sizing: border-box; }
  .layout.theater .chat-head,
  .layout.theater .cc-authenticated .cc-top,
  .layout.theater .cc-history-note,
  .layout.theater .cc-local-hint { display: none; }
  .layout.theater .theater-exit { min-height: 44px; padding: 3px 10px; margin: 2px 8px; font-size: 12px; }
  .mobile-keyboard .layout { padding-top: 0; }
  .mobile-keyboard .chat-col { padding-bottom: 0; }
  .mobile-keyboard .layout.theater .player-frame,
  .mobile-keyboard .layout .player-frame { height: min(80px, calc(var(--app-height, 100dvh) * .2)); }
  .mobile-keyboard .layout.theater .stream-col { flex: 0 0 auto; }
  .mobile-keyboard .cc-top, .mobile-keyboard .cc-history-note { display: none; }
  .mobile-keyboard .cc-bottom { padding-top: 4px; padding-bottom: 0; }
  .cc-settings-account { display: block; background: none; border: 0; color: #bbb; min-height: 44px; padding: 8px 0; cursor: pointer; }
}
.cc-settings-account { background: none; border: 0; color: #bbb; padding: 8px; cursor: pointer; }

/* Give chat more room before playback, and keep the toolbar inside narrow videos. */
@media (max-width: 900px) {
  .player-shell { min-height: 0; }
  .layout:not(.theater):not(.expanded-layout):not(:fullscreen) .player-frame:has(.player-empty:not([hidden])) { height: 120px; }
  .player-empty { padding: 12px; }
  .player-empty-icon { display: none; }
  .suggestion-list::-webkit-scrollbar { display: none; }
  .video-toolbar { flex-wrap: wrap; gap: 3px; }
  .video-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .video-fullscreen { margin-left: auto; }
  .cc-emote-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}

@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) and (max-height: 550px) {
  .layout.theater .chat-head { display: flex; }
}

@media (max-width: 900px) and (max-height: 650px) and (orientation: portrait) {
  .layout:not(.theater):not(.expanded-layout):not(:fullscreen) .player-frame:has(.player-empty:not([hidden])) { height: 80px; }
  .player-empty-sub { display: none; }
}

@media (max-width: 900px) {
  .view-actions .btn { min-height: 44px; font-size: 12px; }
}

@media (max-width: 900px) {
  .layout:is(:fullscreen, .expanded-layout):not(.fullscreen-chat-visible) .stream-col { flex: 1 1 0; }
  .layout:is(:fullscreen, .expanded-layout):not(.fullscreen-chat-visible) .player-frame { height: 100%; }
  .layout:is(:fullscreen, .expanded-layout) .fullscreen-chat-toggle { min-height: 44px; }
  .layout:is(:fullscreen, .expanded-layout).fullscreen-chat-visible .chat-col { padding-top: 0; }
}
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) and (max-height: 550px) {
  .layout:is(:fullscreen, .expanded-layout).fullscreen-chat-visible .chat-col { padding-top: calc(54px + env(safe-area-inset-top)); }
}