/* ─────────────────────────────────────────────────────────────────────────────
   SXEMA2 — 3D-просмотрщик. Токены и шрифты — в theme.css.
   Имена селекторов сохранены: их использует viewer.js / drill2d.js.
   ───────────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}

#c3d { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

.muted { color: var(--ink-faint); }
.small { font-size: var(--text-xs); }
button { font: inherit; cursor: pointer; color: var(--ink); }

/* ── Загрузка ── */
#splash {
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
}
.sp-logo {
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-dark);
}
.sp-logo svg {
  width: 36px; height: 36px;
  stroke: var(--on-ink); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sp-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.sp-bar {
  width: 220px; height: 6px;
  background: var(--muted-fill);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sp-bar i { display: block; height: 100%; width: 10%; background: var(--ink); transition: width 0.2s; }
.sp-text { font-size: var(--text-sm); color: var(--ink-faint); font-weight: 500; }

/* ── Плавающие кнопки ── */
.topbar { position: fixed; top: 10px; display: flex; gap: 6px; z-index: 20; }
.topbar.left { left: 10px; }
.topbar.right { right: 10px; }
.ib {
  width: 42px; height: 42px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--paper-raised);
  box-shadow: var(--shadow-1);
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  color: var(--ink);
  padding: 0;
  transition: transform 0.15s var(--ease), background 0.15s, border-color 0.15s;
}
.ib:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.ib svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ib.sm {
  width: auto; height: 32px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0 12px;
  border-radius: var(--r-pill);
}
.ib.accent { background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-dark); }
/* Включённый режим — инверсия, как активный пункт навигации */
.ib.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
#btnLang { width: auto; padding: 0 12px; font-size: var(--text-sm); font-weight: 700; }

/* ── Меню ── */
.menu {
  position: fixed; top: 58px; right: 10px;
  background: var(--paper-raised);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  z-index: 30;
  width: 264px;
  overflow: hidden;
  padding: 5px;
}
.menu button {
  display: flex; align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  transition: background 0.12s;
}
.menu button:hover { background: var(--paper-sunken); }
.menu button i {
  font-style: normal;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.menu button i svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.menu button.on { background: var(--paper-sunken); color: var(--ink); font-weight: 700; }
.menu-foot {
  padding: 9px 12px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-faint);
  text-align: center;
}
/* Приглашение чужому зрителю: заказчик крутит шкаф — и видит, где такой
   же сделать себе. Только для тех, кто не в кабинете. Шрифт обычный,
   не моно: это слова для человека, а не служебная строка версии. */
.menu-invite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.menu-invite:hover { text-decoration: underline; }

/* ── Панель списка деталей ── */
.panel {
  position: fixed; top: 60px; right: 10px; bottom: 10px;
  width: min(340px, calc(100vw - 20px));
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  z-index: 25;
  display: flex; flex-direction: column;
}
.panel-head { display: flex; gap: 6px; padding: 12px; }
.panel-head input { flex: 1; min-width: 0; }
.wide {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 12px 10px;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
}
.wide:hover { border-color: var(--ink); }
.wide.accent {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-dark);
}
.wide.accent:hover { background: #000; }
.wide.big { padding: 13px; font-size: var(--text-base); margin: 12px; }
.wide svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Дерево деталей */
.tree { flex: 1; overflow: auto; padding: 0 8px 12px; }
.tree .grp { margin: 2px 0; }
.tree .grp > .gh {
  display: flex; align-items: center;
  gap: 6px;
  padding: 8px 6px;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.tree .gh .tri { width: 14px; color: var(--ink-faint); font-size: 10px; }
.tree .gh .cnt {
  margin-left: auto;
  color: var(--ink-faint);
  font-weight: 600;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}
.tree .gb { padding-left: 12px; }
/* Выбранный блок в дереве — как выделенная строка «Структуры модели»
   в Базисе: видно, какой именно блок сейчас подсвечен в 3D. */
.tree .grp.sel > .gh {
  background: var(--paper-sunken);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  border-radius: 6px;
}
.tree .grp > .gh:hover { background: var(--paper-sunken); }
.tree .gh .tri { cursor: pointer; padding: 2px 4px; margin: -2px -4px; }
.tree .grp.closed > .gb { display: none; }
.tree .grp.closed > .gh .tri { transform: rotate(-90deg); }
.tree .it {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  transition: background 0.12s;
}
.tree .it:hover { background: var(--paper-sunken); }
.tree .it.sel { background: var(--paper-sunken); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tree .it .d {
  color: var(--ink);
  background: var(--paper-sunken);
  border-radius: 7px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
  white-space: nowrap;
}
.tree .it.sel .d { background: var(--ink); color: var(--on-ink); }
.tree .it .s { display: block; font-size: var(--text-xs); color: var(--ink-faint); }
.tree .fr { padding: 6px 8px; font-size: var(--text-sm); color: var(--ink-soft); }
.tree .fr small { display: block; color: var(--ink-faint); }

/* ── Карточка детали ── */
.card {
  position: fixed; left: 10px; bottom: 10px;
  width: min(440px, calc(100vw - 20px));
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  z-index: 24;
  padding: 14px 16px;
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-head .des {
  background: var(--ink);
  color: var(--on-ink);
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.card-head .nm { font-weight: 700; font-size: 1.05rem; flex: 1; min-width: 0; }
.card-row { font-size: var(--text-sm); margin: 4px 0; }
.card-row b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
}
.card-btns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.card-btns button {
  border: 1.5px solid var(--line-strong);
  background: var(--paper-raised);
  border-radius: var(--r-md);
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.card-btns button:hover { border-color: var(--ink); }
.card-btns button i { font-style: normal; font-size: 16px; line-height: 1; color: var(--ink-soft); }
.card-btns button svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.card-btns button:first-child { background: var(--paper-sunken); border-color: var(--line-strong); }

/* ── Разбор и линейка ── */
.explode, .rulerbar {
  position: fixed; top: 60px; left: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 8px 10px;
  display: flex; align-items: center;
  gap: 8px;
  z-index: 22;
  font-size: var(--text-sm);
  font-weight: 500;
}
.explode input[type='range'] { width: 160px; accent-color: var(--ink); padding: 0; border: none; background: none; box-shadow: none; }
.explode-tag { font: 12px var(--font-mono); }

#c3d.ruler-on { cursor: crosshair; }
.ruler-cursor {
  position: fixed;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid rgba(38, 89, 176, .75);
  border-radius: 50%;
  background: rgba(70, 125, 214, .12);
  box-shadow: 0 0 0 7px rgba(70, 125, 214, .08);
  pointer-events: none;
  z-index: 24;
  transition: width .08s, height .08s, margin .08s, border-color .08s, background .08s;
}
.ruler-cursor i {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: #2659b0;
}
.ruler-cursor span {
  position: absolute; left: 50%; top: 40px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(25, 31, 40, .86);
  color: #fff;
  font-size: 11px; font-weight: 600;
}
.ruler-cursor.snapped {
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-color: #e68a00;
  background: rgba(255, 166, 0, .2);
  box-shadow: 0 0 0 8px rgba(255, 166, 0, .12);
}
.ruler-cursor.snapped i { background: #e68a00; }
.ruler-cursor.snapped span { top: 32px; }

/* ── Полные экраны: 2D-чертёж, спецификация ── */
.full {
  position: fixed; inset: 0;
  background: var(--paper-raised);
  z-index: 40;
  display: flex; flex-direction: column;
}
.full-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs button {
  border: 0;
  background: none;
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.tabs button.on { border-bottom-color: var(--ink); color: var(--ink); font-weight: 700; }

.d2wrap {
  position: relative;
  height: 54vh;
  min-height: 280px;
  overflow: hidden;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--line);
}
#d2svg { width: 100%; height: 100%; }
#d2svg svg { width: 100%; height: 100%; display: block; touch-action: none; }
.d2zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.d2zoom button {
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  box-shadow: var(--shadow-1);
  font-weight: 700;
}
.d2zoom button:hover { border-color: var(--ink); }
.d2legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; font-size: var(--text-xs); }
.d2legend span {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 3px 11px;
  font-weight: 600;
  display: inline-flex; align-items: center;
}
.d2legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.d2hint { padding: 0 14px 8px; font-size: var(--text-xs); }
.d2list { flex: 1; overflow: auto; padding: 0 8px; }
.d2list .hr {
  display: flex; align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.d2list .hr:hover { background: var(--paper-sunken); }
.d2list .hr.on { background: var(--paper-sunken); }
.d2list .hr .n { width: 22px; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--text-xs); }
.d2list .hr i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.d2list .hr .f {
  background: var(--paper-sunken);
  border-radius: 7px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}
.d2list .hr .f.t { background: var(--ink); color: var(--on-ink); }
.d2list .hr .xy { margin-left: auto; color: var(--ink-faint); font-size: var(--text-xs); font-family: var(--font-mono); }

.specwrap { flex: 1; overflow: auto; padding: 12px; }
.spec { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
.spec th, .spec td {
  border-bottom: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
}
.spec th {
  background: var(--paper-raised);
  position: sticky; top: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 700;
}
.spec .des { color: var(--ink); font-family: var(--font-mono); font-weight: 600; }
.spec .ov { border-top: 2px solid var(--ink); }
.spec .un { border-bottom: 2px solid var(--ink); }
.spec .k { font-size: 11px; color: var(--ink-faint); padding: 4px 8px 8px; }

/* ── Нижние шторки: фурнитура, комментарии ── */
.sheet {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: min(560px, 100vw);
  max-height: 70vh;
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-3);
  z-index: 35;
  display: flex; flex-direction: column;
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
#furnBody, .cm-list { overflow: auto; padding: 8px 16px; }
.fr-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.fr-row i { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.fr-row .c { margin-left: auto; font-family: var(--font-mono); font-weight: 600; }
/* поимённый список крепежа: артикул · наименование · количество */
.fr-item {
  display: grid;
  grid-template-columns: 12px minmax(96px, 150px) 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.fr-item i { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.fr-item .a { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-item .n { min-width: 0; }
.fr-item .c { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.cm-filter { padding: 8px 16px; font-size: var(--text-sm); color: var(--ink-soft); }
.cm-filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.cm { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.cm .a { font-weight: 700; }
.cm .m { color: var(--ink-faint); font-size: var(--text-xs); }
.cm .r {
  background: var(--paper-sunken);
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 7px 10px;
  margin-top: 5px;
  font-size: var(--text-sm);
}
.cm .st {
  font-size: 11px;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--paper-sunken);
  color: var(--ink-soft);
  font-weight: 600;
  margin-left: 6px;
}

/* ── Модалки ── */
.modal {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.35);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  padding: 22px;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-3);
  animation: rise 0.25s var(--ease) both;
}
.modal-box h3 { margin: 0; font-size: var(--text-lg); }
.modal-box input, .modal-box textarea { width: 100%; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.modal .btn {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--paper-raised);
  font-weight: 600;
  font-size: var(--text-sm);
}
.modal .btn:hover { border-color: var(--ink); }
.modal .btn.accent {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-dark);
}
.modal .btn.accent:hover { background: #000; }
.lang-list { display: grid; gap: 8px; }
.lang-list button {
  padding: 12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--paper-raised);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: left;
}
.lang-list button:hover { border-color: var(--ink); }
.cam video { width: 100%; border-radius: var(--r-md); background: #000; max-height: 60vh; }

/* ── Виды камеры ── */
.views { position: fixed; right: 10px; bottom: 10px; display: flex; gap: 4px; z-index: 20; }
.views button {
  border: 1px solid var(--card-border);
  background: var(--paper-raised);
  box-shadow: var(--shadow-1);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
}
.views button:hover { border-color: var(--line-strong); }
.views button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ── Тост и подсказка ── */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 90px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  z-index: 60;
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 90vw;
  box-shadow: var(--shadow-dark);
}
.hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px;
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  padding: 10px 18px;
  z-index: 21;
  font-size: var(--text-sm);
  display: flex; align-items: center;
  gap: 10px;
}
.hint .dots { display: flex; gap: 4px; }
.hint .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-fill); }
.hint .dots i.on { background: var(--ink); }

@media (max-width: 640px) {
  .card-btns button { font-size: 10px; }
  .panel { top: 60px; bottom: auto; max-height: 60vh; }
  /* На телефоне подсказка ложилась поверх кнопок видов и закрывала «3D»
     и «Перед». Поднимаем её над ними и не даём вылезать за края. */
  /* left:50% + transform ограничивал ширину половиной экрана — текст
     ломался на три строки. На телефоне тянем подсказку во всю ширину. */
  .hint { bottom: 66px; left: 12px; right: 12px; transform: none;
          justify-content: center; text-align: center; }
  .views { left: 10px; right: 10px; justify-content: center; flex-wrap: wrap; }
  .views button { min-width: 0; padding: 8px 12px; flex: 1 1 0; }
  .toast { bottom: 120px; }
}

/* ── Схема сборки ── */
#asmBody { overflow: auto; padding: 8px 16px 18px; }
.asm-note { padding: 2px 0 10px; }
.asm-u {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
  overflow: hidden;
}
.asm-uh {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: var(--paper-sunken);
  cursor: pointer;
  font-size: var(--text-sm);
}
.asm-uh .no {
  display: inline-flex; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--ink); color: var(--paper-raised);
  font: 700 12px var(--font-mono);
  flex-shrink: 0;
}
.asm-uh b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-uh small { margin-left: auto; color: var(--ink-faint); white-space: nowrap; }
.asm-u.on { border-color: var(--ink); }
.asm-u.on .asm-uh .no { background: #ff7a1a; }
.asm-ss { display: none; }
.asm-u.open .asm-ss { display: block; }
.asm-kinds { padding: 7px 11px 0; }
/* строка «Спецификации на панели»: позиция, название, размер, количество */
.asm-p {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 40px;
  gap: 3px 8px;
  align-items: baseline;
  padding: 7px 11px;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  cursor: pointer;
}
.asm-p:hover { background: var(--paper-sunken); }
.asm-p.on { background: rgba(255, 138, 26, 0.14); }
.asm-p .p { font-weight: 700; }
.asm-p .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-p .sz { font: 12px var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
.asm-p .c { font: 600 12px var(--font-mono); text-align: right; white-space: nowrap; }
.asm-fs { padding: 6px 11px 4px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; }
.asm-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 11px; }
.asm-act .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asm-fs i, .asm-f i {
  display: inline-flex; align-items: baseline; gap: 4px;
  max-width: 100%;
  font-style: normal;
  border: 1px solid var(--line-strong);
  border-left-width: 4px;
  border-radius: 6px;
  padding: 1px 6px;
  margin: 3px 5px 0 0;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.asm-fs i b, .asm-f i b { font-family: var(--font-mono); white-space: nowrap; }
.asm-fs i span, .asm-f i span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.asmbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 10px;
  width: min(620px, calc(100vw - 16px));
  background: var(--paper-raised);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  z-index: 36;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
}
.asmbar .asm-mid { flex: 1; min-width: 0; overflow: hidden; }
.asmbar .asm-top {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--text-xs); color: var(--ink-faint);
}
.asmbar .asm-top .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asmbar .asm-top .pos { font-family: var(--font-mono); white-space: nowrap; }
.asmbar .asm-cur { font-size: var(--text-sm); margin: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asmbar .asm-cur .sz { font: 12px var(--font-mono); color: var(--ink-faint); }
.asmbar .asm-f { line-height: 1.1; display: flex; flex-wrap: wrap; }
.asmbar .asm-f i { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.asm-f i.more { border-left-color: var(--line-strong); font-family: var(--font-mono); }
.asmbar .asm-f:empty { display: none; }
.asmbar .asm-btns { display: flex; gap: 4px; align-items: center; }
.asmbar button[disabled] { opacity: 0.32; pointer-events: none; }
@media (max-width: 560px) {
  .asmbar .asm-btns #asmList { display: none; }
  .asm-p { grid-template-columns: 58px minmax(0, 1fr) 40px; }
  .asm-p .sz { grid-column: 2 / -1; }
}

/* ── Доступность ────────────────────────────────────────────────────────
   Заголовок для скринридера и озвучки: на экране не нужен, вслух — нужен */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Видимый фокус с клавиатуры — в цехе бывают планшеты с клавиатурой,
   да и просто должно быть понятно, где ты */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, #2f6feb);
  outline-offset: 2px;
  border-radius: 8px;
}
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* Кнопки видов пальцем: 28px мало, делаем 40 */
.views button { min-height: 40px; min-width: 44px; padding: 8px 14px; }

/* ---- Картинка для клиента -------------------------------------------- */
.ai-lbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.ai-lbl select { width: 100%; }
/* Строка для названия нейросети, когда список от поставщика не пришёл.
   Одевается как остальные поля окна, иначе читается как чужая. */
.ai-lbl input[type=text] { width: 100%; }
/* Готовую картинку показываем целиком: обрезать её кадром окна значило бы
   прятать ровно то, ради чего её делали. Поэтому окно шире обычного,
   а высоту ограничиваем экраном. */
.modal-box.ai-show { max-width: min(900px, 92vw); }
.modal-box.ai-show img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 12px;
  background: var(--paper-sunken);
}
.ai-two { display: flex; gap: 10px; }
.ai-two .ai-lbl { flex: 1; min-width: 0; }
.modal-box textarea#aiNote { width: 100%; resize: vertical; line-height: 1.45; }
.ai-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Приглашение в подсказке: ссылка обычного цвета текста и крестик. */
.hint-invite { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hint-x {
  background: none; border: 0; color: inherit; font: inherit;
  padding: 2px 6px; margin-left: 8px; cursor: pointer; opacity: 0.7;
}