/* Phase 7 responsive contract: edge-width and touch-safe corrections. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
button, a, input, textarea, select, summary { touch-action: manipulation; }

@media (min-width: 768px) and (max-width: 899px) {
  .stage-wrap { width: min(100%, 820px); flex-direction: column; }
  .companion { width: 100%; }
  .podium { flex: 0 0 220px; }
  .commands-panel { min-width: 0; max-height: 150px; }
  .chat { width: 100%; min-width: 0; }
  .layer > .home-card, .layer > .wait-shell { width: min(100%, 760px); }
  .top-actions { max-width: calc(100vw - 260px); }
}

@media (max-width: 767px) {
  .topbar, .stage-wrap, .chat, .composer, .composer-row,
  .home-card, .wait-shell, .settings-card, .profile-card,
  .documentation-card, .xp-rewards-card, .short-wait-card { min-width: 0; max-width: 100%; }
  .stage-wrap { width: 100%; }
  .chat { overflow: hidden; }
  .messages { min-width: 0; contain: layout !important; overscroll-behavior-y: contain; }
  .top-actions { background-color: var(--bg-2) !important; background-image: none !important; opacity: 1 !important; box-shadow: -18px 0 44px rgba(11, 17, 29, .28) !important; }
  .menu-backdrop { background: rgba(11, 17, 29, .62) !important; opacity: 1 !important; }
  .composer-row { min-width: 0; align-items: end; }
  .composer-row textarea { width: 100%; min-width: 0; max-width: 100%; }
  .composer-row > .icon-attach,
  .composer-row > .mic-button,
  .composer-row > #send-btn { flex: 0 0 44px; }
  .composer-row > #send-btn { font-size: 0; padding-inline: 0; }
  .composer-row > #send-btn::after { content: '↑'; font-size: 20px; line-height: 1; }
  .layer { overscroll-behavior: contain; }
  .layer > .home-card, .layer > .wait-shell { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .experience-actions, .profile-actions, .settings-actions, .home-actions { min-width: 0; }
  .experience-actions .btn, .profile-actions .btn, .settings-actions .btn { min-height: 44px; }
  .xp-leaderboard-row { min-width: 0; }
}

@media (max-width: 414px) {
  .topbar { padding-inline: 8px; }
  .brand { min-width: 0; }
  .brand-copy { min-width: 0; }
  .brand h1 { white-space: nowrap; }
  .header-actions { min-width: 0; }
  .mobile-menu-toggle { min-width: 72px; }
  .stage-wrap { padding-inline: 8px; }
  .companion { gap: 8px; }
  .podium { min-width: 0; }
  .commands-panel { padding: 12px; }
  .chat { padding: 8px; }
  .bubble { max-width: 96%; }
  .composer { padding: 6px; }
  .composer-row { gap: 5px; }
  .composer-row textarea { min-height: 44px; padding-inline: 10px; }
  .layer { padding-inline: 8px; }
  .layer > .home-card, .layer > .wait-shell { width: 100%; border-radius: 18px; }
  .home-card, .wait-shell { padding: 16px; }
}

@media (max-width: 359px) {
  .tagline { display: none; }
  .brand h1 { font-size: 1rem; }
  .mobile-menu-toggle { min-width: 64px; padding-inline: 10px; }
  .companion { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .podium { min-height: 92px; }
  .commands-panel { max-height: 120px; }
  .composer-row textarea { font-size: .88rem; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .topbar { padding-block: 6px; }
  .stage-wrap { min-height: 0; }
  .podium { min-height: 88px; }
  .composer { padding-block: 5px; }
  .layer > .home-card, .layer > .wait-shell { max-height: calc(100dvh - 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .composer-row > #send-btn::after { transition: none; }
}