:root {
  --accent: #2f80ed; --accent-2: #1f6fd8; --accent-soft: rgba(47,128,237,.12);
  --bg: #ffffff; --bg-2: #f4f4f5; --text: #0f1419; --muted: #707579; --muted-bg: #e9ecef; --line: #e6e7e9;
  --hover: #f2f3f5; --active: var(--accent); --danger: #e53935; --ok: #2e9e48;
  --chat-bg: #dfe7d4; --chat-pattern: rgba(70,100,40,.06);
  --in: #ffffff; --out: #e1f4cf; --out-meta: #4fae4e; --in-meta: #8b9298; --service: rgba(40,60,30,.35);
  --shadow: 0 2px 14px rgba(0,0,0,.14); --bubble-shadow: 0 1px 1px rgba(0,0,0,.08);
  --radius: 14px; --left-w: 380px; --info-w: 360px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --accent: #5ea4ff; --accent-2: #4b92ee; --accent-soft: rgba(94,164,255,.16);
  --bg: #17212b; --bg-2: #0e1621; --text: #f2f5f8; --muted: #8b98a6; --muted-bg: #2b3946; --line: #0e1621;
  --hover: #202b36; --danger: #ff6b6b; --ok: #5ccf76;
  --chat-bg: #0e1621; --chat-pattern: rgba(255,255,255,.025);
  --in: #182533; --out: #2b5278; --out-meta: #7db7f0; --in-meta: #6d7f8f; --service: rgba(0,0,0,.35);
  --shadow: 0 2px 16px rgba(0,0,0,.5); --bubble-shadow: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.38 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.grow { flex: 1; }
.pad { padding: 0 16px; }
.ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }
#app { height: 100%; }

/* ---------- вход ---------- */
.login { height: 100%; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; background: var(--bg); }
.login-card { width: 100%; max-width: 380px; text-align: center; }
.logo { width: 120px; height: 120px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin: 0 auto 20px; }
.logo .ic { width: 60px; height: 60px; }
.login h1 { font-size: 28px; margin: 0 0 8px; }
.login .muted { margin: 0 0 24px; }
.dev-hint { background: var(--accent-soft); border-radius: 10px; padding: 10px; color: var(--text); }
.error { color: var(--danger); min-height: 20px; font-size: 14px; text-align: left; margin: -6px 0 8px; }

/* ---------- поля и кнопки ---------- */
.field { position: relative; display: block; margin: 0 0 16px; text-align: left; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 16px 14px 8px; outline: none; resize: none; transition: border-color .15s; }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field textarea { border-color: #2f3d4a; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field span { position: absolute; left: 14px; top: 4px; font-size: 12px; color: var(--muted); pointer-events: none; }
.field input:focus + span, .field textarea:focus + span { color: var(--accent); }
.btn-primary { width: 100%; height: 52px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; transition: background .15s, opacity .15s; }
.btn-primary:hover { background: var(--accent-2); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-text { color: var(--accent); font-weight: 600; padding: 8px 12px; border-radius: 8px; text-transform: uppercase; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-text:hover { background: var(--accent-soft); }
.btn-text.danger { color: var(--danger); }
.btn-text .ic { width: 20px; height: 20px; }
.btn-flat { width: 100%; height: 100%; color: var(--accent); font-weight: 600; text-transform: uppercase; }
.btn-flat:hover { background: var(--hover); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--muted); flex: none; transition: background .15s; }
.icon-btn:hover { background: var(--hover); }
.icon-btn.danger { color: var(--danger); }
.hint { font-size: 13px; color: var(--muted); margin: -8px 0 16px; text-align: left; }
.hint.ok { color: var(--ok); } .hint.bad { color: var(--danger); }
.check, .radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; cursor: pointer; text-align: left; }
.check input, .radio input { accent-color: var(--accent); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.radio small { color: var(--muted); }
.switch { width: 36px; height: 20px; border-radius: 10px; background: var(--muted-bg); position: relative; flex: none; margin-left: auto; transition: background .2s; }
.switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on { background: var(--accent); } .switch.on::after { transform: translateX(16px); }
.seg { display: flex; margin: 0 16px 8px; background: var(--bg-2); border-radius: 10px; padding: 3px; }
.seg button { flex: 1; padding: 8px 4px; border-radius: 8px; font-size: 14px; color: var(--muted); }
.seg button.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---------- раскладка ---------- */
.layout { display: flex; height: 100%; }
#left { width: var(--left-w); flex: none; border-right: 1px solid var(--line); position: relative; overflow: hidden; background: var(--bg); }
#right { flex: 1; min-width: 0; position: relative; background: var(--chat-bg); }
#info { width: 0; flex: none; overflow: hidden; background: var(--bg); border-left: 1px solid var(--line); transition: width .2s; display: flex; flex-direction: column; }
#info.show { width: var(--info-w); }
.sidebar { height: 100%; display: flex; flex-direction: column; position: relative; }
.bar { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; flex: none; background: var(--bg); }
.bar h2 { font-size: 19px; font-weight: 600; margin: 0 0 0 8px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search { flex: 1; display: flex; align-items: center; background: var(--bg-2); border-radius: 22px; height: 42px; padding: 0 6px 0 12px; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.search:focus-within { border-color: var(--accent); background: var(--bg); }
.search input { flex: 1; border: 0; background: none; outline: none; padding: 0 8px; min-width: 0; }
.search-ic { color: var(--muted); display: flex; } .search-ic .ic { width: 20px; height: 20px; }
.search .clear { width: 30px; height: 30px; } .search .clear .ic { width: 18px; }
.search.inset { margin: 8px 12px; flex: none; }
.conn { background: var(--accent-soft); color: var(--accent); text-align: center; font-size: 13px; padding: 4px; }
.folders { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.folders::-webkit-scrollbar { display: none; }
.folders button { padding: 10px 12px 9px; font-weight: 500; color: var(--muted); border-bottom: 3px solid transparent; white-space: nowrap; font-size: 14px; border-radius: 6px 6px 0 0; }
.folders button:hover { background: var(--hover); }
.folders button.active { color: var(--accent); border-bottom-color: var(--accent); }
.archive-head { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 17px; border-bottom: 1px solid var(--line); }
.chatlist, .searchres { flex: 1; overflow-y: auto; padding: 6px 8px 90px; }
.sec-title { color: var(--muted); font-size: 14px; font-weight: 600; padding: 12px 12px 6px; }
.loading-row, .list-empty { color: var(--muted); text-align: center; padding: 20px 16px; font-size: 14px; }

.chat-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; position: relative; user-select: none; }
.chat-row:hover { background: var(--hover); }
.chat-row.active { background: var(--accent); color: #fff; }
.chat-row.active .preview, .chat-row.active .date, .chat-row.active .who, .chat-row.active .muted, .chat-row.active .t-ic, .chat-row.active .checks { color: rgba(255,255,255,.85) !important; }
.chat-row.active .badge { background: #fff; color: var(--accent); }
.av-wrap { position: relative; flex: none; }
.online-dot { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: #0ac630; border: 2.5px solid var(--bg); }
.chat-row.active .online-dot { border-color: var(--accent); }
.row-main { flex: 1; min-width: 0; }
.row-top, .row-bottom { display: flex; align-items: center; gap: 6px; }
.row-top .title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.t-ic { display: inline-flex; color: var(--text); } .t-ic .ic { width: 16px; height: 16px; } .t-ic.mute { color: var(--muted); }
.date { font-size: 12px; color: var(--muted); flex: none; display: flex; align-items: center; gap: 2px; }
.date.role { color: var(--accent); }
.row-bottom { margin-top: 2px; }
.preview { flex: 1; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.preview .who { color: var(--text); }
.preview .typing, .preview.accent { color: var(--accent); }
.media-label { color: var(--accent); }
.chat-row.active .media-label { color: #fff; }
.badge { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; display: inline-grid; place-items: center; flex: none; }
.badge.muted { background: #c4c9cc; }
:root[data-theme="dark"] .badge.muted { background: #3e5263; }
.pin-ic { color: #c4c9cc; display: flex; } .pin-ic .ic { width: 18px; height: 18px; }
.checks { color: var(--ok); display: inline-flex; } .checks .ic { width: 18px; height: 18px; }
.chat-row.pick .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; color: transparent; flex: none; }
.chat-row.pick .tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.chat-row.pick.on .tick { background: var(--accent); border-color: var(--accent); color: #fff; }

.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; flex: none; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.18), rgba(0,0,0,.04)); user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar .ic { width: 55%; height: 55%; }
.avatar.saved .ic { fill: currentColor; }

.fab { position: absolute; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.2); transition: transform .2s, background .15s; z-index: 3; }
.fab:hover { background: var(--accent-2); }
.fab .ic { stroke-width: 2.2; }
.sidebar .fab { transform: translateY(0); }

/* ---------- панели и меню ---------- */
.panel { position: absolute; inset: 0; background: var(--bg); z-index: 5; display: flex; flex-direction: column; transform: translateX(-30px); opacity: 0; transition: transform .22s, opacity .22s; }
.panel.show { transform: none; opacity: 1; }
.panel-body { flex: 1; overflow-y: auto; position: relative; }
.panel-body > div { min-height: 100%; position: relative; padding-bottom: 90px; }
.panel .fab { position: absolute; }
.form { padding: 16px; }
.list-action { display: flex; align-items: center; gap: 20px; width: 100%; padding: 13px 20px; text-align: left; font-size: 15px; }
.list-action:hover { background: var(--hover); }
.list-action .ic { color: var(--muted); }
.list-action.danger, .list-action.danger .ic { color: var(--danger); }
.info-line { padding: 4px 20px 12px; }
.profile-top, .info-top { text-align: center; padding: 20px 16px 12px; }
.profile-top .avatar, .info-top .avatar { margin: 0 auto 12px; }
.pname { font-size: 20px; font-weight: 600; word-break: break-word; }
.av-edit { position: relative; display: inline-block; cursor: pointer; border-radius: 50%; }
.av-edit.center { display: block; width: 110px; margin: 0 auto 20px; }
.av-cam { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .15s; }
.av-cam .ic { width: 40px; height: 40px; }
.av-edit:hover .av-cam { opacity: 1; }
.profile-top .av-edit .avatar { margin: 0; }
.sess { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.sess-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent); border-radius: 16px; padding: 4px 6px 4px 12px; cursor: pointer; font-size: 14px; }
.chip .ic { width: 16px; height: 16px; }

.menu { position: fixed; z-index: 100; min-width: 220px; max-width: 320px; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow); padding: 6px 0; opacity: 0; transform: scale(.94); transform-origin: top left; transition: opacity .12s, transform .12s; }
:root[data-theme="dark"] .menu { background: #212d3b; }
.menu.show { opacity: 1; transform: none; }
.menu-item { display: flex; align-items: center; gap: 16px; width: 100%; padding: 9px 16px; text-align: left; font-size: 14.5px; font-weight: 500; }
.menu-item:hover { background: var(--hover); }
:root[data-theme="dark"] .menu-item:hover { background: #2b3949; }
.menu-item .ic { width: 20px; height: 20px; color: var(--muted); }
.menu-item.danger, .menu-item.danger .ic { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 5px 0; }
:root[data-theme="dark"] .menu-sep { background: #2b3949; }
.react-strip { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 8px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; max-width: 300px; }
.react-strip button { width: 38px; height: 38px; border-radius: 50%; font-size: 22px; transition: transform .1s, background .1s; }
.react-strip button:hover { transform: scale(1.18); background: var(--hover); }
.react-strip button.mine { background: var(--accent-soft); }
.emoji-menu { padding: 8px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 36px); gap: 2px; max-height: 240px; overflow-y: auto; }
.emoji-grid button { width: 36px; height: 36px; font-size: 22px; border-radius: 8px; }
.emoji-grid button:hover { background: var(--hover); }

.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .18s; }
.modal-back.show { opacity: 1; }
.modal { background: var(--bg); border-radius: 14px; width: 100%; max-width: 400px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); transform: scale(.96); transition: transform .18s; }
.modal-back.show .modal { transform: none; }
.modal.tall { height: 80vh; display: flex; flex-direction: column; }
.dialog { padding: 20px 20px 10px; }
.dialog h3 { margin: 0 0 12px; font-size: 19px; }
.dialog p { margin: 0 0 12px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.fwd-dialog { display: flex; flex-direction: column; height: 100%; padding: 16px 0 0; }
.fwd-dialog h3 { padding: 0 20px; }
.fwd-dialog .clist { flex: 1; overflow-y: auto; padding: 0 8px 8px; }
.send-files .previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-bottom: 16px; }
.send-files .previews img, .send-files .previews video { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.send-files .previews .file-line { grid-column: 1/-1; }

.drawer-back { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0); transition: background .25s; }
.drawer-back.show { background: rgba(0,0,0,.35); }
.drawer { position: absolute; left: 0; top: 0; bottom: 0; width: 290px; max-width: 85vw; background: var(--bg); transform: translateX(-100%); transition: transform .25s; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.drawer-back.show .drawer { transform: none; }
.drawer-head { padding: 22px 20px 16px; background: var(--accent); color: #fff; }
:root[data-theme="dark"] .drawer-head { background: #20303f; }
.drawer-head .avatar { margin-bottom: 14px; border: 2px solid rgba(255,255,255,.4); }
.dn { font-weight: 600; font-size: 16px; } .dp { opacity: .8; font-size: 14px; }
.drawer > button { display: flex; align-items: center; gap: 22px; padding: 13px 22px; text-align: left; font-weight: 500; }
.drawer > button:hover { background: var(--hover); }
.drawer > button .ic { color: var(--muted); }
.drawer-foot { margin-top: auto; padding: 16px 22px; color: var(--muted); font-size: 13px; }

.toast { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); background: rgba(20,25,30,.9); color: #fff; padding: 10px 18px; border-radius: 12px; z-index: 200; opacity: 0; transition: opacity .2s, transform .2s; max-width: 90vw; font-size: 14px; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- чат ---------- */
.empty-chat { height: 100%; display: grid; place-items: center; }
.pill { background: var(--service); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 14px; font-weight: 500; max-width: 320px; text-align: center; }
.chat { height: 100%; display: flex; flex-direction: column; position: relative;
  background-color: var(--chat-bg);
  background-image: radial-gradient(var(--chat-pattern) 1.5px, transparent 1.5px), radial-gradient(var(--chat-pattern) 1.5px, transparent 1.5px);
  background-size: 28px 28px; background-position: 0 0, 14px 14px; }
:root:not([data-theme="dark"]) .chat { background-image: radial-gradient(var(--chat-pattern) 1.5px, transparent 1.5px), radial-gradient(var(--chat-pattern) 1.5px, transparent 1.5px), linear-gradient(135deg, #d4e3be 0%, #e2ead2 40%, #c9dcb4 100%); background-size: 28px 28px, 28px 28px, cover; }
.chat.drag::after { content: 'Перетащите файлы сюда'; position: absolute; inset: 12px; border: 3px dashed var(--accent); border-radius: 18px; background: rgba(255,255,255,.75); display: grid; place-items: center; font-size: 20px; color: var(--accent); z-index: 20; }
:root[data-theme="dark"] .chat.drag::after { background: rgba(14,22,33,.85); }
.chat-head { box-shadow: 0 1px 2px rgba(0,0,0,.06); z-index: 2; padding-left: 8px; }
.chat-head .back { display: none; }
.head-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px; border-radius: 10px; }
.titles { min-width: 0; }
.ct { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.cs { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-search { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg); border-top: 1px solid var(--line); z-index: 2; }
.chat-search input { flex: 1; border: 0; background: var(--bg-2); border-radius: 18px; height: 36px; padding: 0 14px; outline: none; }
.cs-count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pinned-bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; background: var(--bg); border-top: 1px solid var(--line); z-index: 2; cursor: pointer; }
.pin-line { width: 2px; height: 34px; background: var(--accent); border-radius: 1px; flex: none; }
.pin-main { flex: 1; min-width: 0; font-size: 14px; }
.pin-main b { color: var(--accent); font-weight: 600; }
.pin-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-wrap { flex: 1; position: relative; min-height: 0; }
.messages { position: absolute; inset: 0; overflow-y: auto; padding: 8px max(16px, calc((100% - 760px) / 2)) 12px; overflow-anchor: none; }
.empty-msgs { height: 100%; display: grid; place-items: center; }
.day-sep, .unread-sep { text-align: center; margin: 10px 0; position: sticky; top: 6px; z-index: 1; }
.day-sep span { background: var(--service); color: #fff; font-size: 13.5px; font-weight: 500; padding: 4px 12px; border-radius: 14px; }
.unread-sep { position: static; background: rgba(255,255,255,.5); color: var(--muted); font-size: 13.5px; padding: 4px; margin: 10px calc(-1 * max(16px, calc((100% - 760px) / 2))); }
:root[data-theme="dark"] .unread-sep { background: rgba(0,0,0,.25); }

.msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 6px; position: relative; }
.msg.cont { margin-top: 2px; }
.msg.out { flex-direction: row-reverse; }
.msg.appear { animation: appear .18s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.msg.vanish { animation: vanish .25s forwards; }
@keyframes vanish { to { opacity: 0; transform: scale(.9); } }
.msg.service { justify-content: center; margin: 10px 0; }
.msg.service span { background: var(--service); color: #fff; font-size: 13.5px; font-weight: 500; padding: 4px 12px; border-radius: 14px; max-width: 80%; text-align: center; }
.msg-av { width: 34px; flex: none; align-self: flex-end; visibility: hidden; }
.msg.tail .msg-av { visibility: visible; }
.bubble { position: relative; max-width: min(480px, 80%); background: var(--in); border-radius: var(--radius); padding: 6px 10px 6px; box-shadow: var(--bubble-shadow); word-wrap: break-word; overflow-wrap: anywhere; min-width: 60px; }
.msg.out .bubble { background: var(--out); }
.msg.in.tail .bubble { border-bottom-left-radius: 4px; }
.msg.out.tail .bubble { border-bottom-right-radius: 4px; }
.msg.in.tail .bubble::before, .msg.out.tail .bubble::before { content: ''; position: absolute; bottom: 0; width: 10px; height: 16px; }
.msg.in.tail .bubble::before { left: -8px; background: radial-gradient(circle at 0 0, transparent 9px, var(--in) 9.5px); }
.msg.out.tail .bubble::before { right: -8px; background: radial-gradient(circle at 100% 0, transparent 9px, var(--out) 9.5px); }
.msg.grp .bubble { max-width: min(480px, calc(80% - 42px)); }
.bubble.has-media { padding: 0; overflow: hidden; }
.bubble.has-media > .sender, .bubble.has-media > .fwd, .bubble.has-media > .reply-q { margin: 6px 10px 4px; }
.bubble.has-media > .text { padding: 4px 10px 6px; }
.bubble.has-media > .reactions { padding: 0 8px 6px; }
.msg.in.tail .bubble.has-media::before, .msg.out.tail .bubble.has-media::before { display: none; }
.sender { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.fwd { font-size: 14px; color: var(--accent); margin-bottom: 2px; }
.msg.out .fwd { color: var(--out-meta); }
.reply-q { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 3px 8px; margin: 2px 0 4px; font-size: 14px; cursor: pointer; overflow: hidden; }
.msg.out .reply-q { border-color: var(--out-meta); background: rgba(79,174,78,.12); }
:root[data-theme="dark"] .msg.out .reply-q { background: rgba(255,255,255,.08); }
.reply-q b { color: var(--accent); font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.out .reply-q b { color: var(--out-meta); }
.reply-q div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text { white-space: normal; }
.text pre { background: rgba(0,0,0,.06); border-radius: 6px; padding: 6px 8px; margin: 4px 0; white-space: pre-wrap; font: 13.5px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.text code { background: rgba(0,0,0,.06); border-radius: 4px; padding: 0 4px; font: 13.5px ui-monospace, Menlo, Consolas, monospace; }
:root[data-theme="dark"] .text pre, :root[data-theme="dark"] .text code { background: rgba(255,255,255,.08); }
.spoiler { background: var(--muted); color: transparent; border-radius: 4px; cursor: pointer; transition: all .2s; }
.spoiler.shown { background: transparent; color: inherit; }
.hashtag { color: var(--accent); }
.meta { float: right; margin: 8px -2px -4px 10px; font-size: 12px; color: var(--in-meta); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; user-select: none; line-height: 1; position: relative; top: 2px; }
.msg.out .meta { color: var(--out-meta); }
.meta .checks { color: inherit; } .meta .checks .ic { width: 17px; height: 17px; }
.views { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; } .views .ic { width: 15px; height: 15px; }
.clock { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-block; position: relative; }
.clock::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3px; height: 4px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.meta-row { display: flex; justify-content: flex-end; padding: 0 0 2px; }
.meta-row .meta { float: none; margin: 0; top: 0; }
.bubble.only-media .meta-row { position: absolute; right: 6px; bottom: 6px; padding: 0; }
.bubble.only-media .meta-row .meta { background: rgba(0,0,0,.45); color: #fff; padding: 3px 6px; border-radius: 10px; }
.bubble.has-media:not(.only-media) .meta-row { padding: 2px 10px 6px; }
.msg.failed .meta { color: var(--danger); }
.msg.failed .bubble::after { content: '!'; position: absolute; left: -28px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.media { position: relative; background: rgba(0,0,0,.05); }
.media img, .media video { display: block; max-width: 100%; max-height: 420px; min-width: 160px; min-height: 80px; width: 100%; object-fit: cover; }
.media.photo { cursor: zoom-in; }
.bubble.has-media { width: min(380px, 100%); }
.progress { position: absolute; left: 10%; right: 10%; top: 50%; height: 4px; border-radius: 2px; background: rgba(0,0,0,.35); z-index: 1; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: #fff; transition: width .2s; }
.voice .progress, .file-line .progress { position: static; margin-bottom: 6px; background: var(--accent-soft); }
.voice .progress span, .file-line .progress span { background: var(--accent); }
.file-line { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: inherit; flex-wrap: wrap; min-width: 220px; }
.file-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.msg.out .file-ic { background: var(--out-meta); }
.file-info { min-width: 0; flex: 1; } .file-info b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.file-line audio { max-width: 100%; }
.voice { display: flex; align-items: center; gap: 10px; min-width: 230px; flex-wrap: wrap; }
.vplay { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.msg.out .vplay { background: var(--out-meta); }
.vbody { flex: 1; min-width: 120px; }
.vbar { height: 22px; cursor: pointer; position: relative; background: repeating-linear-gradient(90deg, var(--muted-bg) 0 3px, transparent 3px 5px); border-radius: 2px; mask: linear-gradient(#000, #000); }
.vbar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 5px); }
.msg.out .vbar span { background: repeating-linear-gradient(90deg, var(--out-meta) 0 3px, transparent 3px 5px); }
.vtime { font-size: 12.5px; color: var(--in-meta); }
.msg.out .vtime { color: var(--out-meta); }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; clear: both; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-weight: 600; transition: transform .1s; }
.react:active { transform: scale(.92); }
.react.mine { background: var(--accent); color: #fff; }
.msg.out .react { background: rgba(79,174,78,.18); color: var(--out-meta); }
.msg.out .react.mine { background: var(--out-meta); color: #fff; }
.msg.flash .bubble { animation: flash 1.2s; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--bubble-shadow); } }
.sel-tick { display: none; }
.messages.selecting .msg:not(.service) { cursor: pointer; padding-left: 34px; }
.messages.selecting .sel-tick { display: grid; position: absolute; left: 0; bottom: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.15); place-items: center; color: transparent; }
.messages.selecting .msg.selected .sel-tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.sel-tick .ic { width: 14px; height: 14px; stroke-width: 3; }
.msg.selected .bubble { filter: brightness(.95); }
.to-bottom { position: absolute; right: 18px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--muted); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 3; }
.to-bottom .badge { position: absolute; top: -8px; right: -2px; }
.selbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg); min-height: 58px; }

.composer { padding: 8px max(12px, calc((100% - 790px) / 2)) 12px; }
.cbar { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: 14px 14px 0 0; padding: 8px 8px 4px 16px; font-size: 14px; }
.cbar-ic { color: var(--accent); display: flex; }
.cbar-main { flex: 1; min-width: 0; border-left: 2px solid var(--accent); padding-left: 10px; }
.cbar-main b { color: var(--accent); display: block; }
.cbar-main div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow { display: flex; align-items: flex-end; gap: 4px; background: var(--bg); border-radius: 22px; padding: 4px 4px 4px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.cbar:not(.hidden) + .crow { border-top-left-radius: 0; border-top-right-radius: 0; }
.crow textarea { flex: 1; border: 0; outline: none; resize: none; background: none; padding: 9px 4px; max-height: 180px; line-height: 1.4; min-height: 40px; }
.send-btn { width: 44px; height: 44px; border-radius: 50%; color: var(--muted); display: grid; place-items: center; flex: none; transition: background .15s, color .15s; }
.send-btn.is-send { background: var(--accent); color: #fff; }
.send-btn:hover { background: var(--hover); } .send-btn.is-send:hover { background: var(--accent-2); }
.crow.recording { align-items: center; padding-left: 4px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.rec-time { font-variant-numeric: tabular-nums; min-width: 40px; }
.upload-bar { height: 3px; margin-top: 4px; }
.join-bar { height: 56px; background: var(--bg); flex: none; }

/* ---------- правая колонка ---------- */
#info header .icon-btn { color: var(--muted); }
.info-body { flex: 1; overflow-y: auto; padding-bottom: 30px; }
.info-row { display: flex; align-items: flex-start; gap: 20px; padding: 10px 20px; cursor: default; }
.info-row.copy, #imute { cursor: pointer; }
.info-row:hover { background: var(--hover); }
.ir-ic { color: var(--muted); display: flex; padding-top: 2px; }
.info-row > div { min-width: 0; word-break: break-word; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.members { padding: 0 8px; }
.info-danger { margin-top: 12px; border-top: 8px solid var(--bg-2); padding-top: 4px; }

.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 150; display: flex; flex-direction: column; opacity: 0; transition: opacity .2s; }
.viewer.show { opacity: 1; }
.viewer-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; color: #fff; }
.viewer-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-bar .icon-btn { color: #fff; }
.viewer-bar .icon-btn:hover { background: rgba(255,255,255,.12); }
.viewer-body { flex: 1; display: grid; place-items: center; min-height: 0; padding: 8px; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- телефон ---------- */
@media (max-width: 1100px) {
  #info.show { position: fixed; right: 0; top: 0; bottom: 0; width: min(var(--info-w), 100vw); z-index: 30; box-shadow: var(--shadow); }
}
@media (max-width: 760px) {
  :root { --left-w: 100vw; }
  #left { width: 100%; border: 0; }
  #right { position: fixed; inset: 0; transform: translateX(100%); transition: transform .25s; z-index: 10; }
  body.chat-open #right { transform: none; }
  .chat-head .back { display: inline-grid; }
  .messages { padding: 6px 8px 10px; }
  .unread-sep { margin: 10px -8px; }
  .composer { padding: 6px 6px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .bubble { max-width: 86%; }
  .msg.grp .bubble { max-width: calc(86% - 42px); }
  #info.show { width: 100vw; }
  .chat-head .icon-btn#csearch { display: none; }
  .toast { bottom: 100px; }
}
.chat-row.active .typing, .chat-row.active .preview .who { color: #fff !important; }
/* плавающая дата не должна просвечивать сквозь служебные сообщения */
.day-sep span { background: #8c9c7c; }
:root[data-theme="dark"] .day-sep span { background: #1e2c3a; }

/* ---------- звонки ---------- */
.call-screen { position: fixed; inset: 0; z-index: 160; background: radial-gradient(circle at 50% 30%, #3b6aa8 0%, #1d2f4a 60%, #111a27 100%); color: #fff; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .25s; overflow: hidden; }
.call-screen.show { opacity: 1; }
.call-screen.minimized { display: none; }
.call-screen .remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
.call-screen.has-video .remote { display: block; }
.call-screen.has-video .call-info { margin-top: 24px; }
.call-screen.has-video .call-av { display: none; }
.call-info { position: relative; z-index: 1; text-align: center; margin-top: 14vh; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.call-av .avatar { margin: 0 auto 18px; box-shadow: 0 0 0 10px rgba(255,255,255,.08), 0 0 0 22px rgba(255,255,255,.04); }
.call-screen:not(.has-video) .call-av .avatar { animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(255,255,255,.1), 0 0 0 34px rgba(255,255,255,.03); } }
.call-name { font-size: 26px; font-weight: 600; }
.call-status { margin-top: 6px; font-size: 16px; opacity: .85; font-variant-numeric: tabular-nums; }
.call-screen .local { position: absolute; right: 16px; bottom: 140px; width: 120px; height: 170px; object-fit: cover; border-radius: 14px; background: #000; z-index: 2; transform: scaleX(-1); box-shadow: 0 4px 16px rgba(0,0,0,.4); touch-action: none; cursor: grab; }
@media (min-width: 761px) { .call-screen .local { width: 220px; height: 140px; } }
.call-actions { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 22px; z-index: 2; flex-wrap: wrap; padding: 0 12px; }
.cbtn { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #fff; width: 76px; }
.cbtn > .ic { width: 60px; height: 60px; padding: 17px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .15s, transform .1s; backdrop-filter: blur(8px); }
.cbtn:hover > .ic { background: rgba(255,255,255,.28); }
.cbtn:active > .ic { transform: scale(.94); }
.cbtn.on > .ic { background: #fff; color: #1d2f4a; }
.cbtn.red > .ic { background: #f0453a; color: #fff; }
.cbtn.green > .ic { background: #3bc15b; color: #fff; }
.cbtn.green:not(#cvideo) > .ic { animation: wiggle 1.4s infinite; }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.call-min { position: absolute; left: 12px; top: 12px; color: #fff; z-index: 3; }
.call-min:hover { background: rgba(255,255,255,.15); }
.call-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 140; background: #3bc15b; color: #fff; font-weight: 600; padding: 6px; text-align: center; font-size: 14px; }
.call-msg { min-width: 220px; }
.call-line { display: flex; align-items: center; gap: 14px; }
.call-line > div { flex: 1; }
.call-sub { font-size: 13px; color: var(--ok); margin-top: 2px; }
.call-sub.missed, .media-label.missed { color: var(--danger); }
.msg.in .call-sub:not(.missed) { color: var(--ok); }
.call-again { color: var(--accent); cursor: pointer; display: flex; padding: 6px; border-radius: 50%; }
.msg.out .call-again { color: var(--out-meta); }
.call-again:hover { background: var(--accent-soft); }

/* ---------- 0.3: альбомы, опросы, упоминания, отложенные ---------- */
.album { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; }
.album.n2 .acell { aspect-ratio: 3 / 4; }
.album.n3 { grid-template-columns: 1fr 1fr; } .album.n3 .acell:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.album.n4 .acell { aspect-ratio: 1; }
.album.n3 .acell:not(:first-child) { aspect-ratio: 1; }
.acell { position: relative; overflow: hidden; background: rgba(0,0,0,.08); cursor: zoom-in; min-height: 90px; }
.acell img, .acell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-b { width: min(400px, 100%); }
.poll { min-width: 240px; padding: 2px 0; }
.pq { font-weight: 600; font-size: 15.5px; }
.pkind { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.msg.out .pkind { color: var(--out-meta); }
.popt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 0; }
.popt.vote:hover .pbox { border-color: var(--accent); }
.pbox { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex: none; transition: all .15s; }
.pbox.sq { border-radius: 5px; }
.popt.picked .pbox { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--in); }
.msg.out .popt.picked .pbox { box-shadow: inset 0 0 0 3px var(--out); }
.popt.res { align-items: flex-start; cursor: default; }
.pct { width: 40px; flex: none; font-weight: 600; font-size: 14px; text-align: right; padding-top: 1px; }
.pbody { flex: 1; min-width: 0; }
.ptext { word-break: break-word; }
.pmark { display: inline-flex; color: var(--accent); vertical-align: middle; } .pmark .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.pbar { height: 4px; border-radius: 2px; margin-top: 4px; background: transparent; }
.pbar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s; }
.msg.out .pbar span { background: var(--out-meta); }
.popt.right .pbar span { background: var(--ok); } .popt.wrong .pbar span { background: var(--danger); }
.popt.right .pct { color: var(--ok); } .popt.wrong .pct { color: var(--danger); }
.pfoot { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; flex-wrap: wrap; }
.pfoot .btn-text { padding: 4px 8px; font-size: 13px; }
.pfoot .btn-text:disabled { opacity: .4; cursor: default; }
.voter { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.popt-edit { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.popt-in { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); outline: none; }
.popt-in:focus { border-color: var(--accent); }
.pcorrect { display: none; accent-color: var(--ok); width: 18px; height: 18px; }
.poll-dialog.quiz .pcorrect { display: block; }
.badge.mention { background: var(--accent); margin-right: 4px; min-width: 22px; padding: 0; }
.mention-box { position: absolute; bottom: 100%; left: max(12px, calc((100% - 790px) / 2)); right: max(12px, calc((100% - 790px) / 2)); background: var(--bg); border-radius: 12px; box-shadow: var(--shadow); padding: 4px; margin-bottom: 6px; z-index: 5; max-height: 260px; overflow-y: auto; }
.composer { position: relative; }
.mitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border-radius: 8px; text-align: left; }
.mitem.on, .mitem:hover { background: var(--hover); }
.quick-times { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.quick-times .chip { padding: 6px 12px; }
.sched { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.small { font-size: 13px; }
.privacy p.small { margin: 0 0 8px; }

/* ---------- 0.4: стикеры, GIF, темы, права, жалобы ---------- */
.media-panel { width: 340px; max-width: calc(100vw - 24px); }
.mp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -2px -2px 6px; }
.mp-tabs button { flex: 1; padding: 8px 4px; font-weight: 600; font-size: 13.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.mp-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.mp-body { height: 280px; overflow-y: auto; }
.mp-body .emoji-grid { max-height: none; }
.mp-body .sec-title { padding: 8px 4px 4px; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.sticker-grid.big { grid-template-columns: repeat(4, 1fr); margin-bottom: 10px; }
.stk { aspect-ratio: 1; border-radius: 10px; padding: 4px; display: grid; place-items: center; }
.stk:hover { background: var(--hover); }
.stk img { width: 100%; height: 100%; object-fit: contain; }
.stk.add { border: 2px dashed var(--line); color: var(--muted); }
.gif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gifbtn { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--bg-2); }
.gifbtn img, .gifbtn video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble.sticker-b, .bubble.gif-b { background: transparent !important; box-shadow: none; padding: 0; min-width: 0; }
.bubble.sticker-b::before, .bubble.gif-b::before { display: none !important; }
.sticker-b { cursor: pointer; }
img.sticker { width: 170px; height: 170px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); }
.gif-b img.gif, .gif-b video.gif { display: block; max-width: min(300px, 70vw); max-height: 300px; border-radius: 14px; }
.media img.gif, .media video.gif { width: 100%; display: block; }
.sticker-b .meta-row, .gif-b .meta-row { justify-content: flex-end; }
.sticker-b .meta, .gif-b .meta { background: rgba(0,0,0,.35); color: #fff !important; padding: 3px 7px; border-radius: 10px; margin-top: 2px; }
.sticker-sender { background: var(--in); padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 4px; }
.msg.out .sticker-b .reactions, .msg.in .sticker-b .reactions { justify-content: flex-end; }
.topics { padding: 6px 0 20px; }
.topic-row { background: var(--bg); margin: 0 0 2px; border-radius: 12px; }
.topic-row:hover { background: var(--hover); }
.topic-new { background: var(--bg); border-radius: 12px; margin-bottom: 8px; color: var(--accent); font-weight: 600; }
.topic-new .ic { color: var(--accent); }
.topic-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 19px; flex: none; }
.topic-ic.small { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
.topic-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--bg); border-top: 1px solid var(--line); z-index: 2; }
.topic-colors { display: flex; gap: 8px; margin: -4px 0 12px; }
.topic-colors button { width: 28px; height: 28px; border-radius: 8px; border: 3px solid transparent; }
.topic-colors button.on { border-color: var(--text); }
.notice-bar { display: grid; place-items: center; }
.notice { color: var(--muted); font-size: 14px; padding: 0 16px; text-align: center; }
.send-btn.slow { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--bg-2); }
.info-row.perm { cursor: pointer; align-items: center; }
.seg.slow { flex-wrap: wrap; }
.seg.slow button { flex: 1 0 22%; }
.reports { padding: 0 10px 30px; }
.report { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.rep-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rep-reason { background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.rep-msg { background: var(--bg); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; word-break: break-word; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reasons { margin-bottom: 8px; }
.reasons .radio { padding: 6px 0; }
.messages { overflow-x: clip; }
.consent { font-size: 13.5px; color: var(--muted); margin: -4px 0 8px; }
a.list-action { color: var(--text); }