/* Chat (src/chat/chat.js): the button in the header, and the conversation drawer. */
.chat-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill, 999px);
  background: var(--accent, #C4532D); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

.chat-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat-toolbar { display: flex; align-items: center; gap: 8px; }
.chat-toolbar .form-control { flex: 1; }
.chat-toolbar .avatar, .chat-row .avatar { width: 30px; height: 30px; font-size: 11px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-soft, #FBE4D9); color: var(--accent-ink, #8A3517); font-weight: 700; }

.chat-list { display: flex; flex-direction: column; }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line, var(--border));
  background: transparent; color: inherit; text-align: left; cursor: pointer; border-radius: 8px; font: inherit; }
.chat-row:hover { background: var(--surface-2, rgba(0,0,0,.03)); }
.chat-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-row-top .muted { font-size: 11px; flex: none; }
.chat-row-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.unread .chat-row-preview { color: var(--text); font-weight: 600; }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #C4532D); flex: none; }

.chat-thread { flex: 1; min-height: 240px; max-height: calc(100vh - 260px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.chat-day { align-self: center; font-size: 11px; color: var(--text-muted); margin: 8px 0 2px; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 82%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2, #F1ECE3); font-size: 13.5px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { border-radius: 14px 14px 4px 14px; background: var(--accent, #C4532D); color: var(--on-accent, #fff); }
.chat-time { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

.chat-compose { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--line, var(--border)); padding-top: 10px; }
.chat-compose textarea { flex: 1; resize: none; }