.chat-dialog { width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border:1px solid #8a7652; border-radius:16px; padding:0; color:#f2ede3; background:#192423; }
.quick-contact-chat {display:inline-flex}
.chat-dialog::backdrop {background:rgba(0,0,0,.65)}
.chat-app {padding:20px; color:#f2ede3; background:#192423; border-radius:16px; overflow:auto; max-height:calc(100dvh - 30px)}
.chat-app [hidden] {display:none!important}
.chat-app button {cursor:pointer; padding:9px 13px; border:1px solid #927e58; border-radius:8px; color:#fff4dc; background:#2c3d39; font:inherit; min-height:44px}
.chat-app button:focus-visible,.chat-app input:focus-visible,.chat-app textarea:focus-visible {outline:3px solid #e4c88d; outline-offset:2px}
.chat-app button:disabled {opacity:.55; cursor:wait}
.chat-heading,.chat-tools {display:flex; gap:12px; align-items:center; justify-content:space-between}
.chat-heading h2 {margin:0; font-size:1.6rem}
.chat-columns {display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr); gap:18px; margin-top:16px}
.chat-inbox {max-height:60dvh; overflow:auto}
.chat-inbox button {display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; margin-bottom:8px; overflow-wrap:anywhere}
.chat-inbox button[aria-current=true] {border:2px solid #e4c88d; background:#40584f}
.chat-inbox small {display:block; opacity:.8}
.chat-inbox-summary {display:block; min-width:0}
.chat-thread {min-width:0}
.chat-thread h3 {margin:0}
.chat-thread label {display:block; margin:10px 0; font-weight:600}
.chat-thread input,.chat-thread textarea {display:block; box-sizing:border-box; width:100%; margin-top:6px; border:1px solid #a99d85; border-radius:7px; padding:10px; color:#fff; background:#101a19; font:inherit}
.chat-messages {min-height:100px; max-height:38dvh; overflow:auto; padding:8px 3px; display:flex; flex-direction:column; gap:10px}
.chat-message {max-width:90%; padding:10px 13px; background:#33453f; border-radius:12px; align-self:flex-start; overflow-wrap:anywhere}
.chat-message[data-sender=admin] {align-self:flex-end; background:#655639}
.chat-message strong {display:flex; align-items:center; gap:8px}
.chat-message p {white-space:pre-wrap; margin:6px 0}
.chat-message small,.chat-fine,.chat-connection {font-size:.8rem; opacity:.85}
.chat-avatar {align-items:center; aspect-ratio:1; background:#e4c88d; border-radius:50%; color:#14100a; display:inline-flex; flex:0 0 30px; font-size:.8rem; font-weight:800; justify-content:center; overflow:hidden; width:30px}
.chat-avatar img {height:100%; object-fit:cover; width:100%}
.chat-attachment {border-radius:8px; display:block; margin-top:8px; max-height:280px; max-width:100%; object-fit:contain}
.chat-error {color:#ffd2c8; border-left:3px solid #ff9787; padding:8px}
.chat-fine a {color:#e4c88d}
.chat-admin-page {max-width:1200px; margin:auto}
.chat-admin-page .chat-app {max-height:none}
@media(max-width:600px) {
 .chat-dialog {width:calc(100vw - 12px); max-height:calc(100dvh - 12px)}
 .chat-app {padding:12px; max-height:calc(100dvh - 20px)}
 .chat-columns {display:flex; flex-direction:column}
 .chat-inbox {max-height:120px}
 .chat-messages {max-height:30dvh}
}