.chat { display: grid; margin-top: 20px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface-0); overflow: hidden; }
.chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-top b { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }
.chat-top small { color: var(--muted); font-size: 12.5px; }

.chat-log { display: flex; flex-direction: column; gap: 10px; min-height: 140px; max-height: 420px; overflow-y: auto; padding: 16px; scroll-behavior: smooth; }
.chat-empty { margin: auto; color: var(--muted); font-size: 13.5px; }
.msg-day { align-self: center; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; }
.msg-sys { align-self: center; max-width: 92%; text-align: center; }
.msg-sys span { display: inline-block; padding: 6px 14px; border: 1px dashed var(--line-3); border-radius: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.msg-sys.ok span { padding: 10px 16px; border: 1px solid rgba(95, 174, 126, 0.55); background: rgba(95, 174, 126, 0.12); color: #bfe9cf; font-size: 13.5px; font-weight: 600; }
.msg-sys a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.msg-sys.ok a { color: var(--ok); font-weight: 800; }
.msg-sys.ok a:hover { color: #8fe0ae; }

.msg-row { display: flex; }
.msg-row.mine { justify-content: flex-end; }
.msg-b { max-width: min(78%, 520px); padding: 9px 13px 10px; border: 1px solid var(--line-2); border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.msg-row.mine .msg-b { border-radius: 14px 14px 4px 14px; border-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.16); }
.msg-row.is-staff:not(.mine) .msg-b { border-color: rgba(95, 174, 126, 0.4); background: rgba(95, 174, 126, 0.09); }
.msg-b small { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; color: var(--muted); font-size: 11.5px; }
.msg-b small b { color: var(--accent-soft); font-weight: 800; }
.msg-row.is-staff:not(.mine) .msg-b small b { color: var(--ok); }
.msg-b small i { margin-left: auto; font-style: normal; opacity: 0.7; }
.msg-b p { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.chat-note { padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }
.chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form .area { min-height: 42px; max-height: 140px; padding: 10px 14px; resize: none; }
.chat-form .btn { flex-shrink: 0; min-height: 42px; }

.chip.ask { color: var(--danger); border-color: rgba(226, 96, 109, 0.45); background: rgba(226, 96, 109, 0.1); }

@media (max-width: 520px) { .msg-b { max-width: 90%; } .chat-form { flex-direction: column; align-items: stretch; } }

.snd { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: color 140ms ease, border-color 140ms ease, background 140ms ease; }
.snd:hover { color: var(--accent-soft); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }
.snd svg { width: 16px; height: 16px; }
.chat-top { align-items: center; }
.chat-top small { order: 3; flex-basis: 100%; }
.item.unread { border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); }