.message-layout { max-width:1100px; margin:24px auto; }
.message-shell { background:#fff; border:1px solid #e1e7ef; border-radius:20px; overflow:hidden; min-width:0; }
.message-head { padding:24px; border-bottom:1px solid #e1e7ef; display:flex; align-items:center; gap:12px; }
.message-head :is(h1,h2) { margin:6px 0; font-size:24px; overflow-wrap:anywhere; }
.message-head p { color:#596779; margin:6px 0; }
.message-heading { min-width:0; flex:1; }
.message-avatar { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:#d8eaff; color:#15558f; font-weight:700; }
.message-list { display:grid; }
.message-thread-link { display:block; padding:20px 24px; text-decoration:none; color:#152b45; border-bottom:1px solid #e9edf3; }
.message-thread-link:hover { background:#f4f8ff; }
.message-thread-link strong { display:block; overflow-wrap:anywhere; }
.message-thread-link p { overflow-wrap:anywhere; color:#596779; margin:6px 0; }
.message-thread-link time { font-size:12px; color:#596779; }
[data-message-unread]:not([hidden]), .message-unread { display:inline-block; background:#0a66d9; color:white; border-radius:20px; padding:2px 8px; margin-left:8px; font-size:12px; }
.message-history { height: min(52vh,520px); min-height:160px; overflow:auto; overscroll-behavior:contain; padding:20px; display:flex; flex-direction:column; gap:12px; background-color:#eef3f6; background-image:radial-gradient(#d5dfe6 .8px,transparent .8px); background-size:18px 18px; }
.message-bubble { align-self:flex-start; flex-shrink:0; background:#fff; border:1px solid #dfe7ef; border-radius:14px 14px 14px 3px; padding:10px 14px; max-width:85%; box-shadow:0 1px 2px #172f4410; }
.message-bubble.mine { align-self:flex-end; background:#d9f4e9; border-color:#bce5d6; border-radius:14px 14px 3px 14px; }
.message-bubble p { margin:0 0 8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-bubble small { display:block; font-size:11px; color:#4e6078; }
.message-compose { padding:12px 16px; border-top:1px solid #e1e7ef; background:#f8fafc; }
.message-compose label { display:block; font-weight:600; margin-bottom:8px; }
.message-compose-row { display:flex; align-items:flex-end; gap:10px; }
.message-compose textarea { display:block; flex:1; width:100%; min-width:0; min-height:46px; max-height:120px; box-sizing:border-box; border:1px solid #b7c6d9; border-radius:22px; padding:12px 16px; font:inherit; line-height:22px; resize:none; margin:0; }
.message-compose .message-send { display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px; min-height:46px; padding:0; border:0; border-radius:50%; font-size:23px; margin:0; background:#0a66d9; color:#fff; }
.message-compose .message-send:hover { background:#0857b8; }
.message-compose .message-send:disabled { opacity:.5; cursor:not-allowed; }
.message-compose .brand-hint { margin:8px 0 0; font-size:11px; line-height:1.4; }
.message-notice { padding:12px 20px; margin:0; color:#526278; font-size:13px; }
.message-error { color:#a51d31; }
.message-retry, .message-more { margin:12px 20px; }
.message-thread-shell { display:flex; flex-direction:column; height:min(800px,calc(100dvh - 150px)); min-height:420px; }
.message-thread-shell .message-head { background:#173b50; color:#fff; flex-shrink:0; }
.message-thread-shell .message-head :is(h1,h2) { font-family:inherit; font-size:18px; font-weight:600; margin:0; color:inherit; }
.message-thread-shell .message-head p { color:#d5e4ed; font-size:12px; margin:5px 0 0; }
.message-thread-shell .message-head a { color:#d5e4ed; font-size:12px; display:inline-block; margin-bottom:8px; }
.message-thread-shell #messageContent { flex:1; min-height:0; display:flex; flex-direction:column; }
.message-thread-shell .message-history { height:auto; flex:1; min-height:80px; }
.message-thread-shell :is(.message-compose,.message-notice,.message-more,.message-retry) { flex-shrink:0; }
.message-thread-shell .message-notice { font-size:11px; line-height:1.4; padding:7px 16px; }
.message-empty { margin:auto; padding:24px; max-width:320px; text-align:center; color:#526278; line-height:1.6; font-size:14px; }
.message-empty strong { display:block; color:#183e53; font-size:18px; }
.message-empty button { margin:6px 4px; min-height:44px; }
.brand-chat-open { overflow:hidden; }
.brand-chat-dialog { position:fixed; inset:auto 24px 24px auto; margin:0; padding:0; border:0; border-radius:22px; width:440px; max-width:calc(100vw - 32px); max-height:none; color:#152b45; background:#fff; box-shadow:0 24px 90px #0e233b50; font-family:'DM Sans',system-ui,sans-serif; }
.brand-chat-dialog::backdrop { background:#11273d66; }
.brand-chat-host,.message-embedded { height:100%; min-height:0; }
.brand-chat-dialog .message-shell { border:0; border-radius:0; height:min(700px,calc(100dvh - 48px)); min-height:0; }
.brand-chat-dialog .message-head { padding:18px 64px 18px 18px; }
.brand-chat-dialog :is(button,a,textarea):focus-visible { outline:3px solid #4a9eff; outline-offset:2px; }
.message-close { position:absolute; z-index:1; right:12px; top:17px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:#ffffff18; color:#fff; cursor:pointer; font:28px/1 system-ui,sans-serif; }
.message-guest-compose { margin:12px 16px; padding:12px 18px; border:1px solid #dce5ed; border-radius:24px; display:flex; justify-content:space-between; color:#697b8b; background:#f8fafc; font-size:14px; }
@media(max-width:600px) {
  .message-layout { margin:12px 0; }
  .message-head { padding:18px; }
  .message-history { padding:12px; }
  .message-bubble { max-width:90%; }
  .brand-chat-dialog { inset:0; width:100%; max-width:none; height:100dvh; border-radius:0; }
  .brand-chat-dialog .message-shell { height:100%; }
  .message-thread-shell { height:calc(100dvh - 120px); min-height:360px; }
  .message-compose { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}
.brand-contact { display:flex; justify-content:center; max-width:580px; margin:20px auto 8px; }
.brand-page .brand-message { display:inline-flex; align-items:center; justify-content:center; gap:9px; width:auto; max-width:100%; min-height:46px; padding:11px 24px; border:1px solid var(--brand-line); border-radius:999px; background:var(--brand-card); color:var(--brand-ink); font-family:inherit; font-size:14px; font-weight:600; line-height:1.4; cursor:pointer; box-shadow:0 2px 6px #00000008; }
.brand-message svg { width:19px; height:19px; flex-shrink:0; }
.brand-page .brand-message:hover:not(:disabled) { box-shadow:0 4px 12px #00000014; border-color:currentColor; }
.brand-page .brand-message:disabled { opacity:.65; cursor:default; }