/* ======== Мои Места · Фирменный стиль ======== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800&family=Montserrat+Alternates:wght@500;600&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* Цвета: кремовый фон, тёмно-синий, тёплый оранж */
  --bg: #FAF7F2;
  --bg-soft: #F4EFE5;
  --card: #FFFFFF;
  --ink: #1C2B3A;
  --ink-2: #2D3E52;
  --muted: #6B7A8A;
  --muted-2: #A0A9B5;
  --border: #EBE3D4;
  --border-strong: #D9CFBB;

  --navy: #1E3A5F;
  --navy-dark: #152944;
  --navy-soft: #EEF2F7;

  --accent: #E8823D;          /* warm orange */
  --accent-dark: #C96A26;
  --accent-soft: #FCEBD7;

  --success: #5A8A6E;
  --success-soft: #E4EEE7;
  --danger: #C25450;
  --danger-soft: #F7E2E0;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 43, 58, 0.04), 0 8px 24px rgba(28, 43, 58, 0.05);
  --shadow-sm: 0 1px 2px rgba(28, 43, 58, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Заголовки — фирменный акцентный шрифт */
h1, h2, h3, .topbar .title {
  font-family: 'M PLUS Rounded 1c', 'Montserrat', sans-serif;
}
/* Подзаголовки и пилюли — Montserrat Alternates */
.sidebar-section h2, .mode-btn, .cat-trigger, .cat-menu button {
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
}

/* ---------- Шапка ---------- */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Бренд: логотип сверху, подпись «Кабинет …» снизу — в одном flex-column.
   Освобождает место в горизонтали шапки. */
.topbar .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.topbar .logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.topbar .logo img {
  height: 32px;
  width: auto;
  display: block;
}
.topbar .title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  /* Сдвигаем под текст «Мои Места» в логотипе, мимо иконки. */
  margin-left: 44px;
}

/* ---------- Дропдаун-переключатель разделов кабинета ---------- */
.section-dropdown { position: relative; }
.section-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.section-dropdown-btn:hover { border-color: var(--accent); }
.section-dropdown-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.section-dropdown-emoji { font-size: 16px; line-height: 1; }
.section-dropdown-caret {
  font-size: 11px;
  color: var(--muted);
  margin-left: 2px;
  transition: transform 0.12s;
}
.section-dropdown-btn[aria-expanded="true"] .section-dropdown-caret { transform: rotate(180deg); }

.section-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  padding: 6px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(28, 43, 58, 0.12);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.section-dropdown-menu[hidden] { display: none; }
.section-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.section-dropdown-item:hover { background: var(--bg-soft); }
.section-dropdown-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Бокс с именем оператора и кнопкой «Выйти» в шапке.
   margin-left: auto гарантирует прижим к правому краю независимо от того,
   виден ли #op-topbar-objections (flex:1) или скрыт через .hidden-by-user.
   Иначе при скрытых возражениях имя «улетало» влево к логотипу. */
.operator-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-left: auto;
}
.operator-box .op-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operator-box .logout-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: inherit;
}
.operator-box .logout-btn:hover { color: var(--danger); background: var(--danger-soft); }

/* Переключатель режима (Возражения / Документы) — встроен в шапку */
.mode-nav {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
.mode-btn {
  background: transparent;
  border: none;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.mode-btn:hover { background: var(--bg-soft); color: var(--ink); }
.mode-btn.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.mode-btn span { font-size: 15px; line-height: 1; }

/* Выпадашка «Разделы» — Возражения / Документы / Мотивация свёрнуты сюда,
   чтобы не есть место в шапке. «Плюс Заявка» остаётся отдельной кнопкой. */
.mode-more { position: relative; display: inline-block; }
.mode-more-trigger {
  background: transparent;
  border: none;
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.mode-more-trigger:hover { background: var(--bg-soft); color: var(--ink); }
.mode-more-trigger.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.mode-more-trigger .emoji { font-size: 15px; line-height: 1; }
.mode-more-trigger .arrow { font-size: 11px; color: var(--muted); margin-left: 2px; }
.mode-more-trigger.active .arrow { color: var(--accent-dark); }
.mode-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
}
.mode-more-menu.hidden { display: none; }
.mode-more-menu .mode-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
}

.topbar .spacer { flex: 1; }
/* Кнопка «＋ Новая заявка» в шапке оператора — между mode-nav и role-switcher.
   Видна только в режиме «Плюс Заявка» (operator.js setMode). */
.op-topbar-btn {
  font-size: 13px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* Вкладка «📞 Анализ звонков» в шапке — отдельная кнопка-таб между
   выпадашкой «Разделы» и «＋ Новая заявка». */
.topbar-tab-btn {
  background: transparent;
  border: none;
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.topbar-tab-btn:hover { background: var(--bg-soft); color: var(--ink); }
.topbar-tab-btn.active {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.topbar-tab-btn span { font-size: 15px; line-height: 1; }
.topbar a, .topbar button.link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.topbar a:hover, .topbar button.link:hover { background: var(--bg-soft); color: var(--navy); }

/* ---------- Переключатель ролей в шапке (выпадающий) ---------- */
.role-switcher {
  position: relative;
}
.role-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.role-trigger:hover { border-color: var(--accent); }
.role-trigger .emoji { font-size: 16px; line-height: 1; }
.role-trigger .arrow { font-size: 11px; color: var(--muted); margin-left: 2px; }
.role-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 6px;
  z-index: 50;
}
.role-menu.hidden { display: none; }
.role-menu .role-item {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.role-menu .role-item:hover { background: var(--accent-soft); }
.role-menu .role-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.role-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}
.role-menu-section-title {
  padding: 6px 14px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 600;
}
.role-impersonate-group { position: relative; }
.role-impersonate-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.role-impersonate-trigger:hover { background: var(--accent-soft); }
.role-impersonate-trigger .arrow {
  font-size: 11px;
  color: var(--muted);
  margin-left: 8px;
}
.role-impersonate-list {
  padding: 4px 0 4px 14px;
  max-height: 280px;
  overflow-y: auto;
}
.role-impersonate-list.hidden { display: none; }
.role-impersonate-item {
  display: block;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
.role-impersonate-item:hover { background: var(--accent-soft); color: var(--accent); }
.role-impersonate-loading,
.role-impersonate-empty {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- View-as banner (admin смотрит чужой кабинет) ---------- */
.view-as-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #f5c560;
  color: #1f1812;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.view-as-banner .view-as-icon { font-size: 16px; }
.view-as-banner .view-as-text { flex: 1; }
.view-as-banner .view-as-text b { font-weight: 700; }
.view-as-banner .view-as-exit {
  background: #1f1812;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.view-as-banner .view-as-exit:hover { filter: brightness(1.15); }
body.has-view-as-banner { padding-top: 40px; }

/* ---------- User-ident banner (обычная авторизация, для всех ролей) ---------- */
.user-ident-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #e8f5ee;
  color: #1f1812;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  border-bottom: 1px solid #c8e8d4;
}
.user-ident-banner .user-ident-icon { font-size: 13px; }
.user-ident-banner .user-ident-text { flex: 1; }
.user-ident-banner .user-ident-text b { font-weight: 600; }
body.has-user-ident-banner { padding-top: 32px; }

/* ---------- Сетка кабинетов на hub.html ---------- */
.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.cabinet-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.cabinet-card:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  background: #fff;
}
.cabinet-label { line-height: 1.2; }

/* ---------- Бейджи ролей и статусов в админке «Пользователи» ---------- */
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink-2);
  margin-right: 4px;
}
.role-badge.role-admin    { background: #fef3c7; color: #92400e; }
.role-badge.role-operator { background: #dbeafe; color: #1e40af; }
.role-badge.role-seller   { background: #dcfce7; color: #166534; }
.role-badge.role-marketer { background: #f3e8ff; color: #6b21a8; }
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
}
.status-badge.status-active   { background: #dcfce7; color: #166534; }
.status-badge.status-disabled { background: #fee2e2; color: #991b1b; }

/* ---------- Колокольчик уведомлений (cabinet-shell.js) ---------- */
.bell { position: relative; display: inline-block; }
.bell-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  transition: background 0.15s;
}
.bell-btn:hover { background: var(--bg-soft); }
.bell-icon { display: inline-block; }
.bell-count {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
  overflow: hidden;
}
.bell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.bell-head .link {
  font-size: 12px;
  color: var(--ink-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.bell-head .link:hover { background: var(--bg-soft); color: var(--navy); }
.bell-list {
  max-height: 360px;
  overflow-y: auto;
}
.bell-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.bell-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: var(--bg-soft); }
.bell-item.unread { background: #eff6ff; }
.bell-item.unread:hover { background: #dbeafe; }
.bell-item-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.bell-item-body {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 4px;
}
.bell-item-time {
  font-size: 11px;
  color: var(--muted);
}
.bell-footer {
  display: block;
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--navy);
  text-decoration: none;
  border-top: 1px solid var(--border);
}
.bell-footer:hover { background: var(--border); }

/* ---------- Полная страница уведомлений (notifications.html) ---------- */
.notifications-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.notif-row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row.unread { background: #eff6ff; }
.notif-time { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.notif-title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.notif-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; }
.notif-actions { display: flex; gap: 8px; align-items: center; }
.notif-link {
  font-size: 13px; font-weight: 600;
  color: var(--navy); text-decoration: none;
}
.notif-link:hover { text-decoration: underline; }

/* ---------- Контейнер ---------- */
.container { max-width: 1120px; margin: 0 auto; padding: 32px 28px; }
.container.narrow { max-width: 720px; }
.container.wide { max-width: none; padding: 28px 40px; }

/* ---------- Поиск ---------- */
.search-wrap { margin: 8px 0 32px; position: relative; }
.search-wrap input {
  width: 100%;
  padding: 20px 22px 20px 58px;
  font-size: 18px;
  font-weight: 500;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  box-shadow: var(--shadow-sm);
}
.search-wrap input::placeholder { color: var(--muted-2); font-weight: 400; }
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.search-wrap::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7A8A' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 110-15 7.5 7.5 0 010 15z'/></svg>");
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* ---------- Секции ---------- */
.section { margin-bottom: 36px; }
.section h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 700;
}

/* ---------- Выпадающий список рубрик в шапке ---------- */
.category-dropdown { position: relative; }
.cat-trigger {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cat-trigger:hover { border-color: var(--navy); }
.cat-trigger .emoji { font-size: 16px; line-height: 1; }
.cat-trigger .arrow { font-size: 10px; color: var(--muted); transition: transform 0.2s; }
.category-dropdown.open .cat-trigger { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.category-dropdown.open .cat-trigger .arrow { transform: rotate(180deg); }

.cat-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(28, 43, 58, 0.15);
  padding: 6px;
  z-index: 60;
  animation: menuIn 0.15s ease-out;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: translateY(0);} }
.cat-menu.hidden { display: none; }
.cat-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.1s;
}
.cat-menu button:hover { background: var(--bg-soft); }
.cat-menu button.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.cat-menu button .emoji { font-size: 18px; line-height: 1; width: 22px; text-align: center; }

/* ---------- Основной макет: сайдбар + контент ---------- */
.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding-right: 4px;
}
.sidebar-section { margin-bottom: 24px; }
.sidebar-section h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 700;
}
.sidebar .search-wrap { margin: 0 0 24px; }
.sidebar .search-wrap input {
  padding: 12px 14px 12px 42px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.sidebar .search-wrap::before {
  left: 14px;
  width: 16px;
  height: 16px;
}

/* Список возражений в сайдбаре (вертикальные кнопки) */
.item-list {
  display: grid;
  gap: 6px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: white;
  border: 1.5px solid var(--border);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: all 0.15s;
  line-height: 1.3;
}
.sidebar-item:hover { border-color: var(--navy); }
.sidebar-item::after {
  content: '›';
  color: var(--muted-2);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}
.sidebar-item:hover::after { color: var(--accent); transform: translateX(2px); }
.sidebar-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: 0 0 0 3px rgba(232, 130, 61, 0.12);
}
.sidebar-item.active::after { color: var(--accent-dark); }
.sidebar-item.cheatsheet {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}
.sidebar-item.cheatsheet:hover { background: var(--navy-dark); border-color: var(--navy-dark); }
.sidebar-item.cheatsheet::after { color: rgba(255,255,255,0.6); }
.sidebar-item.cheatsheet.active {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.25);
}
.sidebar-item.cheatsheet.active::after { color: rgba(255,255,255,0.8); }

/* Документы в сайдбаре — компактный вариант */
.sidebar .doc-item {
  padding: 10px 12px;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.sidebar .doc-item .doc-name { font-size: 13px; }
.sidebar .doc-item .doc-desc { display: none; }
.sidebar .doc-item a { font-size: 12px; padding: 2px 6px; }

/* Заголовок секции в контенте */
.content-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.content-block { margin-bottom: 18px; }

/* Чипы возражений */
.obj-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.obj-chip {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.3;
}
.obj-chip:hover { border-color: var(--navy); color: var(--navy); }
.obj-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.obj-chip.cheatsheet {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}
.obj-chip.cheatsheet:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: white; }
.obj-chip.cheatsheet.active { background: var(--navy-dark); border-color: var(--navy-dark); }
.obj-chip .tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 600;
  opacity: 0.75;
}
.obj-chip.active .tag { background: rgba(255,255,255,0.25); opacity: 1; }

/* Режим «Мотивация» — layout на всю ширину */
.layout.full-width {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* display:flex ниже перебивает атрибут [hidden] — чиним. */
.answer-area[hidden], .motivation-area[hidden] { display: none !important; }

.motivation-area {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 140px);
}
.mot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  /* Sticky: прилипает к верху при вертикальном скролле. Негативные
     маргины растягивают фон на всю ширину .motivation-area, чтобы
     контент не просвечивал по бокам. */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  margin: -20px -20px 0;
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
.mot-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mot-title {
  font-family: 'M PLUS Rounded 1c', 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 18px;
  min-width: 180px;
  text-align: center;
}
.mot-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mot-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.mot-zoom .btn.sm { padding: 5px 10px; min-width: 32px; }
.mot-zoom #mot-zoom-val { min-width: 52px; font-variant-numeric: tabular-nums; }
.mot-hint {
  color: var(--success);
  font-size: 13px;
  font-weight: 600;
}
.mot-table-wrap {
  /* overflow-x: clip (вместо auto) позволяет overflow-y оставаться
     visible — без этого sticky у <thead> не работает относительно
     страницы. Горизонтальный перелив (если таблица шире экрана)
     решается кнопкой «⤢ Вписать». */
  overflow-x: clip;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mot-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  background: white;
}
.mot-table th {
  background: var(--bg-soft);
  color: var(--ink-2);
  font-weight: 700;
  padding: 6px 4px;
  border: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
  position: sticky;
  /* Прилипаем ПОД .mot-head — высоту считаем в JS */
  top: var(--mot-head-h, 64px);
  z-index: 10;
  font-size: 12px;
}
/* Вторая строка шапки (Кол-во / Цена / Сумма) прилипает на
   высоту первой строки ниже, чтобы они не накладывались. */
.mot-table thead .mot-th-row-2 th {
  top: calc(var(--mot-head-h, 64px) + var(--mot-th-row1-h, 40px));
}
/* Заголовки групп (colspan) — разрешаем перенос слов, чтобы
   узкие колонки вроде «Звонки исходящие» не растягивали таблицу. */
.mot-table th[colspan] {
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
  max-width: 110px;
}
.mot-table td {
  border: 1px solid var(--border);
  padding: 0;
  text-align: center;
  background: white;
}
.mot-table td.col-date,
.mot-table th.col-date {
  padding: 6px 10px;
  font-weight: 600;
  background: var(--bg-soft);
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--navy);
  min-width: 72px;
  white-space: nowrap;
}
.mot-table th.col-date { z-index: 3; }
.mot-table td input {
  width: 100%;
  min-width: 44px;
  padding: 6px 4px;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}
.mot-table td input::-webkit-outer-spin-button,
.mot-table td input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mot-table td input:focus {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.mot-table tr.weekend td,
.mot-table tr.weekend td.col-date { background: #F6F3ED; color: var(--muted); }
.mot-table tr.weekend td input { color: var(--muted); }
.mot-table tr:hover td:not(.col-date) { background: #FAF8F2; }
.mot-table .mut { color: var(--muted-2); font-size: 11px; font-weight: 400; }

/* Формульные ячейки — не редактируются, считаются на лету */
.mot-table td.mot-calc {
  padding: 6px 6px;
  text-align: right;
  color: var(--muted);
  background: #FBF7EE;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  user-select: text;
  min-width: 50px;
}
.mot-table td.mot-calc[data-key="total"] {
  font-weight: 800;
  color: var(--navy);
  background: #F4EFE5;
  font-size: 13px;
}
.mot-table tr.weekend td.mot-calc { background: #F2EEE4; color: var(--muted-2); }
/* Плейсхолдер для полей «Цена» — чтобы было видно дефолтную цену */
.mot-table td input::placeholder { color: var(--muted-2); font-style: italic; opacity: 0.9; }

/* ---------- Статистика внутри «Мотивации» ---------- */
.mot-stats {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mot-stats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.mot-stats-head h2 {
  margin: 0;
  font-size: 20px;
  color: var(--navy);
}
.mot-stats-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mot-month-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.mot-month-filter select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  min-width: 150px;
}
.mot-period {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 10px;
}
.mot-period button {
  padding: 7px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mot-period button:hover { color: var(--navy); }
.mot-period button.active {
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.mot-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.mot-kpi {
  background: white;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--kpi-color, var(--navy));
  border-radius: 10px;
  padding: 12px 14px;
}
.mot-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.mot-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.mot-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.mot-chart-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.mot-chart-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.mot-chart-title .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.mot-chart-box { height: 180px; position: relative; }

/* Большая область ответа */
.answer-area {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 44px;
  box-shadow: var(--shadow-sm);
  min-height: calc(100vh - 140px);
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
.answer-area .placeholder {
  color: var(--muted);
  text-align: center;
  padding: 80px 20px;
  font-size: 15px;
}
.answer-area .placeholder .big-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 16px;
  opacity: 0.5;
}
.answer-area h1 {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.answer-head h1 { margin: 0; flex: 1 1 auto; }
.answer-head .details-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  border-color: var(--navy-soft);
  color: var(--navy);
  font-weight: 600;
  align-self: flex-start;
}
.answer-head .details-toggle.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.answer-head .details-toggle:hover { border-color: var(--navy); }
.answer-text.details {
  background: var(--navy-soft);
  border-left: 4px solid var(--navy);
  padding: 18px 22px;
  border-radius: 10px;
}

/* Quill-размеры: классы, которые вставляет редактор, работают и на стороне оператора */
.ql-size-small { font-size: 0.85em; }
.ql-size-large { font-size: 1.35em; }
.ql-size-huge  { font-size: 1.7em; }

/* Rich-text редактор в модалке админки.
   Фикс на наезжание: Quill сам ставит height на контейнер и игнорирует
   max-height потомков — поэтому жёстко фиксируем высоту контейнера и
   делаем редактор скроллящимся внутри, через !important чтобы перебить
   inline-стили Quill. */
.rte {
  background: white;
  border-radius: var(--radius-sm);
}
.modal .ql-toolbar.ql-snow {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
  border-color: var(--border);
  background: var(--bg-soft);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.modal .ql-container.ql-snow {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
  border-color: var(--border);
  font-family: inherit;
  font-size: 15px;
  height: 220px !important;        /* фикс. высота контейнера */
  max-height: 220px !important;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.modal .ql-editor {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}
.modal .ql-editor.ql-blank::before { color: var(--muted-2); font-style: italic; }
.modal .form-grid > label,
.modal .form-grid > div { min-width: 0; position: relative; }
.answer-area .answer-text {
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 72ch;
}
.answer-area .answer-text p { margin: 0 0 14px; }
.answer-area .answer-text ul { padding-left: 24px; margin: 10px 0; }
.answer-area .answer-text li { margin-bottom: 10px; }
.answer-area .answer-text strong { color: var(--navy); font-weight: 700; }
.answer-area .actions {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Секция комментариев оператора — прижата к низу карточки, с пониженной визуальной нагрузкой */
.comments-section {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  opacity: 0.78;
  transition: opacity 0.15s;
}
.comments-section:hover,
.comments-section:focus-within { opacity: 1; }
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.comments-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.comments-title .count-badge {
  background: var(--navy-soft);
  color: var(--navy);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.comments-actions { display: flex; gap: 6px; }
.comments-actions .btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-width: 1px;
  border-radius: 6px;
}
.comments-actions .add-btn {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
}
.comments-actions .add-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.comments-actions .add-btn.open {
  background: var(--bg-soft);
  color: var(--muted);
  border-color: var(--border);
}

/* Форма ввода */
.comment-form {
  margin-top: 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  border: 1.5px solid var(--border);
}
.comment-form.hidden { display: none; }
.comment-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}
.comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.comment-form textarea::placeholder { color: var(--muted-2); }
.comment-form .form-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* Список комментариев в ответе оператора */
.comments-list-op {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.comments-list-op.hidden { display: none; }
.comment-item {
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
}
.comment-item .comment-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.comment-item .comment-text {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Список комментариев в админке (в модалке) */
.comments-list {
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.comment-card {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.comment-card .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.comment-card .text {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

/* Блоки шпаргалки в панели ответа */
.cheatsheet-doc { max-width: 72ch; }
.cheatsheet-doc .cs-block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.cheatsheet-doc .cs-block:last-child { border-bottom: none; margin-bottom: 0; }
.cheatsheet-doc .cs-block h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.cheatsheet-doc .cs-block .body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- (legacy — старый список возражений, больше не используется) ---------- */
.obj-list { display: grid; gap: 8px; grid-template-columns: 1fr; }
.obj-btn {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.obj-btn::after {
  content: '›';
  color: var(--muted-2);
  font-size: 22px;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
  font-weight: 400;
}
.obj-btn:hover {
  border-color: var(--navy);
  background: var(--card);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.obj-btn:hover::after { color: var(--accent); transform: translateX(3px); }
.obj-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(232, 130, 61, 0.15);
}
.obj-btn.active::after { color: var(--accent-dark); }
.obj-btn .title-wrap { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.obj-btn .tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 9px;
  background: var(--navy-soft);
  color: var(--navy);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.group-label {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-label::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
}

.separator {
  height: 1px;
  background: var(--border);
  margin: 24px 0 18px;
  position: relative;
}
.separator::after {
  content: attr(data-label);
  position: absolute;
  background: var(--bg);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  padding-right: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- Шпаргалка ---------- */
.cheatsheet details {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cheatsheet summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}
.cheatsheet summary:hover { background: var(--bg-soft); }
.cheatsheet summary::-webkit-details-marker { display: none; }
.cheatsheet summary::before {
  content: '›';
  transition: transform 0.2s;
  font-size: 22px;
  color: var(--accent);
  line-height: 1;
  font-weight: 400;
}
.cheatsheet details[open] summary::before { transform: rotate(90deg); }
.cheatsheet .cheatsheet-body { padding: 4px 22px 20px; border-top: 1px solid var(--border); }
.cheatsheet-block { padding: 16px 0; border-top: 1px solid var(--border); }
.cheatsheet-block:first-child { border-top: none; padding-top: 18px; }
.cheatsheet-block h3 {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--navy);
  font-weight: 700;
}
.cheatsheet-block .content { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.cheatsheet-block .content p { margin: 4px 0; }
.cheatsheet-block .content ul { margin: 6px 0; padding-left: 22px; }

/* ---------- Документы ---------- */
.docs-list { display: grid; gap: 10px; }
.doc-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color 0.15s;
}
.doc-item:hover { border-color: var(--border-strong); }
.doc-item .doc-name { font-weight: 700; flex: 1; color: var(--ink); }
.doc-item .doc-desc { color: var(--muted); font-size: 13px; flex: 2; }
.doc-item a {
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.doc-item a:hover { background: var(--navy-soft); }

/* ---------- Кнопки ---------- */
.btn {
  border: 1.5px solid var(--border);
  background: var(--card);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.15s;
  font-family: inherit;
  letter-spacing: -0.005em;
}
.btn:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); }
.btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(201, 106, 38, 0.2);
}
.btn.primary:hover { background: var(--accent-dark); color: white; border-color: var(--accent-dark); }
.btn.secondary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.btn.secondary:hover { background: var(--navy-dark); color: white; border-color: var(--navy-dark); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: white; }
.btn.sm { padding: 7px 12px; font-size: 13px; }

/* ---------- Модальное окно ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 43, 58, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--card);
  border-radius: 18px;
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 36px 40px;
  position: relative;
  box-shadow: 0 20px 50px rgba(28, 43, 58, 0.25);
  animation: slideUp 0.2s ease-out;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0;} to { transform: translateY(0); opacity: 1;} }
.modal h1 {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 800;
  padding-right: 40px;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.modal .answer-text {
  font-size: 19px;
  line-height: 1.6;
  max-width: 68ch;
  color: var(--ink);
}
.modal .answer-text p { margin: 0 0 14px; }
.modal .answer-text ul { padding-left: 24px; margin: 12px 0; }
.modal .answer-text li { margin-bottom: 10px; }
.modal .answer-text strong { color: var(--navy); font-weight: 700; }
.modal .actions {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.modal .close-x {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--bg-soft);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.modal .close-x:hover { background: var(--border); color: var(--ink); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(28, 43, 58, 0.25);
  animation: toastIn 0.2s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px);} to { opacity: 1; transform: translate(-50%, 0);} }

/* ---------- Формы / админка ---------- */
.admin-nav {
  display: flex;
  gap: 2px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 28px;
  overflow-x: auto;
  padding: 0 2px;
}
.admin-nav a {
  padding: 14px 18px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2.5px solid transparent;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  margin-bottom: -1.5px;
  transition: color 0.15s, border-color 0.15s;
}
.admin-nav a:hover { color: var(--navy); }
.admin-nav a.active { color: var(--navy); border-bottom-color: var(--accent); }

.form-grid { display: grid; gap: 14px; max-width: 640px; }
.form-grid label { display: block; }
.form-grid .lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-grid input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="password"],
.form-grid input[type="email"],
.form-grid input[type="url"],
.form-grid input[type="search"],
.form-grid input[type="tel"],
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  outline: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-grid textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.form-grid input:focus, .form-grid textarea:focus, .form-grid select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-grid .pwd-wrap { position: relative; }
.form-grid .pwd-wrap input { padding-right: 48px; }
.pwd-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
}
.pwd-toggle:hover { background: var(--accent-soft); }
.form-grid .row { display: flex; gap: 10px; align-items: center; padding-top: 6px; }
.form-grid .inline { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.form-grid .inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.form-grid .inline span { font-size: 14px; font-weight: 500; color: var(--ink-2); }

/* ---------- Таблица ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--border);
}
.table th, .table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.table th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(244, 239, 229, 0.4); }
.table .actions-cell { white-space: nowrap; text-align: right; }

.pw-cell { display: inline-flex; align-items: center; gap: 6px; }
.pw-cell .pw-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  padding: 2px 8px;
  background: var(--bg-soft);
  border-radius: 6px;
  min-width: 80px;
  display: inline-block;
}
.pw-cell .btn.sm { padding: 4px 8px; font-size: 12px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--navy-soft);
  color: var(--navy);
  letter-spacing: 0.02em;
}
.badge.muted { background: var(--bg-soft); color: var(--muted); }
.badge.off { background: var(--danger-soft); color: var(--danger); }
.badge.accent { background: var(--accent-soft); color: var(--accent-dark); }
.badge.success { background: var(--success-soft); color: var(--success); }

/* ---------- Логин ---------- */
.login-card {
  max-width: 420px;
  margin: 80px auto;
  background: var(--card);
  padding: 36px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1.5px solid var(--border);
}
.login-card h1 {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.login-card .error {
  color: var(--danger);
  font-size: 14px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--danger-soft);
  border-radius: 8px;
}

/* ---------- Статистика ---------- */
.stats-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  background: var(--bg-soft);
  padding: 5px;
  border-radius: var(--radius);
  width: fit-content;
  flex-wrap: wrap;
}
.stats-filters .op-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 14px;
  margin-left: 6px;
  border-left: 1px solid var(--border-strong);
  font-size: 13px;
  color: var(--muted);
}
.stats-filters .op-filter select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.stats-filters button {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  transition: all 0.15s;
}
.stats-filters button:hover { color: var(--navy); }
.stats-filters button.active {
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.stats-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.stats-card h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.kpi {
  font-size: 42px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-label { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Утилиты ---------- */
.muted { color: var(--muted); }
.empty {
  color: var(--muted);
  padding: 48px 20px;
  text-align: center;
  font-size: 15px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.empty.plain { background: none; }
.hidden { display: none !important; }
.flex { display: flex; gap: 10px; align-items: center; }
.flex.between { justify-content: space-between; }

h2.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
}

/* ---------- Ошибка подключения ---------- */
.error-banner {
  background: var(--danger-soft);
  border: 1.5px solid var(--danger);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--danger);
  margin-bottom: 24px;
  font-weight: 500;
}

/* ---------- Кабинет менеджера: layout с боковым меню ---------- */
.seller-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
/* Если сайдбар спрятан (id="seller-nav" hidden) — раскрываем контент на всю
   ширину. Управление разделами идёт через дропдаун в шапке. */
.seller-layout:has(> .seller-sidebar[hidden]) {
  grid-template-columns: 1fr;
}
.seller-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 88px;
}
.seller-sidebar[hidden] { display: none !important; }
.seller-tab[hidden] { display: none !important; }
.seller-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.seller-tab:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.seller-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(238, 117, 31, 0.15);
}
.seller-tab .emoji {
  font-size: 20px;
  line-height: 1;
}
.seller-content { min-width: 0; }

@media (max-width: 900px) {
  .seller-layout { grid-template-columns: 1fr; }
  .seller-sidebar {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }
  .seller-tab { flex: 1 1 auto; min-width: 160px; }
}

/* ---------- Кабинет менеджера: ежедневный отчёт ---------- */
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.report-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.report-month {
  min-width: 140px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.report-saved {
  color: #059669;
  font-size: 13px;
  font-weight: 600;
  padding: 0 8px;
}
.btn.icon {
  padding: 6px 10px;
  font-weight: 600;
}

/* Таблица ежедневного отчёта — оформлена в стиле мотивации операторов
   (см. .mot-table): плотные клетки с border-collapse, инпуты-без-рамок
   во всю ячейку, текущий день и выходные подсвечены. */
.report-table-wrap {
  overflow-x: clip;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.report-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  background: white;
}
.report-table th {
  background: var(--bg-soft);
  color: var(--ink-2);
  font-weight: 700;
  padding: 8px 6px;
  border: 1px solid var(--border);
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.report-table td {
  border: 1px solid var(--border);
  padding: 0;
  text-align: center;
  background: white;
}
.report-table .col-date,
.report-table thead .col-date,
.report-table tfoot .col-date {
  padding: 6px 10px;
  font-weight: 600;
  background: var(--bg-soft);
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--navy);
  min-width: 78px;
  white-space: nowrap;
  text-align: left;
}
.report-table thead .col-date { z-index: 11; }
.report-table tfoot th {
  position: sticky;
  bottom: 0;
  background: var(--bg-soft);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 6px;
  border: 1px solid var(--border);
  text-align: center;
}
.report-table tfoot .col-date { z-index: 3; }

.report-table tbody tr.weekend td,
.report-table tbody tr.weekend .col-date { background: #F6F3ED; color: var(--muted); }
.report-table tbody tr.weekend td input { color: var(--muted); }
.report-table tbody tr.today .col-date { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.report-table tbody tr.today td { background: var(--accent-soft); }
.report-table tbody tr:hover td:not(.col-date) { background: #FAF8F2; }

.report-table .wk {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 4px;
}
.report-table td input[type="number"] {
  width: 100%;
  min-width: 56px;
  padding: 7px 6px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.report-table td input[type="number"]::-webkit-outer-spin-button,
.report-table td input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.report-table td input[type="number"]:focus {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Секции вкладок менеджера */
.seller-section { margin-top: 8px; }
/* В разделе «Мои лиды» поджимаем верх — без заголовка, доска вплотную к шапке. */
#section-leads:not([hidden]) { margin-top: 0; }
#section-leads .leads-root { padding-top: 0; }
body:has(#section-leads:not([hidden])) main.container.wide { padding-top: 10px; }

/* ============================================================
   Кабинет коммерческого директора (commercial.html / commercial.js)
   ============================================================ */

/* Переключатель отделов в шапке сайдбара */
.dept-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.dept-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px;
  background: transparent; border: none; border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; font-family: inherit;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.dept-btn:hover { color: var(--navy); }
.dept-btn.active {
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.dept-btn .emoji { font-size: 14px; line-height: 1; }

.ss-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ss-kpi {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--kpi-c, var(--navy));
  border-radius: 10px;
  padding: 12px 14px;
}
.ss-kpi-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  font-weight: 700; margin-bottom: 6px;
  line-height: 1.3;
}
.ss-kpi-value {
  font-size: 26px; font-weight: 800;
  color: var(--navy); font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ============================================================
   Раздел «Настройки Гари» в админке (admin-agent.js)
   ============================================================ */

.agent-subnav {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 12px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.agent-subtab {
  background: transparent; border: none;
  padding: 9px 14px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 8px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.agent-subtab:hover { color: var(--navy); }
.agent-subtab.active { background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }

.agent-pane.hidden { display: none; }

.card-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card-block h3 { margin: 0 0 8px; font-size: 15px; color: var(--navy); font-weight: 700; }

.topics-list { display: flex; flex-wrap: wrap; gap: 8px; min-height: 30px; }
.topic-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.topic-del {
  background: transparent; border: none;
  color: var(--accent-dark);
  cursor: pointer; padding: 0 2px; font-size: 16px; line-height: 1;
}
.topic-del:hover { color: var(--danger); }

/* Лента сообщений Гари */
.agent-messages-list { display: grid; gap: 10px; }
.agent-msg {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}
.agent-msg.unread { background: #eff6ff; }
.agent-msg.level-info    { border-left-color: var(--navy); }
.agent-msg.level-success { border-left-color: var(--success); }
.agent-msg.level-warning { border-left-color: var(--accent); }
.agent-msg.level-error   { border-left-color: var(--danger); }
.agent-msg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.agent-msg-level {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.agent-msg.level-success .agent-msg-level { color: var(--success); }
.agent-msg.level-warning .agent-msg-level { color: var(--accent-dark); }
.agent-msg.level-error   .agent-msg-level { color: var(--danger); }
.agent-msg-time { font-size: 12px; color: var(--muted); }
.agent-msg-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.agent-msg-body { font-size: 14px; color: var(--ink-2); line-height: 1.5; white-space: pre-wrap; }
.agent-msg-meta { margin-top: 8px; font-size: 12px; }
.agent-msg-meta summary { cursor: pointer; color: var(--muted); }
.agent-msg-meta pre {
  background: var(--bg-soft);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 6px 0 0;
  overflow-x: auto;
  font-size: 12px;
}

/* Тумблер из мастера переиспользуется в таблице процессов — но надо уменьшить, чтобы влезал в строку */
.table .toggle .tgl-track { width: 36px; height: 20px; }
.table .toggle .tgl-thumb { width: 16px; height: 16px; }
.table .toggle .tgl-input:checked ~ .tgl-track .tgl-thumb { transform: translateX(16px); }

/* ============================================================
   Мастер «Подключение компании» (seller-applications.js)
   ============================================================ */

.app-wizard {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

/* Шапка мастера */
.wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wizard-title h1 { margin: 0; font-size: 22px; font-weight: 800; color: var(--navy); }
.wizard-sub { color: var(--ink-2); font-size: 14px; margin: 0; font-weight: 500; }
.wizard-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wizard-saved { color: var(--success); font-size: 13px; font-weight: 600; }

/* Индикатор шагов */
.wizard-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: step;
}
.wiz-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.15s;
  position: relative;
  min-width: 0;
}
.wiz-step .step-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wiz-step.clickable { cursor: pointer; }
.wiz-step.clickable:hover { border-color: var(--accent); color: var(--ink); }
.wiz-step .step-num {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.wiz-step.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.wiz-step.active .step-num {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.wiz-step.done {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.wiz-step.done .step-num {
  background: var(--success);
  color: white;
  border-color: var(--success);
}
.wiz-step.done .step-num::before { content: '✓'; }
.wiz-step.done .step-num { font-size: 14px; }
/* Если шаг одновременно «выполнен» (зелёный) и «активный» — оставляем
   зелёный фон с галочкой, но даём оранжевую обводку, чтобы было видно,
   на каком шаге пользователь сейчас находится. Используется в режиме
   просмотра отправленной заявки. */
.wiz-step.done.active {
  background: var(--success-soft);
  border: 2px solid var(--accent);
  color: var(--success);
}
.wiz-step.done.active .step-num {
  background: var(--success);
  border-color: var(--success);
}

@media (max-width: 900px) {
  .wizard-steps { grid-template-columns: repeat(6, auto); overflow-x: auto; }
  .wiz-step .step-name { display: none; }
}

/* Панели шагов */
.wiz-pane { padding-top: 8px; }
.pane-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--navy); }
.pane-hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; max-width: 640px; }
.field-hint { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.4; }

/* Режим «только просмотр» — заявка уже отправлена Гари, редактировать
   нельзя. Поля приглушены, рамки чуть бледнее. */
.app-wizard.is-readonly input[readonly],
.app-wizard.is-readonly textarea[readonly] {
  background: var(--bg-soft);
  color: var(--ink);
  cursor: default;
}
.app-wizard.is-readonly input[type="checkbox"]:disabled,
.app-wizard.is-readonly input[type="radio"]:disabled {
  cursor: default;
  opacity: 0.85;
}
.app-wizard.is-readonly .seg-btn:not(.active) { display: none; }
.app-wizard.is-readonly .seg-btn.active { cursor: default; }
.app-wizard.is-readonly .pct-range { pointer-events: none; }

/* Звёздочка обязательного поля. Раньше она была того же цвета, что и
   подпись, и терялась — теперь красная, жирная и крупная. */
.req {
  color: var(--danger);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  margin-left: 4px;
  vertical-align: -2px;
}

/* Поле с ошибкой валидации (не заполнено или формат неверный) — красная
   рамка. Класс ставится при попытке листнуть «Далее» с пустым полем. */
.form-grid .field-error,
.form-grid .field-error:focus { border-color: var(--danger) !important; }

/* Модальное окно подтверждения (заменяет стандартный confirm()). */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: modal-fade-in 0.15s ease-out;
}
.modal-window {
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-width: 440px;
  width: calc(100% - 32px);
  padding: 24px 24px 20px;
  animation: modal-pop-in 0.18s ease-out;
}
.modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.35;
}
.modal-message {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 20px;
  white-space: pre-line;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Подсказка над кнопкой «Далее» при наведении, если шаг не валиден. */
.next-tooltip {
  position: fixed;
  background: #2a2a35;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  transform: translateX(-50%);
  pointer-events: none;
  animation: modal-fade-in 0.12s ease-out;
}
.next-tooltip-title { font-weight: 700; margin-bottom: 6px; color: #fff; }
.next-tooltip ul { margin: 0; padding-left: 18px; }
.next-tooltip li { margin: 2px 0; color: rgba(255, 255, 255, 0.9); }

/* «Не готова» — кнопка визуально сообщает, что что-то не дозаполнено,
   но всё ещё кликабельна (по клику покажется список пропусков). */
.btn.primary.not-ready { opacity: 0.55; }
.btn.primary.not-ready:hover { opacity: 0.85; }

/* Строка ввода кода подтверждения e-mail / телефона ЛПР.
   Кнопка справа от поля проходит три состояния:
     send     — «Отправить код» (оранжевая, поле кода disabled),
     confirm  — «Подтвердить»  (оранжевая, поле кода активно),
     verified — «✓ Подтверждён» (зелёная плашка вместо кнопки). */
.verify-code-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}
.verify-code-row input[type="text"] {
  width: 200px;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  outline: none;
}
.verify-code-row input[type="text"]:focus { border-color: var(--accent); }
.verify-code-row input[type="text"]:disabled { background: var(--bg-soft); color: var(--muted); }
.verify-code-row .btn[data-st="verified"] {
  background: rgba(34, 154, 91, 0.14);
  border-color: rgba(34, 154, 91, 0.45);
  color: var(--success);
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}

/* Под кнопкой — текст-таймер «Отправить код повторно через X сек».
   Когда таймер дошёл до нуля — становится кликабельной ссылкой. */
.verify-resend {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.verify-resend.ready {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.verify-resend.ready:hover { color: var(--accent-dark); }
.pane-section {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

.wiz-grid { display: grid; gap: 14px; max-width: 760px; }

/* Блок «Загрузить карточку предприятия» */
.card-upload-block {
  margin-bottom: 18px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
}
.card-upload-block.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.card-upload-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.card-upload-hint {
  font-size: 12px; color: var(--muted); margin: 0; max-width: 540px;
  line-height: 1.4;
}
.card-upload-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: var(--card);
  border: 1px solid var(--border);
}
.card-upload-status.ok { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.card-upload-status.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.card-upload-status.muted { color: var(--muted); }

/* Inline кнопка рядом с инпутом (ИНН + «Заполнить») */
.row-inline { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.row-inline input { flex: 1 1 200px; }

.dadata-status {
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
  font-weight: 500;
}
.dadata-status.ok { color: var(--success); }
.dadata-status.error { color: var(--danger); }
.dadata-status.muted { color: var(--muted); }

/* Телефонные поля — крупнее и заметнее, чем обычный текстовый инпут.
   Моноширинные цифры — чтобы скобки/группы не плясали при наборе. */
.form-grid input[type="tel"] {
  font-size: 18px;
  padding: 14px 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  font-weight: 500;
  max-width: 360px;
}

/* Файлы */
.file-drop {
  margin-top: 6px;
  padding: 14px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.file-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.file-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.file-grid, .file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.file-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  aspect-ratio: 1;
}
.file-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.file-remove:hover { background: var(--danger); }

/* Филиалы */
.branches-list { display: grid; gap: 12px; margin-bottom: 14px; }
.branch-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.branch-row { display: flex; gap: 12px; align-items: flex-end; }
.branch-input { flex: 1; }
.branch-input .lbl {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.branch-input input {
  width: 100%; padding: 12px 16px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.branch-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* DaData выпадашка */
.dadata-wrap { position: relative; }
.dadata-suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
}
.dadata-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.dadata-item:last-child { border-bottom: none; }
.dadata-item:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* Программа лояльности */
.loyalty-help-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.loyalty-help-banner {
  background: var(--bg-soft);
  border: 1.5px dashed var(--border-strong);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}

.loyalty-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.loyalty-type {
  cursor: pointer;
  display: block;
}
.loyalty-type input { position: absolute; opacity: 0; pointer-events: none; }
.lt-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: all 0.15s;
}
.lt-card:hover { border-color: var(--navy); }
.loyalty-type input:checked + .lt-card {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(232,130,61,0.12);
}
.lt-emoji { font-size: 28px; margin-bottom: 6px; }
.lt-name { font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.lt-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

.subtype-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.subtype-tab {
  background: transparent; border: none; padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 7px; font-family: inherit;
}
.subtype-tab:hover { color: var(--navy); }
.subtype-tab.active { background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }

.loyalty-external-banner {
  background: var(--success-soft);
  border-left: 4px solid var(--success);
  border-radius: 10px;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--success);
  margin-bottom: 16px;
}

.loyalty-monthly-banner {
  background: var(--navy-soft);
  border-left: 4px solid var(--navy);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 16px;
}

.loyalty-fields { display: grid; gap: 16px; max-width: 760px; }
.loy-row .lbl {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.loy-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* Сегментированные кнопки (Год / Неограниченно и т.п.) */
.seg-group {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 10px;
  flex-wrap: wrap;
}
.seg-btn {
  background: transparent; border: none; padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--muted);
  cursor: pointer; border-radius: 7px; font-family: inherit;
}
.seg-btn:hover { color: var(--navy); }
.seg-btn.active { background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm); }

/* Сегментированные радио в виде <label> с <input type="radio"> внутри
   (используется в шаге «Интеграция»). */
.seg-row {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 10px;
  flex-wrap: wrap;
}
.seg-row .seg-btn {
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.seg-row .seg-btn input {
  position: absolute; opacity: 0; pointer-events: none;
}
.seg-row .seg-btn:has(input:checked) {
  background: var(--card); color: var(--navy); box-shadow: var(--shadow-sm);
}

/* Шаг 2: Интеграция */
.integ-block { margin-bottom: 22px; }
.integ-block:last-child { margin-bottom: 0; }
.integ-details { padding-top: 4px; }
.integ-presets { display: flex; flex-direction: column; gap: 8px; }
.integ-preset-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color 0.15s, background 0.15s;
}
.integ-preset-row.is-on { border-color: var(--accent); background: var(--accent-soft); }
.integ-preset-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 600; color: var(--ink);
}
.integ-preset-toggle input { width: 18px; height: 18px; cursor: pointer; }
.integ-preset-version {
  padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px;
  background: var(--card); color: var(--ink);
}
.integ-preset-version:disabled { background: var(--bg-soft); color: var(--muted); cursor: not-allowed; }

.integ-custom-list { display: flex; flex-direction: column; gap: 8px; }
.integ-custom-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
  align-items: center;
}
.integ-custom-row input {
  padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
}

@media (max-width: 700px) {
  .integ-preset-row { grid-template-columns: 1fr; }
  .integ-custom-row { grid-template-columns: 1fr; }
}

/* Процент: число + ползунок */
.pct-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pct-input {
  width: 80px; padding: 8px 10px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px; text-align: right;
  background: var(--card); color: var(--ink);
  -moz-appearance: textfield;
}
.pct-input::-webkit-outer-spin-button,
.pct-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-suffix { color: var(--muted); font-weight: 600; }
/* Слайдер процента: бежевый трек, оранжевая заливка, круглый бегунок с
   мягкой тенью. Заливку прогресса в Webkit рисуем через linear-gradient
   в inline-style — JS обновляет позицию при input/change. */
.pct-range {
  flex: 1 1 200px;
  min-width: 160px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.pct-range:focus { background-image: none; }
.pct-range::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border-radius: 999px;
}
.pct-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(232, 130, 61, 0.35);
  margin-top: -7px;
  cursor: grab;
  transition: transform 0.12s ease;
}
.pct-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.pct-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.pct-range::-moz-range-track {
  background: var(--border);
  height: 6px;
  border-radius: 999px;
}
.pct-range::-moz-range-progress {
  background: var(--accent);
  height: 6px;
  border-radius: 999px;
}
.pct-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(232, 130, 61, 0.35);
  cursor: grab;
}
.num-input {
  width: 100px; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px;
  background: var(--card); color: var(--ink);
}

/* Тумблер */
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle .tgl-input { position: absolute; opacity: 0; pointer-events: none; }
.tgl-track {
  display: inline-block; width: 38px; height: 22px;
  background: var(--border); border-radius: 999px;
  position: relative; transition: background 0.15s;
}
.tgl-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white; border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle .tgl-input:checked ~ .tgl-track { background: var(--accent); }
.toggle .tgl-input:checked ~ .tgl-track .tgl-thumb { transform: translateX(16px); }
.tgl-label { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Пороги */
.tiers-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px;
}
.tiers-list { display: grid; gap: 8px; }
.tier-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.tier-row input {
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink); outline: none;
}
.tier-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 700px) {
  .tier-row { grid-template-columns: 1fr 1fr; }
  .tier-row .tier-name { grid-column: 1 / -1; }
  .tier-row .tier-del { grid-column: 2; justify-self: end; }
}

/* Низ мастера */
.wizard-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 28px; padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.wizard-foot-spacer { flex: 1; }
.wiz-pane[hidden] { display: none; }

#wiz-next.submit {
  background: var(--success);
  border-color: var(--success);
}
#wiz-next.submit:hover {
  background: #4a7659;
  border-color: #4a7659;
}
#wiz-next:disabled { opacity: 0.5; cursor: not-allowed; }

/* Список «Мои сделки» */
.deals-list { display: grid; gap: 10px; }
.deal-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* ---------- База знаний у менеджера: документы — двухколоночно как у оператора ---------- */
.kb-docs-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}
.kb-docs-sidebar {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.kb-docs-items { display: flex; flex-direction: column; gap: 4px; }
.kb-doc-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.kb-doc-item:hover { background: var(--bg-soft); }
.kb-doc-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}
.kb-docs-pane {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  min-height: 320px;
}
.kb-docs-pane .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  padding: 60px 20px;
  text-align: center;
}
.kb-docs-pane .placeholder .big-icon { font-size: 48px; opacity: 0.6; }
.kb-doc-title { margin: 0 0 16px; font-size: 24px; color: var(--navy); }
.kb-doc-descr { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 24px; }
.kb-doc-actions { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.kb-doc-url-line {
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, 'SF Mono', monospace;
}
@media (max-width: 900px) {
  .kb-docs-layout { grid-template-columns: 1fr; }
  .kb-docs-sidebar { position: relative; top: auto; max-height: none; }
}

/* ---------- Мои лиды: двухколоночный список + панель деталей ---------- */
.leads-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.leads-sidebar {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.leads-sidebar .leads-title { margin: 0 0 14px; font-size: 18px; }
.leads-items { display: flex; flex-direction: column; gap: 6px; }
.lead-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.lead-item:hover { border-color: var(--accent); }
.lead-item.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
/* Цвет карточки лида в списке: офлайн — оранжевый, онлайн — синий.
   Active-состояние перебивается ниже общим .active. */
.lead-item-offline {
  background: rgba(232, 130, 61, 0.08);
  border-color: rgba(232, 130, 61, 0.35);
}
.lead-item-online {
  background: rgba(63, 130, 220, 0.08);
  border-color: rgba(63, 130, 220, 0.4);
}
.lead-item.lead-item-online.active {
  background: rgba(63, 130, 220, 0.18);
  border-color: #1f5db7;
}
.lead-item-kind {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.lead-item-online .lead-item-kind { color: #2c6dc7; }
.lead-item-offline .lead-item-kind { color: var(--accent-dark); }
.lead-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.lead-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.lead-city { font-weight: 500; }
.lead-from-op {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
  opacity: 0.85;
}
.lead-meet {
  color: var(--accent-dark);
  font-weight: 600;
  white-space: nowrap;
}

.leads-pane {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  min-height: 360px;
}
.leads-pane .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  padding: 60px 20px;
  text-align: center;
}
.leads-pane .placeholder .big-icon { font-size: 48px; opacity: 0.6; }

.lead-detail-title { margin: 0 0 12px; font-size: 24px; color: var(--navy); }

.lead-kind-banner {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  margin: 0 0 16px;
}
.lead-kind-online { background: rgba(63, 130, 220, 0.15); color: #1f5db7; }
.lead-kind-offline { background: rgba(232, 130, 61, 0.15); color: var(--accent-dark); }

.lead-meeting-card {
  background: rgba(232, 130, 61, 0.12);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lead-meeting-card-online {
  background: rgba(63, 130, 220, 0.12);
  border-color: #2c6dc7;
}
/* Пометка «📌 в зуме» внутри карточки — без своего фона, чтобы не разбивать
   единую заливку. Лёгкая обводка слева оставляет визуальный акцент. */
.lead-meeting-card .lead-meeting-note {
  background: transparent;
  padding: 4px 0 4px 10px;
  border-left: 3px solid currentColor;
  border-radius: 0;
  color: var(--accent-dark);
}
.lead-meeting-card-online .lead-meeting-note {
  color: #1f5db7;
}
.lead-meeting-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.lead-meeting-when {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}
.lead-meeting-where {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
.lead-meeting-note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--accent-dark);
  background: var(--accent-soft, rgba(232, 130, 61, 0.08));
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
}

.lead-fields { display: flex; flex-direction: column; gap: 8px; margin: 0 0 28px; padding: 0; }
.lead-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  align-items: baseline;
}
.lead-row dt {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lead-row dd { margin: 0; color: var(--ink); font-size: 14px; word-break: break-word; }
.lead-row dd a { color: var(--accent-dark); text-decoration: none; }
.lead-row dd a:hover { text-decoration: underline; }

/* ============= Карточка заявки у менеджера: новый layout ============= */

/* «От оператора: Имя» — мелкий шильдик в шапке detail-страницы. */
.lead-operator-tag {
  margin-left: 12px;
  font-size: 13px;
  color: var(--muted);
}
.lead-operator-tag b { color: var(--ink); font-weight: 600; }

/* Баннер подтверждения встречи — между meeting-card и блоком контактов. */
.lead-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
}
.lead-confirmation-yes {
  background: rgba(233,118,42,0.08);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
}
.lead-confirmation-no {
  background: var(--bg-soft);
  color: var(--muted);
}
/* Зелёный блок «✅ Подтверждено» — после клика оператора на ✅ в режиме
   «Подтвердить». Менеджер видит, что клиент подтвердил встречу. */
.lead-confirmation-done {
  background: rgba(46, 139, 87, 0.10);
  border: 1px solid #2e8b57;
  color: #1f6b3d;
}
.lead-confirmation-icon { flex: 0 0 20px; font-size: 18px; line-height: 1; }

/* Две колонки: «ЛПР и контакты» (слева) + «О компании» (справа). */
.lead-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 24px;
}
@media (max-width: 880px) {
  .lead-two-col { grid-template-columns: 1fr; }
}
.lead-col { min-width: 0; }
.lead-col .lead-section-title {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ЛПР: имя крупно, должность серым ниже. */
.lead-lpr-block {
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.lead-lpr-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.lead-lpr-position { font-size: 13px; color: var(--muted); margin-top: 2px; padding-left: 22px; }

/* Контакты: строки с иконкой ресурса, значением и двумя кнопками. */
.lead-contacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-contact-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 14px;
}
.lead-contact-row.lead-contact-empty {
  background: transparent;
  border: 1px dashed var(--border);
}
.lead-contact-icon { font-size: 16px; line-height: 1; text-align: center; }
.lead-contact-value { min-width: 0; word-break: break-word; }
.lead-contact-value .lead-no { color: var(--muted); font-size: 13px; }

/* Маленькие квадратные иконки-кнопки (то же поведение, что
   .ol-icon-btn у оператора, но локальный alias на случай разных
   --vars). */
.ml-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
  text-decoration: none;
}
.ml-icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.ml-icon-btn:active:not(:disabled) { transform: scale(0.94); }
.ml-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ml-icon-btn.lead-copied {
  background: rgba(44,156,102,0.15);
  border-color: var(--success, #2c9c66);
  color: var(--success, #2c9c66);
}

/* Заметки из amoCRM. */
.lead-amocrm-notes {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.lead-amocrm-notes-label {
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}
.lead-amocrm-notes-text { white-space: pre-wrap; word-break: break-word; }

/* Список звонков оператора по этому лиду (RPC get_lead_telfin_calls). */
.lead-telfin-calls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
}
.lead-telfin-loading,
.lead-telfin-empty {
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
}
.lead-telfin-empty .lead-telfin-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.85;
}
.lead-telfin-call {
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.lead-telfin-call-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 8px;
}
.lead-telfin-call-icon { font-size: 15px; }
.lead-telfin-call-dir {
  font-weight: 600;
  color: var(--ink);
}
.lead-telfin-call-when { color: var(--muted); }
.lead-telfin-call-dur {
  background: var(--card);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
}
.lead-telfin-call-op {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}
.lead-telfin-call-body {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lead-telfin-audio {
  flex: 1;
  min-width: 240px;
  height: 36px;
}
.lead-telfin-download {
  font-size: 13px;
  color: var(--accent-dark);
  text-decoration: none;
  white-space: nowrap;
}
.lead-telfin-download:hover { text-decoration: underline; }
.lead-telfin-no-rec {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}

/* Лента «История работы с контактом» — то же по содержанию, что
   у оператора в правой панели формы (call_attempts + directory_notes
   + telfin_calls), но в стиле seller-карточки. */
.lead-history-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 24px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.lead-history-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
}
.lead-history-icon {
  flex: 0 0 24px;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}
.lead-history-main { flex: 1; min-width: 0; }
.lead-history-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}
.lead-history-title { font-weight: 600; color: var(--ink); }
.lead-history-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.lead-history-body {
  margin-top: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.lead-history-who {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

/* ============= Контекстные блоки + «После встречи» ============= */

/* Сетка из двух карточек: «что хочет клиент» / «что нашли о компании». */
.lead-context-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 24px;
}
@media (max-width: 880px) {
  .lead-context-grid { grid-template-columns: 1fr; }
}
.lead-ctx-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
.lead-ctx-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.lead-ctx-title {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.lead-ctx-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 10px;
  letter-spacing: 0.4px;
  border: 1px solid;
}
.lead-ctx-source.call { background: rgba(233,118,42,0.10); color: var(--accent-dark); border-color: rgba(233,118,42,0.35); }
.lead-ctx-source.data { background: rgba(44,95,148,0.10); color: #2c5f94;        border-color: rgba(44,95,148,0.35); }
.lead-ctx-quote {
  border-left: 3px solid #2c5f94;
  padding: 4px 0 4px 14px;
  margin-bottom: 14px;
  font-style: italic;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.lead-ctx-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.lead-ctx-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg-soft);
  border-radius: 7px;
  padding: 8px 12px;
}
.lead-ctx-point-label {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  flex-shrink: 0;
}
.lead-ctx-point-value {
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}
.lead-ctx-empty {
  padding: 16px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.lead-ctx-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.lead-ctx-tag {
  background: var(--bg-soft);
  color: var(--muted);
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.lead-ctx-text { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.lead-ctx-url {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 12px;
  color: #2c5f94;
  background: rgba(44,95,148,0.10);
  padding: 3px 9px;
  border-radius: 4px;
  text-decoration: none;
}

/* «После встречи»: 4 кнопки статуса + подвыбор + форма + аудио. */
.lead-after {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 0 0 24px;
}
.lead-after-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.lead-after-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.lead-after-status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .lead-after-status-row { grid-template-columns: 1fr 1fr; }
}
.lead-after-status-btn {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.lead-after-status-btn:hover {
  border-color: var(--muted);
}
.lead-after-status-btn.active[data-status="held"]    { border-color: #2f8262; background: rgba(47,130,98,0.10); }
.lead-after-status-btn.active[data-status="moved"]   { border-color: #2c5f94; background: rgba(44,95,148,0.10); }
.lead-after-status-btn.active[data-status="nocall"]  { border-color: #6f6a60; background: rgba(111,106,96,0.12); }
.lead-after-status-btn.active[data-status="refused"] { border-color: #b5443d; background: rgba(181,68,61,0.10); }
.lead-after-status-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.lead-after-status-btn[data-status="held"]    .lead-after-status-ico { background: rgba(47,130,98,0.15);  color: #2f8262; }
.lead-after-status-btn[data-status="moved"]   .lead-after-status-ico { background: rgba(44,95,148,0.15);  color: #2c5f94; }
.lead-after-status-btn[data-status="nocall"]  .lead-after-status-ico { background: rgba(111,106,96,0.18); color: #6f6a60; }
.lead-after-status-btn[data-status="refused"] .lead-after-status-ico { background: rgba(181,68,61,0.15);  color: #b5443d; }
.lead-after-status-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.lead-after-status-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Подвыбор «к чему пришли» (только для «Состоялась»). */
.lead-after-outcome {
  display: none;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: rgba(47,130,98,0.08);
  border: 1px solid rgba(47,130,98,0.30);
  border-radius: 10px;
}
.lead-after-outcome.visible { display: block; }
.lead-after-outcome-label {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #2f8262;
  font-weight: 600;
  margin-bottom: 8px;
}
.lead-after-outcome-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
  .lead-after-outcome-row { grid-template-columns: 1fr; }
}
.lead-after-outcome-btn {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 11px 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.lead-after-outcome-btn:hover { border-color: var(--muted); }
.lead-after-outcome-btn.active[data-outcome="thinking"] { border-color: #b5601e; background: rgba(181,96,30,0.10); }
.lead-after-outcome-btn.active[data-outcome="trial"]    { border-color: #2f8262; background: rgba(47,130,98,0.12); }
.lead-after-outcome-btn.active[data-outcome="declined"] { border-color: #b5443d; background: rgba(181,68,61,0.10); }
.lead-after-outcome-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lead-after-outcome-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 2px;
}

/* Форма после выбора статуса. */
.lead-after-form { display: none; }
.lead-after-form.visible { display: block; }
.lead-after-extras {
  display: none;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lead-after-extras.visible { display: flex; }
.lead-after-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 11px;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 12px;
  color: var(--muted);
}
.lead-after-extra input,
.lead-after-extra select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}
.lead-after-text {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  outline: none;
  min-height: 90px;
  padding: 12px 14px;
  border-radius: 8px;
  box-sizing: border-box;
}
.lead-after-text:focus { border-color: var(--accent); }
.lead-after-audio {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.lead-after-audio.required {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(233,118,42,0.08);
}
.lead-after-audio.attached {
  border-style: solid;
  border-color: #2f8262;
  background: rgba(47,130,98,0.08);
}
.lead-after-audio-ico {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--muted);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.lead-after-audio.required .lead-after-audio-ico { background: var(--accent); }
.lead-after-audio.attached .lead-after-audio-ico { background: #2f8262; }
.lead-after-audio-text { flex: 1; min-width: 200px; }
.lead-after-audio-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.lead-after-audio-required-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 700;
  vertical-align: middle;
}
.lead-after-audio-sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.lead-after-audio-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.lead-after-audio-btn:hover { filter: brightness(0.95); }

/* Прогресс-бар при загрузке аудио в Storage. Показывается после начала
   upload, скрывается когда 100% / завершено. */
.lead-after-audio-progress {
  flex-basis: 100%;
  margin-top: 4px;
  display: none;
}
.lead-after-audio.uploading .lead-after-audio-progress { display: block; }
.lead-after-audio-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  position: relative;
}
.lead-after-audio-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #f6a35a);
  border-radius: 999px;
  transition: width 0.18s ease-out;
}
/* После 100% upload файл ушёл в наш прокси, но Supabase ещё обрабатывает.
   Пульс-анимация даёт пользователю понять, что не зависло. */
.lead-after-audio.processing .lead-after-audio-progress-bar {
  background: linear-gradient(90deg, #2f8262, #4caa83);
  animation: lead-after-audio-pulse 1.4s ease-in-out infinite;
}
@keyframes lead-after-audio-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.lead-after-audio-progress-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  letter-spacing: 0.2px;
}

/* Модалка-замена alert() — выводится по центру экрана с overlay. */
.lead-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.lead-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.lead-modal-card {
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.08);
  max-width: 460px;
  width: calc(100% - 40px);
  padding: 24px 26px 20px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease-out;
}
.lead-modal-overlay.visible .lead-modal-card { transform: translateY(0) scale(1); }
.lead-modal-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}
.lead-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.lead-modal-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}
.lead-modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
.lead-modal-ok {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.2px;
}
.lead-modal-ok:hover { filter: brightness(0.95); }
.lead-modal-ok:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* === admin → "Гарри сейчас" === */
.garry-live-status {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.garry-live-status-ok  { color: #2f8262; }
.garry-live-status-err { color: #c9533a; }
.garry-live-now { margin-bottom: 18px; }
.garry-live-idle {
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-size: 14px;
}
.garry-live-active {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(233,118,42,0.08);
  border: 1px solid var(--accent);
  margin-bottom: 8px;
  align-items: flex-start;
}
.garry-live-active-ico {
  font-size: 22px;
  line-height: 1;
  margin-top: 2px;
}
.garry-live-active-body { flex: 1; min-width: 0; }
.garry-live-active-company {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.garry-live-active-msg {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.garry-live-active-time {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  letter-spacing: 0.2px;
}
.garry-live-feed {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.garry-live-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
/* Сводка сверху страницы — счётчики + общая стоимость. */
.garry-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
}
.garry-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 18px;
  border-right: 1px solid var(--border);
}
.garry-total:last-child { border-right: 0; padding-right: 0; }
.garry-total-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.garry-total-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

/* Карточка лида — компания → подзадачи. */
.garry-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.garry-card-active  { border-color: var(--accent); }
.garry-card-done    { border-color: rgba(47,130,98,0.55); }
.garry-card-error   { border-color: rgba(201,83,58,0.55); }
.garry-card-warning { border-color: rgba(233,148,42,0.55); }

.garry-card-head {
  width: 100%;
  display: grid;
  grid-template-columns: 24px 1.4fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-soft);
  border: 0;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.garry-card-active .garry-card-head { background: rgba(233,118,42,0.08); }
.garry-card-done   .garry-card-head { background: rgba(47,130,98,0.06); }
.garry-card-error  .garry-card-head { background: rgba(201,83,58,0.06); }
.garry-card-warning .garry-card-head { background: rgba(233,148,42,0.06); }
.garry-card-head:hover { filter: brightness(0.98); }
.garry-card-toggle {
  display: inline-block;
  transition: transform 0.18s ease-out;
  color: var(--muted);
  font-size: 12px;
}
.garry-card-collapsed .garry-card-toggle { transform: rotate(-90deg); }
.garry-card-company {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garry-card-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  white-space: nowrap;
}
.garry-card-active  .garry-card-status { background: var(--accent); color: #fff; }
.garry-card-done    .garry-card-status { background: #2f8262;       color: #fff; }
.garry-card-error   .garry-card-status { background: #c9533a;       color: #fff; }
.garry-card-warning .garry-card-status { background: #e9942a;       color: #fff; }
.garry-card-cost {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.garry-card-meta {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  grid-column: 1 / -1;
  padding-left: 38px;
  margin-top: -4px;
}
@media (max-width: 720px) {
  .garry-card-head { grid-template-columns: 24px 1fr; }
  .garry-card-status, .garry-card-cost, .garry-card-meta {
    grid-column: 2 / -1;
    text-align: left;
    padding-left: 0;
    margin-top: 0;
  }
}

/* Список событий внутри карточки. */
.garry-card-events {
  max-height: 1200px;
  transition: max-height 0.22s ease-out;
  overflow: hidden;
}
.garry-card-collapsed .garry-card-events {
  max-height: 0;
}
.garry-event {
  display: grid;
  grid-template-columns: 70px 22px 1fr;
  gap: 10px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  align-items: start;
}
.garry-event:first-child { border-top: 0; }
.garry-event-time {
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 11px;
  color: var(--muted);
  padding-top: 2px;
}
.garry-event-ico {
  font-size: 14px;
  line-height: 1;
  padding-top: 2px;
  text-align: center;
}
.garry-event-body { min-width: 0; }
.garry-event-msg {
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
}
.garry-event-cost {
  display: inline-block;
  margin-left: 8px;
  font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
  font-size: 11px;
  color: var(--muted);
  background: rgba(0,0,0,0.04);
  padding: 1px 7px;
  border-radius: 999px;
}
.garry-event-success { background: rgba(47,130,98,0.04); }
.garry-event-warning { background: rgba(233,148,42,0.05); }
.garry-event-error   { background: rgba(201,83,58,0.05); }

/* Системные события (без lead_id) — свернуты по умолчанию через native <details>. */
.garry-system {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.garry-system summary {
  cursor: pointer;
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--muted);
  list-style: none;
}
.garry-system summary::-webkit-details-marker { display: none; }
.garry-system-list { border-top: 1px solid var(--border); }
.lead-after-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.lead-after-cancel {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.lead-after-save {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 22px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.lead-after-save:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}
.lead-yes { color: var(--success); font-weight: 600; }
.lead-no { color: var(--muted); }

/* Телефон-ссылка: контрастный цвет, без «привычной» гиперссылочной синевы. */
.lead-phone {
  color: var(--accent-dark) !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* ЛПР в скобках — приглушённо, не отвлекает от номера. */
.lead-lpr {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
/* Описание чужой программы лояльности — мягким серым, основной акцент остаётся
   на «есть». */
.lead-loyal-descr {
  color: var(--ink);
  font-weight: 400;
}

.lead-section-title { margin: 0; font-size: 16px; color: var(--navy); font-weight: 700; }

/* Шапка раздела «Рекомендации»: заголовок слева, кнопка «Демонстрация» справа. */
.lead-recs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.lead-demo-btn {
  font-size: 13px;
  padding: 8px 16px;
  white-space: nowrap;
  text-decoration: none;
}

/* Питч — связное описание разговора для менеджера, в нормальных абзацах. */
.lead-pitch {
  margin: 0 0 22px;
  padding: 18px 22px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.lead-pitch-p { margin: 0 0 12px; }
.lead-pitch-p:last-child { margin-bottom: 0; }

/* Подзаголовок над списком инструментов. */
.lead-tools-subtitle {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Структурированные рекомендации: блоки-категории, в каждом
   список «инструмент → результат». Удобнее читать, чем сплошной текст. */
.lead-recs { display: flex; flex-direction: column; gap: 14px; }
.lead-recs-empty {
  padding: 14px 18px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
}
.lead-rec-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.lead-rec-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.lead-rec-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lead-rec-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.lead-rec-tool {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.lead-rec-benefit {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid var(--success);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lead-rec-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .lead-rec-benefit { justify-self: start; }
}

/* === Гарри-pitch: материалы к встрече от агента ===
   Рендерится из объекта lead.pitch со структурой
   {summary, client_pain, products, pitch, questions, objections}.
   См. js/seller-leads.js → renderGarryPitch() */
.garry-pitch-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.garry-pitch-wrap > div {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.garry-block-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.garry-block-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.garry-summary { border-left: 4px solid var(--accent); }
.garry-products { border-left: 4px solid var(--success); }
.garry-pitch-block { border-left: 4px solid var(--accent); }
.garry-questions { border-left: 4px solid #6b7280; }
.garry-objections { border-left: 4px solid #d97706; }

.garry-products-list,
.garry-questions-list,
.garry-objections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.garry-product { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.garry-product-name { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.garry-product-why { font-size: 13px; line-height: 1.5; color: var(--ink); }
.garry-pitch-p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.garry-pitch-p:last-child { margin-bottom: 0; }
.garry-question { padding: 8px 12px; background: var(--bg-soft); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; color: var(--ink); }
.garry-objection { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.garry-objection-text { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-style: italic; }
.garry-objection-response { font-size: 13px; line-height: 1.5; color: var(--muted); }

@media (max-width: 900px) {
  .leads-layout { grid-template-columns: 1fr; }
  .leads-sidebar { position: relative; top: auto; max-height: none; }
  .lead-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Возражения у менеджера: 2-колоночный режим (как у оператора) ---------- */
.kb-obj-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* Компактный режим — без заголовка/подписи, только дропдаун справа.
   Используется в секции «Возражения» у менеджера, чтобы не терять
   полезное пространство, как у оператора. */
.kb-obj-head--compact {
  justify-content: flex-end;
  margin-bottom: 12px;
}
.kb-obj-search-wrap { position: relative; margin-bottom: 16px; }
.kb-obj-search-wrap input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font: inherit;
  font-size: 14px;
}
.kb-obj-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}
.kb-obj-search-wrap::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
}
.kb-obj-section { margin-bottom: 18px; }
.kb-obj-section:last-child { margin-bottom: 0; }
.kb-obj-section-title {
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Текст ответа в правой панели — тот же стиль, что у оператора */
.kb-obj-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.kb-obj-pane-head h1 { margin: 0; flex: 1 1 auto; font-size: 24px; color: var(--navy); }
.kb-obj-text {
  font-size: 18px;
  line-height: 1.6;
  max-width: 68ch;
  color: var(--ink);
  margin-bottom: 22px;
}
.kb-obj-text p { margin: 0 0 14px; }
.kb-obj-text ul, .kb-obj-text ol { padding-left: 24px; margin: 10px 0; }
.kb-obj-text li { margin-bottom: 10px; }
.kb-obj-text strong { color: var(--navy); font-weight: 700; }
.kb-obj-text.details { color: var(--ink-2); font-size: 16px; }

.deal-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.deal-main { flex: 1; min-width: 0; }
.deal-name { font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.deal-meta { font-size: 12px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.deal-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Статус-бейджи для сделок */
.deal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.deal-badge.badge-sent { background: var(--accent-soft); color: var(--accent-dark); }
.deal-badge.badge-working { background: var(--success-soft); color: var(--success); }
.deal-badge.badge-draft { background: var(--bg-soft); color: var(--muted); }
.deal-badge.badge-done { background: #EEF2F7; color: var(--navy); }
.deal-badge.badge-paused { background: var(--bg-soft); color: var(--muted); }

/* Чип с текущим шагом Гари */
.gary-step-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-soft);
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}

/* ========== Блок «Режим работы Гари» ========== */
.gary-block {
  background: var(--card);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
}
.gary-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #F0F6FF;
  border-bottom: 1px solid var(--border);
}
.gary-block-head .gary-avatar {
  width: 32px;
  height: 32px;
  background: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.gary-block-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
}
.gary-block-head .gary-status-chip {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--success-soft);
  color: var(--success);
}
.gary-block-actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

.gary-steps {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gary-step {
  display: flex;
  gap: 16px;
  position: relative;
}
.gary-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -4px;
  width: 2px;
  background: var(--border);
}
.gary-step.step-done::after { background: var(--success); }
.gary-step.step-current::after { background: var(--accent); }

.gary-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--card);
  position: relative;
  z-index: 1;
}
.gary-step.step-done .gary-step-icon {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}
.gary-step.step-current .gary-step-icon {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.gary-step.step-future .gary-step-icon {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--muted-2);
}
.gary-step.step-paused .gary-step-icon {
  background: var(--bg-soft);
  border-color: var(--muted-2);
  color: var(--muted);
}

.gary-step-body {
  flex: 1;
  padding: 4px 0 20px;
}
.gary-step:last-child .gary-step-body { padding-bottom: 4px; }
.gary-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.gary-step.step-future .gary-step-title { color: var(--muted); font-weight: 500; }
.gary-step.step-done .gary-step-title { color: var(--success); }
.gary-step.step-paused .gary-step-title { color: var(--muted); }
.gary-step-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding-left: 0;
  line-height: 1.5;
}
.gary-step-desc li {
  list-style: none;
  padding: 0;
  margin: 2px 0;
}
.gary-step-desc li::before { content: '• '; color: var(--muted-2); }
.gary-step-desc li.done { color: var(--success); }
.gary-step-desc li.done::before { content: '✓ '; color: var(--success); }

.gary-current-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--accent);
  color: white;
  margin-bottom: 6px;
}

/* ---------- Адаптивность ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { position: relative; top: auto; max-height: none; overflow: visible; }
  .app-wizard { padding: 18px 16px; }
  .deal-card { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .container { padding: 20px 16px; }
  .topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  .topbar .title { display: none; }
  .stats-grid { grid-template-columns: 1fr; }
  .answer-area { padding: 24px 22px; }
  .answer-area h1 { font-size: 24px; }
  .answer-area .answer-text { font-size: 17px; }
  .table { font-size: 13px; }
  .table th, .table td { padding: 10px 12px; }
  .doc-item { flex-direction: column; align-items: flex-start; }
  .search-wrap input { font-size: 16px; padding: 16px 18px 16px 50px; }
  .search-wrap::before { left: 18px; }
}

/* ==========================================================================
   Демонстрация для собственника бизнеса (demo.html?lead=<id>)
   Открывается отдельной вкладкой из карточки лида. Эту страницу менеджер
   показывает или присылает клиенту перед/во время встречи.
   ========================================================================== */
.demo-body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  min-height: 100vh;
  padding: 0;
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
}
.demo-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.demo-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  text-decoration: none;
}
.demo-header .brand-logo {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
}
.demo-tagline { color: var(--muted); font-size: 13px; }

.demo-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}
.demo-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 8px;
}
.demo-title {
  margin: 0 0 28px;
  font-size: 36px;
  line-height: 1.2;
  color: var(--navy);
  font-weight: 800;
}
.demo-intro {
  margin: 0 0 40px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.demo-intro p { margin: 0 0 16px; }
.demo-intro p:last-child { margin-bottom: 0; }

.demo-section-title {
  margin: 40px 0 20px;
  font-size: 24px;
  color: var(--navy);
  font-weight: 800;
}

.demo-recs { display: flex; flex-direction: column; gap: 18px; }
.demo-rec-block {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.demo-rec-title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.demo-rec-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-rec-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.demo-rec-tool {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}
.demo-rec-benefit {
  font-size: 14px;
  font-weight: 700;
  color: var(--success);
  background: var(--success-soft);
  border: 1.5px solid var(--success);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.demo-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.demo-foot strong { color: var(--navy); }

@media (max-width: 700px) {
  .demo-main { padding: 32px 20px 60px; }
  .demo-title { font-size: 28px; }
  .demo-intro { font-size: 16px; }
  .demo-section-title { font-size: 20px; }
  .demo-rec-item { grid-template-columns: 1fr; gap: 8px; }
  .demo-rec-benefit { justify-self: start; }
}

/* ==========================================================================
   Звонок оператора + записи менеджера в карточке лида
   ========================================================================== */

/* Большие заголовки разделов внутри панели лида получают отступ сверху,
   чтобы визуально разделять «инструменты», «звонок оператора». */
.lead-call-title { margin-top: 32px; }

/* --- Табы (транскрибация / запись звонка) --- */
.lead-call { margin-top: 12px; }
.lead-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1.5px solid var(--border);
}
.lead-tab {
  border: 0;
  background: transparent;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  transition: color 0.12s, border-color 0.12s;
}
.lead-tab:hover { color: var(--ink); }
.lead-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }

.lead-tab-pane { padding: 4px 0; }

/* --- Транскрибация: реплики --- */
.call-transcript {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  max-height: 420px;
  overflow-y: auto;
}
.call-line {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
}
.call-line-op {
  border-left: 3px solid var(--accent);
}
.call-line-client {
  border-left: 3px solid var(--success);
  background: var(--success-soft);
}
.call-speaker {
  font-weight: 700;
  color: var(--navy);
  margin-right: 6px;
}
.call-text { color: var(--ink); }

/* Аудио-плеер звонка оператора. */
.call-audio {
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
}
.call-empty {
  padding: 20px 22px;
  background: var(--bg-soft);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.call-empty-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.8;
}

/* ============================================================
   Заявка Плюс — кабинет оператора (operator-leads.js)
   ============================================================ */
.leads-plus-area {
  width: 100%;
  padding: 0 4px 24px;
}
/* Когда оператор в режиме «Заявка Плюс» — поджимаем верхний отступ всего main,
   чтобы белые блоки начинались сразу под шапкой. */
body:has(.leads-plus-area:not([hidden])) main.container.wide { padding-top: 6px; }
/* На канбан-доске .ol-wrap не должен ограничивать ширину — пусть колонки
   растягиваются на всю ширину контента. */
.ol-wrap.ol-board-wrap { max-width: none; }
.ol-loading {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.ol-wrap { max-width: 1100px; margin: 0 auto; }
.ol-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ol-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #1a2540);
}
.ol-sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 640px;
  line-height: 1.5;
}
.ol-add { white-space: nowrap; flex-shrink: 0; }

.ol-list {
  display: grid;
  gap: 10px;
}
.ol-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ============================================================
   Канбан-доска для лидов (оператор + зеркально менеджер)
   ============================================================ */
.ol-board, .leads-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 8px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.ol-col, .lead-col {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.ol-col-head, .lead-col-head { padding: 0 2px 4px; }
.ol-col-readonly, .lead-col-readonly {
  background: rgba(0, 0, 0, 0.025);
  border-style: dashed;
}
.ol-col-head, .lead-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border);
}
.ol-col-count, .lead-col-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--card);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.ol-col-body, .lead-col-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding: 2px;
}
.ol-col-empty, .lead-col-empty {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 16px 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-style: italic;
}
.ol-col-over, .lead-col-over {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

/* Карточки в канбане — компактные: только название, город и время.
   Цвет кодирует онлайн/офлайн (синий/оранжевый). */
.ol-board .ol-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px;
  cursor: grab;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  text-align: left;
  font: inherit;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s, transform 0.12s;
}
.ol-board .ol-card:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.ol-board .ol-card:active { cursor: grabbing; }
.ol-board .ol-card .ol-card-title {
  font-weight: 600; font-size: 12px; line-height: 1.25; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-board .ol-card .ol-card-meta {
  display: flex; justify-content: space-between; gap: 6px; font-size: 10px;
  color: var(--muted); flex-wrap: nowrap;
}
.ol-board .ol-card .ol-card-meet { white-space: nowrap; font-weight: 500; }
.ol-card-dragging, .lead-card-dragging { opacity: 0.4; transform: scale(0.98); }
.ol-board .ol-card-online {
  background: rgba(63, 130, 220, 0.10);
  border-color: rgba(63, 130, 220, 0.4);
}
.ol-board .ol-card-online .ol-card-meet { color: #2c6dc7; }
.ol-board .ol-card-offline {
  background: rgba(232, 130, 61, 0.10);
  border-color: rgba(232, 130, 61, 0.35);
}
.ol-board .ol-card-offline .ol-card-meet { color: var(--accent-dark); }

/* Карточка лида у менеджера — единый компактный стиль с .ol-board .ol-card.
   Только название, город и время; цвет = онлайн/офлайн. */
.lead-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 6px 8px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: grab;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s, transform 0.12s;
}
.lead-card:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.lead-card:active { cursor: grabbing; }
.lead-card-online {
  background: rgba(63, 130, 220, 0.10);
  border-color: rgba(63, 130, 220, 0.4);
}
.lead-card-offline {
  background: rgba(232, 130, 61, 0.10);
  border-color: rgba(232, 130, 61, 0.35);
}
.lead-card-name {
  font-weight: 600; font-size: 12px; line-height: 1.25; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink);
}
.lead-card-meta {
  display: flex; justify-content: space-between; gap: 6px; font-size: 10px;
  color: var(--muted); flex-wrap: nowrap;
}
.lead-card-meet { white-space: nowrap; font-weight: 500; }
.lead-card-online .lead-card-meet { color: #2c6dc7; }
.lead-card-offline .lead-card-meet { color: var(--accent-dark); }

.leads-board-head { margin-bottom: 12px; }
.leads-board-head .page-title { margin: 0 0 4px; font-size: 22px; }
.leads-board-sub { font-size: 13px; color: var(--muted); margin: 0; }
.leads-detail-head { margin-bottom: 16px; }
.lead-back-btn { font-size: 13px; }
.leads-detail-body { max-width: 880px; }
.ol-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.ol-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ol-card-edited {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.ol-card-main { flex: 1; min-width: 0; }
.ol-card-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.ol-card-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  flex-wrap: wrap;
}
.ol-card-meet { color: var(--accent); font-weight: 500; }
.ol-card-mgr {
  font-size: 13px;
  text-align: right;
  flex-shrink: 0;
}
.ol-card-mgr-label { color: var(--muted); margin-right: 6px; }
.ol-card-mgr-name { color: var(--ink); font-weight: 500; }

/* ---- Модалка с формой ---- */
.ol-modal .ol-form-window {
  max-width: 720px;
  padding: 24px 28px 22px;
  max-height: 90vh;
  overflow-y: auto;
}
.ol-form { display: flex; flex-direction: column; gap: 18px; }

/* Поле «Филиалы в сети» — read-only, авто-подгружается из справочника. */
.ol-field-readonly[hidden] { display: none !important; }
.ol-field-readonly input {
  background: var(--bg-soft) !important;
  color: var(--accent-dark) !important;
  font-weight: 700;
  cursor: default;
}
/* Подавляем иконки/фоновые картинки, которые инжектируют LastPass и 1Password
   в инпуты «Заявки Плюс». В форме нет настоящего <form>, плюс на инпутах уже
   стоят data-lpignore/data-1p-ignore + name'ы без чувствительных слов, но
   менеджеры паролей всё равно могут пытаться рендерить иконку поверх поля. */
.ol-form input,
.ol-form textarea {
  background-image: none !important;
}
.ol-form [data-lastpass-icon-root],
.ol-form [data-lastpass-root],
.ol-form [data-onepassword-fill-injected],
.ol-form [data-dashlane-rid],
.ol-form [data-bitwarden-watching] { display: none !important; }
.ol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.ol-field { display: flex; flex-direction: column; gap: 6px; }
.ol-field-wide { grid-column: 1 / -1; }
/* Двухколоночная обёртка для блоков «Программа лояльности» и
   «Подтвердить встречу» — чтобы подвопросы лояльности не сдвигали
   соседний блок вниз. На узких экранах схлопываем в одну колонку. */
.ol-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: flex-start;
}
@media (max-width: 720px) {
  .ol-two-col { grid-template-columns: 1fr; }
}

/* Компактная квадратная иконка-кнопка. Используется рядом с
   контактными полями (Сайт/Telegram/WhatsApp/МАКС/Email) и в
   подтверждении встречи (стрелки ←/→). Только иконка, без текста —
   значение объясняется через title-tooltip. */
.ol-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.ol-icon-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ol-icon-btn:active:not(:disabled) { transform: scale(0.96); }
.ol-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* `display: flex` выше перебивает UA-правило [hidden]{display:none} (равная
   специфичность, моё правило позже). Поэтому hidden-атрибут на .ol-field
   визуально не работал — каскад показывал «Тип программы» даже после
   переключения «Программа лояльности? → Нет». Возвращаем приоритет hidden. */
.ol-field[hidden] { display: none !important; }

/* Парная строка формы: два поля рядом (ЛПР+Должность, Имя+Телефон).
   На узком экране переносятся на отдельные строки. */
.ol-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.ol-row-pair .ol-pair-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
@media (max-width: 720px) {
  .ol-row-pair { grid-template-columns: 1fr; }
}

/* Сетка контактов: Сайт / Telegram / WhatsApp / МАКС / Email в ряд (5 столбцов).
   Если в одном поле БД несколько значений (через запятую) — рендерим
   несколько тайлов: «Сайт 1», «Сайт 2» в том же столбце. */
.ol-contacts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .ol-contacts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ol-contacts-grid { grid-template-columns: 1fr; }
}
.ol-contact-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ol-contact-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ol-contact-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ol-contact-tile-value {
  font-size: 13px;
  color: var(--ink);
  padding: 4px 8px;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: var(--bg-soft, #f8f5f1);
  min-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-contact-tile-value.empty {
  color: var(--muted);
  background: transparent;
  font-style: italic;
}
.ol-contact-tile-value.has {
  font-weight: 500;
}
.ol-contact-edit-input {
  width: 100%;
  padding: 3px 6px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--card, #fff);
  box-sizing: border-box;
}
.ol-contact-tile-buttons {
  display: flex;
  gap: 4px;
}
.ol-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ol-mini-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.ol-mini-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ol-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.ol-label em { color: var(--accent); font-style: normal; }
.ol-field input[type="text"],
.ol-field input[type="datetime-local"],
.ol-field select,
.ol-field textarea {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card);
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ol-field input:focus,
.ol-field select:focus,
.ol-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ol-field textarea { resize: vertical; min-height: 70px; }
.ol-field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.ol-field-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ol-field-checkbox span { font-size: 14px; color: var(--ink); }
.ol-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .ol-grid { grid-template-columns: 1fr; }
  .ol-card { flex-direction: column; align-items: flex-start; }
  .ol-card-mgr { text-align: left; }
}

/* Комментарий оператора в карточке лида у менеджера */
.lead-operator-comment {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  margin: 16px 0 20px;
}
.lead-operator-comment-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.lead-operator-comment-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Дата встречи со стрелками ±1 день (operator-leads.js) */
.ol-date-control {
  display: flex;
  align-items: stretch;
}
.ol-date-control input[type="date"] {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
}
.ol-date-arrow {
  width: 36px;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  font-family: inherit;
  padding: 0;
}
.ol-date-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ol-date-arrow:active { transform: translateY(1px); }
.ol-date-control .ol-date-arrow:first-child {
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
}
.ol-date-control .ol-date-arrow:last-child {
  border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

/* ============================================================
   Заявка Плюс — view создания (inline, не модалка)
   ============================================================ */
.ol-create { padding-top: 0; }
.ol-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 0;
  margin: 0;
  font-family: inherit;
  transition: color 0.12s;
}
.ol-back-btn:hover { color: var(--accent); }

.ol-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ol-create-col-left,
.ol-create-col-right {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 20px 18px;
}
/* Шапка левого блока: «К списку» слева, «Новая заявка» справа на одной линии. */
.ol-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.ol-create-head .ol-title { margin: 0; font-size: 18px; }

/* Поле адреса с DaData suggest */
.ol-address-wrap { position: relative; }
.ol-address-wrap.ol-disabled input { background: var(--bg-soft); color: var(--muted); cursor: not-allowed; }
.ol-suggest {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
}

/* Календарь менеджеров справа */
.ol-cal-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.ol-cal-day {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 14px;
}
.ol-cal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ol-cal-loading,
.ol-cal-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.ol-cal-mgr {
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border);
}
.ol-cal-mgr-free { background: transparent; }
.ol-cal-mgr-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}
.ol-cal-mgr-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ol-cal-busy {
  background: rgba(232, 130, 61, 0.15);
  color: var(--accent-dark);
  border: 1px solid rgba(232, 130, 61, 0.3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
}
.ol-cal-free-tag {
  color: #2a8d4a;
  font-size: 12px;
  font-weight: 500;
}
.ol-cal-hint {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Действия формы — без border-top, потому что больше не модалка */
.ol-create .ol-actions { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 12px; }

@media (max-width: 980px) {
  .ol-create-grid { grid-template-columns: 1fr; }
  .ol-create-col-right { order: -1; } /* На узких экранах календарь сверху */
}

/* ============================================================
   Календарь менеджера (seller-calendar.js)
   ============================================================ */
#section-calendar {
  padding: 8px 4px 32px;
}
.cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-prev, .cal-next, .cal-today {
  padding: 6px 12px;
  font-size: 14px;
}
.cal-prev, .cal-next { font-size: 18px; min-width: 36px; padding: 4px 0; }
.cal-period {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  min-width: 220px;
  text-align: center;
}
.cal-views {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.cal-view-btn {
  border: none;
  border-radius: 0;
  padding: 6px 16px;
  background: var(--card);
  font-size: 14px;
}
.cal-view-btn:hover { background: var(--bg-soft); }
.cal-view-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }

.cal-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 4px 0;
}

/* ---- Месячный вид ---- */
.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}
.cal-cell {
  min-height: 96px;
  padding: 6px 8px;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.12s;
}
.cal-cell:nth-child(-n+7) { border-top: none; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg-soft); }
.cal-cell-out { color: var(--muted-2); background: rgba(0,0,0,0.015); }
.cal-cell-out:hover { background: rgba(0,0,0,0.04); }
.cal-cell-today .cal-cell-num {
  background: var(--accent);
  color: white;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-cell-num {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  padding-left: 2px;
}
.cal-cell-slots {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  overflow: hidden;
}
.cal-slot-pill {
  background: rgba(232, 130, 61, 0.15);
  color: var(--accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-slot-more {
  color: var(--muted);
  font-size: 11px;
  padding-left: 6px;
}

/* ---- Недельный вид ---- */
.cal-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-week-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.cal-week-row:hover { border-color: var(--accent-soft); }
.cal-week-row-today { border-color: var(--accent); }
.cal-week-day { text-align: center; }
.cal-week-num { font-size: 22px; font-weight: 700; color: var(--ink); }
.cal-week-wd { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.cal-week-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cal-week-slot {
  display: flex;
  gap: 12px;
  font-size: 13px;
  align-items: baseline;
}
.cal-week-time { font-weight: 600; color: var(--accent-dark); min-width: 48px; }
.cal-week-comment { color: var(--ink); }
.cal-week-kind { font-size: 11px; color: var(--muted); margin-left: auto; }
.cal-week-slot.cal-slot-online .cal-week-time { color: #1f5db7; }
.cal-week-slot.cal-slot-online .cal-week-kind { color: #2c6dc7; }
.cal-week-slot.cal-slot-offline .cal-week-kind { color: var(--accent-dark); }
.cal-week-empty { font-size: 13px; color: var(--muted); }
.cal-week-add {
  width: 36px; height: 36px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
}

/* ---- Модалка дня ---- */
.cal-day-window {
  max-width: 520px;
  width: calc(100% - 32px);
  padding: 24px 24px 20px;
}
.cal-day-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm, 8px);
  margin-bottom: 16px;
}
.cal-day-slots {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-day-slot {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm, 8px);
}
.cal-day-slot-time { font-weight: 600; color: var(--accent-dark); }
.cal-day-slot-comment { color: var(--ink); font-size: 14px; }
.cal-day-slot-del {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.12s;
}
.cal-day-slot-del:hover { background: rgba(0,0,0,0.06); }
.cal-day-add {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.cal-day-add-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.cal-day-add-time, .cal-day-add-comment {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day-add input[type="time"],
.cal-day-add input[type="text"] {
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  font-size: 14px;
  font-family: inherit;
}
.cal-day-add input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cal-day-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 720px) {
  .cal-cell { min-height: 64px; padding: 4px; }
  .cal-cell-num { font-size: 12px; }
  .cal-cell-slots { display: none; } /* На мобильных только число; детали в модалке */
  .cal-day-add-row { grid-template-columns: 1fr; }
}

/* Standalone-кнопка раздела (не входит в дропдаун кабинета) */
.section-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-right: 8px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s;
}
.section-shortcut:hover { border-color: var(--accent); }
.section-shortcut.active {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}
.section-shortcut.active .section-dropdown-emoji { filter: grayscale(0); }

/* Календарь: расширение колонок времени для формата «с–до» */
.cal-day-add-row { grid-template-columns: 110px 110px 1fr; }
.cal-day-slot { grid-template-columns: 110px 1fr auto; }
.cal-week-time { min-width: 110px; }

@media (max-width: 720px) {
  .cal-day-add-row { grid-template-columns: 1fr 1fr; }
  .cal-day-add-row .cal-day-add-comment { grid-column: 1 / -1; }
}

/* ============================================================
   Заявка Плюс — почасовая сетка / неделя в правой панели
   ============================================================ */
.ol-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ol-cal-views {
  display: flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.ol-cal-view-btn {
  border: none;
  background: var(--card);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.ol-cal-view-btn:hover { background: var(--bg-soft); }
.ol-cal-view-btn.primary { background: var(--accent); color: white; }
.ol-cal-period {
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 12px;
}
.ol-cal-placeholder {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm, 8px);
  line-height: 1.5;
}
.ol-cal-placeholder-thin {
  padding: 10px 14px;
  text-align: left;
  margin-bottom: 8px;
  font-size: 12px;
}

/* Почасовая сетка (day) */
.ol-hour-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 2px;
}
.ol-hour {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card);
  font-family: inherit;
  text-align: left;
  padding: 0;
  cursor: default;
  overflow: hidden;
  min-height: 44px;
}
.ol-hour-time {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--border);
}
.ol-hour-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 12px;
  min-width: 0;
}
.ol-hour-free {
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ol-hour-free:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.ol-hour-take {
  font-size: 12px;
  color: var(--muted);
}
.ol-hour-free:hover .ol-hour-take { color: var(--accent-dark); font-weight: 500; }
.ol-hour-busy {
  background: rgba(232, 130, 61, 0.12);
  border-color: rgba(232, 130, 61, 0.35);
}
/* Если событие накрывает несколько шагов — растягиваем плашку по высоте,
   чтобы визуально занять место «склеенных» строк, без дублей подряд. */
.ol-hour-busy[style*="--ol-span"] {
  min-height: calc(var(--ol-span, 1) * 36px + (var(--ol-span, 1) - 1) * 4px);
}
.ol-hour-busy .ol-hour-time {
  background: rgba(232, 130, 61, 0.2);
  color: var(--accent-dark);
}
.ol-hour-block {
  background: rgba(107, 122, 138, 0.12);
  border-color: rgba(107, 122, 138, 0.35);
}
.ol-hour-block .ol-hour-time {
  background: rgba(107, 122, 138, 0.2);
  color: var(--muted);
}
.ol-hour-range {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ol-hour-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Недельная сетка (week) */
.ol-week-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ol-week-day {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.12s;
}
.ol-week-day:hover { border-color: var(--accent); }
.ol-week-day-head { text-align: center; }
.ol-week-num { font-size: 18px; font-weight: 700; color: var(--ink); display: block; }
.ol-week-wd { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.ol-week-day-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ol-week-slot {
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: baseline;
}
.ol-week-slot.ol-week-block { color: var(--muted); }
.ol-week-time {
  font-weight: 600;
  color: var(--accent-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.ol-week-block .ol-week-time { color: var(--muted); }
.ol-week-label {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ol-week-empty {
  font-size: 12px;
  color: #2a8d4a;
}

/* ============================================================
   Календарь менеджера — layout с sidebar (новый формат)
   ============================================================ */
.cal-toolbar .cal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 16px;
  align-items: start;
}
.cal-layout > .cal-sidebar[hidden] { display: none; }
.cal-layout:has(.cal-sidebar[hidden]) { grid-template-columns: 1fr; }
/* Fallback, если :has не поддерживается — sidebar всё равно скроется через [hidden] */

.cal-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.cal-side-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.cal-side-day {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.cal-side-count {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.cal-side-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.cal-side-close:hover { color: var(--ink); }
.cal-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-side-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cal-side-item.cal-slot-lead {
  background: rgba(232, 130, 61, 0.10);
}
.cal-side-item.cal-slot-block {
  background: rgba(107, 122, 138, 0.10);
}
.cal-side-item:hover { border-color: var(--accent); }
.cal-side-item.cal-side-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.cal-side-time {
  grid-row: 1; grid-column: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-dark);
}
.cal-side-item.cal-slot-block .cal-side-time { color: var(--muted); }
.cal-side-tag {
  grid-row: 1; grid-column: 2;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  align-self: center;
}
.cal-side-label {
  grid-row: 2; grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.cal-side-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 16px 0;
}
.cal-side-details {
  background: var(--bg-soft);
  padding: 12px;
  border-radius: var(--radius-sm, 8px);
  border-left: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.cal-side-details-block { border-left-color: var(--muted); }
.cal-side-details-online { border-left-color: #2c6dc7; }
.cal-side-banner {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  margin: 2px 0 4px;
}
.cal-side-banner-online {
  background: rgba(63, 130, 220, 0.15);
  color: #1f5db7;
}
.cal-side-banner-offline {
  background: rgba(232, 130, 61, 0.15);
  color: var(--accent-dark);
}
.cal-side-details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cal-side-details-head strong {
  font-size: 14px;
  color: var(--ink);
}
.cal-side-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.cal-side-link:hover { text-decoration: underline; }
.cal-side-row { display: flex; gap: 6px; }
.cal-side-row > span:first-child {
  color: var(--muted);
  min-width: 90px;
  flex-shrink: 0;
}
.cal-side-row-comment {
  flex-direction: column;
  gap: 2px;
}
.cal-side-row-comment > span:first-child { min-width: 0; }
.cal-side-add {
  align-self: stretch;
  text-align: center;
}
.cal-side-del {
  font-size: 12px;
  padding: 4px 10px;
}

/* Подсветка выбранного дня в гриде */
.cal-cell-selected {
  background: var(--accent-soft) !important;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cal-week-row-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Цветовая дифференциация в гриде месяца / неделе */
.cal-slot-pill.cal-slot-block {
  background: rgba(107, 122, 138, 0.15);
  color: var(--muted);
}
.cal-week-slot.cal-slot-block .cal-week-time { color: var(--muted); }

@media (max-width: 980px) {
  .cal-layout { grid-template-columns: 1fr; }
  .cal-sidebar { position: static; max-height: none; }
}

/* ============================================================
   Tabs закреплённых менеджеров над расписанием (operator-leads.js)
   ============================================================ */
.ol-mgr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ol-mgr-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 12px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ol-mgr-tab:hover { border-color: var(--accent); }
.ol-mgr-tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.ol-mgr-tab-name {
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ol-mgr-tab-close {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}
.ol-mgr-tab-close:hover {
  background: rgba(0,0,0,0.12);
  opacity: 1;
}
.ol-mgr-tab.active .ol-mgr-tab-close:hover { background: rgba(255,255,255,0.25); }
.ol-mgr-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px dashed var(--border);
  border-radius: 50%;
  background: transparent;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.ol-mgr-add:hover {
  border-color: var(--accent);
  border-style: solid;
  color: var(--accent);
}

/* Picker — выпадайка для добавления менеджера */
.ol-mgr-picker {
  position: absolute;
  z-index: 9999;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.ol-mgr-picker-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s;
}
.ol-mgr-picker-item:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* ============================================================
   Заявка Плюс — компактная правая панель + ряд телефонов
   ============================================================ */
.ol-create-col-right { padding: 14px 16px; }

.ol-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 10px;
}
.ol-toolbar .ol-mgr-tabs {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.ol-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}
.ol-toolbar .ol-cal-period {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  margin: 0;
}
.ol-cal-body { margin-top: 0; }
.ol-hour { min-height: 36px; }
.ol-hour-time { width: 50px; }
.ol-hour-info { padding: 4px 10px; }

/* Ряд из двух полей телефона со стрелочкой между ними */
.ol-phones-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: end;
}
.ol-phone-copy {
  width: 32px;
  height: 32px;
  margin-bottom: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.ol-phone-copy:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.ol-phone-copy:active { transform: scale(0.96); }

@media (max-width: 640px) {
  .ol-phones-row { grid-template-columns: 1fr; }
  .ol-phone-copy {
    margin: 0 auto;
    transform: rotate(90deg);
  }
}

/* ============================================================
   Календарь — режим «Сегодня» (вертикальная лента + детали)
   ============================================================ */
.cal-steps {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  margin-right: 8px;
}
.cal-step-btn {
  border: none;
  border-radius: 0;
  padding: 6px 12px;
  background: var(--card);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  font-family: inherit;
}
.cal-step-btn:hover { background: var(--bg-soft); }
.cal-step-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.cal-today {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}
.cal-today-grid {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.cal-today-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cal-today-add {
  padding: 4px 10px;
  font-size: 12px;
}
.cal-trow {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 4px 0;
  min-height: 36px;
}
/* Когда событие накрывает несколько шагов — строка растягивается, чтобы
   плашка визуально занимала «склеенные» часы, без дублей. */
.cal-trow[style*="--cal-span"] {
  min-height: calc(var(--cal-span, 1) * 36px + (var(--cal-span, 1) - 1) * 8px);
}
.cal-trow[style*="--cal-span"] .cal-tslot {
  flex: 1;
  justify-content: center;
}
.cal-trow-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
}
.cal-trow-cells {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-tslot {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 12px;
  text-align: left;
  background: var(--card);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.cal-tslot.cal-tslot-free {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  cursor: default;
  font-size: 12px;
  padding: 4px 12px;
}
/* Три цвета событий: личное (серый) / офлайн-встреча (оранжевый) /
   онлайн-встреча (синий). Подкласс cal-tslot-online перебивает фон поверх
   cal-tslot-lead, поэтому общая логика остаётся «лид — это .cal-tslot-lead». */
.cal-tslot-lead.cal-tslot-offline,
.cal-tslot-lead:not(.cal-tslot-online) {
  background: rgba(232, 130, 61, 0.12);
  border-color: rgba(232, 130, 61, 0.35);
}
.cal-tslot-lead.cal-tslot-online {
  background: rgba(63, 130, 220, 0.12);
  border-color: rgba(63, 130, 220, 0.4);
}
.cal-tslot-block {
  background: rgba(107, 122, 138, 0.12);
  border-color: rgba(107, 122, 138, 0.35);
}
.cal-tslot-kind {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.cal-tslot-lead.cal-tslot-online .cal-tslot-time { color: #1f5db7; }
.cal-tslot-lead.cal-tslot-online .cal-tslot-kind { color: #2c6dc7; }
.cal-tslot-lead.cal-tslot-offline .cal-tslot-kind,
.cal-tslot-lead:not(.cal-tslot-online) .cal-tslot-kind { color: var(--accent-dark); }
.cal-tslot:hover:not(.cal-tslot-free) { border-color: var(--accent); }
.cal-tslot-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.cal-tslot-time {
  font-weight: 600;
  font-size: 12px;
  color: var(--accent-dark);
}
.cal-tslot-block .cal-tslot-time { color: var(--muted); }
.cal-tslot-label {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-today-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.cal-today-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 16px 8px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .cal-today { grid-template-columns: 1fr; }
  .cal-today-side { position: static; max-height: none; }
}

/* Переключатель шага у оператора (рядом с «День/Неделя») */
.ol-cal-steps {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}
.ol-cal-step-btn {
  border: none;
  padding: 4px 10px;
  background: var(--card);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.ol-cal-step-btn:hover { background: var(--bg-soft); }
.ol-cal-step-btn.primary { background: var(--accent); color: white; }

/* Поле «Лицо, принимающее решение?» — radio Да/Нет */
.ol-radio {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
}
.ol-radio label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.ol-radio input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* В режиме «Сегодня» sidebar Month/Week полностью убирается из grid */
.cal-layout.cal-no-sidebar { grid-template-columns: 1fr; }
.cal-layout.cal-no-sidebar > .cal-sidebar { display: none; }

/* ---------- Диалер «📞 База» (operator-dialer.js) ---------- */
.dialer-area[hidden] { display: none !important; }
.dialer-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 24px;
  min-height: calc(100vh - 100px);
}
/* В режиме диалера поджимаем верхний отступ всего main к шапке. */
body:has(.dialer-area:not([hidden])) main.container.wide { padding-top: 6px; }

/* Контейнер шапки диалера: все элементы (Выбранные / Перезвонить / фильтры /
   поиск) идут слева подряд через gap. justify-content:flex-start обязателен
   потому что часть элементов скрывается из Личного кабинета — иначе при
   двух видимых элементах space-between раскидал бы их по краям. */
.dialer-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Вкладки фильтров над лентой */
.dialer-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 12px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* Dropdown «Район» — фильтр в правой части тулбара */
.dialer-district-filter {
  position: relative;
  flex-shrink: 0;
}
.dialer-district-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.dialer-district-trigger:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.dialer-district-trigger.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.dialer-district-arrow { font-size: 11px; opacity: 0.6; }

.dialer-district-filter > .dialer-district-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  right: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  padding: 4px !important;
  min-width: 180px !important;
  max-width: 360px !important;
  z-index: 100 !important;
  flex-direction: column !important;
  gap: 2px !important;
  color: var(--ink) !important;
}
/* hidden{display:none} перебивается display:flex при !important — фиксим
   явным правилом с большей специфичностью + !important. */
.dialer-district-filter > .dialer-district-menu[hidden] { display: none !important; }
.dialer-district-filter > .dialer-district-menu:not([hidden]) { display: flex !important; }
.dialer-district-menu[hidden] { display: none; }
.dialer-district-item {
  background: transparent !important;
  border: none;
  padding: 8px 12px;
  font: inherit;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.dialer-district-item:hover { background: var(--bg-soft) !important; }
.dialer-district-item.active {
  background: var(--accent-soft) !important;
  color: var(--accent-dark);
  font-weight: 600;
}

/* Меню категорий — длиннее, скроллится. Каждый пункт показывает count справа. */
.dialer-category-menu {
  max-height: 360px;
  overflow-y: auto;
  min-width: 280px;
}
.dialer-category-loading {
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.dialer-category-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dialer-category-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dialer-category-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 1px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.dialer-category-item.active .dialer-category-count {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.dialer-tab {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}
.dialer-tab:hover { color: var(--ink); }
.dialer-tab.active {
  background: var(--card);
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dialer-tab-count {
  font-size: 11px;
  background: rgba(0,0,0,0.07);
  color: inherit;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.dialer-tab.active .dialer-tab-count {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* Подсветка таба «↩️ Перезвонить» когда есть запланированные звонки
   на сегодня (МСК). Считается в refreshCallbackDue() в operator-dialer.js. */
.dialer-tab.dialer-tab-due {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.dialer-tab.dialer-tab-due .dialer-tab-count {
  background: var(--accent);
  color: #fff;
}
.dialer-tab.dialer-tab-due.active {
  background: var(--accent);
  color: #fff;
}
.dialer-tab.dialer-tab-due.active .dialer-tab-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
/* Подсветка для триггера dropdown'а табов: то же правило что для .dialer-tab. */
.dialer-district-trigger.dialer-tab-due {
  background: var(--accent);
  color: #fff;
}
.dialer-district-trigger.dialer-tab-due .dialer-tab-count,
.dialer-district-trigger.dialer-tab-due .dialer-district-arrow {
  color: #fff;
}

/* Подсветка карточки, совпавшей с поисковым запросом «🔍 Поиск». */
.dialer-card.dialer-card-match {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-soft);
}

/* Split-layout: слева компактная колонка карточек (~1/3), справа широкий скрипт */
.dialer-split {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: start;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1100px) {
  .dialer-split { grid-template-columns: 1fr; }
  .dialer-script-col { position: static; }
}
.dialer-list-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Скроллируемый контейнер карточек — фиксированная высота на ~3 строки.
   Ниже под ним рендерится список возражений (всегда виден). */
.dialer-cards-scroll {
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}
.dialer-cards-scroll .dialer-grid {
  padding: 6px;
}
.dialer-cards-scroll .dialer-footer {
  padding: 6px 6px 8px;
}
/* «Выйти» и «Выбор роли» в шапке показываются только в Личном кабинете.
   Оператор: body.mode-profile (setMode в operator.js).
   Менеджер: body.section-profile (когда активна section-profile в seller.html).
   На остальных страницах эти кнопки скрыты — пользователь сначала открывает
   Личный кабинет кликом по своему имени, оттуда выходит/меняет роль. */
body:not(.mode-profile):not(.section-profile) header.topbar #op-logout,
body:not(.mode-profile):not(.section-profile) header.topbar #logout,
body:not(.mode-profile):not(.section-profile) header.topbar #role-switcher {
  display: none !important;
}

/* Карточка в режиме «✅ Подтвердить» — название компании, время встречи,
   зелёная кнопка ✅. При клике на кнопку — leads.confirmed_at=now, карточка
   улетает анимацией (как при смене статуса). */
.dialer-card-confirm-meet {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--accent-dark, #b85518);
  font-weight: 500;
}
.dialer-confirm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #2e8b57;
  border-radius: 50%;
  background: #e7f5ea;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.12s, transform 0.06s;
}
.dialer-confirm-btn:hover {
  background: #2e8b57;
  transform: scale(1.05);
}
.dialer-confirm-btn:active { transform: scale(0.96); }

/* Панель быстрого ввода под списком карточек. Появляется после клика на
   карточку. Поля: имя/должность + каскад про лояльность + комментарий.
   Автосохранение в localStorage. */
.dialer-quick-fill {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
}
.qf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.qf-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qf-field-grow { flex: 1 1 160px; min-width: 0; }
.qf-field-comment { margin-top: 6px; }
.qf-field span {
  font-size: 11px;
  color: var(--muted, #888);
  font-weight: 500;
}
.qf-field input,
.qf-field textarea {
  padding: 5px 8px;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
/* Каскад «Программа лояльности» — каждый подвопрос на отдельной строке,
   как в основной форме заявки. ВАЖНО: [hidden] перебивает display:flex,
   иначе скрытые блоки оставались видимыми. */
.qf-loyalty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  padding: 2px 0;
}
.qf-loyalty-q, .qf-loy-yes, .qf-loy-no, .qf-had-yes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.qf-loyalty [hidden] { display: none !important; }
.qf-loy-yes, .qf-loy-no, .qf-had-yes { padding-left: 16px; }
.qf-loyalty label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.qf-loyalty input[type="radio"] { margin: 0; }
.qf-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  min-height: 18px;
}
.qf-saved {
  font-size: 12px;
  color: #2e8b57;
  font-weight: 500;
}

/* Блок «Ближайшие перезвоны» — до 2 компаний, которым надо позвонить в
   ближайшие 30 минут. Без обводки и без заголовка — карточки идут впритык
   под основным списком, чуть меньше остальных, чтобы оператор понимал «это
   следующие». Если пусто — контейнер hidden. */
.dialer-callbacks-imminent { margin: 0; padding: 0; }
.dialer-callbacks-head { display: none; }
.dialer-callbacks-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Компактный вариант карточки внутри блока перезвонов. */
.dialer-callbacks-imminent .dialer-card {
  padding: 6px 10px;
  font-size: 13px;
}
.dialer-callbacks-imminent .dialer-card-name { font-size: 13px; }
.dialer-callbacks-imminent .dialer-status-btn { font-size: 14px; padding: 2px 4px; }
.dialer-callbacks-imminent .dialer-card-phone-btn { font-size: 14px; padding: 4px 8px; }

/* Возражения у оператора — pill-кнопки в шапке, между логотипом и кнопкой
   имени. Контейнер растягивается на свободное место и переносит pill'ы на
   новую строку (шапка раздвигается по высоте). Каждое возражение — одно
   короткое слово (до 15 символов, ограничено в форме комм.директора).
   Клик на pill → ответ в правой колонке скрипта. */
#op-topbar-objections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Общий класс pill — используется и в шапке у оператора (.dialer-obj-btn),
   и в превью у комм.директора (.obj-title-preview). Один стиль = одинаковый
   вид в обоих местах. */
.dialer-obj-pill,
.dialer-obj-btn {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 4px 10px;
  font: inherit;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.dialer-obj-btn:hover,
.dialer-obj-pill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.dialer-obj-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* Поле «Заголовок» в модалке нового возражения у комм.директора.
   Узкое поле + надпись «Превью:» + pill, как будет в шапке оператора. */
.obj-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.obj-title-input {
  width: 200px;
  max-width: 100%;
}
.obj-title-preview-label {
  font-size: 13px;
  color: var(--muted);
}
.obj-title-preview {
  cursor: default;
  pointer-events: none;
}

/* Кнопка «← К скрипту» в шапке открытого ответа на возражение */
.dialer-back-to-script {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 8px;
  font: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s;
}
.dialer-back-to-script:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Кнопка «📖 Подробнее» — рядом с «← К скрипту». Выделена акцентным цветом,
   чтобы оператор её заметил. Появляется только если у возражения заполнено
   поле details. */
.dialer-details-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  cursor: pointer;
  transition: background 0.15s;
  margin-right: auto;
}
.dialer-details-btn:hover {
  background: var(--accent);
  color: #fff;
}

.dialer-objection-answer {
  font-size: 14px;
  line-height: 1.6;
}
.dialer-objection-answer p { margin: 0 0 8px; }
.dialer-objection-answer ul { padding-left: 22px; margin: 6px 0; }
.dialer-objection-answer li + li { margin-top: 4px; }
.dialer-objection-answer b, .dialer-objection-answer strong { font-weight: 700; }

/* Скрипт разговора справа */
.dialer-script-col {
  position: sticky;
  top: 80px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.dialer-script-head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1.5px solid var(--border);
}
.dialer-script-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.dialer-script-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.dialer-script-zoom-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.dialer-script-zoom-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.dialer-script-zoom-btn:active { transform: scale(0.94); }

/* Fullscreen-режим скрипта: разворачивается на весь viewport, текст крупнее */
.dialer-script-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 9999;
  border-radius: 0 !important;
  border: none !important;
  padding: 32px 64px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  overflow-y: auto !important;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
}
.dialer-script-fullscreen .dialer-script-section h4 { font-size: 16px; }
.dialer-script-fullscreen .dialer-script-title { font-size: 15px; }
.dialer-script-fullscreen .dialer-script-company { font-size: 19px; }
.dialer-script-fullscreen .dialer-script-zoom-btn {
  width: 40px; height: 40px;
  font-size: 16px;
}
/* Когда скрипт распахнут — блокируем скролл фонового body */
body.dialer-script-zoom-active { overflow: hidden; }
.dialer-script-company {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
}
.dialer-script-placeholder {
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
}
.dialer-script-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.dialer-script-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.dialer-script-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dialer-script-section p { margin: 0 0 6px; }
.dialer-script-section ul,
.dialer-script-section ol { margin: 4px 0 0; padding-left: 20px; }
.dialer-script-section li { margin-top: 4px; }
.dialer-script-section b { font-weight: 700; color: var(--ink); }

/* Прямая речь оператора — выделяем как цитату */
.dialer-script-quote {
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
  margin: 6px 0;
}
/* Маленькая помечающая ремарка курсивом */
.dialer-script-note {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
  margin: 6px 0;
}

/* Кейсы и «3 рычага» — каждый пункт чуть отдельный */
.dialer-script-cases li,
.dialer-script-pills li {
  margin-top: 6px;
  line-height: 1.5;
}
.dialer-script-pills {
  margin-top: 8px;
  padding-left: 22px;
}
.dialer-script-pills li::marker { font-weight: 700; color: var(--accent-dark); }

/* Жёлтая «фишка» — про скидку 25 000 → 0 */
.dialer-script-highlight {
  background: #fff8e6;
  border: 1px solid #f3d780;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
}

/* Варианты закрытия на встречу */
.dialer-script-variant {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--card);
}
.dialer-script-variant-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 5px;
  margin-bottom: 6px;
}
.dialer-script-variant p { margin: 0; line-height: 1.55; }

/* Возражения — каждое с красноватой меткой */
.dialer-script-objection {
  border: 1px solid #f3c8c0;
  background: #fff5f3;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
}
.dialer-script-objection-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c44d3f;
  background: #fbe5e0;
  padding: 2px 8px;
  border-radius: 5px;
  margin-bottom: 6px;
}
.dialer-script-objection p { margin: 0; line-height: 1.55; }

.dialer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dialer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s, opacity 0.2s;
}
.dialer-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dialer-card:active { transform: scale(0.99); }
.dialer-card-open {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15);
}
.dialer-card-status-badge {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  vertical-align: middle;
}

.dialer-card-info { flex: 1; min-width: 0; }
.dialer-card-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1px;
  /* Без обрезания: длинные названия переносятся на 2 строки. */
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.dialer-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11px;
  color: var(--muted);
}
.dialer-card-district {
  background: var(--bg-soft);
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 500;
}
.dialer-card-category {
  color: var(--muted);
  font-style: italic;
}

/* Группа кнопок справа на карточке: статусы (📵 ↩️ ⛔) + телефон 📞 */
.dialer-card-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.dialer-status-btn {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
  opacity: 0.55;
}
.dialer-status-btn:hover {
  opacity: 1;
  background: var(--card);
  border-color: var(--border);
}
.dialer-status-btn:active { transform: scale(0.92); }

.dialer-card-phone-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: 2px;
}
.dialer-card-phone-btn {
  width: 26px; height: 26px;
  font-size: 13px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.dialer-card-phone-btn:hover { background: var(--accent-dark); }
.dialer-card-phone-btn:active { transform: scale(0.92); }

.dialer-card-phone-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 200px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dialer-card-phone-popover[hidden] { display: none; }
.dialer-card-phone-popover-head {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px 2px;
}
.dialer-card-tel {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.1s;
}
.dialer-card-tel:hover { background: var(--accent-soft); }
.dialer-card-no-phone {
  padding: 8px 10px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

.dialer-footer {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.dialer-load-more {
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--ink);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.dialer-load-more:hover { border-color: var(--accent); background: var(--accent-soft); }
.dialer-end-note {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}
.dialer-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 10px;
}


/* ---------- Анализ звонков (operator-calls.js) ---------- */
/* `display: flex` перебивает UA-правило hidden{display:none}, поэтому
   панель оставалась видна при переключении в другой режим. Явный override. */
.calls-area[hidden] { display: none !important; }
.calls-area {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0 24px;
}
.calls-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.calls-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.calls-nav-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.calls-nav-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.calls-range {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  min-width: 220px;
  text-align: center;
}
.calls-period-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-soft);
  padding: 4px;
  border-radius: 10px;
}
.calls-period-tab {
  background: transparent;
  border: none;
  padding: 7px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.calls-period-tab:hover { color: var(--ink); }
.calls-period-tab.active {
  background: var(--card);
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.calls-demo-banner {
  background: #fff8e6;
  border: 1px solid #f3d780;
  color: #8a5a00;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}
.calls-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .calls-grid { grid-template-columns: 1fr; }
}
.calls-stats-card,
.calls-recos-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.calls-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.calls-stats-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calls-stats-total {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-dark);
}
.calls-stats-unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
  text-transform: lowercase;
}
.calls-stats-list { display: flex; flex-direction: column; gap: 6px; }
.calls-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg-soft);
}
.calls-stat-row-meta { background: transparent; padding: 6px 12px; }
.calls-stat-label { font-weight: 600; }
.calls-stat-val { font-weight: 700; font-size: 15px; }
.calls-stat-pct { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }
.calls-stat-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.calls-stat-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
  padding: 4px 12px 2px;
  margin-top: 4px;
}
.calls-sync-btn {
  margin-left: auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.calls-sync-btn:hover { border-color: var(--accent); color: var(--accent); }
.calls-sync-btn:disabled { opacity: 0.6; cursor: progress; }
.calls-sync-status {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  min-height: 16px;
}

/* === Личный кабинет оператора (operator-profile.js) === */
/* Скрытые пользователем элементы шапки (через настройки личного кабинета). */
.hidden-by-user { display: none !important; }

/* Мгновенный тултип — нативный title появляется через ~500-1500мс, что
   медленно для часто используемых иконок (статусы на карточках лидов).
   Используем data-tooltip + ::after — появляется сразу при hover. */
[data-tooltip] {
  position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #2a2a2a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #2a2a2a;
  pointer-events: none;
  z-index: 1000;
}

/* Tooltip снизу — для элементов, которым некуда показывать вверх
   (первая карточка в скролл-контейнере, элементы у верхней кромки экрана).
   Активируется через data-tooltip-pos="bottom" на самом элементе
   или на любом родителе (через class .dialer-card-actions ниже). */
[data-tooltip-pos="bottom"][data-tooltip]:hover::after,
[data-tooltip-pos="bottom"][data-tooltip]:focus-visible::after,
.dialer-card-actions [data-tooltip]:hover::after,
.dialer-card-actions [data-tooltip]:focus-visible::after {
  bottom: auto;
  top: calc(100% + 6px);
}
[data-tooltip-pos="bottom"][data-tooltip]:hover::before,
[data-tooltip-pos="bottom"][data-tooltip]:focus-visible::before,
.dialer-card-actions [data-tooltip]:hover::before,
.dialer-card-actions [data-tooltip]:focus-visible::before {
  bottom: auto;
  top: calc(100% - 4px);
  border-top-color: transparent;
  border-bottom-color: #2a2a2a;
}

/* Имя в шапке — кликабельная кнопка, ведущая в личный кабинет. */
.op-name-btn {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: var(--ink, #1f1812);
  cursor: pointer;
  transition: background 0.15s ease;
}
.op-name-btn:hover { background: rgba(0,0,0,0.06); color: var(--accent, #e9762a); }

/* Pane самого личного кабинета. */
.profile-area { padding: 0; }
.profile-wrap {
  max-width: 1200px;     /* широкая верстка — использует место по бокам */
  margin: 0 auto;
  padding: 24px 32px 40px;
}
.profile-title { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.4px; }
.profile-sub { color: var(--muted, #8a7a6b); font-size: 14px; margin-bottom: 24px; }
.profile-section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted, #8a7a6b);
  font-weight: 700;
  margin: 0 0 12px;
}
/* Группа пунктов кабинета: заголовок + сетка карточек. */
.profile-group { margin-bottom: 22px; }
.profile-group-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted, #8a7a6b);
  font-weight: 700;
  margin: 0 0 8px;
  padding-left: 4px;
}
.profile-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.profile-row {
  display: grid;
  grid-template-columns: 22px 1fr 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--card, #fefcf7);
  border: 1px solid var(--border, #e5dccf);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  color: var(--ink, #1f1812);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.profile-row:hover { border-color: var(--accent, #e9762a); }
.profile-row-emoji { font-size: 15px; line-height: 1; }
.profile-row-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Parent-row (Разделы) — со стрелкой раскрытия + глазик */
.profile-row-parent { grid-template-columns: 22px 1fr 18px 32px; }
.profile-row-arrow {
  font-size: 14px;
  color: var(--muted, #8a7a6b);
  transition: transform 0.18s ease-out;
}
.profile-row-arrow.expanded { transform: rotate(180deg); }
/* Кнопка-глазик — отдельная зона клика */
.profile-eye {
  width: 28px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0;
  line-height: 1;
}
.profile-eye:hover { background: rgba(0,0,0,0.05); border-color: var(--border, #e5dccf); }
/* Дочерние строки — сдвинуты вправо, мельче */
.profile-row-child {
  margin-left: 28px;
  padding: 10px 16px;
  font-size: 13.5px;
  background: rgba(0,0,0,0.02);
}
.profile-row-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease-out, margin 0.22s ease-out;
}
.profile-row-children.expanded {
  max-height: 600px;
  margin: 6px 0 4px;
}
.calls-recos-block {
  border-radius: 10px;
  padding: 14px 16px;
}
.calls-recos-block + .calls-recos-block { margin-top: 12px; }
.calls-recos-good { background: #e8f6ec; }
.calls-recos-bad  { background: #fdecec; }
.calls-recos-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.calls-recos-good .calls-recos-title { color: #1c5d2c; }
.calls-recos-bad .calls-recos-title  { color: #8a1a1a; }
.calls-recos-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.calls-recos-list li + li { margin-top: 6px; }
.calls-recos-list b { font-weight: 700; }

/* Outcome-строки (Назначено встреч, Конверсия) — выделяем мягким акцентом */
.calls-stat-row-outcome {
  background: #fff4e6;
  color: #7a4a00;
}
.calls-stat-row-outcome .calls-stat-pct { color: #a86d22; font-weight: 500; }

/* ---------- Разбор звонков (нижний блок) ---------- */
.calls-detail {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.calls-detail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.calls-detail-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.calls-detail-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.calls-detail-note {
  font-size: 12.5px;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}
.calls-detail-empty {
  padding: 24px 16px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.calls-detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.call-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg-soft);
}
.call-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.call-card-name strong { font-size: 15px; color: var(--ink); }
.call-card-company { color: var(--muted); font-weight: 500; margin-left: 4px; }
.call-card-phone {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  text-decoration: none;
}
.call-card-phone:hover { text-decoration: underline; }
.call-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 12px;
}
.call-card-section { margin-top: 12px; }
.call-card-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.call-card-list {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.call-card-list li + li { margin-top: 4px; }
.call-card-list-recos li {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.call-card-list-recos li:last-child { border-bottom: none; padding-bottom: 0; }
.call-card-tip { font-weight: 600; color: var(--ink); }
.call-card-why { color: var(--muted); font-size: 13px; margin-top: 3px; }
.call-card-why b { color: var(--ink-2); font-weight: 600; }

.call-card-adherence {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.call-card-adherence-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.call-card-adherence-label b { font-size: 14px; color: var(--ink); }
.call-card-adherence-bar {
  height: 8px;
  background: var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.call-card-adherence-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.call-card-adherence-good .call-card-adherence-fill { background: linear-gradient(90deg, #7bc47f, #2e8b57); }
.call-card-adherence-good .call-card-adherence-label b { color: #2e8b57; }
.call-card-adherence-mid  .call-card-adherence-fill { background: linear-gradient(90deg, #f5a623, #e88a13); }
.call-card-adherence-mid  .call-card-adherence-label b { color: #c46e10; }
.call-card-adherence-low  .call-card-adherence-fill { background: linear-gradient(90deg, #e57b6f, #c44d3f); }
.call-card-adherence-low  .call-card-adherence-label b { color: #c44d3f; }

/* ============================================================
   Форма «Новая заявка» — редизайн под мокап new_request_form.html
   Использует существующие переменные --accent, --bg-soft, --card, --border.
   ============================================================ */

/* Блок с заголовком + тумблером */
.ol-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  grid-column: 1 / -1;
}
.ol-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ol-block-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Тумблер ON/OFF */
.ol-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.ol-toggle-label {
  font-size: 13px;
  color: var(--muted);
}
.ol-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ol-toggle-track[data-on="true"] {
  background: var(--accent);
}
.ol-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ol-toggle-track[data-on="true"] .ol-toggle-knob {
  left: 18px;
}

/* Сетки 2:1 и 1:1 */
.ol-row-2to1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
.ol-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .ol-row-2to1, .ol-row-3 { grid-template-columns: 1fr; }
}

/* Степпер даты/времени — стрелки слева/справа, значение в центре */
.ol-stepper {
  display: flex;
  align-items: stretch;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.ol-stepper-btn {
  border: none;
  background: transparent;
  padding: 0 12px;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  transition: background 0.1s;
}
.ol-stepper-btn:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.ol-stepper-prev { border-right: 1px solid var(--border); }
.ol-stepper-next { border-left:  1px solid var(--border); }
.ol-stepper input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
  font-size: 14px;
  padding: 0 4px;
  outline: none;
}

/* Сегментированный переключатель (Скидка/Бонус, Да/Нет) */
.ol-seg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ol-seg-label {
  font-size: 12px;
  color: var(--muted);
}
.ol-seg-group {
  display: inline-flex;
  background: var(--bg-soft);
  border-radius: 6px;
  padding: 1px;
  gap: 1px;
}
.ol-seg-btn {
  border: 0;
  background: transparent;
  padding: 3px 10px;
  font: inherit;
  font-family: inherit;
  font-size: 12px;
  color: var(--muted);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.1s;
}
.ol-seg-btn:hover { color: var(--ink); }
.ol-seg-btn.active {
  background: var(--card);
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Чипы контактов */
.ol-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ol-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--ink);
}
.ol-chip-icon {
  font-size: 14px;
  color: var(--muted);
}
.ol-chip-value {
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-chip-action {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  border-radius: 4px;
}
.ol-chip-action:hover {
  color: var(--ink);
  background: rgba(0,0,0,0.05);
}
.ol-chip-empty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.ol-chip-empty:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Бейдж режима редактирования */
.ol-badge-editing {
  display: inline-block;
  font-size: 12px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 8px;
}

/* Контакты — режим редактирования (grid 2x) */
.ol-contacts-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
@media (max-width: 520px) {
  .ol-contacts-edit-grid { grid-template-columns: 1fr; }
}
.ol-contact-edit-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ol-contact-edit-full { grid-column: 1 / -1; }

/* Скрытые элементы (для совместимости с readForm) */
.ol-hidden-inputs { display: none; }

/* ============================================================
   Форма «Новая заявка» — доводка под ТЗ (TZ_new_request_form.md)
   ============================================================ */

/* Кремовые тона по ТЗ — переопределяем локально, не трогая глобальные. */
.ol-create-col-left {
  --card: #FFFCF5;
  --bg-soft: #F5EFE0;
  --border: #E8DFC8;
}
.ol-create-col-left .ol-form input[type="text"],
.ol-create-col-left .ol-form input[type="email"],
.ol-create-col-left .ol-form input[type="time"] {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
}

/* Кастомный степпер: значение по центру (кнопка) — клик открывает prompt. */
.ol-stepper-value {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  padding: 0 8px;
  transition: background 0.1s;
}
.ol-stepper-value:hover { background: var(--bg-soft); }
.ol-stepper-value .ti { font-size: 16px; color: var(--muted); }

/* Поля редактирования контактов — обёртка для × кнопки */
.ol-edit-wrap {
  position: relative;
  display: block;
}
.ol-edit-input--with-clear { padding-right: 32px; }
.ol-edit-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ol-edit-clear:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.ol-edit-clear .ti { font-size: 14px; }

/* Tabler-иконки в чипах/лейблах: размер и цвет согласованы. */
.ol-chip-icon .ti,
.ol-contact-edit-label .ti { font-size: 14px; }
.ol-block-header .btn .ti { font-size: 14px; }

/* Кнопки в шапке блока «Контакты» (Редактировать / Отмена / Готово).
   Компактные — около половины высоты полей формы. */
.ol-contacts-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
}
.ol-contacts-btn .ti { font-size: 12px; }
.ol-contacts-btn--icon {
  padding: 0;
  width: 26px;
  justify-content: center;
}
.ol-contacts-btn--icon .ti { font-size: 14px; }

/* Нижние кнопки формы (Отмена / Сохранить и передать менеджеру) —
   по ТЗ выровнены вправо, gap:8px, разделитель сверху. */
.ol-create-col-left .ol-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.ol-create-col-left .ol-actions .btn {
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: 8px;
}