/* Conversation constraints: content wraps, controls remain reachable on small screens. */
#chatContainer, #chat, #chatInner, .composer-region, .chat-stage, .chat-rail { min-inline-size: 0; }
#chatInner > *, [data-bot-bubble] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
#chatInner pre { max-inline-size: 100%; overflow-x: auto; white-space: pre; }
#chatInner img { max-inline-size: 100%; height: auto; }
.composer-region { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
@media (max-width: 767px) {
  #sidebarToggle, #sidebarClose, #send, #stopBtn, #attachBtn { min-width: 44px; min-height: 44px; }
  #input { font-size: 16px; }
  .sidebar-panel { max-inline-size: calc(100vw - 48px); }
}
@media (prefers-reduced-motion: reduce) {
  .is-streaming::after { animation: none !important; }
}

@media (hover: none) {
  .msg-actions { opacity: 1; transform: none; flex-wrap: wrap; gap: 8px; }
  .msg-action { min-width: 44px; min-height: 44px; }
}
@media (max-width: 767px) {
  .msg-actions { opacity: 1; transform: none; flex-wrap: wrap; gap: 8px; }
  .msg-action { min-width: 44px; min-height: 44px; }
  #micBtn { min-width: 44px; min-height: 44px; }
}

/* Settings become a header and scrollable body on narrow screens. */
#settingsModalPanel > section, #settingsModalPanel > main, #settingsModalPanel > div { min-width: 0; }
@media (max-width: 640px) {
  #settingsModalPanel { flex-direction: column; height: min(680px, calc(100dvh - 32px)); }
  #settingsModalPanel > aside { width: 100%; border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; }
  #settingsModalPanel > aside > div { margin-bottom: 4px; padding-top: 0; }
  #settingsTabList { flex-direction: row; gap: 8px; }
  #settingsTabList > button { flex: 1; width: auto; min-height: 44px; justify-content: center; }
  #settingsCloseBtn { min-width: 44px; min-height: 44px; }
  #settingsModalPanel > main, #settingsModalPanel > section, #settingsModalPanel > div { min-height: 0; width: 100%; overflow-y: auto; padding: 16px; }
  #settingsModalPanel input { min-width: 0; max-width: 100%; font-size: 16px; }
}
@media (max-width: 767px) {
  html[dir="ltr"] .sidebar-panel { transform: translateX(-100%); }
  html[dir="ltr"] .sidebar-open .sidebar-panel { transform: translateX(0); }
}

#chatInner .msg-user-bubble { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }