.chat-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-heading h2 { margin:0; }
.chat-room-state { flex:none; color:#a8cdb4; font-size:10px; }
.chat-room-state.is-offline { color:#e6ad9d; }
.chat-note { margin:5px 0 10px; color:var(--muted); font-size:11px; }
.chat-messages { display:flex; flex-direction:column; gap:7px; min-height:94px; max-height:194px; overflow:auto; margin:0 0 10px; padding:10px; border:1px solid #d5c49a33; border-radius:9px; background:#081710; list-style:none; scrollbar-color:#806a42 #081710; }
.chat-message { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 8px; padding:7px 9px; border:1px solid #ffffff12; border-radius:8px; background:#14291f; overflow-wrap:anywhere; }
.chat-message strong { color:#e5c884; font-size:11px; }
.chat-message time { color:#8da498; font-size:10px; }
.chat-message span { grid-column:1/-1; color:#f1eee3; font-size:12px; }
.chat-empty { align-self:center; margin:auto; color:#9aafa2; font-size:11px; text-align:center; }
.chat-form { display:grid; grid-template-columns:95px minmax(0,1fr) 67px; gap:6px; }
.chat-form select,.chat-form input { min-height:38px; }
.chat-form button { min-height:38px; padding-inline:6px; }
@media(max-width:430px) { .chat-form { grid-template-columns:minmax(0,1fr) 70px; } .chat-form select { grid-column:1/-1; } }