/* «Мессенджер-архив»: три колонки, тёмная тема в акценте сайта */
.mx {
  --mx-bg: #121718; --mx-col: #0f1415; --mx-panel: #1b2223; --mx-line: rgba(255, 255, 255, 0.07);
  --tg: #4ea4f6; --max: #a78bfa; --bad: #ff6b6b; --warn: #febc2e; --ok: #2fd07a;
  display: grid; grid-template-columns: 200px 230px minmax(0, 1fr); height: 100%;
  background: var(--mx-bg); color: #e2e8e8; font: 12px/1.45 var(--sans);
}
.mx svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mx-col { min-width: 0; overflow: hidden; border-right: 1px solid var(--mx-line); }
.mx-col:last-child { border-right: none; }
.mx-managers, .mx-dialogs { background: var(--mx-col); padding: 10px 8px; }
.mx-h { margin: 2px 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6c7878; }
.mx-search { display: flex; align-items: center; gap: 6px; height: 26px; margin-bottom: 8px; padding: 0 8px; border-radius: 7px; background: #182021; color: #7c8888; }

.mx-mgr { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 8px; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; }
.mx-mgr.on { background: rgba(45, 212, 191, 0.12); }
.ava { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(140deg, #1f4b46, #23343a); color: #bff3ea; font: 700 10.5px var(--sans); }
.ava.sm { width: 22px; height: 22px; font-size: 9px; }
.mx-mgr-t b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-mgr-t small { display: block; font-size: 10.5px; color: #7c8888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.live.down { background: var(--bad); box-shadow: 0 0 6px var(--bad); animation: mx-blink 1s steps(2) infinite; }
.mx-mgr .live.down + .unread, .mx-mgr:has(.live.down) small { color: var(--bad); }
.unread { position: absolute; top: 3px; left: 24px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #031512; font: 700 9px/13px var(--sans); }
@keyframes mx-blink { 50% { opacity: 0.3; } }

.mx-dlg { padding: 8px; margin-bottom: 4px; border-radius: 9px; border: 1px solid transparent; }
.mx-dlg.on { background: var(--mx-panel); border-color: rgba(45, 212, 191, 0.35); }
.mx-dlg-top { display: flex; justify-content: space-between; gap: 6px; }
.mx-dlg-top b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-dlg-top span { color: #7c8888; font: 10.5px var(--mono); }
.mx-dlg p { margin: 2px 0 5px; color: #9aa6a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.chan { display: inline-block; padding: 0 6px; border-radius: 4px; font: 600 10px/16px var(--mono); }
.chan.tg { background: rgba(78, 164, 246, 0.16); color: var(--tg); }
.chan.max { background: rgba(167, 139, 250, 0.16); color: var(--max); }
.mb { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 4px; font: 10px/16px var(--sans); }
.mb.edit { background: rgba(163, 230, 53, 0.12); color: var(--accent-2); }
.mb.del { background: rgba(255, 107, 107, 0.14); color: var(--bad); }
.mb.alert { background: rgba(254, 188, 46, 0.14); color: var(--warn); }

.mx-thread { display: flex; flex-direction: column; padding: 10px 14px; }
.mx-th-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; font-size: 13px; }
.mx-th-head .chan { margin-left: auto; }
.crm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px; }
.crm b { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; }
.crm.ok { background: rgba(47, 208, 122, 0.08); border: 1px solid rgba(47, 208, 122, 0.25); color: #b9e8cc; }
.crm.ok b { color: var(--ok); }
.crm.bad { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.4); color: #f2c4c4; }
.crm.bad b { color: var(--bad); }

.mx-feed { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 7px; min-height: 0; padding-top: 8px; overflow: hidden; }
.mx-msg { max-width: 80%; padding: 7px 10px; border-radius: 12px; background: var(--mx-panel); border: 1px solid transparent; animation: mx-in 0.45s var(--ease) both; transition: border-color 0.4s, box-shadow 0.4s, background 0.4s; }
.mx-msg.out { align-self: flex-end; background: #17403b; border-bottom-right-radius: 4px; }
.mx-msg.in { border-bottom-left-radius: 4px; }
.mx-msg small { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; font: 10px var(--mono); color: #87a3a0; }
.mx-msg .meta { display: inline-flex; align-items: center; gap: 3px; }
.mx-msg.edited .meta { color: var(--accent-2); }
.mx-msg.flash { box-shadow: 0 0 0 2px rgba(163, 230, 53, 0.5); }
.vers:empty { display: none; }
.vers { margin-top: 6px; padding-top: 5px; border-top: 1px dashed rgba(255, 255, 255, 0.12); font-size: 11px; animation: mx-in 0.4s var(--ease) both; }
.vers p { display: flex; gap: 6px; margin: 1px 0; color: #9fb3b0; }
.vers span { font: 10px/16px var(--mono); color: #6c8784; }
.vers del { color: #e58c86; }
.vers .cur { color: #fff; }
.mx-msg.deleted { background: rgba(255, 107, 107, 0.06); border: 1px dashed rgba(255, 107, 107, 0.7); }
.mx-msg.deleted .tx { text-decoration: line-through; color: #d9a3a0; }
.mx-msg.deleted .meta { color: var(--bad); }
.mx-msg.ruled { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(254, 188, 46, 0.18); }
.rule-tag { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--warn); font-size: 10.5px; font-weight: 600; animation: mx-in 0.4s var(--ease) both; }
.mx-gap { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(254, 188, 46, 0.1) 0 6px, transparent 6px 12px); border: 1px solid rgba(254, 188, 46, 0.35); color: var(--warn); font-size: 11px; animation: mx-in 0.45s var(--ease) both; }
@keyframes mx-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

@media (max-width: 1100px) {
  .mx { grid-template-columns: 170px 200px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .mx { grid-template-columns: 190px minmax(0, 1fr); }
  .mx-managers { display: none; }
}
@media (max-width: 600px) {
  .mx { grid-template-columns: minmax(0, 1fr); }
  .mx-dialogs { display: none; }
  .mx-thread { padding: 8px 10px; }
  .mx-msg { max-width: 90%; }
  .crm b { margin-left: 0; }
}