@media (max-width: 760px) {
  .live-app { width: 100%; }
  .stage { inset: 0 0 calc(74px + env(safe-area-inset-bottom)); }
  .viewer-comment { bottom: 18%; }
  .reply-overlay { bottom: 10px; }
}

@media (max-width: 360px) {
  .brand { font-size: 12px; }
  #viewers { font-size: 10px; }
  .live-bar { gap: 10px; padding-left: 10px; padding-right: 10px; }
  .bar-left, .bar-right { gap: 6px; }
  #live-badge { padding-left: 6px; padding-right: 6px; }
  .comment-composer { grid-template-columns: auto minmax(0, 1fr) 40px; padding-left: 8px; padding-right: 8px; }
  #name-chip { max-width: 70px; padding-left: 9px; padding-right: 9px; }
  #send { width: 40px; height: 40px; }
  .subtitle { font-size: 16px; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .live-app { width: 100%; }
  .stage { right: max(300px, 38vw); bottom: 0; }
  .comment-composer { left: auto; right: 0; top: 0; bottom: 0; width: max(300px, 38vw); min-height: 100dvh; transform: none; grid-template-columns: 1fr 44px; grid-template-rows: 44px 64px 44px 1fr; align-content: center; border-top: 0; border-left: 1px solid var(--line); }
  .name-field { grid-column: 1 / -1; }
  .comment-field { grid-column: 1 / 2; }
  .magic-hint { grid-column: 1 / -1; }
}