/* SP3 Assort Bot chat panel. Lives inside .chat-modal__panel.
   Panel sizing (max-height, width, bottom anchoring) is owned by
   .chat-modal__panel in styles.css — this file only styles the inner
   thread, messages, input, and helper rows. No media query: the
   bottom-sheet shell adapts automatically across viewport widths. */
.chat-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; text-align: left; gap: .75rem; }
.chat-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.chat-panel__subtitle { margin: .25rem 0 0; font-size: .85rem; opacity: .7; }
.chat-panel__thread { flex: 1; overflow-y: auto; padding: .25rem 0; display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.chat-msg { padding: .6rem .85rem; border-radius: 14px; max-width: 85%; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.chat-msg--user { align-self: flex-end; background: var(--accent, #d96a8b); color: #fff; }
.chat-msg--bot { align-self: flex-start; background: #f3eef0; color: #2a2a2a; }
.chat-msg--typing { opacity: .5; font-style: italic; }
.chat-panel__form { display: flex; gap: .5rem; align-items: center; }
/* min-width: 0 lets the input shrink below its intrinsic placeholder width
   so the Send button stays fully visible on narrow viewports (iPhone). */
.chat-panel__input { flex: 1; min-width: 0; padding: .65rem .85rem; border: 1px solid #d8cdd2; border-radius: 999px; font: inherit; }
/* Send button: don't shrink + don't full-width. The mobile media query in
   styles.css sets `.btn--primary { width: 100% }` for the homepage Apply
   CTA; without this `width: auto` override the chat Send button inherits
   that rule and collapses the input next to it. Tighter horizontal padding
   than the sitewide .btn default (32px) so it fits alongside the input. */
.chat-panel__form .btn { flex-shrink: 0; width: auto; padding-left: 1.1rem; padding-right: 1.1rem; }
.chat-panel__disclaimer { margin: 0; font-size: .72rem; opacity: .55; }
.chat-panel__fallback { display: inline-block; font-size: .8rem; }
.chat-cta, .chat-email { align-self: flex-start; margin-top: .25rem; }
.chat-email { display: flex; gap: .5rem; }
.chat-email__input { padding: .55rem .8rem; border: 1px solid #d8cdd2; border-radius: 999px; font: inherit; }