/* Mobile Chat Overflow Fixes */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

.chat, .chat-container, .messages, .message,
.msg, .assistant, .user, .bubble {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat, .messages, .message-row, .input-row, .col {
  display: flex;
  min-width: 0;
}
.message, .bubble { min-width: 0; }

h1, h2, h3, h4, p, a, span, li {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  padding: 8px;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
img, video, canvas { max-width: 100%; height: auto; display: block; }

.bubble {
  width: 100%;
  max-width: 100%;
}

.messages {
  flex: 1 1 auto;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.input-row { align-items: center; gap: .5rem; }
.input-row input[type="text"],
.input-row textarea {
  flex: 1 1 auto;
  min-width: 0;
}

a { word-break: break-word; text-decoration: none; }