.page-shell--inbox, .page-shell--inbox-thread { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.page-shell--inbox { max-width: 1120px; }
.page-shell--inbox-list, .page-shell--inbox-thread { max-width: none; padding-inline: clamp(1rem, 2vw, 2rem); }
.page-shell--inbox-thread { padding-block: var(--space-4); }

/* Conversation list */
.inbox-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.inbox-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--motion-short), background var(--motion-short); }
.inbox-item:hover { background: var(--color-surface-subtle); border-color: var(--color-border-strong); }
.inbox-item--unread { border-color: var(--color-action); border-left-width: 4px; }
.inbox-item--active { background: var(--color-surface-subtle); border-color: var(--color-action); }
.inbox-item__link { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; padding: 1rem 1.25rem; text-decoration: none; }
.inbox-item__link:hover .inbox-item__title { text-decoration: underline; text-underline-offset: .15em; }
.inbox-item__avatar { position: relative; flex: none; width: 3rem; height: 3rem; }
.inbox-item__thumbnail { display: block; width: 3rem; height: 3rem; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-surface-subtle); }
.inbox-item__avatar-fallback { width: 3rem; height: 3rem; font-size: 1.1rem; }
.inbox-item__avatar-badge { position: absolute; right: -.4rem; bottom: -.4rem; width: 1.35rem; height: 1.35rem; font-size: .6rem; border: 2px solid var(--color-surface); }
.inbox-item__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; min-width: 0; flex: 1; }
.inbox-item__heading { display: flex; flex-wrap: nowrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.inbox-item__title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; font-weight: 700; }
.inbox-item__time { flex: none; color: var(--color-text-secondary); font-size: .75rem; }
.inbox-item__meta, .inbox-item__preview { margin: 0; color: var(--color-text-secondary); }
.inbox-item__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; }
.inbox-item__price { font-weight: 650; color: var(--color-price); }
.inbox-item__preview-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.inbox-item__preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.inbox-unread { flex: none; min-height: 1.75rem; padding: .15rem .55rem; color: var(--color-text-inverse); background: var(--color-action); border-radius: 999px; font-size: .85rem; font-weight: 700; }
.inbox-pagination, .inbox-messages__pagination { margin: 0; overflow-anchor: none; }
.inbox-messages__pagination { display: flex; justify-content: center; padding-top: 1rem; }
.inbox-load-more { margin-top: 0; }
#inbox-conversations { display: block; min-width: 0; }

/* Two-pane layout: conversation list beside the open thread */
.inbox-layout { display: block; }
.inbox-layout__list { display: grid; gap: var(--space-3); min-width: 0; }
.inbox-layout__detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.inbox-layout__detail--empty { display: none; }
@media (max-width: 63.99rem) {
  .inbox-layout__list--with-thread { display: none; }
}
@media (min-width: 64rem) {
  .inbox-layout { display: grid; grid-template-columns: minmax(280px, 22rem) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  .inbox-layout__list { position: sticky; top: var(--space-4); max-height: calc(100dvh - 8rem); overflow-y: auto; padding-right: .25rem; }
  .inbox-layout__detail--empty {
    display: grid; place-items: center; min-height: 24rem; padding: var(--space-6);
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  }
  /* The thread page fills the viewport below the site header; --inbox-layout-top is measured by conversation-thread. */
  .inbox-layout--thread { height: max(30rem, calc(100dvh - var(--inbox-layout-top, 7rem) - var(--space-4))); align-items: stretch; }
  .inbox-layout--thread .inbox-layout__list { position: static; align-content: start; height: 100%; max-height: none; }
  .inbox-thread__back { display: none; }
}

/* Thread: header, scrolling messages and composer in one pane */
.inbox-thread { display: flex; flex-direction: column; gap: 0; container: inbox-thread / inline-size; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.inbox-thread__header { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.inbox-thread__header > p { margin: 0; }
.inbox-thread__back-link { font-size: .85rem; font-weight: 700; color: var(--color-action); }
.inbox-thread__offer { color: var(--color-text-secondary); font-size: .9rem; }
.inbox-thread__offer a { color: var(--color-action); font-weight: 700; }
.inbox-thread__bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "peer actions" "listing listing"; gap: .75rem 1rem; align-items: center; }
.inbox-thread__actions { grid-area: actions; display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }
.inbox-thread__scroller { flex: 1; padding: 0 clamp(1rem, 2.5vw, 2rem); background: var(--color-background); }
.inbox-thread__footer { padding: .75rem 1.25rem; background: var(--color-surface); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.inbox-thread__footer > .inbox-honesty { margin: 0; }
@media (max-width: 63.99rem) {
  .inbox-thread__footer { position: sticky; bottom: calc(var(--mobile-nav-height, 5rem) + .5rem); z-index: 1; }
}
@media (min-width: 64rem) {
  .inbox-thread { height: 100%; min-height: 0; }
  .inbox-thread__scroller { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}
@container inbox-thread (min-width: 60rem) {
  .inbox-thread__bar { grid-template-columns: minmax(max-content, auto) minmax(0, 1fr) auto; grid-template-areas: "peer listing actions"; }
  .inbox-thread__bar .inbox-context-card { padding-left: 1rem; border-left: 1px solid var(--color-border); }
}

/* Counterpart identity with their seller rating */
.inbox-peer { grid-area: peer; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.inbox-peer__avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.inbox-peer__text { display: grid; gap: .1rem; min-width: 0; }
.inbox-peer__identity { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; min-width: 0; }
.inbox-peer__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); font-size: 1.1rem; font-weight: 750; text-decoration: none; }
a.inbox-peer__name:hover { text-decoration: underline; text-underline-offset: .15em; }
.inbox-peer .seller-rating { flex-wrap: nowrap; font-size: .85rem; white-space: nowrap; }
.inbox-peer .seller-rating__count { font-size: .8rem; }
.inbox-peer__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; min-width: 0; }
.inbox-peer__role { color: var(--color-text-secondary); font-size: .8rem; font-weight: 650; }
.inbox-peer__unrated { color: var(--color-text-secondary); font-size: .8rem; white-space: nowrap; }
.inbox-peer .inbox-live-status { display: block; overflow: hidden; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; }
.inbox-peer .inbox-live-status::before { display: inline-block; margin-right: .4rem; vertical-align: .05em; }

/* Listing the conversation is about */
.inbox-context-card { grid-area: listing; display: flex; align-items: center; gap: .75rem; min-width: 0; }
.inbox-context-card__media { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text-secondary); }
.inbox-context-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inbox-context-card__media svg { width: 1.25rem; height: 1.25rem; }
.inbox-context-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; min-width: 0; flex: 1; }
.inbox-context-card__title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.inbox-context-card__meta { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: center; color: var(--color-text-secondary); font-size: .8rem; }
.inbox-context-card__price { font-weight: 650; color: var(--color-price); }
.inbox-context-card__link { font-weight: 700; color: var(--color-action); }

/* Header actions open small panels instead of taking thread space */
.inbox-popover > summary { list-style: none; }
.inbox-popover > summary::-webkit-details-marker { display: none; }
.inbox-action { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .95rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: .85rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background var(--motion-short), border-color var(--motion-short); }
.inbox-action:hover, .inbox-popover[open] > .inbox-action { background: var(--color-surface-subtle); }
.inbox-action:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.inbox-action svg { width: 1.1rem; height: 1.1rem; flex: none; }
.inbox-rate > .inbox-action:not(.inbox-action--rated) { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); background: var(--color-accent-soft); }
.inbox-rate > .inbox-action svg { color: var(--color-accent); fill: currentColor; }
.inbox-action--rated > svg { display: none; }
.inbox-action .seller-rating__stars { font-size: .9rem; white-space: nowrap; }
.inbox-popover__panel { position: absolute; z-index: 30; top: calc(100% + .5rem); right: 0; width: min(24rem, 100%); padding: 1.1rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
@container inbox-thread (max-width: 40rem) {
  /* Narrow threads keep the actions as icon buttons so the name and rating stay readable. */
  .inbox-action { justify-content: center; width: 44px; padding: 0; }
  .inbox-action > .inbox-action__label, .inbox-action > .seller-rating__stars { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .inbox-action--rated > svg { display: block; }
}

/* Seller rating form inside its panel */
.seller-rating-form { display: grid; gap: .6rem; }
.seller-rating-form h2 { margin: 0; font-size: 1.05rem; }
.seller-rating-form__note { margin: 0; color: var(--color-text-secondary); font-size: .78rem; line-height: 1.45; }
.seller-rating-form__fields { display: grid; gap: .75rem; }
.seller-rating-form__score { margin: 0 0 0 -.5rem; padding: 0; border: 0; }
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-picker input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.star-picker label { display: grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--color-border-strong); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.star-picker label:hover, .star-picker label:hover ~ label, .star-picker input:checked + label, .star-picker input:checked ~ label { color: var(--color-accent); }
.star-picker input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.seller-rating-form__comment { display: grid; gap: .35rem; }
.seller-rating-form__comment label { font-size: .85rem; font-weight: 650; }
.seller-rating-form__comment textarea { width: 100%; min-height: 4rem; padding: .6rem .75rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); resize: vertical; }
.seller-rating-form .button { width: 100%; margin-top: 0; }

/* Safety tools */
.inbox-honesty { margin: 0; padding: .6rem .9rem; color: var(--color-text-secondary); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: .9rem; }
.inbox-safety { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.inbox-safety__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.inbox-safety__form .button, .listing-contact-form .button { margin-top: 0; }
.inbox-safety__form select { min-height: 44px; padding: .5rem .7rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.inbox-safety__hint { margin: 0; color: var(--color-text-secondary); }
.inbox-popover__panel.inbox-safety { display: grid; gap: .75rem; }
.inbox-popover__panel.inbox-safety .button { width: 100%; font-size: .85rem; }
.inbox-popover__panel .inbox-safety__form { display: grid; grid-template-columns: minmax(0, 1fr); }
.trust-safety { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); width: 100%; flex-basis: 100%; }
.listing-contact-form { display: inline-flex; margin: 0; }

/* Messages */
.inbox-messages { display: grid; gap: 1rem; margin: 0; padding: 1rem 0; list-style: none; }
.inbox-messages__empty { margin: 0; padding: 2rem 0; color: var(--color-text-secondary); text-align: center; }
.inbox-message { display: grid; gap: .35rem; max-width: min(36rem, 85%); padding: 1.2rem 1.4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px 20px 20px 4px; }
.inbox-message--own { justify-self: end; color: var(--color-text-inverse); background: var(--color-action); border-color: var(--color-action); border-radius: 20px 20px 4px 20px; }
.inbox-message__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; color: var(--color-text-secondary); font-size: .75rem; }
.inbox-message--own .inbox-message__meta { color: inherit; opacity: .85; }
.inbox-message__status { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; }
.inbox-message__ticks { width: 1.1rem; height: .8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inbox-message--own .inbox-message__status--read { color: var(--color-accent-soft); font-weight: 700; opacity: 1; }
.inbox-message__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-thread .inbox-message { padding: .75rem 1rem; }
.inbox-day-separator { display: flex; justify-content: center; margin: .25rem 0; list-style: none; }
.inbox-day-separator span { padding: .25rem .75rem; color: var(--color-text-secondary); background: var(--color-surface-subtle); border-radius: 999px; font-size: .75rem; font-weight: 650; }

/* Composer: message field and send button on one row */
.inbox-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; margin: 0; }
.inbox-composer > * { grid-column: 1 / -1; }
.inbox-composer > .form-field { grid-column: 1; display: flex; flex-direction: column; gap: .3rem; }
.inbox-composer > .inbox-composer__actions { grid-column: 2; grid-row: span 1; align-self: start; }
.inbox-composer .form-field__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.inbox-composer .form-field__control { order: 1; }
.inbox-composer .form-field__hint { order: 2; font-size: .72rem; }
.inbox-composer .form-field__error { order: 3; }
.inbox-composer .form-field__control textarea { display: block; min-height: 48px; max-height: 10rem; padding: .7rem 1rem; overflow-y: auto; border-radius: 24px; resize: none; }
.inbox-composer__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inbox-composer__actions .button { min-height: 48px; margin-top: 0; }
.inbox-composer__status { margin: 0; color: var(--color-text-secondary); font-size: .8rem; font-weight: 650; }

.inbox-live-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--color-text-secondary); font-size: .875rem; line-height: 1.5; }
.inbox-live-status::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-border-strong); }
.inbox-live-status[data-state="connected"]::before { background: var(--color-action); }
.inbox-live-status[data-state="reconnecting"]::before { background: var(--color-accent); }
.inbox-live-status[data-state="unavailable"]::before { background: var(--color-danger); }
@media (max-width: 39.99rem) {
  .inbox-message { max-width: 92%; padding: .9rem 1rem; }
  .inbox-thread__header, .inbox-thread__footer { padding-inline: 1rem; }
}

.chat-widget { position: relative; }
.chat-widget__launcher { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-action); background: transparent; cursor: pointer; transition: background var(--motion-short); }
.chat-widget__launcher:hover, .chat-widget__launcher[aria-expanded="true"] { background: var(--color-surface-subtle); }
.chat-widget__launcher svg { width: 1.35rem; height: 1.35rem; }
.chat-widget__badge { position: absolute; top: -.4rem; right: -.45rem; display: grid; place-items: center; min-width: 1.35rem; min-height: 1.35rem; padding: 0 .25rem; border: 2px solid var(--color-background); border-radius: 999px; background: var(--color-accent); color: var(--color-text-inverse); font-size: .7rem; font-weight: 800; line-height: 1; }
.chat-widget__badge[hidden], .chat-widget__panel[hidden] { display: none; }
.chat-widget__launcher--unread { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.chat-widget__launcher--nudge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--color-accent); animation: chat-widget-halo 1.1s ease-out 2; pointer-events: none; }
.chat-widget__launcher--nudge svg { animation: chat-widget-ring .9s ease-in-out 2; transform-origin: 50% 15%; }
.chat-widget__launcher--nudge .chat-widget__badge { animation: chat-widget-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chat-widget-halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 1.1rem transparent; } }
@keyframes chat-widget-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes chat-widget-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.chat-widget__panel { position: absolute; z-index: var(--z-header); top: calc(100% + .7rem); right: 0; width: min(24rem, calc(100vw - 2rem)); height: min(34rem, calc(100dvh - 8rem)); overflow: hidden; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-overlay); }
.chat-widget__surface, .chat-widget__surface > div { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-widget__heading { display: flex; align-items: center; gap: .5rem; min-height: 4rem; padding: .65rem .75rem; border-bottom: 1px solid var(--color-border); }
.chat-widget__heading h2 { min-width: 0; margin: 0; font-size: 1rem; line-height: 1.3; }
.chat-widget__heading-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex: none; }
.chat-widget__full { color: var(--color-action); font-size: .8rem; font-weight: 700; }
.chat-widget__icon-button { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: .5rem; border: 0; border-radius: var(--radius-sm); color: var(--color-text); background: transparent; cursor: pointer; }
.chat-widget__icon-button:hover, .chat-widget__icon-button:focus-visible { background: var(--color-surface-subtle); }
.chat-widget__icon-button svg { width: 1.25rem; height: 1.25rem; }
.chat-widget__content, .chat-widget__messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-widget__conversations { margin: 0; padding: 0; list-style: none; }
.chat-widget__conversations li + li { border-top: 1px solid var(--color-border); }
.chat-widget__conversation { display: grid; gap: .2rem; width: 100%; min-height: 4.5rem; padding: .85rem 1rem; border: 0; border-left: 4px solid transparent; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; }
.chat-widget__conversation:hover, .chat-widget__conversation:focus-visible { background: var(--color-surface-subtle); }
.chat-widget__conversation--unread { border-left-color: var(--color-action); }
.chat-widget__conversation-title { font-weight: 750; }
.chat-widget__conversation-peer, .chat-widget__conversation-preview { color: var(--color-text-secondary); font-size: .8rem; }
.chat-widget__conversation-preview { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-widget__conversation-unread { color: var(--color-action); font-size: .75rem; font-weight: 750; }
.chat-widget__thread-title { min-width: 0; }
.chat-widget__thread-title h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-widget__thread-title > span { color: var(--color-text-secondary); font-size: .75rem; }
.chat-widget__messages { padding: .75rem; }
.chat-widget__messages .inbox-messages { gap: .65rem; padding: 0; }
.chat-widget__messages .inbox-message { padding: .65rem .8rem; font-size: .875rem; }
.chat-widget__messages .inbox-message__meta { font-size: .7rem; }
.chat-widget__empty { margin: 0; padding: 1rem; color: var(--color-text-secondary); }
.chat-widget__composer { display: grid; gap: .4rem; padding: .75rem; border-top: 1px solid var(--color-border); }
.chat-widget__composer label { font-size: .8rem; font-weight: 700; }
.chat-widget__composer textarea { width: 100%; min-height: 3rem; max-height: 7rem; padding: .5rem .65rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); resize: vertical; }
.chat-widget__composer-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; }
.chat-widget__composer-actions [role="status"] { color: var(--color-text-secondary); font-size: .75rem; }
.chat-widget__composer-actions .button { min-height: 2.75rem; margin: 0; }
.chat-widget :is(button, a, textarea):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 63.99rem) {
  .chat-widget { position: static; }
  /* Static wrapper lets the panel anchor to the sticky header and span its width. */
  .chat-widget__panel { top: calc(100% + .5rem); right: 1rem; left: 1rem; width: auto; height: min(34rem, calc(100dvh - 7rem - var(--mobile-nav-height, 5rem) - env(safe-area-inset-bottom))); }
}