/* Shared responsive safeguards; loaded after each page's original styles. */
img, video, canvas { max-width: 100%; }
input, textarea, select { max-width: 100%; }
body.home-page { overflow-wrap: anywhere; }
.home-page .nav { grid-template-columns: minmax(0, 1fr) auto; }
.home-page .nav > *, .home-page .demo-copy { min-width: 0; }
.home-page .nav-links { max-height: calc(100dvh - 90px); overflow-y: auto; }
.home-page .settings-panel { max-height: 100dvh; }
@media (max-width: 380px) {
  .home-page .nav { gap: 8px; }
  .home-page .nav-tools { gap: 6px; }
  .home-page .wordmark { gap: 6px; font-size: 15px; }
  .home-page .hero-title .alias { font-size: clamp(32px, 12vw, 48px); }
}

.chat-page { height: 100vh; height: 100dvh; min-height: 0; }
.chat-page > * { flex-shrink: 0; }
.chat-page .log { flex: 1 1 0; min-height: 0; overflow-wrap: anywhere; }
.chat-page .bar input { min-width: 0; font-size: 16px; }
.chat-page .bar button { flex-shrink: 0; min-height: 44px; }
.chat-page .bubble { max-width: 100%; }
.chat-page .bubble pre { max-width: 100%; overflow-x: auto; }
.chat-page .input { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
@media (max-width: 480px) {
  .chat-page .head, .chat-page .examples, .chat-page .log, .chat-page .input { padding-inline: 12px; }
  .chat-page .head { gap: 8px; padding-block: 12px; }
  .chat-page .bar { gap: 6px; }
  .chat-page .bar button { padding-inline: 14px; }
  .chat-page .chip { min-height: 40px; }
}
/* Short landscape/keyboard viewports use document scrolling rather than clipping. */
@media (max-height: 540px) {
  .chat-page { height: auto; min-height: 100dvh; }
  .chat-page .log { flex-basis: auto; min-height: 120px; overflow: visible; }
}

.console-page .panel, .console-page .field, .console-page .issue-copy { min-width: 0; }
.console-page .page.active { overflow-wrap: anywhere; }
.console-page .exit-dialog-panel { max-height: calc(100dvh - 40px); overflow-y: auto; }
@media (min-width: 761px) and (max-width: 1200px) {
  .console-page .create-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .console-page .topbar { gap: 4px; }
  .console-page .brand { min-width: 0; }
  .console-page .brand strong { overflow-wrap: anywhere; }
  .console-page .page-action, .console-page .review-action, .console-page .brief-foot {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .console-page input, .console-page textarea, .console-page select { font-size: 16px; }
}
@media (max-height: 500px) {
  .console-page .page-header { min-height: 80px; padding-block: 10px; }
  .console-page .page-header p { margin-block: 4px; }
}