* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f6f8; --panel: #fff; --line: #e3e8ee; --ink: #1a2733;
  --muted: #8a97a5; --accent: #2b7de9; --in: #fff; --out: #d9f2e6;
}
html, body { height: 100%; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); }
#app { display: grid; grid-template-columns: 300px 1fr; height: 100vh; background: var(--bg); }

/* левая колонка — чаты */
#chats { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
.chats-head { padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.chat { padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; gap: 10px; align-items: flex-start; }
.chat:hover { background: #f7f9fb; }
.chat.active { background: #eef5ff; }
.chat .avatar { width: 38px; height: 38px; border-radius: 50%; background: #cfe0f5; color: #35618f; display: flex; align-items: center; justify-content: center; font-weight: 600; flex: 0 0 auto; }
.chat.group .avatar { background: #e5dcf5; color: #6a4fa0; }
.chat .meta { flex: 1; min-width: 0; }
.chat .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat .last { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.chat .badge { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; padding: 1px 7px; align-self: center; }

/* правая колонка — тред */
#thread { display: flex; flex-direction: column; min-width: 0; }
.thread-head { padding: 14px 18px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--panel); }
#messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 68%; padding: 8px 12px; border-radius: 12px; background: var(--in); border: 1px solid var(--line); align-self: flex-start; word-wrap: break-word; }
.msg.out { align-self: flex-end; background: var(--out); border-color: #bfe7d3; }
.msg .body { white-space: pre-wrap; }
.msg img { max-width: 260px; border-radius: 8px; display: block; }
.msg .time { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: right; }
.msg .edited { font-style: italic; }
.msg .doc { color: var(--accent); text-decoration: none; }

/* поле ввода */
.composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); align-items: center; }
.composer .attach { cursor: pointer; font-size: 20px; }
.composer input[type=text] { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 20px; outline: none; font: inherit; }
.composer button { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; font-size: 16px; }
.composer button:disabled { opacity: .5; cursor: default; }
.empty { color: var(--muted); padding: 40px; text-align: center; }

.msg.pending { opacity: .55; }

/* режим карточки клиента: только тред одного чата, без списка */
:root.card-mode #chats { display: none; }
:root.card-mode #app { grid-template-columns: 1fr; }
:root.card-mode .thread-head { display: flex; align-items: center; gap: 8px; }