/* ══════════════════════════════════════════════════════════
   Iris2 — визуальный язык «Почта»
   Общие токены и оболочка. Этот файл — прототип будущего
   globals.css: то, что здесь, переезжает в Tailwind-токены.
   ══════════════════════════════════════════════════════════ */

:root {
  --bg:         #FFFFFF;
  --surface:    #F3F6FC;
  --surface-2:  #E6ECF8;
  --surface-3:  #D9E1F1;
  --raise:      #FFFFFF;
  --border:     #C3CEE3;
  --border-soft:#D6DEEE;
  --ink:        #111A2B;
  --ink-2:      #34425C;
  --muted:      #56637A;
  --accent:     #2C56A8;
  --accent-2:   #1D3F82;
  --accent-bg:  #E4ECFA;
  --wait:       #A9660D;
  --wait-bg:    #FAEEDC;
  --ok:         #1E7A57;
  --ok-bg:      #E1F1EA;
  --fail:       #B0362D;
  --fail-bg:    #FAE6E3;
  --on-accent:  #FFFFFF;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;

  --nav-w: 212px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
}
:root[data-nav="collapsed"] { --nav-w: 60px; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0E1421;
    --surface:    #172031;
    --surface-2:  #212C42;
    --surface-3:  #2A3854;
    --raise:      #1E2739;
    --border:     #3A4966;
    --border-soft:#2E3A54;
    --ink:        #E7EDF9;
    --ink-2:      #C6D0E2;
    --muted:      #9AA8C0;
    --accent:     #7FA5EE;
    --accent-2:   #9DBBF6;
    --accent-bg:  #1C2A46;
    --wait:       #DCA35E;
    --wait-bg:    #2E2415;
    --ok:         #5FBF93;
    --ok-bg:      #14291F;
    --fail:       #E0857B;
    --fail-bg:    #2E1B18;
    --on-accent:  #0E1421;
  }
}
:root[data-theme="dark"] {
  --bg:     #0E1421;
  --surface:  #172031;
  --surface-2:  #212C42;
  --surface-3:  #2A3854;
  --raise:    #1E2739;
  --border:   #3A4966;
  --border-soft:#2E3A54;
  --ink:    #E7EDF9;
  --ink-2:    #C6D0E2;
  --muted:    #9AA8C0;
  --accent:   #7FA5EE;
  --accent-2:   #9DBBF6;
  --accent-bg:  #1C2A46;
  --wait:     #DCA35E;
  --wait-bg:  #2E2415;
  --ok:     #5FBF93;
  --ok-bg:    #14291F;
  --fail:     #E0857B;
  --fail-bg:  #2E1B18;
  --on-accent:  #0E1421;
}
:root[data-theme="light"] {
  --bg:         #FFFFFF;
  --surface:    #F3F6FC;
  --surface-2:  #E6ECF8;
  --surface-3:  #D9E1F1;
  --raise:      #FFFFFF;
  --border:     #C3CEE3;
  --border-soft:#D6DEEE;
  --ink:        #111A2B;
  --ink-2:      #34425C;
  --muted:      #56637A;
  --accent:     #2C56A8;
  --accent-2:   #1D3F82;
  --accent-bg:  #E4ECFA;
  --wait:       #A9660D;
  --wait-bg:    #FAEEDC;
  --ok:         #1E7A57;
  --ok-bg:      #E1F1EA;
  --fail:       #B0362D;
  --fail-bg:    #FAE6E3;
  --on-accent:  #FFFFFF;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--accent); }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── оболочка ──────────────────────────────────────────── */
.app {
  height: 100vh; display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
}
.app.collapsed { --nav-w: 60px; }

.nav {
  display: flex; flex-direction: column;
  padding: 14px 10px 10px; gap: 2px; min-width: 0;
  background: var(--bg); border-right: 1px solid var(--border);
}
.logo {
  display: flex; align-items: center; gap: 9px;
  padding: 0 7px 14px; font: 500 17px/1 var(--sans); color: var(--ink);
  white-space: nowrap;
}
.logo .mark { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); flex: none; }
.app.collapsed .logo { padding-left: 6px; }
.app.collapsed .logo .word { display: none; }

.scope {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px; padding: 8px 9px; width: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); text-align: left; min-width: 0;
}
.scope .txt { min-width: 0; }
.scope .co { font-weight: 600; font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope .pr { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope .caret { margin-left: auto; color: var(--muted); flex: none; }
.app.collapsed .scope { justify-content: center; padding: 8px 0; }
.app.collapsed .scope .txt, .app.collapsed .scope .caret { display: none; }
.scope .initials {
  display: none; width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--accent-bg); color: var(--accent);
  place-items: center; font: 600 12px/1 var(--sans);
}
.app.collapsed .scope .initials { display: grid; }

.nav-label {
  padding: 0 9px; margin: 4px 0 6px;
  font: 600 12px/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.app.collapsed .nav-label {
  margin: 8px 0 6px; padding: 0;
  border-top: 1px solid var(--border); height: 1px; overflow: hidden; color: transparent;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  white-space: nowrap; min-width: 0;
}
.nav a svg { flex: none; }
.nav a:hover { background: var(--surface-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-bg); color: var(--accent-2); font-weight: 600; }
.nav a .n {
  margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--wait); font-variant-numeric: tabular-nums;
}
.app.collapsed .nav a { justify-content: center; padding: 8px 0; position: relative; }
.app.collapsed .nav a .label { display: none; }
.app.collapsed .nav a .n {
  position: absolute; top: 2px; right: 6px; margin: 0;
  font-size: 12px; line-height: 1;
}
.nav .gap { flex: 1; }

.nav-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 7px 0; border-top: 1px solid var(--border); margin-top: 8px;
  min-width: 0;
}
.nav-foot .ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font: 600 12px/1 var(--sans);
}
.nav-foot .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-foot .icon { color: var(--muted); padding: 4px; border-radius: 6px; flex: none; }
.nav-foot .icon:hover { color: var(--ink); background: var(--surface-2); }
.nav-foot .push { margin-left: auto; }
.app.collapsed .nav-foot { flex-direction: column; gap: 6px; padding: 8px 0 0; }
.app.collapsed .nav-foot .nm { display: none; }
.app.collapsed .nav-foot .push { margin-left: 0; }

.app.collapsed .nav [data-tooltip] { position: relative; }
.app.collapsed .nav [data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 15px); top: 50%;
  transform: translate(-2px, -50%);
  padding: 20px 22px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  color: transparent;
  -webkit-backdrop-filter: blur(25px) saturate(.35);
  backdrop-filter: blur(25px) saturate(.35);
  font: 500 12px/1.2 var(--sans); letter-spacing: .005em; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 79;
  transition: opacity .1s ease .08s, transform .1s ease .08s, visibility .1s ease .08s;
}
.app.collapsed .nav [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 28px); top: 50%;
  transform: translate(-2px, -50%);
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--raise) 94%, var(--accent-bg));
  color: var(--ink);
  box-shadow:
    0 8px 22px -13px rgba(15, 23, 42, .38),
    0 1px 2px rgba(15, 23, 42, .06);
  font: 500 12px/1.2 var(--sans); letter-spacing: .005em; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 80;
  transition: opacity .1s ease .08s, transform .1s ease .08s, visibility .1s ease .08s;
}
.app.collapsed .nav-foot [data-tooltip]::before { left: calc(100% + 22px); }
.app.collapsed .nav-foot [data-tooltip]::after { left: calc(100% + 35px); }
.app.collapsed .nav [data-tooltip]:hover::before,
.app.collapsed .nav [data-tooltip]:focus-visible::before,
.app.collapsed .nav [data-tooltip]:hover::after,
.app.collapsed .nav [data-tooltip]:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(0, -50%);
}

.collapse-btn { transition: transform .16s ease; }
.app.collapsed .collapse-btn { transform: rotate(180deg); }

/* ── общие компоненты ──────────────────────────────────── */
.btn {
  padding: 4px 10px; border-radius: var(--r-sm); font-size: 13px; line-height: 18px; font-weight: 500;
  border: 1px solid transparent; background: var(--surface-2);
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; flex: none;
}
a.btn { text-decoration: none; }
/* кликабельные карточки-ссылки не должны наследовать вид ссылки */
a.agent, a.base, a.item, a.deal, a.card, a.conn, a.cat-card, a.jump, a.talk, a.lead,
a.role-card, a.sec-card, a.art, a.ch-link, a.talk-row, a.other, a.row-item { text-decoration: none; color: inherit; }
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn:active { background: var(--border); }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; filter: brightness(1.1); }
.btn.primary:active { filter: brightness(.95); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { padding: 2px 8px; font-size: 12px; line-height: 16px; }

.tabs {
  display: flex; gap: 16px; border-bottom: 1px solid var(--border-soft);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  padding: 0 0 9px; font-size: 13px; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }

.flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.flag.wait { color: var(--wait); }
.flag.fail { color: var(--fail); }
.flag.ok   { color: var(--ok); }
.flag.idle { color: var(--muted); font-weight: 400; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.pill.live { background: var(--ok-bg); color: var(--ok); }
.pill.new  { background: var(--accent-bg); color: var(--accent); }
.pill.wait { background: var(--wait-bg); color: var(--wait); }
.pill.fail { background: var(--fail-bg); color: var(--fail); }
.pill.done { background: var(--surface-2); color: var(--muted); font-weight: 400; }
.pill.lost { background: var(--fail-bg); color: var(--fail); }

.page {
  min-width: 0; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--surface);
}

/* ── единый скелет страницы ────────────────────────────────
   Шапка-полоса на белом с нижней границей, под ней — канва
   (--surface), на которой лежат белые панели (--raise).
   Каждая страница: .page-bar (родительский путь/заголовок/статус)
   + .page-body > .page-inner (вкладки и контент).
   Легаси-страницы получают то же через рестайл .page-head. */
.page-bar { flex: none; background: var(--bg); border-bottom: 1px solid var(--border); }
.page-bar .page-inner { padding: 0 26px; }
.pb-crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.pb-crumbs a { color: var(--muted); text-decoration: none; }
.pb-crumbs a:hover { color: var(--ink); }
.pb-row { display: flex; align-items: center; gap: 18px; height: 60px; min-width: 0; }
.pb-identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.pb-parents { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pb-parents a {
  color: var(--muted); text-decoration: none; font-size: 13px; white-space: nowrap;
}
.pb-parent { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pb-parents a:hover { color: var(--ink); }
.pb-path-sep { color: var(--border); font-size: 14px; }
/* иконка в строке заголовка — один размер для всех страниц */
.page-bar .pb-row > .face, .page-bar .pb-row > .logo, .page-bar .pb-row > .pb-ava {
  width: 28px; height: 28px; min-width: 28px; font-size: 12px;
  border-radius: 8px; display: grid; place-items: center; }
.page-bar .pb-identity > .face, .page-bar .pb-identity > .logo, .page-bar .pb-identity > .pb-ava {
  width: 26px; height: 26px; min-width: 26px; font-size: 12px;
  border-radius: 7px; display: grid; place-items: center;
}
.page-bar .pb-row h1 {
  margin: 0; font: 600 20px/1.25 var(--sans);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-bar .pb-row p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pb-row .spacer { flex: 1; }
.pb-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.pb-sub b { color: var(--ink-2); font-weight: 600; }
.pb-end { display: none; }
.page-bar .tabs {
  height: 60px; margin: 0 0 0 auto; border-bottom: 0;
  align-items: flex-end; min-width: 0;
}
.page-bar .tabs button { padding-bottom: 17px; }
.page-body { flex: 1 0 auto; }
.page-body > .page-inner { padding: 18px 26px 48px; }

.panel { background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-lg); }

/* узкий workflow: сужается модуль контента, не страница и не шапка */
.flow-narrow { max-width: 760px; }
/* ── три ширины контента ───────────────────────────────────
   1. полная      — диалоги, контакты, заявки (свои раскладки)
   2. рабочая     — сложные экраны, центрируется
   3. узкая       — простые настройки, выравнивается по ЛЕВОЙ
                    границе рабочей ширины, чтобы она не скакала
   ───────────────────────────────────────────────────────── */
:root { --w-work: 1680px; }   /* целевой экран — 1920 и шире: 1920 − меню − поля */

/* Две оболочки, точка:
   WorkspacePage — свои раскладки на всю ширину (разговоры, CRM);
   StandardPage — всё остальное: один max-width, одни оси.
   Узкой форме — внутренний модуль .flow-narrow, не своя страница. */
.page-inner { width: 100%; max-width: var(--w-work); margin-left: auto; margin-right: auto; }

.page-head {
  padding: 18px 26px 14px; flex: none;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.page-head h1 { margin: 0 0 3px; font: 600 20px/1.25 var(--sans); }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.page-head .row { display: flex; align-items: center; gap: 14px; }
.page-head .row .spacer { flex: 1; }

.card {
  background: var(--raise); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
}
.card h2, .card h3 {
  margin: 0 0 12px; font: 600 14px/1.35 var(--sans);
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
  display: flex; align-items: center;
}
.card h2 a, .card h3 a {
  margin-left: auto; text-decoration: none;
  font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: none;
}
.card h2 a:hover, .card h3 a:hover { text-decoration: underline; }

/* Один sans-serif используется во всём рабочем интерфейсе. */
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6 {
  font-family: var(--sans) !important;
}
.page h1 { font-size: 20px !important; line-height: 1.25 !important; font-weight: 600 !important; }
.page h2.block-title { font-size: 16px !important; line-height: 1.35 !important; }
.page .stat .v, .page .num .v, .page .conn .state b, .page .agent .nm,
.page .agent .big, .page .project .ph h2, .page .usage-head .t,
.page .plan-card .nm, .page .price, .page .client-row .nm,
.page .person .nm, .page .sec-card .t, .page .role-card .t,
.page .panel-card .ph h3 {
  font-family: var(--sans) !important;
}

.section-tabs { margin: 0 0 18px; padding: 0 2px; }
.section-tabs button { padding-bottom: 8px; }

.facts { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.fact { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.fact dt { color: var(--muted); flex: none; width: 92px; }
.fact dd { margin: 0; color: var(--ink); min-width: 0; }
.fact dd.num { font-variant-numeric: tabular-nums; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-scroll { overflow-x: auto; }
table.grid th {
  text-align: left; padding: 0 12px 8px; font-weight: 600;
  color: var(--muted); font-size: 12px; white-space: nowrap;
}
table.grid td { padding: 11px 12px; border-top: 1px solid var(--border-soft); }
table.grid tbody tr:hover { background: var(--surface-2); cursor: pointer; }
table.grid td.num { font-variant-numeric: tabular-nums; }
table.grid .who { font-weight: 600; }

.empty {
  padding: 28px; text-align: center; color: var(--muted); font-size: 13px;
}

/* ── меню пользователя ─────────────────────────────────── */
.user-menu {
  position: fixed; z-index: 50; width: 264px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 18px 44px -16px rgba(0,0,0,.32);
}
.user-menu[hidden] { display: none; }
.um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.um-ava { width: 34px; height: 34px; border-radius: 50%; flex: none;
          background: var(--accent); color: var(--on-accent);
          display: grid; place-items: center; font: 600 12px/1 var(--sans); }
.um-nm { display: block; font-weight: 600; font-size: 14px; }
.um-ml { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.um-label { padding: 4px 10px 6px; font: 600 12px/1 var(--sans); letter-spacing: .08em;
            text-transform: uppercase; color: var(--muted); }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
           padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink);
           text-decoration: none; font-size: 14px; }
.um-item:hover { background: var(--surface-2); }
.um-item.current { background: var(--accent-bg); }
.um-logo { width: 26px; height: 26px; border-radius: 7px; flex: none;
           background: var(--surface-2); color: var(--ink-2);
           display: grid; place-items: center; font: 600 12px/1 var(--sans); }
.um-item.current .um-logo { background: var(--accent); color: var(--on-accent); }
.um-t { display: block; font-size: 14px; }
.um-d { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.um-check { margin-left: auto; color: var(--accent); flex: none; }
.um-item.add { color: var(--muted); }
.um-item.add .um-logo { background: transparent; border: 1px dashed var(--border); }
.um-item.danger { color: var(--fail); }
.um-item.danger:hover { background: var(--fail-bg); }
.um-sep { height: 1px; background: var(--border-soft); margin: 6px 4px; }
.nav-foot .ava { cursor: pointer; border: 0; }

/* ── модальное окно ────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(20, 23, 21, .38);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 560px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.35);
}
.modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border-soft);
}
.modal-head h2 { margin: 0; font: 600 16px/1.35 var(--sans); }
.modal-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.modal-head .x { margin-left: auto; color: var(--muted); padding: 4px; border-radius: 6px; flex: none; }
.modal-head .x:hover { background: var(--surface-2); color: var(--ink); }
.modal-body { padding: 18px 20px; }
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px 18px; border-top: 1px solid var(--border-soft);
}
.modal-foot .spacer { flex: 1; }
.modal-foot .note { font-size: 12px; color: var(--muted); }

.savebar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 55;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 18px;
  background: var(--raise); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.3);
}
.savebar[hidden] { display: none; }
.savebar-note { font-size: 13px; color: var(--ink-2); }

.page-toolbar { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; flex-wrap: wrap; }
.page-toolbar .spacer { flex: 1; }

/* ── channel brand marks ───────────────────────────────── */
.brand-icon {
  width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center;
  border-radius: 11px; color: var(--ink-2); background: var(--surface-2);
}
.brand-icon svg { width: 24px; height: 24px; }
.brand-icon.brand-telegram { color: #229ED9; background: color-mix(in srgb, #229ED9 12%, var(--raise)); }
.brand-icon.brand-whatsapp { color: #1FAF5B; background: color-mix(in srgb, #25D366 13%, var(--raise)); }
.brand-icon.brand-max { color: #7357FF; background: color-mix(in srgb, #7357FF 12%, var(--raise)); }
.brand-icon.brand-vk { color: #0077FF; background: color-mix(in srgb, #0077FF 11%, var(--raise)); }
.brand-icon.brand-cian { color: #1173D4; background: color-mix(in srgb, #21A4F7 12%, var(--raise)); }
.brand-icon.brand-web { color: var(--accent); background: var(--accent-bg); }
.brand-icon.brand-page { color: var(--accent); background: var(--accent-bg); }
.brand-icon.brand-avito { background: color-mix(in srgb, var(--surface-2) 68%, var(--raise)); }
.brand-icon.sm { width: 32px; height: 32px; border-radius: 9px; }
.brand-icon.sm svg { width: 20px; height: 20px; }
.pb-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; flex: none; }
.pb-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pb-status.ok { background: var(--ok-bg); color: var(--ok); }
.pb-status.wait { background: var(--wait-bg); color: var(--wait); }
.pb-status.idle { background: var(--surface-2); color: var(--muted); }

@media (max-width: 920px) {
  .pb-parents .pb-parent, .pb-parents .pb-path-sep { display: none; }
  .pb-parents .pb-parent.last { display: inline; }
  .pb-parents::before { content: "←"; margin-right: 6px; color: var(--muted); }
  .pb-row { gap: 12px; }
}

@media (max-width: 720px) {
  /* На узком экране сохранённый desktop-state не может отдать sidebar
     половину viewport. Desktop preference при этом не перезаписывается. */
  .app { --nav-w: 60px; }
  .app.nav-locked-compact #collapse { display: none; }
}

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


/* ── страницы входа: инфобокс слева, форма справа ──────── */
body.auth { display: grid; grid-template-columns: 1fr minmax(0, 1fr); min-height: 100vh; }
@media (max-width: 900px) {
  body.auth { grid-template-columns: 1fr; }
  .auth-aside { order: 2; border-left: 0; border-top: 1px solid var(--border); }
}
.auth-aside {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 56px; gap: 24px;
}
.auth-aside .logo { display: flex; align-items: center; gap: 10px;
                    font: 500 19px/1 var(--sans); margin-bottom: 6px; }
.auth-aside .logo .mark { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); }
.auth-aside .quote { font: 400 22px/1.45 var(--sans); max-width: 26ch; }
.auth-aside .who { font-size: 13px; color: var(--muted); }
.auth-mini { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg);
             padding: 15px 16px; max-width: 400px; }
.auth-mini .m-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.auth-mini .m-who { font-weight: 600; font-size: 13px; }
.auth-mini .m-at { margin-left: auto; font-size: 12px; color: var(--muted); }
.auth-mini .m-text { font: 400 14px/1.6 var(--sans); color: var(--ink-2); margin-bottom: 12px; }
.auth-mini .m-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
                     font-weight: 600; color: var(--wait); }
.auth-points { display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.auth-points li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 11px;
                  font-size: 14px; line-height: 1.5; color: var(--ink-2); list-style: none; }
.auth-points b { color: var(--ink); font-weight: 600; }
.auth-points { margin: 0; padding: 0; }

.auth-form { display: grid; place-items: center; padding: 40px 24px; }
.auth-form .wrap { width: 100%; max-width: 360px; }
.auth-form h1 { margin: 0 0 6px; font: 500 26px/1.2 var(--sans); }
.auth-form .sub { margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.auth-form .field { margin-bottom: 14px; }
.auth-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.auth-form .control { width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
                      border: 1px solid var(--border); background: var(--surface);
                      font: 400 14px/1.55 var(--sans); color: var(--ink); }
.auth-form .control:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.auth-form .btn.wide { width: 100%; justify-content: center; padding: 7px; font-size: 13px; margin-top: 6px; }
.auth-form .foot { margin-top: 22px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-form .foot a { text-decoration: none; font-weight: 600; }
.auth-form .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }
.theme-fab { position: fixed; right: 16px; top: 16px; color: var(--muted); padding: 7px; border-radius: 8px; }
.theme-fab:hover { color: var(--ink); background: var(--surface-2); }


/* ── полоса пайплайна: шаги ингеста ────────────────────── */
.pipeline { display: flex; align-items: flex-start; gap: 0; padding: 14px 0 16px; }
.pl-step { flex: 1; min-width: 0; position: relative; padding-right: 14px; }
.pl-step .line { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.pl-step .dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; font: 600 12px/1 var(--sans);
}
.pl-step .rail { flex: 1; height: 2px; background: var(--border); border-radius: 2px; }
.pl-step:last-child { padding-right: 0; }
.pl-step:last-child .rail { display: none; }
.pl-step .nm { font-size: 13px; color: var(--muted); }
.pl-step .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.pl-step.done .dot { background: var(--ok); color: var(--on-accent); }
.pl-step.done .rail { background: var(--ok); }
.pl-step.done .nm { color: var(--ink-2); }

.pl-step.now .dot { background: var(--accent); color: var(--on-accent); }
.pl-step.now .nm { color: var(--ink); font-weight: 600; }
.pl-step.now .sub { color: var(--accent); font-weight: 600; }

.pl-step.fail .dot { background: var(--fail); color: #fff; }
.pl-step.fail .nm { color: var(--fail); font-weight: 600; }
.pl-step.fail .sub { color: var(--fail); }

/* ── Фото (028): превью квадратом заданного размера — лента не прыгает, полный
   размер в галерее по щелчку (photos.js). Размеры — как в живом Iris. */
.ph-set { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-tile { display: block; padding: 0; border: 0; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.ph-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-kt, .ph-cv { max-width: 82%; }
.ph-kt { justify-content: flex-end; max-width: 78%; }
.ph-kt .ph-tile, .ph-cv .ph-tile { width: 160px; height: 160px; border-radius: 12px; }
.ph-slot, .ph-ld { gap: 4px; }
.ph-slot .ph-tile, .ph-ld .ph-tile { width: 56px; height: 56px; border-radius: 6px; }
.ph-lc { margin-top: 4px; }
.ph-lc .ph-tile { width: 96px; height: 96px; border-radius: 8px; }
.ph-set.pending { opacity: .6; }

.lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 20, 32, .62); }
.lb[hidden] { display: none; }
.lb-img { padding: 0; border: 0; background: none; cursor: zoom-out; }
.lb-img img { display: block; max-height: calc(100vh - 48px); max-width: calc(100vw - 128px); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--raise); color: var(--ink);
  font: 400 22px/1 var(--sans); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); opacity: .85; cursor: pointer; }
.lb-arrow:hover { opacity: 1; }
.lb-arrow[hidden] { display: none; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }

/* Картинки, приложенные к сообщению в поле ввода: 56px над полем, ход загрузки,
   «↻» после сбоя и «×» убрать. */
.cmp-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 6px; }
.cmp-file { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.cmp-file img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-file.up img, .cmp-file.fail img { opacity: .45; }
.cmp-file.fail { outline: 1px solid var(--fail); }
.cmp-file .wait { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--surface-3);
  border-top-color: var(--accent); border-radius: 999px; animation: cmp-spin .8s linear infinite; }
@keyframes cmp-spin { to { transform: rotate(360deg); } }
.cmp-file .retry { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px;
  background: var(--raise); color: var(--fail); font-size: 15px; cursor: pointer; }
.cmp-file .rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff; font: 400 14px/18px var(--sans); cursor: pointer; }