/* ==========================================================================
   Ovoz — дизайн «Сигнал»
   Тёмная тема по умолчанию; светлая: html[data-theme="light"]
   Совместимо с Chromium 109 (Windows 7): без color-mix, :has, container queries
   ========================================================================== */

@font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations"), url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/onest-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg:#0F1024; --rail:#14152D; --surface:#17182F; --raised:#1E2040; --sunken:#121329;
  --line:#2A2C52; --line-soft:#222445;
  --text:#ECEBFA; --text-2:#A9A8C9; --text-3:#75759A;
  --violet:#8B7BFF; --violet-soft:rgba(139,123,255,.15); --violet-ring:rgba(139,123,255,.35);
  --coral:#FF7A59;  --coral-soft:rgba(255,122,89,.15);
  --teal:#3DD9B3;   --teal-soft:rgba(61,217,179,.14);
  --amber:#FFC15E;  --amber-soft:rgba(255,193,94,.14);
  --rose:#FF5C7A;   --rose-soft:rgba(255,92,122,.15);
  --blue:#5B8CFF;   --blue-soft:rgba(91,140,255,.15);
  --grey-soft:rgba(169,168,201,.12);
  --glass:rgba(23,24,47,.72);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.6);
  --r-rail:22px; --r-card:18px; --r-in:12px; --r-sm:9px;
  --rail-w:256px; --rail-c:76px;
  --heat0:#1C1D3A;
  color-scheme:dark;
}
html[data-theme="light"] {
  --bg:#F2F2F8; --rail:#FFFFFF; --surface:#FFFFFF; --raised:#F6F6FC; --sunken:#EEEEF6;
  --line:#E2E2EF; --line-soft:#ECECF5;
  --text:#16173A; --text-2:#55577A; --text-3:#8A8BA8;
  --violet:#6352E6; --violet-soft:rgba(99,82,230,.10); --violet-ring:rgba(99,82,230,.28);
  --coral:#E8573A;  --coral-soft:rgba(232,87,58,.10);
  --teal:#0F9C7C;   --teal-soft:rgba(15,156,124,.10);
  --amber:#B87A0A;  --amber-soft:rgba(232,160,30,.14);
  --rose:#D93A5C;   --rose-soft:rgba(217,58,92,.10);
  --blue:#3A6CE8;   --blue-soft:rgba(58,108,232,.10);
  --grey-soft:rgba(85,87,122,.09);
  --glass:rgba(255,255,255,.78);
  --shadow:0 1px 2px rgba(22,23,58,.04), 0 12px 32px -18px rgba(22,23,58,.18);
  --heat0:#ECECF5;
  color-scheme:light;
}

/* ---------- база ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:"Onest", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size:14px; line-height:1.5; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1, "cv11" 1;
}
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
strong, b { font-weight:600; }
.muted { color:var(--text-2); }
.faint { color:var(--text-3); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
svg.ic { width:20px; height:20px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; }
[hidden] { display:none !important; }

/* ---------- каркас ---------- */
.app { display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; transition:grid-template-columns .2s ease; }

.rail {
  position:sticky; top:12px; margin:12px 0 12px 12px; height:calc(100vh - 24px);
  background:var(--rail); border:1px solid var(--line-soft); border-radius:var(--r-rail);
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); z-index:40;
}
.brand { display:flex; align-items:center; gap:12px; padding:20px 18px 18px; }
.mark {
  width:40px; height:40px; border-radius:13px; flex-shrink:0; position:relative; overflow:hidden;
  background:linear-gradient(140deg,#FF7A59 0%,#C25FD0 52%,#6E5BFF 100%);
  display:grid; place-items:center; box-shadow:0 10px 24px -10px rgba(194,95,208,.8);
}
.mark svg { width:22px; height:22px; }
.mark svg path { fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; }
.brand-name { font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; }
.brand-name small { display:block; font-size:12px; font-weight:450; color:var(--text-3); letter-spacing:0; }

.nav { flex:1; overflow-y:auto; padding:6px 12px; display:flex; flex-direction:column; gap:2px; }
.nav-sep { height:1px; background:var(--line-soft); margin:10px 8px; }
.nav a, .nav-btn {
  display:flex; align-items:center; gap:12px; height:42px; padding:0 12px; border-radius:12px;
  color:var(--text-2); font-size:14px; font-weight:500; white-space:nowrap; position:relative;
  background:none; border:0; cursor:pointer; width:100%; text-align:left;
  transition:background .15s, color .15s;
}
.nav a:hover, .nav-btn:hover { background:var(--raised); color:var(--text); }
.nav a.active { background:var(--violet-soft); color:var(--text); }
.nav a.active svg.ic { stroke:var(--violet); }
.nav a .badge-live {
  margin-left:auto; min-width:22px; height:20px; padding:0 6px; border-radius:999px; font-size:11.5px; font-weight:650;
  background:var(--coral); color:#fff; display:inline-grid; place-items:center;
}
.rail-foot { padding:10px 12px 14px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:2px; }
.rail-foot .nav-btn, .rail-foot a { display:flex; align-items:center; gap:12px; height:40px; padding:0 12px; border-radius:12px; color:var(--text-2); font-weight:500; background:none; border:0; cursor:pointer; width:100%; }
.rail-foot .nav-btn:hover, .rail-foot a:hover { background:var(--raised); color:var(--text); }

html.rail-collapsed .app { grid-template-columns:var(--rail-c) minmax(0,1fr); }
html.rail-collapsed .rail .lbl, html.rail-collapsed .brand-name, html.rail-collapsed .nav a .badge-live { display:none; }
html.rail-collapsed .nav a, html.rail-collapsed .rail-foot .nav-btn, html.rail-collapsed .rail-foot a { justify-content:center; padding:0; }
html.rail-collapsed .brand { justify-content:center; padding-left:0; padding-right:0; }
html.rail-collapsed .collapse-btn svg.ic { transform:rotate(180deg); }
html.rail-collapsed .nav a.active::after { content:""; position:absolute; right:6px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--coral); opacity:0; }

/* ---------- основная колонка ---------- */
.main { min-width:0; padding:12px 24px 40px; }
.topbar { display:flex; align-items:center; gap:14px; min-height:64px; padding:6px 0 18px; }
.page-title { min-width:0; flex:1; }
.page-title h1 { font-size:28px; line-height:1.15; font-weight:650; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-title p { color:var(--text-3); font-size:13px; margin-top:3px; }
.tools { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.live-chip {
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 14px 0 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-soft); font-size:13px; color:var(--text-2); white-space:nowrap;
  transition:border-color .15s;
}
.live-chip:hover { border-color:var(--line); }
.live-chip b { color:var(--text); font-size:14px; font-weight:650; }
.live-chip.on { border-color:rgba(255,122,89,.45); }
.pulse { width:9px; height:9px; border-radius:50%; background:var(--text-3); position:relative; flex-shrink:0; }
.live-chip.on .pulse, .pulse.on { background:var(--coral); }
.live-chip.on .pulse::after, .pulse.on::after {
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--coral); opacity:0;
  animation:ping 1.8s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes ping { 0% { transform:scale(.5); opacity:.8; } 100% { transform:scale(1.6); opacity:0; } }

.clock { text-align:right; line-height:1.1; padding:0 4px; }
.clock b { display:block; font-size:18px; font-weight:600; letter-spacing:-.01em; }
.clock span { font-size:11.5px; color:var(--text-3); }

.seg { display:inline-flex; background:var(--surface); border:1px solid var(--line-soft); border-radius:12px; padding:3px; }
.seg button { border:0; background:transparent; color:var(--text-3); font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:9px; cursor:pointer; }
.seg button.on { background:var(--raised); color:var(--text); box-shadow:0 1px 0 var(--line); }
.icon-btn {
  width:38px; height:38px; border-radius:12px; display:inline-grid; place-items:center; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--text-2); transition:color .15s, border-color .15s;
}
.icon-btn:hover { color:var(--text); border-color:var(--line); }
.avatar {
  width:38px; height:38px; border-radius:50%; display:inline-grid; place-items:center; flex-shrink:0;
  font-weight:650; font-size:14px; color:#fff; text-transform:uppercase;
  background:linear-gradient(140deg,#FF7A59,#8B7BFF);
}
.avatar.sm { width:30px; height:30px; font-size:12px; }
.me { display:flex; align-items:center; gap:10px; padding-left:4px; }
.me-text { line-height:1.15; }
.me-text b { display:block; font-size:13.5px; font-weight:600; white-space:nowrap; }
.me-text span { font-size:11.5px; color:var(--text-3); }

/* ---------- flash ---------- */
.flash {
  display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:12px 16px; border-radius:var(--r-in);
  background:var(--violet-soft); color:var(--text); border:1px solid var(--violet-ring); font-size:13.5px;
  transition:opacity .4s, transform .4s;
}
.flash svg.ic { color:var(--violet); }
.flash.hide { opacity:0; transform:translateY(-6px); pointer-events:none; }
.flash.err { background:var(--rose-soft); border-color:rgba(255,92,122,.4); }
.flash.err svg.ic { color:var(--rose); }

/* ---------- поверхности ---------- */
.card { background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); box-shadow:var(--shadow); min-width:0; }
.card-h { display:flex; align-items:center; gap:10px; padding:18px 20px 4px; }
.card-h h2 { font-size:15px; font-weight:600; letter-spacing:-.005em; }
.card-h .aside { margin-left:auto; font-size:12.5px; color:var(--text-3); }
.card-b { padding:16px 20px 20px; }
.row { display:grid; gap:16px; }
.mb { margin-bottom:16px; }

/* ---------- кнопки / поля ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px;
  border-radius:12px; border:1px solid transparent; cursor:pointer; font-size:14px; font-weight:600; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:active { transform:translateY(1px); }
.btn svg.ic { width:18px; height:18px; }
.btn-primary { background:var(--violet); color:#fff; }
.btn-primary:hover { background:#7B6AF5; }
html[data-theme="light"] .btn-primary:hover { background:#5242D6; }
.btn-ghost { background:var(--surface); border-color:var(--line); color:var(--text-2); }
.btn-ghost:hover { color:var(--text); border-color:var(--text-3); }
.btn-sm { height:32px; padding:0 12px; font-size:13px; border-radius:10px; }
.btn-danger:hover { color:var(--rose) !important; border-color:rgba(255,92,122,.5) !important; background:var(--rose-soft) !important; }

input[type=text], input[type=password], input[type=search], input[type=datetime-local], input[type=number], select {
  height:40px; padding:0 13px; border-radius:12px; border:1px solid var(--line); background:var(--sunken); color:var(--text);
  font:inherit; font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s; min-width:0;
}
input::placeholder { color:var(--text-3); }
input:focus, select:focus { border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-soft); }
.field { display:flex; flex-direction:column; gap:7px; }
.field > label { font-size:13px; font-weight:550; color:var(--text-2); }
.field input, .field select { width:100%; height:44px; }
.hint { font-size:12.5px; color:var(--text-3); line-height:1.5; }
.search { position:relative; }
.search svg.ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-3); pointer-events:none; }
.search input { padding-left:40px; width:260px; }

/* ---------- вкладки и фильтры ---------- */
.tabs { display:flex; gap:4px; padding:4px; background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; width:max-content; max-width:100%; overflow-x:auto; margin-bottom:16px; }
.tabs a, .tabs button {
  border:0; background:none; cursor:pointer; padding:8px 14px; border-radius:10px; font-size:13.5px; font-weight:550;
  color:var(--text-2); white-space:nowrap; transition:background .15s, color .15s;
}
.tabs a:hover, .tabs button:hover { color:var(--text); }
.tabs .on { background:var(--raised); color:var(--text); box-shadow:0 1px 0 var(--line); }

.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.bar .grow { flex:1; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 13px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line-soft); color:var(--text-2); font-size:13px; font-weight:500; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.chip:hover { color:var(--text); border-color:var(--line); }
.chip.on { background:var(--text); color:var(--bg); border-color:var(--text); }
.chip .n { font-weight:650; color:var(--text); }
.chip.on .n { color:var(--bg); }
.chip .d { width:8px; height:8px; border-radius:50%; }
.custom-range { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; }
.custom-range label { font-size:13px; color:var(--text-3); }

/* ---------- статусы ---------- */
.st { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; white-space:nowrap; }
.st i { width:8px; height:8px; border-radius:50%; background:var(--text-3); flex-shrink:0; }
.st-ok i, .d-free { background:var(--teal); } .st-ok { color:var(--teal); }
.st-busy i, .d-busy { background:var(--amber); }
.st-ring i, .d-ring { background:var(--blue); }
.st-dnd i, .d-dnd { background:var(--violet); }
.st-off i, .d-off { background:var(--text-3); }
.st-bad i { background:var(--rose); } .st-bad { color:var(--rose); }
.d-wait { background:var(--rose); }
.tag { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:7px; font-size:12px; font-weight:550; white-space:nowrap; background:var(--grey-soft); color:var(--text-2); }
.tag-ok { background:var(--teal-soft); color:var(--teal); }
.tag-bad { background:var(--rose-soft); color:var(--rose); }
.tag-warn { background:var(--amber-soft); color:var(--amber); }
.tag-violet { background:var(--violet-soft); color:var(--violet); }
.tag-blue { background:var(--blue-soft); color:var(--blue); }
.tag svg.ic { width:14px; height:14px; }
.dir { width:30px; height:30px; border-radius:10px; display:inline-grid; place-items:center; }
.dir svg.ic { width:16px; height:16px; }
.dir-in { background:var(--teal-soft); color:var(--teal); }
.dir-miss { background:var(--rose-soft); color:var(--rose); }
.dir-out { background:var(--blue-soft); color:var(--blue); }

/* ---------- таблицы ---------- */
.tbl-wrap { background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:auto; box-shadow:var(--shadow); }
.tbl { width:100%; border-collapse:separate; border-spacing:0; }
.tbl th {
  position:sticky; top:0; z-index:1; background:var(--surface); text-align:left; white-space:nowrap;
  font-size:12.5px; font-weight:550; color:var(--text-3); padding:13px 16px; border-bottom:1px solid var(--line-soft);
}
.tbl td { padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr { transition:background .15s; }
.tbl tbody tr:hover { background:var(--raised); }
.tbl th.num, .tbl td.num { text-align:right; }
.tbl .total td { background:var(--raised); font-weight:600; }
.tbl .empty { text-align:center; padding:48px 16px; color:var(--text-3); }
.phone { font-weight:550; letter-spacing:.01em; white-space:nowrap; }
.ext { font-weight:650; }
.who { display:flex; align-items:center; gap:10px; }
.actions { display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:nowrap; }
.actions form { display:inline-flex; gap:6px; align-items:center; }
.actions input { height:32px; width:100px; font-size:13px; border-radius:10px; }
audio { height:34px; width:220px; vertical-align:middle; }
html:not([data-theme="light"]) audio { filter:invert(.9) hue-rotate(195deg) saturate(.8); }

/* ---------- дашборд: герой ---------- */
.hero {
  position:relative; overflow:hidden; border-radius:24px; margin-bottom:16px; min-height:300px;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(139,123,255,.22), transparent 70%),
    radial-gradient(500px 260px at 100% 100%, rgba(255,122,89,.18), transparent 70%),
    var(--surface);
  border:1px solid var(--line-soft); box-shadow:var(--shadow);
  display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.6fr);
}
html[data-theme="light"] .hero {
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(99,82,230,.10), transparent 70%),
    radial-gradient(500px 260px at 100% 100%, rgba(232,87,58,.09), transparent 70%),
    var(--surface);
}
.hero-l { padding:26px 28px 24px; display:flex; flex-direction:column; position:relative; z-index:2; }
.hero-l h2 { font-size:15px; font-weight:550; color:var(--text-2); display:flex; align-items:center; gap:10px; }
.hero-num { font-size:112px; line-height:.95; font-weight:700; letter-spacing:-.05em; margin:14px 0 4px; font-variant-numeric:tabular-nums; transition:color .3s; }
.hero-num.on { background:linear-gradient(120deg,#FF7A59 10%,#B864E0 55%,#8B7BFF 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-cap { color:var(--text-3); font-size:13.5px; }
.hero-facts { display:flex; gap:22px; margin-top:auto; padding-top:22px; flex-wrap:wrap; }
.fact b { display:block; font-size:24px; font-weight:650; letter-spacing:-.02em; line-height:1.1; }
.fact span { font-size:12.5px; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.fact span i { width:7px; height:7px; border-radius:50%; }
.hero-r { position:relative; min-height:220px; }
.hero-r canvas { position:absolute; inset:0; width:100%; height:100%; }
.meters { position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-top:1px solid var(--line-soft); z-index:2; }
.meter { background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:14px 20px 16px; }
.meter-top { display:flex; align-items:baseline; gap:8px; }
.meter-top span { font-size:12.5px; color:var(--text-2); display:flex; align-items:center; gap:7px; }
.meter-top span svg.ic { width:16px; height:16px; color:var(--text-3); }
.meter-top b { margin-left:auto; font-size:18px; font-weight:650; letter-spacing:-.01em; }
.meter-top small { font-size:11.5px; color:var(--text-3); }
.meter-track { height:6px; border-radius:6px; background:var(--line-soft); margin-top:10px; overflow:hidden; }
.meter-fill { height:100%; width:0; border-radius:6px; background:var(--teal); transition:width .6s ease, background .3s; }

.dash-grid { display:grid; grid-template-columns:minmax(0,2.2fr) minmax(280px,1fr); gap:16px; }
.svc-list { padding:6px 12px 14px; }
.svc { display:flex; align-items:center; gap:14px; padding:12px 8px; border-bottom:1px solid var(--line-soft); }
.svc:last-child { border-bottom:0; }
.svc-ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--grey-soft); color:var(--text-2); flex-shrink:0; }
.svc.up .svc-ic { background:var(--teal-soft); color:var(--teal); }
.svc.down .svc-ic { background:var(--rose-soft); color:var(--rose); }
.svc-n { font-weight:600; font-size:14px; }
.svc-s { font-size:12.5px; color:var(--text-3); }
.svc .st { margin-left:auto; }

/* ---------- монитор: плитки операторов ---------- */
.mon { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; }
.ops { display:grid; grid-template-columns:repeat(auto-fill, minmax(214px,1fr)); gap:12px; }
.op {
  position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow);
  transition:border-color .25s, background .25s, opacity .25s;
}
.op-top { display:flex; align-items:center; gap:12px; }
.op .avatar { width:46px; height:46px; font-size:16px; background:var(--raised); color:var(--text); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--text-3); }
.op-id { min-width:0; }
.op-id b { display:block; font-size:20px; font-weight:650; letter-spacing:-.02em; line-height:1.1; }
.op-id span { display:block; font-size:13px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-state { display:flex; align-items:center; gap:10px; min-height:22px; }
.op-meta { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-3); border-top:1px solid var(--line-soft); padding-top:11px; }
.op-meta b { color:var(--text); font-weight:600; }
.op-meta .sp { flex:1; }
.op-pause { font-size:12px; color:var(--violet); }
.op.s-available .avatar { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--teal); }
.op.s-busy { border-color:rgba(255,193,94,.35); }
.op.s-busy .avatar { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--amber); background:var(--amber-soft); color:var(--amber); }
.op.s-ringing { border-color:rgba(91,140,255,.5); background:linear-gradient(180deg, var(--blue-soft), transparent 60%), var(--surface); }
.op.s-ringing .avatar { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--blue); animation:ring 1s ease-in-out infinite; }
.op.s-dnd .avatar { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--violet); }
.op.s-offline { opacity:.5; }
.op.hide { display:none; }
@keyframes ring { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-8deg); } 40% { transform:rotate(8deg); } 60% { transform:rotate(-5deg); } 80% { transform:rotate(4deg); } }
/* «эквалайзер» разговора */
.eq { display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.eq i { width:3px; border-radius:2px; background:var(--amber); animation:eq 1s ease-in-out infinite; }
.eq i:nth-child(1) { animation-delay:-.2s; } .eq i:nth-child(2) { animation-delay:-.5s; } .eq i:nth-child(3) { animation-delay:-.8s; } .eq i:nth-child(4) { animation-delay:-.35s; }
@keyframes eq { 0%,100% { height:4px; } 50% { height:14px; } }

.side { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
.list { padding:4px 8px 10px; }
.li { display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:12px; }
.li + .li { border-top:1px solid var(--line-soft); }
.li .grow { flex:1; min-width:0; }
.li .sub { font-size:12.5px; color:var(--text-3); }
.li .t { font-weight:650; font-variant-numeric:tabular-nums; }
.li .t.hot { color:var(--rose); }
.li-empty { padding:22px 12px; text-align:center; color:var(--text-3); font-size:13px; }
.pos { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--rose-soft); color:var(--rose); font-weight:650; font-size:13px; flex-shrink:0; }
.updated { font-size:12.5px; color:var(--text-3); display:flex; align-items:center; gap:8px; }

/* ---------- статистика ---------- */
.strip { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden; }
.strip > div { padding:18px 20px 16px; position:relative; }
.strip > div + div { border-left:1px solid var(--line-soft); }
.strip b { display:block; font-size:30px; font-weight:650; letter-spacing:-.03em; line-height:1.1; }
.strip span { font-size:13px; color:var(--text-2); display:flex; align-items:center; gap:7px; margin-top:4px; }
.strip span i { width:8px; height:8px; border-radius:50%; }
.strip .share { position:absolute; left:0; bottom:0; height:3px; border-radius:0 3px 0 0; }
.stats-2 { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; margin-bottom:16px; }
.mini-bar { display:flex; height:8px; width:140px; border-radius:6px; overflow:hidden; background:var(--line-soft); }
.mini-bar i { display:block; height:100%; }
.rank { width:26px; height:26px; border-radius:8px; display:inline-grid; place-items:center; font-size:12.5px; font-weight:650; background:var(--grey-soft); color:var(--text-2); }
.rank.top { background:var(--violet-soft); color:var(--violet); }

/* ---------- формы ---------- */
.form-wrap { max-width:560px; }
.form-card { background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); padding:26px 28px; box-shadow:var(--shadow); }
.form-card h2 { font-size:20px; font-weight:650; letter-spacing:-.01em; }
.form-card .lead { color:var(--text-3); font-size:13.5px; margin:4px 0 22px; }
.form { display:flex; flex-direction:column; gap:18px; }
.form-actions { display:flex; gap:10px; margin-top:4px; }
.note { margin-top:20px; padding:14px 16px; border-radius:14px; background:var(--sunken); color:var(--text-2); font-size:13px; line-height:1.6; display:flex; gap:12px; }
.note svg.ic { color:var(--violet); margin-top:1px; }

/* ---------- ApexCharts ---------- */
.apexcharts-tooltip { border-radius:12px !important; border:1px solid var(--line) !important; background:var(--raised) !important; color:var(--text) !important; box-shadow:0 12px 30px -12px rgba(0,0,0,.45) !important; }
.apexcharts-tooltip-title { background:var(--surface) !important; border-bottom:1px solid var(--line) !important; font-family:inherit !important; }
.apexcharts-xaxistooltip { display:none !important; }
.apexcharts-menu { background:var(--raised) !important; border-color:var(--line) !important; }
.apexcharts-toolbar svg { fill:var(--text-3) !important; }
.apexcharts-legend-text { font-family:inherit !important; }

/* ---------- мобильная навигация ---------- */
.tabbar, .sheet, .sheet-bg { display:none; }

/* ---------- скроллбар ---------- */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:10px; border:3px solid var(--bg); }

/* ==========================================================================
   Адаптив
   ========================================================================== */
@media (max-width:1380px) {
  .clock { display:none; }
  .me-text { display:none; }
}
@media (max-width:1200px) {
  .app { grid-template-columns:var(--rail-c) minmax(0,1fr); }
  .rail .lbl, .brand-name, .nav a .badge-live { display:none; }
  .nav a, .rail-foot .nav-btn, .rail-foot a { justify-content:center; padding:0; }
  .brand { justify-content:center; padding-left:0; padding-right:0; }
  .collapse-btn { display:none !important; }
  .dash-grid, .stats-2 { grid-template-columns:minmax(0,1fr); }
  .meter-top small { display:none; }
  .fact b { font-size:21px; }
  .mon { grid-template-columns:minmax(0,1fr); }
  .side { position:static; display:grid; grid-template-columns:1fr 1fr; }
  .strip { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .strip > div:nth-child(4) { border-left:0; }
  .strip > div:nth-child(n+4) { border-top:1px solid var(--line-soft); }
}
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  .hero-r { min-height:230px; border-top:1px solid var(--line-soft); }
  .hero-num { font-size:88px; }
}
@media (max-width:760px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .rail { display:none; }
  .main { padding:8px 14px 96px; }
  .topbar { min-height:56px; padding-bottom:12px; gap:8px; }
  .page-title h1 { font-size:22px; }
  .page-title p, .live-chip .lbl { display:none; }
  .live-chip { padding:0 12px; }
  .tools .seg, .tools .theme-btn { display:none; }
  .side { grid-template-columns:1fr; }
  .search input { width:100%; }
  .search { flex:1 1 100%; }
  .hero-l { padding:22px 20px; }
  .hero-num { font-size:76px; }
  .hero-facts { gap:18px; }
  .fact b { font-size:20px; }
  .meters { position:static; grid-template-columns:1fr; }
  .hero-r { min-height:0; display:flex; flex-direction:column; }
  .hero-r canvas { position:relative; height:150px; }
  .strip { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .strip > div:nth-child(n) { border-left:0; border-top:1px solid var(--line-soft); }
  .strip > div:nth-child(1), .strip > div:nth-child(2) { border-top:0; }
  .strip > div:nth-child(even) { border-left:1px solid var(--line-soft); }
  .strip b { font-size:24px; }
  .ops { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:10px; }
  .op { padding:14px 12px 12px; }
  .op .avatar { width:38px; height:38px; font-size:14px; }
  .op-id b { font-size:17px; }
  .op-meta .ip { display:none; }
  .tabs { width:100%; }
  .form-card { padding:20px 18px; }

  /* таблица -> карточки */
  .stack thead { display:none; }
  .stack, .stack tbody, .stack tr, .stack td { display:block; width:100%; }
  .stack tr { padding:12px 14px; border-bottom:1px solid var(--line-soft); }
  .stack tbody tr:last-child { border-bottom:0; }
  .stack td { border:0 !important; padding:4px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; font-size:13.5px; }
  .stack td::before { content:attr(data-label); color:var(--text-3); font-size:12.5px; text-align:left; flex-shrink:0; }
  .stack td.no-lbl::before { display:none; }
  .stack td.empty { justify-content:center; }
  .stack .actions { justify-content:flex-end; flex-wrap:wrap; }
  audio { width:200px; }

  .tabbar {
    display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:10px; right:10px; bottom:10px; z-index:60;
    height:66px; padding:6px; border-radius:22px; background:var(--glass); border:1px solid var(--line);
    backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  }
  .tabbar a, .tabbar button {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:none; cursor:pointer;
    border-radius:16px; color:var(--text-3); font-size:10.5px; font-weight:550; position:relative;
  }
  .tabbar .on { color:var(--text); background:var(--violet-soft); }
  .tabbar .on svg.ic { stroke:var(--violet); }
  .tabbar .badge-live { position:absolute; top:4px; right:calc(50% - 22px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--coral); color:#fff; font-size:10.5px; font-weight:650; display:grid; place-items:center; }
  .sheet-bg { position:fixed; inset:0; background:rgba(5,6,18,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s; display:block; }
  .sheet {
    display:block; position:fixed; left:10px; right:10px; bottom:10px; z-index:80; padding:10px; border-radius:24px;
    background:var(--surface); border:1px solid var(--line); transform:translateY(120%); visibility:hidden;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s linear .25s;
  }
  html.sheet-open .sheet { visibility:visible; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
  html.sheet-open .sheet { transform:none; }
  html.sheet-open .sheet-bg { opacity:1; pointer-events:auto; }
  .sheet-grip { width:40px; height:4px; border-radius:4px; background:var(--line); margin:4px auto 10px; }
  .sheet a, .sheet button.sheet-row { display:flex; align-items:center; gap:14px; height:50px; padding:0 14px; border-radius:14px; font-size:15px; font-weight:500; width:100%; border:0; background:none; cursor:pointer; text-align:left; }
  .sheet a:hover, .sheet button.sheet-row:hover { background:var(--raised); }
  .sheet .sheet-tools { display:flex; gap:10px; padding:10px 14px 6px; align-items:center; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ==========================================================================
   Вход
   ========================================================================== */
.login { min-height:100vh; position:relative; overflow:hidden; background:#0A0B1C; color:#ECEBFA; }
.login video, .login .poster, .login canvas.bgwave { position:fixed; inset:0; width:100%; height:100%; object-fit:cover; }
.login .poster { background-size:cover; background-position:center; }
.login .veil { position:fixed; inset:0; background:
  linear-gradient(90deg, rgba(10,11,28,.78) 0%, rgba(10,11,28,.35) 45%, rgba(10,11,28,.55) 100%),
  linear-gradient(0deg, rgba(10,11,28,.65) 0%, transparent 40%); }
.login-grid { position:relative; z-index:2; min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:40px; padding:40px 56px; align-items:center; }
.login-hello { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; padding:8px 0; }
.login-top { display:flex; align-items:center; gap:12px; }
.login-top .seg { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.login-top .seg button { color:rgba(236,235,250,.6); }
.login-top .seg button.on { background:rgba(255,255,255,.14); color:#fff; box-shadow:none; }
.login-title { max-width:640px; }
.login-title h1 { font-size:132px; line-height:.9; font-weight:700; letter-spacing:-.045em; }
.login-title h1 span { display:block; }
.login-title p { margin-top:18px; font-size:18px; color:rgba(236,235,250,.72); max-width:440px; line-height:1.5; }
.login-time { display:flex; align-items:flex-end; gap:16px; }
.login-time b { font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.login-time span { font-size:14px; color:rgba(236,235,250,.6); padding-bottom:5px; line-height:1.35; }

.login-card {
  position:relative; padding:32px 32px 24px; border-radius:28px;
  background:rgba(20,21,45,.55); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(24px) saturate(1.3); -webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.login-card h2 { font-size:26px; font-weight:650; letter-spacing:-.02em; }
.login-card .lead { color:rgba(236,235,250,.6); font-size:14px; margin:4px 0 24px; }
.login-card .flash { background:rgba(255,92,122,.14); border-color:rgba(255,92,122,.4); color:#FFD6DE; }
.login-card .flash svg.ic { color:#FF7A92; }
.lf { display:flex; flex-direction:column; gap:14px; }
.lfield { position:relative; }
.lfield svg.ic.lead-ic { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:rgba(236,235,250,.45); width:19px; height:19px; pointer-events:none; }
.lfield input {
  width:100%; height:54px; padding:0 48px 0 48px; border-radius:16px; font-size:15px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff;
}
.lfield input::placeholder { color:rgba(236,235,250,.45); }
.lfield input:focus { border-color:#8B7BFF; background:rgba(255,255,255,.09); box-shadow:0 0 0 4px rgba(139,123,255,.2); }
.lfield .eye { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:12px; border:0; background:none; color:rgba(236,235,250,.55); cursor:pointer; display:grid; place-items:center; }
.lfield .eye:hover { color:#fff; background:rgba(255,255,255,.08); }
.caps { font-size:12.5px; color:#FFC15E; display:none; align-items:center; gap:6px; margin-top:-4px; }
.caps.on { display:flex; }
.btn-login {
  height:54px; border-radius:16px; border:0; cursor:pointer; margin-top:6px; font-size:16px; font-weight:650; color:#fff;
  background:linear-gradient(100deg,#FF7A59 0%,#B864E0 50%,#7B6BFF 100%); background-size:160% 100%; background-position:0 0;
  box-shadow:0 16px 30px -14px rgba(184,100,224,.8); transition:background-position .4s, transform .1s;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.btn-login:hover { background-position:100% 0; }
.btn-login:active { transform:translateY(1px); }
.login-foot { margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:rgba(236,235,250,.55); }
.login-foot b { color:#fff; font-weight:600; }
.login-foot a { color:#C9C1FF; font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.login-foot a svg.ic { width:15px; height:15px; }

@media (max-width:1100px) {
  .login-grid { grid-template-columns:minmax(0,1fr) 400px; padding:32px; gap:28px; }
  .login-title h1 { font-size:96px; }
}
@media (max-width:820px) {
  .login .veil { background:linear-gradient(180deg, rgba(10,11,28,.45) 0%, rgba(10,11,28,.8) 70%); }
  .login-grid { grid-template-columns:1fr; padding:20px 16px 28px; gap:22px; align-content:space-between; }
  .login-hello { gap:28px; }
  .login-title h1 { font-size:76px; }
  .login-title p { font-size:15px; margin-top:12px; }
  .login-time { display:none; }
  .login-card { padding:24px 20px 18px; border-radius:24px; }
}

/* static-monitor: без анимаций, меняются только значения */
.op, .op * , .chip, .li { transition:none !important; }
.op.s-ringing .avatar, .eq i, .pulse::after { animation:none !important; }
.pulse::after { display:none !important; }
.eq i:nth-child(1) { height:6px; } .eq i:nth-child(2) { height:12px; } .eq i:nth-child(3) { height:8px; } .eq i:nth-child(4) { height:14px; }

/* op-meta-fit: IP и счётчики не выходят за пределы плитки */
.op { min-width:0; overflow:hidden; }
.op-meta { flex-wrap:wrap; row-gap:6px; column-gap:8px; min-width:0; }
.op-meta > span { white-space:nowrap; }
.op-meta .sp { display:none; }
.op-meta .ip { flex:1 0 100%; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--text-3); }

/* client-card: всплывающая карточка клиента Assistance */
.cc {
  position:fixed; top:12px; right:12px; bottom:12px; width:440px; max-width:calc(100vw - 24px); z-index:90;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
}
.cc[hidden] { display:none !important; }
.cc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 14px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, var(--violet-soft), transparent); }
.cc-state { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--text-2); }
.cc-state i { width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.cc-state.ring i { background:var(--blue); } .cc-state.ring { color:var(--blue); }
.cc-state.talk i { background:var(--amber); } .cc-state.talk { color:var(--amber); }
.cc-phone { font-size:24px; font-weight:650; letter-spacing:-.01em; margin-top:4px; white-space:nowrap; }
.cc-body { flex:1; overflow-y:auto; padding:14px 18px 20px; }
.cc-person h3 { font-size:20px; font-weight:650; letter-spacing:-.01em; line-height:1.25; }
.cc-sub { color:var(--text-2); font-size:13px; margin-top:4px; line-height:1.5; }
.cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:16px 0 18px; padding:14px; border-radius:14px; background:var(--sunken); border:1px solid var(--line-soft); }
.cc-grid .wide { grid-column:1 / -1; }
.cc-grid dt { font-size:12px; color:var(--text-3); }
.cc-grid dd { font-size:14px; font-weight:550; margin-top:2px; word-break:break-word; }
.cc-grid dd.cc-big { font-size:18px; font-weight:650; }
.cc-person h4 { font-size:14px; font-weight:600; margin-bottom:8px; }
.cc-faint { color:var(--text-3); font-weight:400; font-size:12.5px; }
.cc-cases { list-style:none; display:flex; flex-direction:column; gap:8px; }
.cc-cases li { padding:10px 12px; border-radius:12px; border:1px solid var(--line-soft); background:var(--raised); }
.cc-case-h { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:13px; }
.cc-case-h span { color:var(--text-2); }
.cc-case-t { font-size:12.5px; color:var(--text-2); margin-top:4px; line-height:1.5; }
.cc-tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; }
.cc-tabs button { border:1px solid var(--line); background:var(--surface); color:var(--text-2); border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer; }
.cc-tabs button.on { background:var(--text); color:var(--bg); border-color:var(--text); }
.cc-hint { margin-bottom:12px; }
.cc-hosp { display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:14px; background:var(--blue-soft); margin-bottom:14px; }
.cc-hosp b { font-size:16px; }
.cc-note { padding:10px 12px; border-radius:12px; background:var(--amber-soft); color:var(--amber); font-size:12.5px; margin-bottom:12px; }
.cc-empty { padding:28px 10px; text-align:center; color:var(--text-2); line-height:1.6; }
.cc-empty b { font-size:17px; color:var(--text); }
html.cc-open .main { padding-right:470px; }
@media (max-width:1200px) { html.cc-open .main { padding-right:24px; } }
@media (max-width:760px) {
  .cc { top:auto; left:8px; right:8px; bottom:84px; width:auto; max-height:72vh; border-radius:20px; }
  html.cc-open .main { padding-right:14px; }
}

/* client-card-calls: звонки и записи в карточке */
.cc-calls { list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.cc-calls li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--line-soft); background:var(--raised); flex-wrap:wrap; }
.cc-calls .dir { width:26px; height:26px; border-radius:8px; font-size:13px; }
.cc-calls .cc-cl { flex:1; min-width:120px; font-size:12.5px; line-height:1.35; }
.cc-calls .cc-cl b { display:block; font-size:13px; font-weight:600; }
.cc-calls audio { width:100%; height:30px; }
.cc-watch { font-size:11.5px; color:var(--violet); margin-left:8px; }
.cc-more { display:flex; gap:6px; flex-wrap:wrap; margin:0 18px; padding:8px 0 0; }
.cc-more button { border:1px solid var(--line); background:var(--surface); color:var(--text-2); border-radius:999px; padding:4px 10px; font-size:12px; cursor:pointer; }
.cc-more button.on { background:var(--violet-soft); color:var(--text); border-color:var(--violet-ring); }
.cc-top { flex-shrink:0; }

/* client-card-modal: карточка во всплывающем окне по центру */
.cc-bg { position:fixed; inset:0; z-index:94; background:rgba(5,6,18,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.cc-bg[hidden] { display:none !important; }
.cc { top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); z-index:95;
  width:min(1060px, calc(100vw - 32px)); max-width:none; max-height:min(880px, calc(100vh - 32px)); border-radius:24px; }
html.cc-open .main, html.cc-open body .main { padding-right:24px; }
@media (min-width:1680px) { html.cc-open .main { padding-right:24px; } }
.cc-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-content:start; padding:16px 22px 22px; }
.cc-body > * { grid-column:1 / -1; }
.cc-body > .cc-person { grid-column:1; grid-row:span 2; }
.cc-body > .cc-side, .cc-body > .cc-callsw { grid-column:2; }
.cc-body > .cc-callsw.full { grid-column:1 / -1; }
.cc-side h4 { margin-top:2px; }
.cc-person .cc-grid { margin-bottom:0; }
.cc-head { padding:20px 22px 16px; }
.cc-more { margin:0 22px; }
@media (max-width:900px) {
  .cc-body { grid-template-columns:minmax(0,1fr); }
  .cc-body > * { grid-column:1 / -1 !important; grid-row:auto !important; }
  .cc-person .cc-grid { margin-bottom:18px; }
}
@media (max-width:760px) {
  .cc { top:auto; left:8px; right:8px; bottom:84px; transform:none; width:auto; max-height:78vh; border-radius:20px; }
  html.cc-open .main { padding-right:14px; }
}

/* role-operator: оператор видит только «Клиенты» и карточку звонка */
.role-operator .nav a:not([href="/customers"]), .role-operator .nav-sep, .role-operator .live-chip { display:none !important; }
.role-operator .tabbar { grid-template-columns:1fr; }
.role-operator .tabbar a { display:none !important; }
.role-operator .sheet a:not([href="/customers"]):not([href="/logout"]) { display:none !important; }

/* watch-toggle: кнопка «Карточки звонков» */
.js-watch { position:relative; }
.js-watch.on { color:var(--coral); border-color:rgba(255,122,89,.5); background:var(--coral-soft); }
.js-watch:not(.on)::after { content:""; position:absolute; left:9px; right:9px; top:50%; height:2px; border-radius:2px; background:currentColor; transform:rotate(-40deg); }
.cc-toast { position:fixed; left:50%; top:18px; transform:translateX(-50%); z-index:120; padding:10px 16px; border-radius:12px;
  background:var(--raised); border:1px solid var(--line); color:var(--text); font-size:13.5px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transition:opacity .3s; }