.chat-modal { width:min(680px, calc(100% - 32px)); max-height:min(760px, calc(100dvh - 32px)); border:0; border-radius:20px; padding:26px; color:var(--text); box-shadow:0 24px 70px rgba(24,30,65,.24); }
.chat-modal::backdrop { background:rgba(20,24,48,.58); }
.chat-modal .close-dialog { position:absolute; top:12px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:#f2f3f8; color:var(--navy); font-size:24px; line-height:1; cursor:pointer; }
.chat-modal-heading { padding-right:40px; border-bottom:1px solid var(--line); }
.chat-modal-heading h3 { margin:0 0 6px; font-size:24px; }
.chat-modal .message-history { min-height:180px; max-height:360px; }
.message-bubble.is-left { justify-self:start; }
.message-bubble.is-right { justify-self:end; }
.message-bubble.is-creator { background:#fff; border-color:#d9dce8; }
.message-bubble.is-company { background:#eee8ff; border-color:#d8cbff; }
.message-bubble.is-mine { box-shadow:0 2px 8px rgba(45,50,90,.08); }
.message-sender { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:5px; color:var(--navy); font-size:12px; }
.message-sender span { color:var(--muted); }
.message-bubble small { display:block; margin-top:6px; color:var(--muted); font-size:11px; }
@media (max-width:520px) { .chat-modal { padding:22px 18px; } .chat-modal-heading h3 { font-size:21px; } }