/* C24 · Chase's approved Clean bubbles. Presentation only; every route,
   author, status, attachment and action still comes from the native reader. */
.conversation-surface {
  --conversation-ink: #1e1610;
  --conversation-muted: #6b635b;
  --conversation-line: #eee7de;
  --conversation-paper: #fcfaf7;
  --conversation-out: #7a3e12;
  min-inline-size: 0;
  border: 1px solid var(--conversation-line);
  border-radius: 1.25rem;
  background: #fff;
  color: var(--conversation-ink);
}
.conversation-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  min-inline-size: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border-block-end: 1px solid var(--conversation-line, #eee7de);
}
.conversation-header__title { font-family: var(--font-display, Georgia, serif); font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
/* Wide enough for her name and number; a badge beside it wraps below instead. */
.conversation-header__content { min-inline-size: min(100%, 11rem); flex: 1; }
.conversation-header__detail { font-size: .84375rem; line-height: 1.5; color: var(--conversation-muted, #6b635b); overflow-wrap: anywhere; }
.conversation-header__subtitle { font-size: .875rem; color: var(--conversation-muted, #6b635b); overflow-wrap: anywhere; }
.conversation-header__avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: #f4e6d3; color: #7a3e12; }
.conversation-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .25rem; padding: .25rem; overflow: visible; border: 0; border-radius: 1.125rem; background: #f3eee7; }
/* The pill replaces the old underlined tab: words wrap inside it, no underline. */
.conversation-tab { display: flex; align-items: center; justify-content: center; gap: .5rem; min-inline-size: 0; min-block-size: 3.25rem; padding: .625rem .75rem; border: 0; border-radius: .875rem; color: #5e554c; white-space: normal; overflow-wrap: anywhere; }
.conversation-tab__words { display: flex; min-inline-size: 0; flex-direction: column; align-items: flex-start; gap: .125rem; text-align: start; }
.conversation-tab__label { font-size: .875rem; font-weight: 600; }
.conversation-tab__detail { font-size: .75rem; color: #6b635b; }
.conversation-tab[aria-selected="true"], .conversation-tab[aria-current="page"] { color: #7a3e12; background: #fff; box-shadow: 0 2px 8px #3a231214; }
.conversation-log { min-inline-size: 0; min-block-size: 0; padding: 1.25rem; background: var(--conversation-paper, #fcfaf7); }
.conversation-log__day { margin: 0; padding: 0; list-style: none; }
.conversation-log__day > * + * { margin-block-start: .875rem; }
.conversation-log > * + * { margin-block-start: .875rem; }
.conversation-day { display: flex; align-items: center; justify-content: center; gap: .875rem; margin-block: 1rem; color: #5e554c; font-size: .75rem; font-weight: 600; text-align: center; }
.conversation-day::before, .conversation-day::after { content: ""; flex: 1; block-size: 1px; background: var(--conversation-line, #eee7de); }
.conversation-day[data-chat-day]::before, .conversation-day[data-chat-day]::after { content: none; }
.conversation-day > .conversation-day__label, .conversation-day > :only-child { max-inline-size: 100%; padding: .3125rem .75rem; border-radius: 999px; background: #f3eee7; overflow-wrap: anywhere; }
.conversation-message { display: flex; align-items: flex-end; gap: .625rem; min-inline-size: 0; margin-inline: 0; }
.conversation-message__content { min-inline-size: 0; max-inline-size: min(85%, 36rem); }
.conversation-message__avatar { flex: none; display: flex; align-items: center; justify-content: center; inline-size: 2rem; min-inline-size: 2rem; block-size: 2rem; margin-block-end: 1px; border-radius: 50%; background: #e9e1d6; color: #4a3424; font-size: .75rem; font-weight: 700; }
.conversation-message__avatar-mark { inline-size: 2rem; block-size: 2rem; border-radius: 50%; }
.conversation-message__sender { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; min-block-size: 1.125rem; margin-block-end: .25rem; color: #4a3a2c; font-size: .78125rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.conversation-message__bubble { min-inline-size: 0; padding: .625rem .875rem; border-radius: 1.25rem 1.25rem 1.25rem .375rem; background: #efeae4; color: #1e1610; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
.conversation-message [data-chat-person] { position: static; }
.conversation-message [data-chat-person-card] { inset-inline-start: 0; inset-inline-end: auto; inset-block-start: 1.5rem; inline-size: min(18rem, calc(100% - .5rem)); max-inline-size: calc(100% - .5rem); }
.message--outgoing [data-chat-person-card] { inset-inline-start: auto; inset-inline-end: 0; }
.conversation-message__kind { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 400; color: #6b635b; }
.conversation-message__automatic { padding: .0625rem .5rem; border: 1px solid #e7cfaf; border-radius: 999px; background: #fff; color: #7a3e12; font-size: .6875rem; font-weight: 600; }
.conversation-message__body { min-inline-size: 0; color: inherit; overflow-wrap: anywhere; }
.conversation-message__body :where(p, pre, code) { max-inline-size: 100%; overflow-wrap: anywhere; }
.conversation-message__body pre { white-space: pre-wrap; }
.conversation-message__meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .25rem .5rem; margin-block-start: .25rem; color: #645c55; font-size: .71875rem; font-weight: 400; line-height: 1.4; }
.conversation-message__attachments { min-inline-size: 0; max-inline-size: 100%; margin-block-start: .5rem; }
.conversation-message__attachments > * { max-inline-size: 100%; }
.message--outgoing { justify-content: flex-end; }
.message--outgoing > .conversation-message__avatar { order: 2; background: #d9a35a; color: #2e1c0e; }
.message--outgoing > .conversation-message__content { order: 1; }
.message--outgoing .conversation-message__sender { justify-content: flex-end; }
.message--outgoing .conversation-message__bubble { border-radius: 1.25rem 1.25rem .375rem 1.25rem; background: #7a3e12; color: #fff; box-shadow: 0 1px 2px #3a23122e, 0 5px 14px #7a3e1217; }
.message--outgoing .conversation-message__body a { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.message--outgoing .conversation-message__meta { color: #ebd9c8; }
/* Accent and muted words (an email's "Email" label, Open the email) would be
   brown on brown in a person's own bubble; they read light there instead.
   Only words sitting on the brown itself: a file card or link card is a
   white/cream card inside the bubble, and its own colours stay. */
.message--outgoing:not(.message--automatic) .conversation-message__bubble :where(.text-accent-strong, .text-muted, .text-meta):not(:is(.bg-card, .bg-white, .bg-page, .bg-accent-soft), :is(.bg-card, .bg-white, .bg-page, .bg-accent-soft) *) { color: #f7ebdc; }
.message--outgoing:not(.message--automatic) .conversation-message__bubble a.ui-link:not(:is(.bg-card, .bg-white, .bg-page, .bg-accent-soft) *) { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
/* C83: a sent @mention follows its white bubble text and remains distinct.
   Fixed colours apply in both colour schemes; received mentions keep theirs. */
.message--outgoing:not(.message--automatic) .conversation-message__body strong.text-accent-strong { color: #fff; text-decoration: underline; text-underline-offset: .15em; }
.message--automatic .conversation-message__bubble { border: 1px solid #edd9bf; background: #f7ebdc; color: #2e1c0e; box-shadow: none; }
.message--automatic .conversation-message__avatar { background: #f7ebdc; color: #7a3e12; border: 1px solid #edd9bf; }
.message--automatic .conversation-message__meta { color: #6b5440; }
.message--automatic.message--outgoing .conversation-message__body a { color: #7a3e12; }
.conversation-message__toolbar :where(a, button) { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
.message--note .conversation-message__bubble { border: 1px dashed #d4c8b7; background: #f3eee7; color: #3d352e; box-shadow: none; }
.conversation-message--follows { margin-block-start: .375rem; }
/* A follow-on message keeps the avatar's width for alignment, but no dot. */
.conversation-message > .conversation-message__avatar.conversation-message__avatar--spacer { border: 0; background: none; }
/* The customer card's body: the header, log and composer run edge to edge;
   the hint, paging links and reply-check frames keep the old 1rem inset and
   the old 1rem gap between them. */
.conversation-surface__body { display: flex; flex-direction: column; gap: 1rem; min-inline-size: 0; }
.conversation-surface__body > :not(.conversation-header, .conversation-log, .conversation-composer) { min-inline-size: 0; margin-inline: 1rem; }
.conversation-surface__body > :last-child:not(.conversation-composer, .conversation-log) { margin-block-end: 1rem; }
.conversation-composer-region { border-block-start: 1px solid #eee7de; background: #fff; }
.conversation-composer { min-inline-size: 0; padding: .875rem 1rem 1rem; background: #fff; }
.conversation-composer__box { min-inline-size: 0; border: 1px solid #dcd2c6; border-radius: 1.625rem; background: #fff; box-shadow: 0 1px 2px #3a23120d; }
.conversation-composer__input { min-block-size: 2.75rem; font-size: 1rem; line-height: 1.5; }
.conversation-composer__send { min-inline-size: 2.75rem; min-block-size: 2.75rem; border-radius: 999px; background: #7a3e12; color: #fff; }
.conversation-composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-inline-size: 0; }
.conversation-composer-tools :where(a, button) { min-block-size: 2.75rem; }
.conversation-surface :where(button, a, input, textarea, select):focus-visible { outline: 2px solid #7a3e12; outline-offset: 3px; }
@media (max-width: 639px) {
  .conversation-header { padding: .875rem; }
  .conversation-header__title { font-size: 1.25rem; }
  /* Team chat's channel mark stays hidden on a phone (its `hidden sm:inline-flex`),
     so the conversation's name has the room. */
  .conversation-header .conversation-header__avatar.hidden { display: none; }
  /* Two by two on a phone: the name alone, the small second line hidden. */
  .conversation-tab { justify-content: flex-start; }
  .conversation-tab__detail { display: none; }
  .conversation-log { padding: 1rem .75rem; }
  .conversation-message { gap: .5rem; }
  .conversation-message__content { max-inline-size: calc(100% - 2.5rem); }
  .conversation-message__bubble { padding: .625rem .75rem; }
  .conversation-composer { padding: .75rem; }
}
@media (pointer: coarse) {
  .conversation-message--interactive > .conversation-message__content { max-inline-size: calc(100% - 6rem); }
  .conversation-message--interactive > .conversation-message__toolbar { order: 3; flex: none; }
  .conversation-message__toolbar [data-chat-actions] { position: static; }
  .conversation-message__toolbar [data-chat-actions-menu] { inset-inline-end: 0; inset-block-start: 2.75rem; max-inline-size: calc(100% - .5rem); }
  .conversation-message__toolbar [data-chat-actions-menu][data-up] { inset-block-start: auto; inset-block-end: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .conversation-surface *, .conversation-composer * { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
}