/* Кабінет розсилок — оформлення.
   Світла й темна теми через prefers-color-scheme, без збірки і без залежностей.

   Макет: бічне меню зліва, робоча область справа. Вкладки зверху були схожі на
   налаштування програми; бічне меню читається як розділи продукту, і в ньому
   видно лічильник непрочитаних, не зазираючи всередину. */

:root{
  --paper:#f2f4f6;
  --surface:#ffffff;
  --sunken:#f6f7f9;
  --ink:#141a20;
  --ink-soft:#586472;
  --ink-faint:#8b96a3;
  --line:#dde2e8;
  --line-soft:#e9edf1;
  --accent:#1f6f6b;
  --accent-ink:#ffffff;
  --accent-soft:#dceceb;
  --ok:#2c6e42;
  --ok-soft:#dcebe1;
  --warn:#8a6412;
  --warn-soft:#f5ead3;
  --hot:#b5601c;
  --hot-soft:#fae6d6;
  --stop:#9e3b31;
  --stop-soft:#f7e0dd;
  --side:#18212a;
  --side-ink:#c9d4de;
  --side-ink-soft:#7f8d9c;
  --side-active:#22303c;
  --shadow:0 1px 2px rgba(18,24,31,.06), 0 6px 20px rgba(18,24,31,.06);
  --radius:10px;
  --radius-sm:7px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1419;
    --surface:#171e25;
    --sunken:#131920;
    --ink:#e6ecf2;
    --ink-soft:#a3b0bd;
    --ink-faint:#6f7d8b;
    --line:#26313c;
    --line-soft:#1f2831;
    --accent:#4fb3ab;
    --accent-ink:#06211f;
    --accent-soft:#16312f;
    --ok:#6cc08a;
    --ok-soft:#142a1d;
    --warn:#d7ab54;
    --warn-soft:#2c2415;
    --hot:#e0914f;
    --hot-soft:#31220f;
    --stop:#e3796c;
    --stop-soft:#31191a;
    --side:#111820;
    --side-ink:#b9c6d2;
    --side-ink-soft:#6c7a88;
    --side-active:#1c2731;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box;}

/* Атрибут hidden ховає елемент через display:none з таблиці стилів браузера,
   а вона слабша за будь-яке наше правило. Тому .modal{display:flex} робив
   прихований елемент видимим - порожнє вікно поверх усього екрана. Це
   правило повертає hidden силу для всіх елементів одразу. */
[hidden]{display:none !important;}

html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14.5px/1.5 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;}
h1{font-size:23px;}
h2{font-size:20px;}
h3{font-size:16px;}
p{margin:0;}

.muted{color:var(--ink-soft);}
.hint{color:var(--ink-soft);font-size:13.5px;line-height:1.55;}
code{
  background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:5px;padding:1px 5px;font-size:12.5px;
}

/* ------------------------------ вхід ------------------------------ */

.login{
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;
}
.login-card{
  width:100%;max-width:360px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:28px 26px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.login-mark{font-size:34px;text-align:center;margin-bottom:4px;}
.login-card h1{text-align:center;margin-bottom:16px;font-size:21px;}
.login-card label{font-size:12.5px;color:var(--ink-soft);margin-top:8px;}
.login-card .btn{margin-top:18px;width:100%;justify-content:center;padding:11px;}
.error{
  background:var(--stop-soft);color:var(--stop);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:13.5px;margin-top:12px;
}

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

#app{display:flex;min-height:100vh;}

.side{
  flex:0 0 232px;background:var(--side);color:var(--side-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.side .brand{
  display:flex;align-items:center;gap:9px;
  padding:19px 20px 16px;font-weight:650;font-size:15.5px;color:#fff;
}
.side .brand .mark{font-size:19px;}

.nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1;}
.nav button{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-radius:var(--radius-sm);
  padding:9px 11px;color:var(--side-ink);font:inherit;font-size:14px;
  cursor:pointer;text-align:left;
}
.nav button:hover{background:var(--side-active);}
.nav button.active{background:var(--side-active);color:#fff;font-weight:600;}
.nav button .ico{width:18px;text-align:center;font-size:15px;opacity:.9;}
.nav button .grow{flex:1;}

.side .who{
  border-top:1px solid rgba(255,255,255,.07);padding:13px 16px;
  display:flex;flex-direction:column;gap:7px;font-size:12.5px;
}
.side .who .email{color:var(--side-ink);overflow:hidden;text-overflow:ellipsis;}
.side .who .role{color:var(--side-ink-soft);text-transform:uppercase;
  letter-spacing:.06em;font-size:10.5px;}
.side .who .row{display:flex;gap:6px;}
.side .who .btn{
  background:transparent;border-color:rgba(255,255,255,.16);color:var(--side-ink);
  padding:5px 9px;font-size:12.5px;
}
.side .who .btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);}

.work{flex:1;min-width:0;display:flex;flex-direction:column;}
#screens{padding:22px 26px 40px;flex:1;min-width:0;}

.badge{
  display:inline-block;min-width:19px;padding:1px 6px;
  border-radius:9px;background:var(--stop);color:#fff;
  font-size:11px;font-weight:700;line-height:17px;text-align:center;
}

/* ------------------------------ шапка екрана ------------------------------ */

.screen-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.screen-head .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.screen-head .sub{color:var(--ink-soft);font-size:13.5px;margin-top:3px;}

/* ------------------------------ кнопки ------------------------------ */

.btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 13px;font:inherit;font-size:13.5px;cursor:pointer;
  white-space:nowrap;transition:background .12s, border-color .12s;
}
.btn:hover{border-color:var(--ink-faint);}
.btn:disabled{opacity:.5;cursor:default;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.danger{color:var(--stop);border-color:var(--line);}
.btn.danger:hover{background:var(--stop-soft);border-color:var(--stop);}
.btn.ghost{background:transparent;}
.btn.small{padding:5px 9px;font-size:12.5px;}
.btn.big{padding:11px 18px;font-size:15px;}

/* ------------------------------ поля ------------------------------ */

input,select,textarea{
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:8px 11px;font:inherit;font-size:13.5px;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical;min-height:72px;line-height:1.5;}
label{font-size:12.5px;color:var(--ink-soft);}

.filters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;
}
.filters select,.filters input{width:auto;min-width:150px;flex:0 1 auto;}
.filters label.inline{
  flex:0 0 auto;gap:6px;min-width:0;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:7px 11px;font-size:13.5px;color:var(--ink);
}
.filters label.inline input[type=checkbox]{
  flex:0 0 auto;width:15px;height:15px;min-width:0;margin:0;
}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.inline input{width:auto;flex:1 1 200px;}
.inline input[type=color]{flex:0 0 46px;padding:3px;}
.inline input[type=checkbox]{width:auto;flex:0 0 auto;}

/* ------------------------------ панелі й картки ------------------------------ */

.panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;
}
.panel h3{margin-bottom:9px;}

/* Заголовок блока з кнопкою праворуч: «Вимкнути» стоїть біля назви кроку,
   а не десь унизу - інакше незрозуміло, що саме вимикається. */
.panel-head{display:flex;gap:10px;align-items:baseline;justify-content:space-between;}
.panel-head h3{margin-bottom:0;}
.muted-panel{opacity:.62;}
.row .grow{flex:1 1 260px;width:auto;}
.row label.muted{align-self:center;white-space:nowrap;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;
}
.card .n{display:block;font-size:24px;font-weight:680;letter-spacing:-.02em;line-height:1.15;}
.card .k{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}
.card .sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px;}
.card.ok .n{color:var(--ok);}
.card.warn .n{color:var(--warn);}
.card.stop .n{color:var(--stop);}

.empty{
  color:var(--ink-soft);text-align:center;padding:30px 16px;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface);
}

/* ------------------------------ чипи ------------------------------ */

.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--sunken);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;font-size:12px;color:var(--ink-soft);
  white-space:nowrap;
}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent;}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent;}
.chip.hot{background:var(--hot-soft);color:var(--hot);border-color:transparent;}
.chip.stop{background:var(--stop-soft);color:var(--stop);border-color:transparent;}
.chip.accent{background:var(--accent-soft);color:var(--accent);border-color:transparent;}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.chips .chip{font-size:12.5px;padding:4px 10px;}
.chips .chip button{
  background:none;border:0;color:inherit;cursor:pointer;padding:0;
  font-size:14px;line-height:1;opacity:.55;
}
.chips .chip button:hover{opacity:1;}

/* ------------------------------ таблиці ------------------------------ */

.tablewrap{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:auto;
}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line-soft);}
th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-faint);font-weight:600;background:var(--sunken);
  position:sticky;top:0;
}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--sunken);}
td.pick,th.pick{width:34px;}
td.pick input,th.pick input{width:auto;}

.bulkbar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:var(--radius);padding:9px 13px;margin-bottom:12px;font-size:13.5px;
}
.pager{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;}

/* ------------------------------ стартовий екран ------------------------------ */

.step{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:9px;
}
.step .mark{
  flex:0 0 27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  background:var(--sunken);color:var(--ink-faint);border:1px solid var(--line);
}
.step.done .mark{background:var(--ok);color:#fff;border-color:transparent;}
.step.now{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.step.now .mark{background:var(--accent);color:var(--accent-ink);border-color:transparent;}
.step .body{flex:1;min-width:0;}
.step .title{font-weight:600;font-size:15px;}
.step .why{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}
.step .go{margin-top:9px;}
.step.done .title{color:var(--ink-soft);}

/* ------------------------------ акаунти ------------------------------ */

.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;}
.acc{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:15px 16px;
  display:flex;flex-direction:column;gap:11px;
}
.acc.off{border-color:var(--stop);}
.acc .top{display:flex;align-items:center;gap:11px;}
.acc .avatar{
  flex:0 0 40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:650;font-size:14px;color:#fff;background:var(--accent);
}
.acc .who{flex:1;min-width:0;}
.acc .name{font-weight:600;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc .phone{font-size:12.5px;color:var(--ink-soft);}
.acc .meters{display:flex;gap:16px;font-size:12.5px;color:var(--ink-soft);}
.acc .meters b{display:block;color:var(--ink);font-size:15px;font-weight:650;}
.acc .err{
  background:var(--stop-soft);color:var(--stop);border-radius:var(--radius-sm);
  padding:7px 10px;font-size:12.5px;
}
.acc .actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ------------------------------ кампанії ------------------------------ */

.split{display:grid;grid-template-columns:282px 1fr;gap:16px;align-items:start;}
.list{display:flex;flex-direction:column;gap:6px;}
.list .item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 13px;cursor:pointer;display:flex;flex-direction:column;gap:5px;
}
.list .item:hover{border-color:var(--ink-faint);}
.list .item.active{border-color:var(--accent);background:var(--accent-soft);}
.list .item .name{font-weight:600;font-size:14px;}
.detail{display:flex;flex-direction:column;gap:14px;min-width:0;}

.tpl{
  background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:11px 13px;
  display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;
}
.tpl .text{flex:1;white-space:pre-wrap;font-size:13.5px;min-width:0;word-break:break-word;}
.tpl.off .text{opacity:.5;text-decoration:line-through;}
.tpl .actions{display:flex;gap:6px;flex-wrap:wrap;}
.steps{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}

/* ------------------------------ вхідні: як у Telegram ------------------------------ */

.stagebar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.stagebar button{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);
  display:flex;gap:7px;align-items:center;
}
.stagebar button:hover{border-color:var(--ink-faint);}
.stagebar button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;}
.stagebar button .n{font-weight:700;opacity:.7;}
.stagebar button.on .n{opacity:1;}

/* Акаунти — квадратніші за етапи, щоб два ряди кнопок не зливалися в один. */
.accountbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:10px;}
.accountbar .lbl{font-size:13px;color:var(--ink-soft);margin-right:2px;}
.accountbar button{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);
  display:flex;gap:7px;align-items:center;max-width:260px;
}
.accountbar button:hover{border-color:var(--ink-faint);}
.accountbar button.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600;}
.accountbar button.off .acct-name{text-decoration:line-through;opacity:.7;}
.accountbar .acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.accountbar .n{font-weight:700;opacity:.7;}
.accountbar .wait{
  background:var(--warn-soft);color:var(--warn);border-radius:999px;
  padding:0 7px;font-size:11.5px;font-weight:700;
}
.screen:has(#accountbar:not([hidden])) .messenger{height:calc(100vh - 292px);height:calc(100dvh - 292px);}
#receiver-status.warn{color:var(--warn);font-weight:600;}

/* Два стовпці на всю висоту: ліворуч чати, праворуч переписка. Саме так
   виглядає месенджер, і саме цього чекає людина, яка бачить список діалогів. */
.messenger{
  display:grid;grid-template-columns:330px minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;height:calc(100vh - 250px);min-height:440px;
  height:calc(100dvh - 250px);
}
.chatlist{min-width:0;min-height:0;border-right:1px solid var(--line);overflow-y:auto;background:var(--sunken);}
.chatlist .empty{border:0;background:none;}

.chat-item{
  display:flex;gap:11px;padding:11px 13px;cursor:pointer;
  border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;
}
.chat-item:hover{background:var(--surface);}
.chat-item.active{background:var(--surface);border-left-color:var(--accent);}
.chat-item.u-ok{border-left-color:var(--ok);}
.chat-item.u-warn{border-left-color:var(--warn);}
.chat-item.u-hot{border-left-color:var(--hot);}
.chat-item.u-late{border-left-color:var(--stop);}
.chat-item .avatar{
  flex:0 0 42px;align-self:flex-start;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:650;font-size:15px;
}
.chat-item .mid{flex:1;min-width:0;}
.chat-item .line{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.chat-item .name{font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-item .when{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;}
.chat-item .line{flex-wrap:wrap;gap:2px 8px;}
.chat-item .name{flex:1 1 110px;}
.chat-item .when{font-variant-numeric:tabular-nums;}
.chat-item .preview{
  font-size:13px;color:var(--ink-soft);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chat-item .preview .pre{color:var(--ink-faint);}
.chat-item .tags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;}
.chat-item .unread{
  align-self:center;flex:0 0 auto;
  background:var(--accent);color:var(--accent-ink);border-radius:999px;
  min-width:21px;height:21px;padding:0 6px;font-size:11px;font-weight:700;
  line-height:21px;text-align:center;
}

.chatpane{display:flex;flex-direction:column;min-width:0;min-height:0;}
.chatpane > .empty{
  flex:1;border:0;background:none;display:flex;
  align-items:center;justify-content:center;
}
.chat-head{
  display:flex;align-items:center;gap:11px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;flex-shrink:0;
}
.chat-head .avatar{
  flex:0 0 38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:650;font-size:14px;
}
.chat-head .who{flex:1;min-width:0;}
.chat-head .name{font-weight:650;font-size:15px;}
.chat-head .meta{font-size:12.5px;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-head .actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.chat-head select{width:auto;min-width:132px;}

.thread{
  flex:1;min-height:0;overflow-y:auto;padding:16px;background:var(--sunken);
  display:flex;flex-direction:column;gap:7px;
}
.thread > *{flex-shrink:0;}
.daysep{
  align-self:center;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:2px 11px;font-size:11.5px;color:var(--ink-soft);
  margin:6px 0;
}
.bubble{
  max-width:min(74%, 540px);padding:8px 12px 6px;border-radius:14px;font-size:14px;
  white-space:pre-wrap;word-break:break-word;line-height:1.45;
  box-shadow:0 1px 1px rgba(18,24,31,.05);
}
.bubble.in{align-self:flex-start;background:var(--surface);border-bottom-left-radius:5px;}
.bubble.out{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:5px;}
.bubble .meta{
  display:block;margin-top:3px;font-size:11px;color:var(--ink-faint);text-align:right;
}
.bubble.in .meta{text-align:left;}
.bubble .who{font-size:11.5px;font-weight:650;color:var(--accent);margin-bottom:2px;}
.bubble.selected{outline:2px solid var(--accent);outline-offset:2px;}
.message-text{display:block;user-select:text;}
.message-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px;margin-top:5px;white-space:normal;}
.message-footer .meta{margin:0;font-variant-numeric:tabular-nums;}
.message-edit,.message-delete{font:inherit;font-size:11px;background:none;border:0;padding:3px 0;cursor:pointer;color:var(--accent);}
.message-delete{color:var(--stop);}
.message-edit:hover,.message-delete:hover{text-decoration:underline;}
.message-edit:disabled,.message-delete:disabled{opacity:.5;cursor:wait;}
.message-check{float:left;accent-color:var(--accent);width:18px;height:18px;margin:0 8px 5px 0;cursor:pointer;}
.selection-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--accent-soft);font-size:13px;}
.confirm-preview{margin:8px 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--sunken);white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto;}
.message-edit-text{width:100%;resize:vertical;}
.import-report{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--sunken);}
.import-report h4{margin:0 0 10px;}

.chat-compose{flex-shrink:0;background:var(--surface);border-top:1px solid var(--line);}
.reply-tools{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px 0;}
.reply-tools .btn{white-space:normal;text-align:left;}
.chat-compose .replybox{border-top:0;}
.replybox{
  display:flex;gap:9px;align-items:flex-end;padding:12px 16px;flex-shrink:0;
  border-top:1px solid var(--line);background:var(--surface);
}
.replybox textarea{flex:1;min-width:0;min-height:44px;max-height:150px;border-radius:12px;}

/* ------------------------------ правила ------------------------------ */

.rule-form{display:flex;flex-direction:column;gap:9px;}
.rule{
  background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:12px 14px;margin-top:9px;
}
.rule .head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap;}
.rule .head .actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.rule .words{font-size:13px;color:var(--ink-soft);margin-top:5px;}
.rule .answers{font-size:13px;white-space:pre-wrap;margin-top:7px;}
.rule.off{opacity:.55;}

/* ------------------------------ попередження ------------------------------ */

#setup-warnings{display:flex;flex-direction:column;gap:8px;padding:16px 26px 0;}
#setup-warnings:empty{display:none;}
.warnbar{
  border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;
  border:1px solid transparent;
}
.warnbar.danger{background:var(--stop-soft);color:var(--stop);border-color:var(--stop);}
.warnbar.warn{background:var(--warn-soft);color:var(--warn);}

/* ------------------------------ графік ------------------------------ */

#chart{width:100%;overflow-x:auto;}
#chart svg{display:block;min-width:520px;}

/* ------------------------------ вікно ------------------------------ */

.modal{
  position:fixed;inset:0;background:rgba(12,17,22,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  width:100%;max-width:520px;max-height:88vh;overflow:auto;box-shadow:var(--shadow);
}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--line-soft);
}
.modal-head h3{font-size:16px;}
.modal-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;}
.modal-body label{margin-top:6px;}

/* ------------------------------ сповіщення ------------------------------ */

#toasts{
  position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;
  gap:8px;z-index:60;max-width:360px;
}
.toast{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-faint);
  border-radius:var(--radius-sm);padding:10px 14px;font-size:13.5px;box-shadow:var(--shadow);
}
.toast.ok,.toast.good{border-left-color:var(--ok);}
.toast.bad{border-left-color:var(--stop);}

/* ------------------------------ вузький екран ------------------------------ */

@media (max-width:1000px){
  .messenger{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;}
  .chatlist{max-height:330px;border-right:0;border-bottom:1px solid var(--line);}
  .chatpane{height:70vh;height:70dvh;min-height:440px;}
  .split{grid-template-columns:1fr;}
}

@media (max-width:760px){
  #app{flex-direction:column;}
  .side{flex:none;height:auto;position:static;}
  .nav{flex-direction:row;overflow-x:auto;padding:4px 8px 8px;}
  .nav button{white-space:nowrap;}
  .nav button .grow{display:none;}
  .side .who{flex-direction:row;align-items:center;justify-content:space-between;}
  #screens{padding:16px;}
  #setup-warnings{padding:12px 16px 0;}
}


/* ---------- немає звʼязку з програмою ---------- */
.offline{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--stop);color:#fff;border-radius:var(--radius);
  padding:14px 20px;max-width:540px;z-index:80;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.offline .t{font-weight:650;font-size:15px;margin-bottom:4px;}
.offline .w{font-size:13.5px;opacity:.92;line-height:1.5;}

.offline.crash{background:#7a2b23;}
.offline.crash .w{word-break:break-word;}