/* Customer messages use the existing portal header and keep the composer stable. */
.header-messages { position: relative; }
.mobile-nav-toggle { position: relative; }
.messages-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 20px; background: #222; color: #fff; font-size: 10px; font-weight: 600; line-height: 1; }
.header-messages .messages-unread { position: absolute; top: 2px; right: 0; border: 2px solid #fff; min-width: 19px; height: 19px; padding: 0 4px; }
.mobile-nav-toggle .messages-unread { position: absolute; top: 0; right: -1px; border: 2px solid #fff; min-width: 19px; height: 19px; padding: 0 4px; }
.navigation-link .messages-unread { margin-left: auto; }
.messages-unread[hidden], .customer-messages [hidden] { display: none !important; }
.portal-workspace-shell .main-content.messages-main { width: 100%; max-width: 1400px; padding: 0 32px 24px; }
.customer-messages { display: flex; flex-direction: column; height: calc(100dvh - 98px); min-height: 480px; max-height: 1100px; padding-top: 24px; color: #292929; }
.messages-page-heading { display: flex; align-items: baseline; justify-content: space-between; flex: 0 0 auto; gap: 20px; padding: 0 0 20px; }
.messages-page-heading h1 { font-size: 26px; font-weight: 600; letter-spacing: -.7px; }
.messages-page-heading > span { color: #777; font-size: 13px; }
.messages-panel { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; background: #fff; border: 1px solid #e4e4e4; border-radius: 14px; box-shadow: 0 2px 5px #00000003; }
.messages-conversation-header { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; padding: 19px 24px; border-bottom: 1px solid #ededed; }
.messages-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f0eee9; color: #55534f; font-size: 12px; font-weight: 600; }
.messages-recipient { min-width: 0; }
.messages-recipient h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #282828; font-size: 14px; line-height: 1.5; font-weight: 600; }
.messages-recipient p { color: #777; font-size: 12px; line-height: 1.5; }
.messages-connection { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #777; font-size: 11px; text-align: right; }
.messages-connection::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #aaa; }
.messages-connection[data-connection=connected]::before { background: #438766; }
.messages-connection[data-connection=error],.messages-connection[data-connection=offline] { color: #946526; }
.messages-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px 28px 16px; outline-offset: -3px; }
.messages-log { display: flex; flex-direction: column; gap: 18px; }
.messages-empty { height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.messages-empty-icon { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 18px; border-radius: 20px; background: #f4f3f0; color: #67645d; }
.messages-empty-icon svg { width: 28px; height: 28px; }
.messages-empty h3 { font-weight: 600; font-size: 18px; letter-spacing: -.3px; }
.messages-empty p { color: #777; font-size: 13px; line-height: 1.7; margin-top: 9px; }
.messages-date { color: #898989; text-align: center; font-size: 11px; padding: 3px 0; }
.messages-event { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 5px 0; color: #777; text-align: center; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.messages-event > span { min-width: 0; }
.messages-event time { display: block; margin-top: 2px; color: #999; font-size: 10px; }
.messages-event[data-chat-event=closed], .messages-event[data-chat-event=reopened] { margin: 6px 0; }
.messages-event[data-chat-event=closed]::before, .messages-event[data-chat-event=closed]::after,
.messages-event[data-chat-event=reopened]::before, .messages-event[data-chat-event=reopened]::after { content: ''; flex: 1; min-width: 16px; height: 1px; background: #e7e7e7; }
.messages-event.is-highlighted { background: #fff4ce; border-radius: 8px; }
.messages-message { display: flex; align-items: flex-start; flex-direction: column; max-width: min(78%, 620px); }
.messages-message-own { margin-left: auto; align-items: flex-end; }
.messages-message-meta { display: flex; align-items: center; gap: 9px; padding: 0 2px 6px; color: #858585; font-size: 10px; }
.messages-message-meta strong { color: #666; font-size: 11px; font-weight: 500; }
.messages-message-own .messages-message-meta { flex-direction: row-reverse; }
.messages-bubble { max-width: 100%; padding: 12px 15px; border-radius: 12px 12px 12px 3px; background: #f2f2f0; color: #303030; }
.messages-message-own .messages-bubble { border-radius: 12px 12px 3px 12px; background: #272727; color: #fff; }
.messages-message-automatic { max-width: min(88%, 620px); }
.messages-message-automatic .messages-bubble { background: #faf9f5; border: 1px solid #e9e5da; border-radius: 10px; color: #615c50; }
.messages-message-automatic .messages-message-meta strong { color: #777164; }
.messages-recipient .messages-service-hours { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.messages-message-meta { flex-wrap: wrap; }
.messages-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.messages-receipt { color: #888; font-size: 10px; padding: 5px 2px 0; }
.messages-typing { flex: 0 0 24px; height: 24px; padding: 3px 28px; color: #888; font-size: 11px; }
.messages-composer { flex: 0 0 auto; margin: 0 20px 16px; padding: 10px 12px 9px; border: 1px solid #dedede; border-radius: 12px; background: #fff; transition: border-color .15s; }
.messages-composer:focus-within { border-color: #888; }
.messages-input-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.customer-messages .messages-composer textarea { display: block; min-height: 36px; max-height: 144px; width: 100%; resize: none; padding: 7px 2px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: #272727; font-size: 14px; line-height: 22px; outline: none; }
.messages-composer textarea::placeholder { color: #939393; }
.messages-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; }
.messages-attach-group { display: flex; align-items: center; gap: 7px; min-width: 0; }
.messages-attach { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; padding: 6px; border: 0; border-radius: 7px; color: #666; background: transparent; }
.messages-attach:hover { background: #f1f1f1; }
.messages-file-hint { color: #999; font-size: 10px; }
.messages-send { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 6px; min-width: 80px; min-height: 36px; padding: 8px 12px; border: 1px solid #252525; border-radius: 7px; background: #252525; color: #fff; font-size: 12px; font-weight: 500; }
.messages-send svg { width: 15px; height: 15px; }
.messages-send:disabled { opacity: 1; border-color: #ececec; background: #ececec; color: #aaa; }
.messages-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; margin-bottom: 5px; border-radius: 6px; background: #fdf1ec; color: #963f24; font-size: 12px; line-height: 1.5; }
.messages-error button { flex: 0 0 auto; padding: 5px; border: 0; background: transparent; color: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; }
.messages-load-older { display: block; margin: 0 auto 18px; padding: 8px 12px; border: 1px solid #e5e5e5; border-radius: 7px; background: #fff; color: #666; font-size: 12px; }
.messages-new { position: absolute; z-index: 1; align-self: center; bottom: 164px; padding: 9px 14px; border: 1px solid #dedede; border-radius: 20px; box-shadow: 0 2px 8px #00000009; background: #fff; color: #333; font-size: 12px; }
.messages-selected-files { display: flex; gap: 8px; padding: 4px 0 8px; overflow-x: auto; }
.messages-selected-file { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; max-width: 250px; padding: 7px 8px; border-radius: 6px; background: #f4f4f2; font-size: 11px; color: #555; }
.messages-selected-file > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.messages-selected-file small { display: block; color: #888; font-size: 10px; margin-top: 2px; }
.messages-selected-file > svg { flex: 0 0 20px; }
.messages-selected-file button { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; padding: 4px; border: 0; background: transparent; color: #888; }
.messages-attachment { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 160px; max-width: 320px; padding: 9px 0; border: 0; background: transparent; text-align: left; color: inherit; }
.messages-attachment > span { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 12px; line-height: 1.4; }
.messages-attachment > svg { flex: 0 0 20px; }
.messages-attachment small { display: block; margin-top: 2px; opacity: .65; font-size: 10px; }
.messages-bubble p + .messages-attachment { border-top: 1px solid #ffffff25; margin-top: 10px; }
@media (max-width: 900px) {
  .portal-workspace-shell .workspace-header .header-actions .header-messages { display: none; }
  .portal-workspace-shell .main-content.messages-main { max-width: none; padding: 0; }
  .customer-messages { height: var(--messages-viewport-height, calc(100dvh - 72px)); min-height: 0; max-height: none; padding: 0; }
  .messages-page-heading { padding: 16px 18px 12px; background: #fff; }
  .messages-page-heading h1 { font-size: 22px; }
  .messages-page-heading > span { display: none; }
  .messages-panel { border: 0; border-top: 1px solid #ededed; border-radius: 0; box-shadow: none; }
  .messages-conversation-header { gap: 10px; padding: 12px 16px; }
  .messages-avatar { flex-basis: 36px; width: 36px; height: 36px; }
  .messages-recipient h2 { font-size: 13px; }
  .messages-recipient p { font-size: 11px; }
  .messages-connection { max-width: 105px; font-size: 10px; line-height: 1.5; }
  .messages-scroll { padding: 16px 15px 8px; scrollbar-gutter: auto; }
  .messages-message { max-width: 88%; }
  .messages-empty { min-height: 150px; padding: 20px 10px; }
  .messages-empty-icon { width: 50px; height: 50px; border-radius: 16px; margin-bottom: 13px; }
  .messages-empty h3 { font-size: 16px; }
  .messages-empty p { font-size: 12px; }
  .messages-typing { padding-left: 18px; padding-right: 18px; }
  .messages-composer { margin: 0 10px max(10px, env(safe-area-inset-bottom)); padding: 8px 10px; }
  .customer-messages .messages-composer textarea { font-size: 16px; }
  .messages-file-hint { font-size: 9px; }
  .messages-send { min-height: 36px; min-width: 70px; }
  .messages-attach { width: 36px; height: 36px; flex-basis: 36px; }
  .messages-error { align-items: flex-start; font-size: 11px; }
}
@media (max-width: 360px) { .messages-file-hint { display: none; } .messages-page-heading { padding-top: 12px; padding-bottom: 10px; } }

.messages-notifications, .messages-reconnect { padding: 5px 0; border: 0; background: transparent; color: #666; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.messages-reconnect { flex: none; font-size: 11px; }
.messages-recipient { flex: 1; }
.messages-message-pending .messages-bubble { background: #4a4a4a; }
.messages-pending-file { display: flex; align-items: center; gap: 7px; margin: 7px 0 3px; overflow-wrap: anywhere; font-size: 12px; }
.messages-pending-file svg { flex: none; width: 16px; }
.messages-pending-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: 100%; padding-top: 5px; color: #888; font-size: 10px; }
.messages-pending-status > span:first-child { overflow-wrap: anywhere; }
.messages-pending-status > span:last-child { display: inline-flex; gap: 10px; }
.messages-pending-status button { padding: 2px; border: 0; background: none; color: #666; font-size: 10px; text-decoration: underline; }
.messages-pending-status progress { width: 80px; height: 4px; accent-color: #444; }
@media (max-width: 900px) { .messages-notifications { font-size: 11px; } .messages-conversation-header { flex-wrap: wrap; } .messages-reconnect { margin-left: auto; } .messages-connection { max-width: 90px; } }

/* Authenticated previews never expose a public attachment URL. */
.chat-attachment-preview { width: min(880px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; margin: auto; border: 1px solid #dedede; border-radius: 12px; background: #fff; color: #303030; box-shadow: 0 20px 80px #0003; }
.chat-attachment-preview::backdrop { background: #0008; }
.chat-attachment-preview header, .chat-attachment-preview footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.chat-attachment-preview header { border-bottom: 1px solid #eee; }
.chat-attachment-preview header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.chat-attachment-preview header button { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 6px; border: 0; border-radius: 6px; background: #f3f3f3; color: #555; }
.chat-preview-content { display: flex; justify-content: center; align-items: center; min-height: 140px; background: #f5f5f5; }
.chat-preview-content img { display: block; max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.chat-preview-content iframe { display: block; width: 100%; height: min(680px, calc(100dvh - 170px)); border: 0; }
.chat-attachment-preview footer { border-top: 1px solid #eee; font-size: 11px; }
.chat-attachment-preview footer span { color: #777; }
.chat-attachment-preview footer a { flex: none; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; color: #303030; text-decoration: none; font-size: 12px; }

.messages-history-context { display:flex; flex:none; align-items:center; gap:10px; padding:10px 18px; border-bottom:1px solid #e5e7e5; background:#f4f6f3; font-size:12px; }
.messages-history-context[hidden] { display:none; }
.messages-history-context > span { flex:1; min-width:0; }
.messages-history-context button { flex:none; padding:6px 8px; border:1px solid #d9dfd7; border-radius:6px; background:#fff; color:#2e4233; font:inherit; }
.messages-message.is-highlighted .messages-bubble { outline:2px solid #b4a05b; outline-offset:3px; background:#fff9e8; color:#242428; }
.messages-message:focus { outline:0; }
@media(max-width:600px) { .messages-history-context { padding:8px 12px; font-size:11px; flex-wrap:wrap; } .messages-history-context > span { flex-basis:50%; } }

.chat-notification-help { margin:0 0 16px; padding:12px 14px; border:1px solid var(--border,#ddd); border-radius:10px; font-size:13px; line-height:1.5; background:#fff; }

.chat-notification-test { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; font-size:13px; line-height:1.5; }
.chat-test-button { border:1px solid #d5d5d5; border-radius:8px; padding:8px 12px; background:#fff; color:inherit; font:inherit; cursor:pointer; }
.chat-test-button:disabled { opacity:.6; cursor:default; }
.chat-notification-test span { flex:1; min-width:180px; }

.chat-notification-test[hidden] { display:none; }

/* Product/order context stays separate from editable message text. */
.chat-reference-card { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; min-width:0; max-width:100%; padding:12px; border:1px solid #dfe2df; border-radius:10px; background:#f5f6f4; color:#242724; text-align:left; box-sizing:border-box; }
.chat-reference-card.is-draft { flex-wrap:nowrap; margin-bottom:8px; }
.chat-reference-copy { display:flex; flex:1 1 120px; min-width:0; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.chat-reference-copy strong { font-size:13px; line-height:1.4; font-weight:600; }
.chat-reference-label { color:#686f68; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.chat-reference-detail, .chat-reference-copy small { color:#626962; font-size:11px; line-height:1.4; }
.chat-reference-copy small { color:#737b73; font-size:10px; }
.chat-reference-actions { flex:1 0 100%; display:flex; flex-wrap:wrap; gap:8px 16px; }
.chat-reference-actions button { appearance:none; background:none; border:0; padding:4px 0; color:#284b3a; font:inherit; font-size:11px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-align:left; }
.chat-reference-remove { flex:0 0 32px; width:32px; height:32px; padding:0; border:0; border-radius:7px; background:transparent; color:#5e665e; font:22px/1 sans-serif; cursor:pointer; }
.chat-reference-remove:hover { background:#e8ece6; }
.chat-reference-card button:focus-visible, .chat-reference-preview button:focus-visible { outline:2px solid #345946; outline-offset:3px; }
.messages-bubble > .chat-reference-card, .inbox-message-bubble > .chat-reference-card { margin-bottom:8px; }
.messages-bubble > .chat-reference-card:last-child, .inbox-message-bubble > .chat-reference-card:last-child { margin-bottom:0; }
.chat-reference-preview { width:min(420px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:0; border:1px solid #dfe2df; border-radius:16px; background:white; color:#242724; box-shadow:0 20px 60px #0003; box-sizing:border-box; }
.chat-reference-preview::backdrop { background:#10181066; }
.chat-reference-preview header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #eee; }
.chat-reference-preview h2 { margin:0; font-size:16px; }
.chat-reference-preview header button { background:transparent; border:0; width:32px; height:32px; font:24px/1 sans-serif; color:inherit; cursor:pointer; }
.chat-reference-preview [data-reference-details] { padding:20px; overflow-wrap:anywhere; }
.chat-reference-title { display:block; line-height:1.4; }
.chat-reference-preview dl { margin:18px 0; }
.chat-reference-preview dl div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:13px; }
.chat-reference-preview dt { color:#626962; }
.chat-reference-preview dd { margin:0; text-align:right; }
.chat-reference-note { margin:12px 0 0; font-size:12px; color:#626962; line-height:1.5; }
[data-chat-reference][hidden] { display:none; }

.order-chat-link { appearance:none; border:0; background:transparent; color:#626962; padding:8px 0; text-align:left; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:11px; cursor:pointer; }
.order-chat-link:hover { color:#252b25; }
.order-chat-link { font-size:13px; }


/* Keep the customer's current page behind a compact, persistent conversation. */
.chat-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
.chat-widget[hidden], .chat-widget [hidden] { display: none !important; }
.chat-launcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 16px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  background: #202020;
  color: #fff;
  box-shadow: 0 4px 12px #0002, 0 12px 32px #0002;
  transition: background .16s, box-shadow .16s, transform .16s, opacity .16s;
}
.chat-launcher > svg { width: 26px; height: 26px; }
.chat-launcher:hover { background: #363636; box-shadow: 0 5px 16px #0003, 0 14px 36px #0002; transform: translateY(-2px); }
.chat-launcher:active { transform: translateY(0); }
.chat-launcher:focus-visible, .chat-widget-close:focus-visible { outline: 2px solid #3f3f3f; outline-offset: 4px; }
.chat-launcher-badge { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 23px; height: 23px; padding: 0 5px; border: 2px solid #fff; border-radius: 20px; background: #c94034; color: #fff; font-size: 11px; font-weight: 650; line-height: 1; }
.chat-widget:has(.chat-widget-dialog[open]) .chat-launcher { opacity: 0; pointer-events: none; }
.chat-widget-dialog {
  position: fixed;
  inset: auto 24px 24px auto;
  width: min(410px, calc(100vw - 48px));
  height: min(680px, calc(100dvh - 48px));
  min-width: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
  background: #fff;
  color: #292929;
  box-shadow: 0 12px 54px #0003, 0 2px 8px #0000000d;
  container: customer-chat / size;
}
.chat-widget-dialog[open] { display: flex; animation: chat-widget-open .22s cubic-bezier(.2, .7, .2, 1); }
.chat-widget-dialog::backdrop { background: #15151520; animation: chat-widget-backdrop .2s ease-out; }
.chat-widget-handle { display: none; }
.chat-widget-close { position: absolute; z-index: 2; top: 14px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: #555; }
.chat-widget-close svg { width: 18px; height: 18px; }
.chat-widget-close:hover { background: #e9e9e9; color: #222; }
/* One header and one composer keep the conversation in focus. */
.chat-widget-dialog .customer-messages { width: 100%; height: 100%; min-height: 0; max-height: none; padding: 0; }
.chat-widget-dialog #messages-heading:focus { outline: none; }
.chat-widget-dialog .messages-panel { min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.chat-widget-dialog .messages-conversation-header { flex-wrap: nowrap; gap: 10px; min-height: 70px; padding: 14px 60px 14px 18px; }
.chat-widget-dialog .messages-avatar { width: 36px; height: 36px; flex-basis: 36px; background: #f2f2f2; color: #494949; font-size: 11px; }
.chat-widget-dialog .messages-recipient { flex: 1; min-width: 0; }
.chat-widget-dialog .messages-recipient h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; color: #262626; font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.5; }
.chat-widget-dialog .messages-recipient p { margin-top: 2px; color: #777; font-size: 11px; line-height: 1.4; }
.messages-details-toggle { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 10px; border: 0; border-radius: 50%; background: transparent; color: #555; }
.messages-details-toggle:hover, .messages-details-toggle[aria-expanded=true] { background: #f2f2f2; }
.messages-details-toggle:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
.messages-details { flex: 0 1 auto; min-height: 0; max-height: 36%; padding: 14px 18px; overflow: auto; overscroll-behavior: contain; border-bottom: 1px solid #ededed; background: #fafafa; font-size: 12px; line-height: 1.5; }
.messages-preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.messages-preferences-heading > span { font-weight: 550; }
.chat-widget-dialog .messages-notifications { padding: 6px 0; color: #555; font-size: 12px; line-height: 1.4; }
.messages-status { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 12px; padding: 8px 18px; background: #faf9f6; border-bottom: 1px solid #eee; }
.chat-widget-dialog .messages-connection { margin: 0; max-width: none; font-size: 11px; line-height: 1.4; text-align: left; }
.chat-widget-dialog .messages-reconnect { margin-left: auto; }
.chat-widget-dialog .messages-scroll { padding: 18px 16px 12px; scrollbar-gutter: auto; }
.chat-widget-dialog .messages-log { gap: 16px; }
.chat-widget-dialog .messages-message { max-width: 88%; }
.chat-widget-dialog .messages-message-automatic { max-width: 94%; }
.chat-widget-dialog .messages-message-own .messages-message-meta strong { display: none; }
.chat-widget-dialog .messages-bubble { padding: 10px 12px; }
.chat-widget-dialog .messages-bubble p { font-size: 13px; line-height: 1.55; }
.chat-widget-dialog .messages-empty { min-height: 130px; padding: 22px 10px; }
.chat-widget-dialog .messages-empty-icon { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 0; background: transparent; color: #a4a4a4; }
.chat-widget-dialog .messages-empty-icon svg { width: 28px; height: 28px; }
.chat-widget-dialog .messages-empty h3 { font-size: 16px; }
.chat-widget-dialog .messages-empty p { margin-top: 6px; font-size: 12px; line-height: 1.6; }
.chat-widget-dialog .messages-typing { flex-basis: 24px; height: 24px; padding: 2px 18px; font-size: 11px; }
.chat-widget-dialog .messages-typing:empty { display: none; }
.chat-widget-dialog .messages-composer { min-height: 0; max-height: min(280px, 42dvh); margin: 0 12px 12px; padding: 6px; overflow: auto; overscroll-behavior: contain; border-radius: 18px; }
.messages-compose-row { display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.chat-widget-dialog .messages-composer textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 96px; padding: 9px 4px; font-size: 14px; }
.chat-widget-dialog .messages-attach, .chat-widget-dialog .messages-send { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 10px; border-radius: 50%; }
.chat-widget-dialog .messages-send svg { width: 19px; height: 19px; }
.chat-widget-dialog .messages-send[aria-busy=true] svg { opacity: .5; }
.chat-widget-dialog .messages-new { bottom: 90px; }
.chat-widget-dialog .messages-history-context { gap: 8px; padding: 9px 14px; font-size: 11px; }
.chat-widget-dialog .chat-reference-card { gap: 8px; padding: 10px; }
.chat-widget-dialog .chat-reference-copy strong { font-size: 12px; }
.chat-widget-dialog .chat-notification-help, .chat-widget-dialog .chat-notification-test { margin: 10px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid #e8e8e8; border-radius: 0; background: transparent; font-size: 11px; line-height: 1.5; }
.chat-widget-dialog .chat-notification-test { gap: 8px; }
.chat-widget-dialog .chat-test-button { padding: 8px 10px; font-size: 11px; }
.chat-widget-dialog .chat-notification-test span { min-width: 140px; }
@keyframes chat-widget-open { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chat-widget-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .chat-launcher { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 54px; height: 54px; padding: 14px; }
  .chat-widget-dialog {
    --chat-sheet-height: min(82dvh, calc(var(--chat-viewport-height, 100dvh) - 48px));
    top: calc(var(--chat-viewport-top, 0px) + var(--chat-viewport-height, 100dvh) - var(--chat-sheet-height));
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--chat-sheet-height);
    max-height: var(--chat-sheet-height);
    border: 0;
    border-top: 1px solid #ffffff80;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 40px #0000001c;
  }
  .chat-widget-dialog[open] { animation: chat-widget-sheet-open .25s cubic-bezier(.2, .7, .2, 1); }
  .chat-widget-dialog::backdrop { background: #15151542; }
  .chat-widget-handle { position: absolute; z-index: 2; top: 0; left: 0; display: block; width: 100%; height: 24px; touch-action: none; user-select: none; -webkit-user-select: none; }
  .chat-widget-handle::before { content: ''; position: absolute; top: 9px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 4px; background: #d2d2d2; }
  .chat-widget-close { top: 26px; right: 10px; width: 44px; height: 44px; padding: 12px; }
  .chat-widget-dialog .messages-conversation-header { min-height: 84px; padding: 24px 58px 12px 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
  .chat-widget-dialog .messages-details-toggle { flex-basis: 44px; width: 44px; height: 44px; }
  .chat-widget-dialog .messages-scroll { padding: 16px 14px 12px; }
  .chat-widget-dialog .messages-composer { max-height: min(280px, max(130px, calc(var(--chat-viewport-height, 100dvh) * .4))); margin: 0 10px max(10px, env(safe-area-inset-bottom)); }
  .chat-widget-dialog .messages-composer textarea { font-size: 16px; min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .chat-widget-dialog .messages-attach, .chat-widget-dialog .messages-send { flex-basis: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 12px; }
}
@keyframes chat-widget-sheet-open { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 360px) {
  .chat-widget-dialog .messages-conversation-header { gap: 8px; padding-left: 12px; }
  .chat-widget-dialog .messages-recipient h1 { font-size: 14px; }
  .chat-widget-dialog .messages-avatar { width: 32px; height: 32px; flex-basis: 32px; }
}
@container customer-chat (max-height: 380px) {
  .chat-widget-dialog .messages-recipient p { display: none; }
  .chat-widget-dialog .messages-scroll { padding-top: 8px; padding-bottom: 8px; }
  .chat-widget-dialog .messages-composer { margin-bottom: 8px; }
  .chat-widget-dialog .messages-composer textarea { max-height: 58px; }
  .chat-widget-dialog .chat-reference-card.is-draft { align-items: center; padding: 4px 6px; margin-bottom: 4px; }
  .chat-widget-dialog .chat-reference-card.is-draft .chat-reference-copy { gap: 0; }
  .chat-widget-dialog .chat-reference-card.is-draft .chat-reference-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-widget-dialog .chat-reference-card.is-draft :is(.chat-reference-label, .chat-reference-detail, small) { display: none; }
  .chat-widget-dialog .chat-reference-card.is-draft .chat-reference-remove { width: 24px; height: 24px; flex-basis: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-launcher { transition: none; }
  .chat-widget-dialog[open], .chat-widget-dialog::backdrop { animation: none; }
}