:root {
  --bordo: #6d0f17;
  --bordo-dark: #4d0a10;
  --red: #c3122a;
  --red-soft: #f6e6e8;
  --red-line: #ecccd1;
  --ink: #16171a;
  --ink-2: #3d4149;
  --muted: #6d7280;
  --line: #e6e3e3;
  --bg: #f6f4f4;
  --card: #ffffff;
  --ok: #157347;
  --ok-soft: #e7f5ee;
  --warn: #b25e00;
  --warn-soft: #fff4e5;
  --radius: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--red); text-decoration: none; }

/* ---------------- Вход ---------------- */

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(900px 500px at 50% -10%, rgba(195,18,42,.12), transparent 60%), var(--bg); }
.login-card { background: #fff; border-radius: 18px; padding: 34px; width: min(400px, 100%);
  box-shadow: 0 18px 60px rgba(80,12,22,.14); }
.login-card .brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; font-weight: 800; font-size: 18px; }
.login-card .brand span.m { width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(150deg, var(--red), var(--bordo)); display: grid; place-items: center; color: #fff; }
.login-card p.sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

/* ---------------- Каркас ---------------- */

.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

.side { background: var(--bordo); color: #f2dfe1; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; font-weight: 800; color: #fff; font-size: 16px; }
.side .brand span.m { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.15); display: grid; place-items: center; }
.side nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.side nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  color: #eccfd2; font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.side nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.side nav a.active { background: #fff; color: var(--bordo); font-weight: 600; }
.side nav a .cnt {
  margin-left: auto; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 700;
  min-width: 21px; height: 21px; border-radius: 11px; display: none; place-items: center; padding: 0 6px;
}
.side nav a .cnt.show { display: grid; }
.side nav a.active .cnt { background: var(--red); color: #fff; }
.side .me { margin-top: auto; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.13); font-size: 13.5px; }
.side .me b { color: #fff; display: block; }
.side .me .role { opacity: .75; font-size: 12.5px; }
.side .me button { margin-top: 10px; width: 100%; background: rgba(255,255,255,.12); border: 0; color: #fff;
  padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.side .me button:hover { background: rgba(255,255,255,.2); }

.main { padding: 22px 26px 40px; min-width: 0; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 23px; margin: 0; letter-spacing: -.02em; font-weight: 800; }
.page-head .spacer { flex: 1; }

/* ---------------- Общие элементы ---------------- */

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 18px; }

.btn { border: 0; background: var(--red); color: #fff; padding: 9px 16px; border-radius: 9px;
  cursor: pointer; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; transition: .14s; }
.btn:hover { background: var(--bordo); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.btn.ghost:hover { background: #f3f0f0; color: var(--bordo); }
.btn.ok { background: var(--ok); } .btn.ok:hover { background: #0f5c37; }
.btn.dim { background: #eceaea; color: var(--ink-2); } .btn.dim:hover { background: #e0dcdc; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 7px; }
.btn.danger { background: #fff; color: #b3261e; border: 1px solid #f2c9c6; }
.btn.danger:hover { background: #fdeceb; }

.input, select.input, textarea.input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--ink); transition: .14s;
}
.input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(195,18,42,.11); }
textarea.input { resize: vertical; min-height: 76px; }
label.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.f { margin-bottom: 14px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button {
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px;
  cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.tabs button:hover { border-color: var(--red-line); }
.tabs button.on { background: var(--bordo); border-color: var(--bordo); color: #fff; font-weight: 600; }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 6px; background: #eceaea; color: var(--ink-2); white-space: nowrap; }
.tag.new { background: var(--red-soft); color: var(--bordo); }
.tag.work { background: var(--warn-soft); color: var(--warn); }
.tag.done { background: var(--ok-soft); color: var(--ok); }
.tag.rej { background: #eceaea; color: var(--muted); }
.tag.on { background: var(--ok-soft); color: var(--ok); }
.tag.off { background: #eceaea; color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat b { display: block; font-size: 27px; font-weight: 800; letter-spacing: -.03em; color: var(--bordo); }
.stat span { font-size: 13px; color: var(--muted); }
.stat.hot b { color: var(--red); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #faf9f9; }
td { padding: 12px 14px; border-bottom: 1px solid #f1efef; font-size: 14px; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfbfb; }
.table-wrap { overflow-x: auto; }

.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .ico { font-size: 38px; margin-bottom: 10px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px;
  z-index: 2000; opacity: 0; transition: .22s; box-shadow: 0 10px 30px rgba(0,0,0,.24); max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #b3261e; }

.modal-bg { position: fixed; inset: 0; background: rgba(20,10,12,.45); z-index: 1500;
  display: none; place-items: center; padding: 20px; }
.modal-bg.show { display: grid; }
.modal { background: #fff; border-radius: 16px; width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(30,8,12,.3); }
.modal header { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.modal header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal header button { margin-left: auto; background: none; border: 0; font-size: 21px; cursor: pointer; color: var(--muted); }
.modal .body { padding: 22px; }
.modal footer { padding: 15px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

.msg-box { padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 14px; display: none; }
.msg-box.show { display: block; }
.msg-box.err { background: #fdeceb; color: #b3261e; border: 1px solid #f2c9c6; }
.msg-box.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfe3d0; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track { width: 52px; height: 30px; border-radius: 15px; background: #d9d5d5; position: relative; transition: .2s; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.24); }
.switch input:checked + .track { background: var(--red); }
.switch input:checked + .track::after { transform: translateX(22px); }

/* ---------------- Раздел «Чаты» ---------------- */

.chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; height: calc(100vh - 120px); min-height: 520px; }

.conv-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; }
.conv-panel .filters { padding: 12px; border-bottom: 1px solid var(--line); display: flex; gap: 5px; flex-wrap: wrap; }
.conv-panel .filters button { flex: 1; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--line);
  background: #fff; border-radius: 7px; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.conv-panel .filters button.on { background: var(--bordo); color: #fff; border-color: var(--bordo); font-weight: 600; }
.conv-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.conv-item { padding: 12px 14px; border-bottom: 1px solid #f2f0f0; cursor: pointer; transition: .12s; }
.conv-item:hover { background: #fbfafa; }
.conv-item.on { background: var(--red-soft); border-left: 3px solid var(--red); padding-left: 11px; }
.conv-item .top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.conv-item .top b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .top .t { margin-left: auto; font-size: 11.5px; color: var(--muted); flex: none; }
.conv-item .last { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.conv-item .unread { background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  min-width: 19px; height: 19px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }

.thread { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.thread .head { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.thread .head b { font-size: 15px; }
.thread .head .sub { font-size: 12.5px; color: var(--muted); }
.thread .head .acts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }

.thread-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
  background: #fbfafa; display: flex; flex-direction: column; gap: 8px; }
.tm { max-width: 74%; padding: 9px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.tm.in { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.tm.out { align-self: flex-end; background: var(--red); color: #fff; border-bottom-right-radius: 4px; }
.tm.sys { align-self: center; background: #efeceb; color: var(--muted); font-size: 12.5px; padding: 5px 12px; border-radius: 999px; }
.tm .who { display: block; font-size: 11.5px; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.tm .meta { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; text-align: right; }
.tm.pending { opacity: .6; }

.thread .quick-bar { padding: 9px 12px; border-top: 1px solid var(--line); display: flex; gap: 6px;
  overflow-x: auto; background: #fff; }
.thread .quick-bar button {
  border: 1px solid var(--red-line); background: #fff; color: var(--bordo); border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer; white-space: nowrap; flex: none;
}
.thread .quick-bar button:hover { background: var(--red-soft); }

.thread .composer { padding: 11px 12px; border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: flex-end; background: #fff; }
.thread .composer textarea {
  flex: 1; border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 13px;
  resize: none; min-height: 42px; max-height: 130px; font-size: 15px; line-height: 1.4;
}
.thread .composer textarea:focus { outline: none; border-color: var(--red); }
.thread .composer button { width: 42px; height: 42px; border: 0; border-radius: 11px; background: var(--red);
  color: #fff; cursor: pointer; font-size: 17px; flex: none; }
.thread .composer button:hover { background: var(--bordo); }
.thread .composer button:disabled { background: #d6d1d1; cursor: not-allowed; }

.qr-pop {
  position: absolute; bottom: 100%; left: 12px; right: 12px; max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 -8px 30px rgba(80,12,22,.14);
  margin-bottom: 6px; display: none; z-index: 20;
}
.qr-pop.show { display: block; }
.qr-pop .qr { padding: 10px 13px; cursor: pointer; border-bottom: 1px solid #f2f0f0; }
.qr-pop .qr:hover, .qr-pop .qr.sel { background: var(--red-soft); }
.qr-pop .qr b { display: block; font-size: 13.5px; }
.qr-pop .qr b code { background: #eee; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; color: var(--bordo); margin-left: 6px; }
.qr-pop .qr span { font-size: 12.5px; color: var(--muted); display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.composer-wrap { position: relative; }

.hide { display: none !important; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .side { position: relative; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; padding-bottom: 8px; }
  .side nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .side .me { margin: 0 12px 0 auto; border: 0; padding: 8px; display: flex; align-items: center; gap: 10px; }
  .side .me button { margin: 0; width: auto; padding: 6px 12px; }
  .chat-layout { grid-template-columns: 1fr; height: auto; }
  .conv-panel { max-height: 340px; }
  .thread { height: 65vh; }
  .main { padding: 16px; }
  .f-row { grid-template-columns: 1fr; }
}