:root {
  --paper: #EAF2F3; --card: #FFFFFF; --ink: #12383F; --dim: #5E7A80;
  --rule: #CBDDE0; --brand: #0A7C8E; --brand-deep: #0A5B69; --brand-soft: #DCEDF0;
  --accent: #F0973B; --ok: #2E7D4F; --err: #B3372B; --warn: #B87400;
  --r-card: 12px; --r-ctl: 9px;
  --shadow: 0 2px 10px rgba(10,91,105,.08);
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--paper); color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, sans-serif; min-height: 100vh; }
a { color: var(--brand); }
.stamp { display: inline-block; font: 600 10px/1 "Segoe UI", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px;
  border-radius: 999px; white-space: nowrap; color: #fff; }
.st-ok { background: var(--ok); } .st-err { background: var(--err); }
.st-warn { background: var(--warn); }
.st-idle { background: transparent; color: var(--dim); border: 1.5px solid var(--rule); }
.st-proc { background: var(--brand); }
/* --- каркас --- */
.shell { display: flex; min-height: 100vh; }
nav { width: 240px; flex-shrink: 0; padding: 28px 0;
  background: linear-gradient(180deg, var(--brand-deep), var(--brand)); color: #fff; }
nav .brand { font-family: Georgia, serif; font-size: 19px; padding: 0 24px 20px;
  margin: 0 12px; border-bottom: 2px solid var(--accent); }
nav .brand small { display: block; color: #BFE0E6; font: 11px "Segoe UI", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
nav a { display: block; margin: 2px 12px; padding: 10px 18px; color: #E4F2F4;
  text-decoration: none; border-radius: var(--r-ctl); }
nav a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
nav a:hover { background: rgba(255,255,255,.08); }
nav a.soon { color: #9CC7CE; }
nav a.soon::after { content: "скоро"; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; margin-left: 8px; border: 1px solid #9CC7CE;
  border-radius: 999px; padding: 1px 7px; }
nav a .n { display: inline-block; min-width: 21px; text-align: center; margin-left: 6px;
  font: 600 11px/1.6 "Segoe UI", sans-serif; background: var(--accent); color: #12383F;
  border-radius: 999px; padding: 0 6px; }
main { flex: 1; padding: 24px 40px 60px; max-width: 1100px; position: relative; }
h1 { font-family: Georgia, serif; font-size: 25px; font-weight: 400;
  color: var(--brand-deep); margin-bottom: 2px; }
.sub { color: var(--dim); margin-bottom: 16px; font-size: 12px; }
h2 { font-family: Georgia, serif; font-size: 18px; font-weight: 400;
  color: var(--brand-deep); margin: 24px 0 10px; padding-left: 10px;
  border-left: 4px solid var(--accent); border-radius: 2px; }
.reg-line { background: var(--brand-soft); border: 1px solid var(--rule);
  border-left: 4px solid var(--brand); padding: 12px 16px; }
/* --- дашборд --- */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px; }
.tile { background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 12px 15px; min-height: 78px; }
.tile.warn { border: 1.5px solid var(--warn); }
.tile small { display: block; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.tile-num { font-family: Consolas, monospace; font-size: 27px; line-height: 1.1;
  color: var(--brand-deep); font-weight: 700; }
.tile-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px;
  font-size: 14px; flex-wrap: wrap; }
.tile-void { color: var(--dim); font-size: 12px; }
.tile-break { color: var(--dim); font-size: 12px; margin-top: 2px; }
.tile-act { display: flex; align-items: center; justify-content: center; }
.tile-act button { padding: 10px 18px; font: 600 13px "Segoe UI", sans-serif;
  color: #fff; background: var(--brand); border: none; border-radius: 999px;
  cursor: pointer; width: 100%; }
.tile-act button:hover { background: var(--brand-deep); }
.note-ok { color: var(--ok); border: 1px solid var(--ok); border-radius: var(--r-ctl);
  padding: 8px 12px; margin-top: 10px; background: var(--card); }
.topbar { position: absolute; top: 20px; right: 40px; z-index: 5;
  display: flex; align-items: center; gap: 10px; }
.userbox { position: relative; }
.userchip { display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 14px 5px 6px; box-shadow: var(--shadow); }
.userchip:hover { border-color: var(--brand); }
.ava { width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--brand-deep), var(--brand)); color: #fff;
  font: 600 13px/34px "Segoe UI", sans-serif; text-align: center; letter-spacing: .02em; }
.userchip .uname { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.userchip .urole { font-size: 11px; color: var(--dim); line-height: 1.2; }
.userchip .chev { color: var(--dim); font-size: 24px; margin-left: 2px; }
.usermenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: 0 6px 24px rgba(10,91,105,.18); padding: 6px; }
.usermenu a { display: block; padding: 9px 14px; border-radius: var(--r-ctl);
  color: var(--ink); text-decoration: none; font-size: 14px; }
.usermenu a:hover { background: var(--brand-soft); }
.usermenu a.exit-item { color: var(--err); }
/* Выход — форма с POST, а не ссылка: GET /logout разлогинивал бы жертву
   с чужой страницы (аудит 2026-08-13, находка L1). Кнопка стилизуется
   под остальные пункты меню, вид не меняется. */
.usermenu .exit-form { margin: 0; }
.usermenu button.exit-item { display: block; width: 100%; text-align: left;
  background: none; border: 0; font: inherit; color: var(--err);
  padding: 9px 14px; cursor: pointer; }
.usermenu button.exit-item:hover { background: var(--bg-soft, rgba(0,0,0,.05)); }
.usermenu hr { border: none; border-top: 1px solid var(--paper); margin: 5px 8px; }
/* --- кнопка «?» в шапке: публичная инструкция по роли, в новой вкладке --- */
.help-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  color: var(--brand-deep); display: flex; align-items: center; justify-content: center;
  text-decoration: none; flex-shrink: 0; }
.help-btn:hover { border-color: var(--brand); }
.help-btn svg { width: 19px; height: 19px; display: block; }
/* --- лента «Что нового»: колокольчик + шторка справа --- */
.bell-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow); cursor: pointer; position: relative;
  color: var(--brand-deep); display: flex; align-items: center; justify-content: center; }
.bell-btn:hover { border-color: var(--brand); }
.bell-btn svg { width: 19px; height: 19px; display: block; }
.bell-dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--card); }
.feed-backdrop { position: fixed; inset: 0; background: rgba(18,56,63,.35); z-index: 19;
  display: none; }
.feed-backdrop.open { display: block; }
.feed-drawer { position: fixed; top: 0; right: -400px; width: 380px; max-width: calc(100vw - 20px);
  height: 100vh; background: var(--card); box-shadow: -6px 0 24px rgba(10,56,63,.18); z-index: 20;
  display: flex; flex-direction: column; transition: right .2s; }
.feed-drawer.open { right: 0; }
.feed-hdr { padding: 20px 44px 16px 22px; border-bottom: 1px solid var(--paper); position: relative; }
.feed-hdr h3 { font-family: Georgia, serif; font-size: 18px; font-weight: 400; color: var(--brand-deep); }
.feed-hdr p { font-size: 12px; color: var(--dim); margin-top: 3px; }
.feed-x { position: absolute; top: 16px; right: 16px; border: none; background: none;
  font-size: 22px; color: var(--dim); cursor: pointer; line-height: 1; }
.feed-x:hover { color: var(--ink); }
.feed-body { padding: 8px 0; overflow-y: auto; flex: 1; }
.feed-item { padding: 15px 22px; border-bottom: 1px solid var(--paper); position: relative; }
.feed-item:last-child { border-bottom: none; }
.feed-item.unread { background: var(--brand-soft); }
.feed-item .date { font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.feed-item .title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.feed-item .body { font-size: 13px; color: var(--dim); line-height: 1.5; }
.feed-ftr { padding: 12px 22px; text-align: center; font-size: 11.5px; color: var(--dim);
  border-top: 1px solid var(--paper); }
.feed-empty { padding: 30px 22px; text-align: center; color: var(--dim); font-size: 13px; }
/* --- баннер имперсонации --- */
.imp-banner { background: var(--accent); color: #12383F; border-radius: var(--r-ctl);
  padding: 10px 16px; margin-bottom: 14px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; font-size: 13px; }
.imp-banner form { display: inline; }
.imp-banner button { padding: 5px 14px; font: 600 12px "Segoe UI", sans-serif;
  color: #fff; background: #12383F; border: none; border-radius: 999px; cursor: pointer; }
.imp-banner button:hover { background: #0A5B69; }
/* --- вкладки --- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { padding: 8px 18px; font: 600 13px "Segoe UI", sans-serif; cursor: pointer;
  color: var(--brand-deep); background: transparent;
  border: 1.5px solid var(--rule); border-radius: 999px; }
.tabs button:hover { border-color: var(--brand); }
.tabs button[aria-selected="true"] { background: var(--brand); border-color: var(--brand);
  color: #fff; }
.tabs .n { display: inline-block; min-width: 20px; text-align: center; margin-left: 6px;
  font: 600 11px/1.6 "Segoe UI", sans-serif; background: var(--accent); color: var(--ink);
  border-radius: 999px; padding: 0 6px; }
/* --- промпт и песочница --- */
.prompt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px) { .prompt-grid { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 16px 18px; }
.pane-cap { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 7px; }
textarea.prompt { width: 100%; min-height: 300px; font: 13.5px/1.5 Consolas, monospace; resize: vertical;
  padding: 8px 12px; color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-ctl);
  background: var(--card); }
.sandbox-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.filebox { border: 1.5px dashed var(--rule); border-radius: 999px; padding: 8px 18px;
  font-size: 13px; color: var(--dim); cursor: pointer; background: var(--card); display: inline-block; }
.filebox:hover { border-color: var(--brand); color: var(--brand); }
.spin { color: var(--dim); font-size: 13px; display: none; }
button.act { padding: 9px 18px; font: 600 13px "Segoe UI", sans-serif;
  color: #fff; background: var(--brand); border: none; border-radius: 999px; cursor: pointer; }
button.act:hover { background: var(--brand-deep); }
.ghost { display: inline-block; background: transparent; color: var(--brand); border: 1.5px solid var(--rule);
  padding: 9px 18px; font: 600 13px "Segoe UI", sans-serif; border-radius: 999px; cursor: pointer;
  text-decoration: none; }
.ghost:hover { border-color: var(--brand); background: var(--brand-soft); }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.result { min-height: 300px; font-size: 14px; overflow: auto; background: var(--paper);
  border: 1px dashed var(--rule); border-radius: var(--r-ctl); padding: 14px 16px; }
.result h3 { font-weight: 600; font-size: 16px; color: var(--brand-deep); margin-bottom: 6px; }
.result ul { margin: 4px 0 10px 20px; }
.result .empty { color: var(--dim); font-size: 13px; text-align: left; padding: 0; }
/* --- доставка результата --- */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 760px; }
@media (max-width: 800px) { .choice { grid-template-columns: 1fr; } }
.choice label { display: block; cursor: pointer; background: var(--card);
  border: 1.5px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 14px 16px; }
.choice label.on { border-color: var(--brand); background: var(--brand-soft); }
.choice b { display: block; margin-bottom: 3px; }
.choice p { font-size: 13px; color: var(--dim); margin-top: 3px; }
.choice input { margin-right: 8px; }
/* --- редактор правил публикации: правило — отдельная карточка,
   маршрут публикации внутри — хлебная крошка Инстанс › Коллекция › Раздел › Подраздел --- */
.rules { display: flex; flex-direction: column; gap: 8px; }
.rules .rule { position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-ctl); box-shadow: var(--shadow); padding: 10px 40px 10px 34px; }
.rules .rule.default { background: var(--paper); border-style: dashed; box-shadow: none; }
.rules .rule.dragging { opacity: 0.4; }
.rules .grip { position: absolute; left: 8px; top: 12px; color: var(--rule);
  cursor: grab; font-size: 15px; }
.rules .del { position: absolute; top: 6px; right: 6px; background: none; border: none;
  color: var(--err); cursor: pointer; font-size: 15px; border-radius: 999px;
  width: 24px; height: 24px; line-height: 1; }
.rules .del:hover { background: #F7E3E0; }
.rules .cond { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.rules .cond input[type=text] { padding: 6px 10px; font: 13px "Segoe UI", sans-serif;
  color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-ctl);
  background: var(--card); width: 160px; }
.rules .path { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; }
.rules .path select, .rules select { max-width: 190px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; appearance: none; -webkit-appearance: none; border: none;
  background: transparent; font: 600 13px "Segoe UI", sans-serif; color: var(--brand-deep);
  padding: 2px 3px; cursor: pointer; border-radius: 4px; }
.rules .path select:hover, .rules .path select:focus { background: var(--brand-soft); }
.rules .sep { color: var(--rule); font-size: 13px; }
/* --- поиск и пагинация --- */
.search { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.search input { flex: 0 1 320px; padding: 8px 14px; font: 14px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--card); }
.search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.search button { padding: 8px 18px; font: 600 13px "Segoe UI", sans-serif;
  color: #fff; background: var(--brand); border: none; border-radius: 999px; cursor: pointer; }
.search button:hover { background: var(--brand-deep); }
.pager { margin-top: 12px; display: flex; gap: 14px; align-items: center; font-size: 13px; }
.pg { color: var(--brand); text-decoration: none; font-weight: 600; }
.pg:hover { text-decoration: underline; }
.pg-cur { color: var(--dim); }
.pg-off { color: var(--rule); font-weight: 600; }
/* --- нераспределённые протоколы --- */
.pend { background: var(--card); border: 1px solid var(--rule);
  border-left: 4px solid var(--warn); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 15px 18px; margin-bottom: 10px; }
.pend-head { font-weight: 600; margin-bottom: 2px; }
.pend-meta { color: var(--dim); font-size: 13px; margin-bottom: 12px; }
.pend-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.cascade { display: contents; } /* уровни каскада — элементы того же flex-ряда */
.lvl { display: flex; flex-direction: column; gap: 3px; }
.addsec { font-size: 12px; color: var(--brand); cursor: pointer; user-select: none; }
.addsec:hover { text-decoration: underline; }
.addbox { display: flex; gap: 4px; }
.addbox input { padding: 5px 8px; font: 13px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--paper);
  min-width: 170px; }
.addbox button { padding: 5px 10px; font: 600 12px "Segoe UI", sans-serif;
  color: #fff; background: var(--brand); border: none; border-radius: 999px; cursor: pointer; }
.addbox button:hover { background: var(--brand-deep); }
/* --- новая учётная запись --- */
.req { color: #d33; margin-left: 2px; }
.new-account { margin-top: 10px; }
.new-account .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.new-account .field { display: flex; flex-direction: column; gap: 4px; }
.new-account .field label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); }
.new-account .field input, .new-account .field select {
  padding: 8px 12px; font: 14px "Segoe UI", sans-serif; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); }
.new-account .field--surname { flex: 1 1 130px; min-width: 110px; }
.new-account .field--first { flex: 1 1 120px; min-width: 100px; }
.new-account .field--email { flex: 1 1 210px; min-width: 190px; }
.new-account .field--position { flex: 1 1 160px; min-width: 140px; }
.new-account .field--dept { flex: 1 1 140px; min-width: 120px; }
.new-account .field--role { flex: 0 1 140px; min-width: 120px; }
.new-account button { margin-top: 14px; padding: 9px 20px; font: 600 13px "Segoe UI", sans-serif;
  color: #fff; background: var(--brand); border: none; border-radius: 999px;
  cursor: pointer; display: block; }
.new-account button:hover { background: var(--brand-deep); }
.new-account .hint { margin-top: 8px; }
.acc-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 14px;
  padding-top: 14px; border-top: 1px dashed var(--rule); color: var(--brand);
  font: 600 13px "Segoe UI", sans-serif; user-select: none; }
.acc-toggle:hover { color: var(--brand-deep); }
.acc-toggle .chev { display: inline-block; transition: transform .15s; font-size: 11px; }
.acc-toggle.open .chev { transform: rotate(90deg); }
.acc-body { display: none; margin-top: 14px; }
.acc-body.open { display: block; }
.pend select, .pend input[name=new_name] { padding: 8px 12px;
  font: 14px "Segoe UI", sans-serif; border: 1px solid var(--rule);
  border-radius: var(--r-ctl); background: var(--paper); min-width: 220px; }
.pend button { padding: 8px 18px; font: 600 13px "Segoe UI", sans-serif;
  color: #fff; background: var(--warn); border: none; border-radius: 999px; cursor: pointer; }
.pend button:hover { background: #A05F00; }
.route-err { color: var(--err); border: 1px solid var(--err); border-radius: var(--r-ctl);
  padding: 8px 12px; margin-bottom: 10px; background: var(--card); }
.pend-sync { color: var(--dim); font-size: 12px; margin: -4px 0 10px; }
.tablewrap { overflow-x: auto; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-deep); background: var(--brand-soft); font-weight: 600; padding: 10px 9px;
  border-bottom: 2px solid var(--rule); }
td { padding: 8px 9px; border-bottom: 1px solid var(--paper); vertical-align: top; }
tbody tr:hover { background: var(--brand-soft); }
tr:last-child td { border-bottom: none; }
.mono, .num { font-family: Consolas, monospace; font-size: 13px; white-space: nowrap; }
.num { text-align: center; }
.when2 { line-height: 1.45; }  /* «Дата обработки»: дата и время в две строки */
.who { font-size: 12.5px; color: var(--dim); max-width: 120px; }  /* организатор, участники */
.subjcol { max-width: 170px; word-break: break-word; }  /* тема письма */
.artcol { max-width: 160px; word-break: break-word; }  /* полный путь статьи, переносится по строкам */
.actcol { width: 90px; }
.move-link { display: block; margin-top: 4px; font-size: 11.5px; color: var(--dim);
  text-decoration: none; }
.move-link:hover { color: var(--brand); text-decoration: underline; }
.notes { font-size: 12px; color: var(--dim); max-width: 140px; }  /* прошлые попытки обработки */
.flinks { font: 12px "Segoe UI", sans-serif; text-align: left; white-space: normal;
  margin-top: 3px; }
.retry-mark { display: inline-block; margin-left: 6px; font: 600 10px/1 "Segoe UI", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px;
  border: 1.5px solid var(--accent); border-radius: 999px; color: var(--warn); }
.retry-form { display: inline; }
.retry-form button { padding: 5px 14px; font: 600 12px "Segoe UI", sans-serif;
  color: #fff; background: var(--warn); border: none; border-radius: 999px; cursor: pointer; }
.retry-form button:hover { background: #A05F00; }
.retry-form.icon-form button.icon-btn { display: inline-flex; align-items: center;
  justify-content: center; width: 30px; height: 30px; padding: 0; color: var(--brand);
  background: var(--brand-soft); border-radius: 50%; }
.retry-form.icon-form button.icon-btn:hover { color: #fff; background: var(--brand); }
/* --- кебаб-меню действий (Администрирование → Учётные записи) --- */
.kebab-wrap { position: relative; display: inline-block; }
.kebab-btn { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent;
  color: var(--dim); font-size: 18px; line-height: 1; cursor: pointer; }
.kebab-btn:hover { background: var(--brand-soft); color: var(--brand); }
/* position: fixed, а не absolute — таблицы живут в .tablewrap с
   overflow-x: auto, который клиппит абсолютное меню (и рисует лишний
   скроллбар), если строк мало. Координаты ставит placeKebab() в panel.js. */
.kebab-menu { display: none; position: fixed; left: 0; top: 0; min-width: 176px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-ctl);
  box-shadow: 0 6px 24px rgba(10,91,105,.18); padding: 5px; z-index: 60; text-align: left; }
.kebab-wrap.open .kebab-menu { display: block; }
.kebab-menu form { margin: 0; }
.kebab-menu button, .kebab-menu a { display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: none; background: none; font: 13px "Segoe UI", sans-serif; color: var(--ink);
  border-radius: 6px; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.kebab-menu button:hover, .kebab-menu a:hover { background: var(--brand-soft); }
.kebab-menu .hint { display: block; font-size: 11px; color: var(--dim); padding: 2px 10px 6px; }
.kebab-menu button.danger { color: var(--err); }
/* --- просмотр лога --- */
.lognav { margin-bottom: 12px; }
.logview { background: #10262B; color: #D8E8EB; font: 13px/1.5 Consolas, monospace;
  padding: 16px 18px; border-radius: var(--r-card); border-left: 4px solid var(--brand);
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.detail { color: var(--dim); font-size: 13px; }
.clip { cursor: pointer; border-bottom: 1px dotted var(--dim); }
.clip.open { white-space: normal; word-break: break-word; }
.dur { color: var(--dim); font-size: 12px; }
.lvl-loading { color: var(--dim); font-size: 13px; align-self: center; }
.add-err { color: var(--err); font-size: 12px; max-width: 260px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible,
.clip:focus-visible, .filebox:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button:disabled { opacity: .55; cursor: default; }
.empty { color: var(--dim); text-align: center; padding: 22px; }
footer { color: var(--dim); font-size: 12px; margin-top: 40px; }
/* --- страница входа --- */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 16px; }
.login { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 36px 40px; width: 340px; }
.login h1 { font-size: 20px; text-align: center; margin-bottom: 22px; }
.login label { display: block; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); margin: 14px 0 4px; }
.login label:first-of-type { margin-top: 0; }
.login input { width: 100%; padding: 9px 10px; font: 15px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--paper); color: var(--ink); }
.login input:focus { outline: 2px solid var(--brand); outline-offset: 0; background: var(--card); }
.login button { margin-top: 22px; width: 100%; padding: 10px;
  font: 600 15px "Segoe UI", sans-serif; color: #fff; background: var(--brand);
  border: none; border-radius: 999px; cursor: pointer; }
.login button:hover { background: #056375; }
.login .fail { margin-top: 14px; color: var(--err); font-size: 13px;
  border: 1px solid var(--err); border-radius: var(--r-ctl); padding: 8px 10px; }
.login .forgot { display: block; text-align: center; margin-top: 14px; font-size: 13px; }
.login .title-block { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule); }
.login .title-block .sub { text-align: center; margin: 0; line-height: 1.5; }
.login-wrap footer.copyright { margin-top: 28px; color: var(--dim); font-size: 12px; text-align: center; }
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  nav { width: 100%; border-right: none; border-bottom: 1px solid var(--rule); }
  .topbar { position: static; margin-bottom: 12px; justify-content: flex-end; }
}
/* --- редактирование учётной записи --- */
.edit-account { margin-bottom: 16px; }
.edit-account .hdr-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; }
.edit-account .hdr-row h2 { margin: 0; padding: 0; border: none; }
.edit-account .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.edit-account .field { display: flex; flex-direction: column; gap: 4px; }
.edit-account .field-full { grid-column: 1 / -1; }
.edit-account .field label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); }
.edit-account .field input, .edit-account .field select {
  padding: 9px 12px; font: 14px "Segoe UI", sans-serif; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); }
.edit-account .field input:focus, .edit-account .field select:focus {
  outline: none; border-color: var(--brand); }
.edit-account button.act { margin-top: 16px; }
/* --- .zone-row: строка «подпись слева, действие справа» в карточке --- */
/* используется и в /admin/user (edit-account), и в /admin → «Управление» */
.zone-row { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--paper); flex-wrap: wrap; }
.zone-row:last-child { border-bottom: none; }
.zone-row form { margin: 0; }
.zone-txt strong { display: block; font-size: 14px; }
button.warn-btn { padding: 8px 16px; font: 600 13px "Segoe UI", sans-serif; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--warn); color: var(--warn); background: var(--card); }
button.warn-btn:hover { background: var(--warn); color: #fff; }
.mgmt-action { display: flex; align-items: center; gap: 14px; }
.mgmt-last { text-align: right; line-height: 1.4; }
.mgmt-last .when { font-family: Consolas, monospace; font-size: 12.5px; color: var(--ink); }
button.err-btn { padding: 8px 16px; font: 600 13px "Segoe UI", sans-serif; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--err); color: var(--err); background: var(--card); }
button.err-btn:hover { background: var(--err); color: #fff; }
/* --- диалог «Изменить раздел» (журнал) --- */
dialog.move-dlg { border: none; border-radius: var(--r-card);
  box-shadow: 0 12px 40px rgba(10,56,63,.28); padding: 0; width: 560px;
  max-width: calc(100vw - 40px);
  position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
dialog.move-dlg::backdrop { background: rgba(18,56,63,.45); }
.dlg-hdr { padding: 18px 22px 14px; border-bottom: 1px solid var(--paper); }
.dlg-hdr h3 { font-family: Georgia, serif; font-size: 17px; font-weight: 400; color: var(--brand-deep); }
.dlg-hdr .file { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.dlg-body { padding: 16px 22px; }
.cur-loc { background: var(--paper); border-radius: var(--r-ctl); padding: 9px 12px;
  font-size: 12.5px; color: var(--dim); margin-bottom: 16px; }
.cur-loc b { color: var(--ink); }
.fld-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px; }
.dlg-ftr { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; }
/* строка списка обращений с непрочитанным ответом специалиста */
td .unread { font-size: 12px; font-weight: 600; color: var(--accent-deep, #B87400); }
/* ссылка-кнопка «Новое обращение» — акцентная, как в макете */
.act-link { display: inline-block; background: var(--brand); color: #fff;
  text-decoration: none; padding: 8px 17px; border-radius: 999px;
  font: 600 12.5px "Segoe UI", sans-serif; }
.act-link:hover { background: var(--brand-deep); color: #fff; }
/* --- диалог «Передать в поддержку»: состав пакета --- */
.sup-dlg { width: 520px; }
.sup-dlg .fld { width: 100%; border: 1px solid var(--rule); border-radius: var(--r-ctl);
  padding: 9px 12px; font: 13px "Segoe UI", sans-serif; background: var(--paper);
  color: var(--ink); margin-bottom: 16px; }
.pack { border: 1px solid var(--rule); border-radius: var(--r-ctl); overflow: hidden; }
.pack .pi { display: flex; gap: 10px; padding: 8px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--paper); }
.pack .pi:last-child { border-bottom: none; }
.pack .pi .k { color: var(--dim); flex: 0 0 150px; }
.pack .pi .v { flex: 1; overflow-wrap: anywhere; }
/* --- транскрибация: dropzone, строка загрузки, центрированный результат --- */
.dropzone { background: var(--card); border: 2px dashed var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 18px 20px; text-align: center; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  transition: border-color .15s, background .15s; }
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }
.dropzone .mic { font-size: 20px; }
.dropzone .dz-text { text-align: left; }
.dropzone h2 { font-family: Georgia, serif; font-size: 15px; font-weight: 400;
  color: var(--brand-deep); border: none; padding: 0; margin: 0; }
.dropzone p { color: var(--dim); font-size: 12px; margin: 0; }
.dropzone .fmt { font-size: 11px; color: var(--dim); }
.dropzone .dz-subject { padding: 8px 14px; font: 14px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  flex: 1 1 220px; min-width: 180px; }
.up-row { display: flex; align-items: center; gap: 14px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 12px 16px; margin-bottom: 22px; }
.up-row .fico { font-size: 20px; }
.up-row .fmeta { flex: 1; min-width: 0; }
.up-row .fname { font-weight: 600; font-size: 13.5px; }
.up-row .fsub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.bar { height: 6px; border-radius: 999px; background: var(--rule); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; background: var(--brand); border-radius: 999px;
  /* 0.25s, а не прежние 1.8s: полоса теперь отражает реальный прогресс
     отправки (события progress идут часто) — с длинной анимацией она
     отставала бы от цифр рядом */
  transition: width .25s linear; }
/* --- постановка расшифровки по ссылке (блок под дропзоной) ---
   Живёт вне live-зон: liveRefresh раз в 30 сек заменяет их innerHTML, и
   набранная ссылка исчезала бы прямо из-под курсора. */
.url-row { background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 14px 16px; margin: -10px 0 22px; }
.url-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.url-line input { flex: 1; min-width: 260px; padding: 9px 12px;
  font: 13.5px "Segoe UI", sans-serif; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--paper); color: inherit; }
.url-line input:focus { outline: none; border-color: var(--brand); }
.url-line button[disabled] { opacity: .6; cursor: default; }
.url-note { font-size: 11.5px; color: var(--dim); margin-top: 9px; line-height: 1.5; }
.url-disc { font-size: 11px; color: var(--dim); margin-top: 7px; line-height: 1.5;
  border-top: 1px solid var(--paper); padding-top: 7px; }
/* подпись источника под именем файла в таблице заданий */
td .fsub { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.rescol { text-align: center; white-space: nowrap; }
/* --- обработка расшифровки: DocX-бейдж в «Результат», кебаб «Действия» --- */
.proc-badge { margin-top: 5px; font-size: 12px; color: var(--dim); }
.proc-badge .pn { color: var(--brand-deep); font-weight: 600; }
.actcol2 { width: 44px; text-align: center; }
.kebab-menu .hint { display: block; font-size: 11px; color: var(--dim); padding: 2px 10px 6px; max-width: 220px; white-space: normal; }
/* --- боковая шторка библиотеки промптов --- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(18,56,63,.35); z-index: 19; }
.drawer { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh;
  background: var(--card); box-shadow: -6px 0 24px rgba(10,56,63,.18); z-index: 20;
  transition: right .2s; display: flex; flex-direction: column; }
.drawer.open { right: 0; }
.drawer .plib-hdr { padding: 18px 44px 14px 20px; border-bottom: 1px solid var(--paper); }
.drawer .plib-hdr h3 { font-family: Georgia, serif; font-size: 17px; font-weight: 400; color: var(--brand-deep); }
.drawer .plib-hdr .file { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.drawer-x { position: absolute; top: 14px; right: 14px; border: none; background: none;
  font-size: 22px; color: var(--dim); cursor: pointer; line-height: 1; }
.drawer-x:hover { color: var(--ink); }
.plib-search { margin: 12px 20px 0; }
.plib-search input { width: 100%; padding: 8px 12px; font: 13px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }
.plib-body { padding: 12px 20px 18px; overflow-y: auto; flex: 1; }
.plib-cap { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  margin: 14px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.plib-cap:first-child { margin-top: 0; }
.plib-cap .n { color: var(--rule); font-weight: 700; }
.pchip { position: relative; background: var(--paper); border: 1.5px solid var(--rule);
  border-radius: var(--r-ctl); padding: 9px 34px 9px 11px; margin-bottom: 7px; cursor: pointer; }
.pchip:hover { border-color: var(--brand); }
.pchip b { display: block; font-size: 13px; margin-bottom: 2px; }
.pchip p { font-size: 11.5px; color: var(--dim); line-height: 1.35; }
.ptag { display: inline-block; font: 600 9px/1 "Segoe UI", sans-serif; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 6px; border-radius: 999px; margin-bottom: 4px; }
.ptag.ex { background: var(--brand-soft); color: var(--brand-deep); border: 1px solid var(--brand); }
.ptag.own { background: var(--accent); color: #12383F; }
.pchip .own-kebab { position: absolute; top: 6px; right: 4px; width: 24px; height: 24px;
  border-radius: 50%; border: none; background: transparent; color: var(--dim);
  font-size: 15px; line-height: 1; cursor: pointer; }
.pchip .own-kebab:hover { background: var(--brand-soft); color: var(--brand-deep); }
.pchip .use-row { margin-top: 7px; display: flex; gap: 6px; }
.pchip .use-row button { font: 600 11px "Segoe UI", sans-serif; padding: 5px 10px; border-radius: 999px;
  cursor: pointer; border: none; }
.pchip .use-row .primary { background: var(--brand); color: #fff; }
.pchip .use-row .primary:hover { background: var(--brand-deep); }
.pchip .use-row .secondary { background: var(--card); color: var(--brand-deep); border: 1px solid var(--rule) !important; }
.pchip .use-row .secondary:hover { border-color: var(--brand) !important; }
.pchip-mini-menu { position: absolute; top: 30px; right: 4px; min-width: 150px; background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); box-shadow: 0 6px 20px rgba(10,91,105,.2);
  padding: 4px; z-index: 3; }
.pchip-mini-menu button { display: block; width: 100%; text-align: left; padding: 7px 9px;
  border: none; background: none; font: 12.5px "Segoe UI", sans-serif; color: var(--ink);
  border-radius: 5px; cursor: pointer; }
.pchip-mini-menu button:hover { background: var(--brand-soft); }
.pchip-mini-menu button.danger { color: var(--err); }
.pchip.confirm-del { border-color: var(--err); background: #FBEDEB; cursor: default; }
.confirm-del-box { font-size: 12px; }
.confirm-del-box .row { display: flex; gap: 6px; margin-top: 8px; }
.confirm-del-box .row button { font: 600 11.5px "Segoe UI", sans-serif; padding: 6px 12px;
  border-radius: 999px; cursor: pointer; border: none; }
.pnew { background: var(--paper); border: 1.5px dashed var(--rule); border-radius: var(--r-ctl);
  padding: 9px 11px; text-align: center; color: var(--brand); font-weight: 600; font-size: 12.5px;
  cursor: pointer; margin-bottom: 4px; }
.pnew:hover { border-color: var(--brand); background: var(--brand-soft); }
.pdetail { padding: 16px 20px; overflow-y: auto; }
.pdetail .back { font-size: 12px; color: var(--brand); cursor: pointer; margin-bottom: 12px;
  display: inline-block; }
.pdetail label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  display: block; margin-bottom: 5px; }
.pdetail input[type=text] { width: 100%; padding: 8px 12px; font: 14px "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); margin-bottom: 14px; }
.pdetail textarea { width: 100%; min-height: 220px; padding: 10px 12px; font: 13px/1.5 "Segoe UI", sans-serif;
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); resize: vertical; }
.pdetail .row { display: flex; gap: 8px; margin-top: 14px; }
.pdetail .row button { flex: 1; }
@media (max-width: 460px) {
  .drawer { width: 100%; right: -100%; }
}
/* --- подразделения: компактная таблица, drag-строки --- */
.dept-table td { padding: 5px 8px; vertical-align: middle; }
.dept-table .grip-cell { width: 20px; }
.dept-table .grip { cursor: grab; color: var(--rule); font-size: 13px; user-select: none; }
.dept-table .grip:hover { color: var(--dim); }
.dept-table tr.dragging { opacity: .35; }
.cnt-badge { color: var(--dim); font-size: 12px; font-family: Consolas, monospace; white-space: nowrap; }
.a-actions { text-align: right; white-space: nowrap; }
.a-actions form { display: inline; margin: 0; }
.txt-btn { border: none; background: none; color: var(--brand); font: 600 12px "Segoe UI", sans-serif;
  cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.txt-btn:hover:not(:disabled) { background: var(--brand-soft); }
.txt-btn.danger { color: var(--err); }
.txt-btn:disabled { color: var(--rule); cursor: default; }
.dept-add { display: flex; gap: 8px; margin-top: 12px; max-width: 360px; }
.dept-add input { flex: 1; padding: 8px 12px; font: 14px "Segoe UI", sans-serif; color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); background: var(--card); }
/* --- массовый импорт учёток --- */
.tmpl-line { display: flex; align-items: center; gap: 10px; background: var(--brand-soft);
  border: 1px solid var(--rule); border-radius: var(--r-ctl); padding: 10px 14px;
  font-size: 13px; margin: 10px 0; flex-wrap: wrap; }
.tmpl-line .ghost { margin-left: auto; }
.summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 16px; }
.stat-tile { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px 14px; }
.stat-tile.ok { border-top-color: var(--ok); }
.stat-tile.warn { border-top-color: var(--warn); }
.stat-tile.err { border-top-color: var(--err); }
.stat-tile.removed { border-top-color: var(--dim); border-style: dashed; }
.stat-tile.dim { border-top-color: var(--rule); }
.stat-num { font-family: Consolas, monospace; font-size: 28px; font-weight: 700; line-height: 1.05;
  color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.stat-tile.ok .stat-num { color: var(--ok); }
.stat-tile.warn .stat-num { color: var(--warn); }
.stat-tile.err .stat-num { color: var(--err); }
.stat-tile.removed .stat-num { color: var(--dim); }
.stat-tile.dim .stat-num { color: var(--dim); }
.stat-lbl { font-size: 11px; letter-spacing: .04em; color: var(--dim); margin-top: 3px; }
.stat-tile.pop { animation: stat-pop .25s ease; }
@keyframes stat-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .stat-tile.pop { animation: none; } }
tr.row-err td, tr.row-dup td { opacity: .72; }
tr.row-removed { opacity: 0; transform: scaleY(0); transform-origin: top;
  transition: opacity .18s ease, transform .18s ease; }
tr.row-removed td { padding-top: 0; padding-bottom: 0; border-bottom: none; }
@media (prefers-reduced-motion: reduce) { tr.row-removed { transition: none; } }
.reason { font-size: 12px; color: var(--dim); max-width: 260px; }
.rownum { color: var(--dim); font-size: 12px; width: 30px; }
.bi-actcol { width: 34px; text-align: center; }
.x-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: none;
  color: var(--dim); font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.x-btn:hover { background: #F7E3E0; color: var(--err); }
.x-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.undo-bar { display: none; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  border-radius: var(--r-ctl); padding: 8px 14px; font-size: 13px; margin-top: 10px; }
.undo-bar.show { display: flex; }
.undo-bar button { background: none; border: none; color: #BFE0E6; font: 600 13px "Segoe UI", sans-serif;
  cursor: pointer; text-decoration: underline; padding: 0; }
.actions-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.pwd-note { font-size: 12px; color: var(--dim); margin-top: 4px; }
/* --- поддержка: лента обращения, редактор с оформлением, плавающая кнопка --- */
.conv-hdr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 11px 15px; margin-bottom: 12px; }
.conv-hdr .t { font-weight: 600; flex: 1 1 220px; }
.conv-hdr .tk { font-family: Consolas, monospace; font-size: 12px; color: var(--dim); }
.conv-hdr .tk a { color: var(--brand); }
/* стрелка «наружу» у ссылки на заявку в OTRS: сама ссылка открывается
   в новой вкладке, и это должно быть видно до клика */
.ext { font-size: 10px; opacity: .7; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { border-radius: var(--r-card); padding: 11px 14px; border: 1px solid var(--rule);
  background: var(--card); box-shadow: var(--shadow); max-width: 88%; }
.msg .who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  flex-wrap: wrap; }
.msg .who .when { font-size: 11px; color: var(--dim); font-family: Consolas, monospace; }
.msg .txt ol, .msg .txt ul { margin: 6px 0 6px 20px; }
.msg .txt p + p { margin-top: 8px; }
.msg .txt code { font-family: Consolas, monospace; font-size: 12.5px;
  background: var(--paper); padding: 1px 5px; border-radius: 4px; }
.msg .txt img { max-width: 100%; border-radius: 6px; border: 1px solid var(--rule);
  margin: 6px 0; }
.msg .txt blockquote { border-left: 3px solid var(--rule); padding-left: 10px;
  color: var(--dim); margin: 6px 0; }
.msg.me { align-self: flex-end; background: var(--brand-soft); border-color: var(--brand); }
.msg.ai { border-left: 4px solid var(--brand); }
.msg .src { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--rule);
  font-size: 11.5px; color: var(--dim); }
/* длинное имя файла или URL без пробелов иначе растягивает карточку за
   max-width и даёт горизонтальный скролл всей странице */
.msg .txt, .conv-hdr .t { overflow-wrap: anywhere; }
.fchip { max-width: 100%; overflow-wrap: anywhere; }
/* превью выбранных вложений в редакторе обращения */
.attach-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px; }
.attach-preview:not(:empty) { padding: 10px 14px 0; }
/* почему вложение не приложилось: слишком большой файл или их слишком много */
.attach-err { padding: 10px 14px 0; font-size: 12.5px; line-height: 1.45; color: var(--err); }
.attach-err div + div { margin-top: 4px; }
.att { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 8px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--paper);
  font-size: 12px; max-width: 260px; }
.att img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-del { border: none; background: transparent; color: var(--dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; }
.att-del:hover { color: var(--err); }
/* фильтры списка обращений */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chips .chip { display: inline-block; padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--card); color: var(--dim);
  font: 600 12px "Segoe UI", sans-serif; text-decoration: none; }
.chips .chip:hover { border-color: var(--brand); color: var(--brand); }
.chips .chip.on { background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-deep); }
/* системная строка в ленте («Заявка зарегистрирована …») */
.sysline { text-align: center; font-size: 11.5px; color: var(--dim); padding: 2px 0; }
.sysline span { border: 1px dashed var(--rule); border-radius: 999px; padding: 3px 12px; }
/* картинка из инструкции с подписью (US-03) */
.msg .txt figure { margin: 10px 0; border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden; max-width: 420px; background: var(--paper); }
.msg .txt figure img { display: block; margin: 0; border: none; border-radius: 0;
  cursor: zoom-in; }
.msg .txt figcaption { font-size: 11.5px; color: var(--dim); padding: 6px 10px;
  background: var(--card); border-top: 1px solid var(--rule); }
.msg .txt img, .msg .files img { cursor: zoom-in; }
/* просмотр картинки во весь экран */
.img-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(18,56,63,.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 32px; cursor: zoom-out; }
.img-zoom img { max-width: 100%; max-height: 85vh; border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); background: #fff; }
.img-zoom .zoom-cap { color: #EAF2F3; font-size: 13px; text-align: center;
  max-width: 70ch; }
.msg .files { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg .files img { max-width: 100%; border-radius: 6px; border: 1px solid var(--rule); }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--rule); border-radius: 14px; font-size: 12.5px;
  text-decoration: none; color: inherit; background: var(--paper); }
.fchip:hover { border-color: var(--brand); }
.fchip .dim { color: var(--dim); font-size: 11px; }
.fchip-off { opacity: .6; }
.stamp.st-ai { background: var(--brand-soft); color: var(--brand-deep);
  border: 1px solid var(--brand); }
.ask { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 11px 15px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ask .q { flex: 1 1 190px; }
.ask form { display: inline; margin: 0; }
.editor { background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.editor .esubject { width: 100%; border: none; border-bottom: 1px solid var(--paper);
  padding: 11px 14px; font: 600 15px "Segoe UI", sans-serif; color: var(--ink);
  background: var(--card); }
.editor .esubject:focus { outline: none; background: var(--paper); }
.etoolbar { display: flex; align-items: center; gap: 3px; padding: 6px 9px;
  flex-wrap: wrap; background: var(--paper); border-bottom: 1px solid var(--rule); }
.eb { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font: 13px "Segoe UI", sans-serif; cursor: pointer; }
.eb:hover { background: var(--brand-soft); }
.eb.b { font-weight: 700; } .eb.i { font-style: italic; }
.eb.u { text-decoration: underline; } .eb.s { text-decoration: line-through; }
.eb.code { font-family: Consolas, monospace; font-size: 12px; }
.ebody { padding: 13px 16px; min-height: 120px; font-size: 14px; line-height: 1.6;
  outline: none; }
/* :empty перестаёт совпадать после «набрал и стёр» — в contenteditable
   остаётся <br>, поэтому подсказку возвращает и правило для него */
.ebody:empty::before,
.ebody:has(> br:only-child)::before {
  content: attr(data-placeholder); color: var(--dim); }
.ebody ol, .ebody ul { margin: 6px 0 6px 20px; }
.ebody img { max-width: 100%; border-radius: 6px; border: 1px solid var(--rule);
  margin: 6px 0; }
.efoot { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; border-top: 1px solid var(--paper); flex-wrap: wrap; }
.efoot .hint { font-size: 11.5px; color: var(--dim); }
.sup-fab { position: fixed; right: 26px; bottom: 22px; z-index: 15; display: flex;
  align-items: center; gap: 9px; background: var(--brand); color: #fff;
  border-radius: 999px; padding: 10px 18px 10px 14px; text-decoration: none;
  box-shadow: 0 6px 20px rgba(10,91,105,.32); font: 600 13px "Segoe UI", sans-serif; }
.sup-fab:hover { background: var(--brand-deep); color: #fff; }
/* на странице самого обращения кнопка бесполезна и перекрывает
   «Отправить» в правом нижнем углу редактора */
body:has(.chat) .sup-fab { display: none; }
.sup-fab .fab-n { background: var(--accent); color: #12383F; border-radius: 999px;
  font: 600 10px/1.7 "Segoe UI", sans-serif; padding: 0 6px; min-width: 18px;
  text-align: center; }
.msg.agent { border-left: 4px solid var(--accent); }
.msg details.quote { margin-top: 9px; font-size: 12px; color: var(--dim);
  border: 1px dashed var(--rule); border-radius: var(--r-ctl); padding: 6px 10px; }
.msg details.quote summary { cursor: pointer; }