.model-chat { max-width: 1040px; margin: 28px auto; }
.chat-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.chat-heading h1 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; margin: 0 0 12px; }
.chat-heading p, .chat-note, .chat-status { color: var(--muted, #5d6863); line-height: 1.65; }
.chat-balance { display: grid; gap: 6px; flex-shrink: 0; }
.chat-balance strong { font-size: 24px; }
.chat-balance a, .chat-usage { color: var(--green, #006746); text-decoration: underline; }
.chat-toolbar { display: flex; gap: 16px; align-items: end; margin: 24px 0 12px; }
.chat-toolbar label { flex: 1; display: grid; gap: 8px; font-weight: 600; }
.chat-toolbar select, .chat-composer textarea { width: 100%; border: 1px solid #c8d7cf; border-radius: 10px; padding: 12px; background: #fff; color: #172b21; font: inherit; }
.chat-toolbar select { min-height: 44px; }
.chat-note, .chat-send-actions small { font-size: 13px; }
.chat-samples { padding: 16px 0; }
.chat-samples h2, .chat-integration h2 { font-size: 18px; margin: 0 0 12px; }
.chat-samples > div { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-history { display: grid; gap: 16px; padding: 12px 0; }
.chat-message { padding: 18px; border: 1px solid #d9e4dd; border-radius: 12px; min-width: 0; }
.chat-message-user { background: #f2f7f4; }
.chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin: 10px 0 0; }
.chat-message strong { font-size: 13px; overflow-wrap: anywhere; }
.chat-copy { border: 0; background: transparent; color: #006746; padding: 10px 0; min-height: 44px; cursor: pointer; font: inherit; }
.chat-integration { background: #eaf8ef; border: 1px solid #b9dfc7; border-radius: 12px; padding: 20px; margin: 12px 0 20px; }
.chat-integration p { margin: 0 0 16px; }
.chat-integration a { display: inline-flex; margin: 0 8px 8px 0; }
.chat-composer { margin-top: 16px; display: grid; gap: 10px; }
.chat-composer textarea { min-height: 110px; resize: vertical; }
.chat-send-actions { display: flex; justify-content: end; gap: 12px; align-items: center; flex-wrap: wrap; }
.chat-send-actions small { flex: 1; color: #5d6863; }
.chat-status { min-height: 26px; margin-bottom: 8px; }
.chat-request { font-size: 12px; color: #5d6863; overflow-wrap: anywhere; }
.model-chat [hidden] { display: none !important; }
.model-chat button, .chat-integration a { min-height: 44px; }
.model-chat :focus-visible { outline: 3px solid #188b65; outline-offset: 3px; }
.model-chat :disabled { opacity: .55; cursor: not-allowed; }
.overview-chat { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.overview-chat h2 { margin: 0 0 8px; }
.home-chat-offer { display: grid; gap: 10px; }
.home-chat-offer small { max-width: 310px; color: var(--muted, #5d6863); line-height: 1.5; }
@media (max-width: 640px) {
  .model-chat { margin: 16px 12px; padding: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .chat-heading { flex-direction: column; gap: 16px; }
  .chat-balance { width: 100%; grid-template-columns: 1fr auto; align-items: center; }
  .chat-balance a { grid-column: 1 / -1; }
  .chat-toolbar { flex-wrap: wrap; }
  .chat-toolbar label { flex-basis: 100%; }
  .chat-samples > div { flex-direction: column; align-items: stretch; }
  .chat-send-actions small { flex-basis: 100%; }
  .chat-composer textarea { font-size: 16px; }
  .overview-chat { flex-direction: column; align-items: start; }
}