:root {
  --accent: #5b2ce8;
  --accent-hover: #4a20cc;
  --accent-soft: #f0eafe;
  --bg: #f7f7f8;
  /* Холст карточки заказа. На белой странице её блоки — данные, лента, форма
     примечаний — сливались с фоном; серый холст отделяет их друг от друга.
     Остальная CRM остаётся на белом: там блоков на экране меньше и они не спорят. */
  --canvas: #eaecef;
  --panel: #ffffff;
  --line: #e9e9ec;
  --line-strong: #d9d9de;
  --text: #16151a;
  --muted: #8b8b93;
  --chip: #f2f2f4;
  --chip-hover: #e8e8ec;
  --green: #16a34a;
  --green-bg: #e7f7ed;
  --orange: #e08a2e;
  --orange-bg: #fdf2e3;
  --blue: #2f6fed;
  --blue-bg: #e9f0fd;
  --red: #e0483d;
  --red-bg: #fdecea;
  /* Оттенки этапов заказа: воронка длинная, и пяти базовых цветов на неё не хватает */
  --yellow: #d9a400;
  --yellow-bg: #fff3c9;
  --orange-dark: #c05a17;
  --orange-dark-bg: #fae5d5;
  --teal: #06b6b0;
  --teal-bg: #d4f7f4;
  --green-light: #4aa96b;
  --green-light-bg: #ecf9f0;
  /* Текст на таблетках статуса — своим, тёмным тоном: яркий цвет линии на пастельном
     фоне читается плохо. Точка на таблетке остаётся яркой, она и несёт цвет этапа. */
  --green-ink: #0e7233;
  --yellow-ink: #7d5b00;
  --orange-ink: #98530d;
  --orange-dark-ink: #8d3c0d;
  --blue-ink: #1d4ed8;
  --teal-ink: #04706b;
  --green-light-ink: #2c7a4b;
  --red-ink: #b3271d;

  /* Ближайшие заказы: оттенки различаются, но остаются спокойными на большой доске. */
  --today-bg: #f1f8f6;
  --today-line: #cfe3dd;
  --today-ink: #35675b;
  --tomorrow-bg: #fffaf0;
  --tomorrow-line: #eadfbe;
  --tomorrow-ink: #75622d;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

/* --- сайдбар --- */
.sidebar {
  width: 240px; flex: 0 0 240px;
  background: var(--bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 18px 14px; }
/* Шапка кликабельна только у админа — остальным настройки закрыты сервером. */
.brand.clickable { cursor: pointer; border-radius: 10px; margin: 0 8px; padding: 18px 10px 14px; }
.brand.clickable:hover { background: var(--chip); }
.brand-logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
}
.brand-title { font-weight: 600; line-height: 1.2; }
.brand-sub { color: var(--muted); font-size: 12px; }

.nav { padding: 6px 10px; flex: 1; overflow-y: auto; }
.nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; margin-bottom: 2px; border: 0; border-radius: 10px;
  background: transparent; font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.nav button:hover { background: var(--chip-hover); }
.nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav button.active .nav-icon { color: var(--accent); }
.nav-icon { width: 18px; display: inline-flex; justify-content: center; color: var(--muted); }
.nav .nav-count { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.nav button.active .nav-count { color: var(--accent); }
.nav .nav-count.alert { background: var(--red); color: #fff; border-radius: 8px; padding: 1px 7px; }
.nav-group { padding: 14px 12px 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.sidebar-footer { padding: 12px 18px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); position: relative; }

/* На компьютере меню занимает только полосу значков и раскрывается поверх
   страницы. Контент не прыгает при наведении, а сенсорные устройства сохраняют
   обычную широкую навигацию. */
@media (hover: hover) and (pointer: fine) and (min-width: 860px) {
  .layout { display: block; padding-left: 68px; }
  .sidebar {
    position: fixed; z-index: 24; inset: 0 auto 0 0; width: 68px; height: 100vh;
    border-right-color: #e3e3e7; overflow: visible;
    transition: width .2s cubic-bezier(.2,.75,.25,1), box-shadow .2s ease;
  }
  .sidebar:hover, .sidebar:has(:focus-visible) {
    width: 240px; box-shadow: 9px 0 28px rgba(28,24,40,.11);
  }
  .content { width: 100%; min-height: 100vh; }
  .brand { min-height: 66px; gap: 10px; padding: 16px 17px; white-space: nowrap; }
  .brand.clickable { width: calc(100% - 16px); min-height: 58px; margin: 4px 8px; padding: 12px 9px; }
  .brand-logo { flex: 0 0 34px; }
  .brand > div:last-child {
    width: 0; min-width: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: width .18s cubic-bezier(.2,.75,.25,1), opacity .1s ease;
  }
  .sidebar:hover .brand > div:last-child,
  .sidebar:has(:focus-visible) .brand > div:last-child {
    width: 162px; opacity: 1; pointer-events: auto; transition-delay: .04s;
  }
  .nav { padding: 5px 10px; overflow-x: hidden; }
  .nav button {
    position: relative; width: 48px; height: 42px; justify-content: flex-start;
    gap: 10px; padding: 9px 15px; overflow: hidden; white-space: nowrap;
    transition: width .18s cubic-bezier(.2,.75,.25,1), background .14s ease;
  }
  .sidebar:hover .nav button,
  .sidebar:has(:focus-visible) .nav button { width: 220px; }
  .nav-icon { width: 18px; flex: 0 0 18px; }
  .nav-label {
    width: 0; min-width: 0; overflow: hidden; opacity: 0;
    transition: width .18s cubic-bezier(.2,.75,.25,1), opacity .1s ease;
  }
  .sidebar:hover .nav-label,
  .sidebar:has(:focus-visible) .nav-label { width: 150px; opacity: 1; transition-delay: .04s; }
  .nav .nav-count { position: absolute; right: 12px; opacity: 0; transition: opacity .1s ease; }
  .sidebar:hover .nav-count,
  .sidebar:has(:focus-visible) .nav-count { opacity: 1; transition-delay: .06s; }
  .nav .nav-count.alert {
    right: 3px; top: 3px; min-width: 8px; width: 8px; height: 8px; padding: 0;
    overflow: hidden; border-radius: 50%; color: transparent; opacity: 1;
  }
  .sidebar:hover .nav-count.alert,
  .sidebar:has(:focus-visible) .nav-count.alert {
    right: 12px; top: auto; width: auto; min-width: 0; height: auto; padding: 1px 7px;
    border-radius: 8px; color: #fff;
  }
  .nav-group {
    position: relative; height: 20px; padding: 9px 9px 6px; overflow: hidden;
    color: transparent; font-size: 0; white-space: nowrap;
  }
  .nav-group::after {
    content: ''; position: absolute; left: 12px; top: 12px; width: 24px; height: 1px;
    background: #dfdfe4; transition: opacity .1s ease;
  }
  .sidebar:hover .nav-group,
  .sidebar:has(:focus-visible) .nav-group {
    height: auto; padding: 14px 12px 6px; color: var(--muted); font-size: 11px;
  }
  .sidebar:hover .nav-group::after,
  .sidebar:has(:focus-visible) .nav-group::after { opacity: 0; }
  .sidebar-footer { padding: 12px 19px; overflow: visible; }
  .account { width: 30px; margin: 0; padding: 0; gap: 10px; white-space: nowrap; }
  .account-who, .account-chevrons, .footer-db {
    width: 0; min-width: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none;
  }
  .sidebar:hover .account,
  .sidebar:has(:focus-visible) .account { width: 202px; margin: -6px; padding: 6px; }
  .sidebar:hover .account-who,
  .sidebar:has(:focus-visible) .account-who { width: auto; opacity: 1; pointer-events: auto; }
  .sidebar:hover .account-chevrons,
  .sidebar:has(:focus-visible) .account-chevrons { width: 18px; opacity: 1; pointer-events: auto; }
  .sidebar:hover .footer-db,
  .sidebar:has(:focus-visible) .footer-db { width: auto; margin-top: 10px; opacity: .8; }
}

/* --- контент --- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 32px 10px;
  position: sticky; top: 0; background: var(--panel); z-index: 8;
}
.topbar h1 { font-size: 22px; margin: 0; font-weight: 700; letter-spacing: -.4px; }
.topbar .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.page { padding: 4px 32px 60px; }
body.messages-page { overflow: hidden; }
body.messages-page .layout, body.messages-page .content { height: 100vh; min-height: 0; }
body.messages-page .topbar { flex: 0 0 auto; }
body.messages-page .page {
  flex: 1 1 auto; min-height: 0; display: flex; padding-bottom: 16px; overflow: hidden;
}
body.messages-page .page > .messenger {
  flex: 1 1 auto; height: auto; min-height: 0;
}

/* --- кнопки --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: var(--chip); color: var(--text);
  border-radius: 10px; padding: 10px 16px; font: inherit; letter-spacing: .2px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn:hover { background: var(--chip-hover); text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; font-weight: 500; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-outline { background: var(--panel); border: 1px solid var(--line-strong); }
.btn-outline:hover { background: var(--bg); }
.btn-danger { background: var(--red-bg); color: var(--red); }
.btn-danger:hover { background: #fbdcd9; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; }
.icon { width: 18px; height: 18px; display: block; flex: 0 0 18px; }

/* --- панель фильтров --- */
/* Выравниваем по низу: у полей с подписью («с», «по») сверху есть строка текста,
   и при центрировании сами поля оказывались ниже поиска. */
.bar { display: flex; align-items: flex-end; gap: 12px; margin: 6px 0 16px; flex-wrap: wrap; }
/* Всё, что без подписи, — кнопки, чипы, переключатели — держим на высоте поиска. */
.bar > .btn, .bar > .chip, .bar > button, .bar > .right { align-self: center; }
.search {
  display: flex; align-items: center; gap: 12px; flex: 0 1 460px; min-width: 240px;
  border: 1px solid #e6e6ea; border-radius: 12px; padding: 0 16px; height: 48px; background: var(--panel);
}
.search:focus-within { border-color: #c9c9d1; }
/* Вес селектора должен перебивать общий input[type="text"] ниже по файлу:
   при равном весе побеждал он и рисовал вторую рамку внутри поиска. */
.search input[type="text"], .search input {
  border: 0; outline: 0; box-shadow: none; border-radius: 0;
  flex: 1; background: transparent; padding: 0;
  font-family: inherit; font-size: 15px; color: var(--text);
}
.search input[type="text"]:focus { box-shadow: none; }
.search input::placeholder { color: #b3b3bb; }
.search .icon { color: #9a9aa3; }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bar select, .bar input[type="date"] { height: 48px; border-radius: 12px; }
.bar label.field { gap: 3px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  border: 1px dashed var(--line-strong); background: var(--panel); color: var(--text);
  border-radius: 12px; padding: 6px 12px; font: inherit; font-size: 13px;
  cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--muted); }
.chip.active { border: 1px solid var(--accent); color: var(--accent); }
.chip .count { color: var(--muted); margin-left: 6px; font-size: 11px; }
.chip.active .count { color: var(--accent); opacity: .7; }

.list-summary { display: flex; align-items: center; gap: 16px; margin: 0 0 12px; flex-wrap: wrap; }
.list-summary-text { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.list-summary .metric { color: var(--muted); }
.list-summary .metric b { color: var(--text); font-variant-numeric: tabular-nums; }
.list-summary .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 18px; color: var(--muted); }

/* --- таблицы --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-weight: 400; color: var(--muted); font-size: 13px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel);
  position: sticky; top: 0; z-index: 2;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.active { color: var(--text); font-weight: 500; }
/* Бледный двойной шеврон — подсказка «по колонке можно сортировать».
   У активной колонки подсвечивается та половина, куда идёт сортировка. */
.sort-mark { display: inline-flex; vertical-align: middle; margin-left: 6px; color: #cfcfd6; }
.sort-mark .icon { width: 13px; height: 13px; flex: 0 0 13px; }
th.sortable:hover .sort-mark { color: var(--muted); }
.sort-mark.active { color: var(--line-strong); }
.sort-mark.active.asc svg path:first-child,
.sort-mark.active.desc svg path:last-child { stroke: var(--accent); }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfaff; }
/* Та же временная маркировка, что на канбане. Оттенок занимает всю строку,
   а подпись даты чуть темнее — этого достаточно, чтобы строку найти взглядом. */
.table-wrap tbody tr.order-today { background: var(--today-bg); }
.table-wrap tbody tr.order-tomorrow { background: var(--tomorrow-bg); }
.table-wrap tbody tr.order-today:hover { background: #eaf4f1; }
.table-wrap tbody tr.order-tomorrow:hover { background: #fff6e4; }
.table-wrap tbody tr.order-today .order-date-label { color: var(--today-ink); font-weight: 600; }
.table-wrap tbody tr.order-tomorrow .order-date-label { color: var(--tomorrow-ink); font-weight: 600; }
tr.clickable { cursor: pointer; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.name { font-weight: 500; }
.wrap { max-width: 320px; white-space: normal; line-height: 1.35; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.empty { padding: 48px; text-align: center; color: var(--muted); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* --- общий список задач из карточек заказов --- */
.task-state-filter { height: 48px; min-width: 170px; background: var(--panel); }
.task-source-filter { height: 48px; min-width: 210px; background: var(--panel); }
.task-object .name { color: var(--accent); }
.task-due { font-variant-numeric: tabular-nums; }
.task-due.overdue { color: var(--red); font-weight: 500; }
.task-due.done { color: var(--muted); }
.task-list-text { line-height: 1.4; }
.task-list-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.task-list-text.done .task-list-copy { color: var(--muted); text-decoration: line-through; }
.task-list-result { text-decoration: none; }
.task-list-done {
  display: inline-flex; padding: 2px 7px; border-radius: 10px;
  background: var(--green-bg); color: var(--green-ink); font-size: 11px; text-decoration: none;
}

/* --- метки статусов --- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--green-bg); color: var(--green-ink); }
.pill-orange { background: var(--orange-bg); color: var(--orange-ink); }
.pill-gray { background: var(--chip); color: var(--muted); }
.pill-blue { background: var(--blue-bg); color: var(--blue-ink); }
.pill-red { background: var(--red-bg); color: var(--red-ink); }
.pill-yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.pill-orange-dark { background: var(--orange-dark-bg); color: var(--orange-dark-ink); }
.pill-teal { background: var(--teal-bg); color: var(--teal-ink); }
.pill-green-light { background: var(--green-light-bg); color: var(--green-light-ink); }
/* Точка держит яркий цвет этапа — тот же, что у линии над колонкой канбана */
.pill-green::before { background: var(--green); }
.pill-orange::before { background: var(--orange); }
.pill-blue::before { background: var(--blue); }
.pill-red::before { background: var(--red); }
.pill-yellow::before { background: var(--yellow); }
.pill-orange-dark::before { background: var(--orange-dark); }
.pill-teal::before { background: var(--teal); }
.pill-green-light::before { background: var(--green-light); }
.tag { display: inline-block; padding: 3px 9px; border-radius: 8px; font-size: 12px; background: var(--chip); color: var(--muted); margin-right: 4px; }
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.tag-warn { background: var(--orange-bg); color: #8a5a1e; }
.tag-red { background: var(--red-bg); color: var(--red); }

/* --- карточки метрик --- */
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--panel); }
.card.clickable:hover { border-color: var(--accent); }
.card .label { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.card .value { font-size: 25px; font-weight: 600; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.card .value.long { font-size: 19px; }
.card .hint { color: var(--muted); font-size: 12px; margin-top: 5px; }
.card.alert { border-color: #f3c9c4; background: #fffbfa; }
.card.alert .value { color: var(--red); }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 22px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--panel); }
.panel h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.panel h3 .muted { font-weight: 400; font-size: 13px; }
.panel table { margin: -4px 0; }
.panel table th { padding: 6px 8px; }
.panel table td { padding: 9px 8px; }
.panel table tr:last-child td { border-bottom: 0; }

/* --- управленческий дашборд --- */
.dashboard-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 16px 18px; margin-bottom: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); flex-wrap: wrap;
}
.dashboard-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.dashboard-presets .chip { border-style: solid; }
.dashboard-range { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dashboard-range label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.dashboard-range input {
  height: 40px; padding: 0 11px; border: 1px solid var(--line-strong);
  border-radius: 9px; background: var(--panel); color: var(--text); font: inherit;
}
.dashboard-range input:focus { outline: none; border-color: var(--accent); }
.dashboard-period { color: var(--muted); font-size: 13px; margin: 0 2px 14px; }
.dashboard-kpi { max-width: 1380px; grid-template-columns: repeat(3, minmax(220px, 1fr)); }
.dashboard-kpi .card { padding: 20px 22px; }
.dashboard-kpi .card .value { font-size: 36px; }
.dashboard-kpi .card .value.long { font-size: 28px; }
.dashboard-kpi .value.nps-good { color: var(--green-ink); }
.dashboard-kpi .value.nps-bad { color: var(--red-ink); }
.dashboard-kpi .value.debt-overdue { color: #a44b3d; }
.dashboard-overdue-card { border-color: #ead9d5; background: #fffdfc; }
.dashboard-nps-card {
  display: block; width: 100%; text-align: left; color: var(--text); font: inherit;
  cursor: pointer;
}
.dashboard-nps-card:hover { border-color: #bba9ff; box-shadow: 0 5px 18px rgba(94, 45, 238, .08); }
.dashboard-nps-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dashboard-nps-pending { margin-top: 5px; color: #9a919f; font-size: 11px; font-weight: 400; }
.dashboard-card-action { margin-top: 12px; color: var(--accent); font-size: 12px; font-weight: 600; }
.dashboard-nps-backdrop {
  justify-content: center; align-items: center; padding: 24px;
}
.dashboard-nps-dialog {
  position: relative; width: min(1180px, 100%); max-height: calc(100vh - 48px);
  overflow: hidden; padding: 24px; border-radius: 18px; background: var(--panel);
  box-shadow: 0 18px 60px rgba(16, 14, 32, .18);
}
.dashboard-nps-dialog > .close {
  position: absolute; z-index: 2; top: 13px; right: 16px; border: 0;
  background: none; color: var(--muted); font-size: 28px; line-height: 1;
  cursor: pointer;
}
.dashboard-nps-dialog .dashboard-nps-panel { max-width: none; padding: 0; border: 0; }
.dashboard-customers-backdrop { justify-content: center; align-items: center; padding: 18px; }
.dashboard-customers-dialog {
  position: relative; width: min(1560px, 100%); max-height: calc(100vh - 36px);
  overflow: hidden; padding: 22px; border-radius: 18px; background: var(--panel);
  box-shadow: 0 18px 60px rgba(16, 14, 32, .18);
}
.dashboard-customers-dialog > .close {
  position: absolute; z-index: 8; top: 14px; right: 16px; border: 0;
  background: none; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer;
}
.dashboard-customers-dialog h2 { margin: 0 0 3px; font-size: 21px; }
.customer-analytics-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.customer-analytics-summary > span {
  padding: 5px 9px; border-radius: 8px; background: var(--chip); color: var(--text); font-size: 12px;
}
.customer-analytics-summary small { color: var(--muted); font-size: 11px; }
.customer-analytics-summary .customer-analytics-risk-count { color: #8b5d24; background: #fff8ec; }
.customer-analytics-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.customer-analytics-toolbar input, .customer-analytics-toolbar select {
  height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; font-size: 12px;
}
.customer-analytics-toolbar input { width: 250px; }
.customer-analytics-toolbar input:focus, .customer-analytics-toolbar select:focus {
  outline: none; border-color: var(--accent);
}
.customer-analytics-found { margin-left: auto; }
.customer-analytics-table { max-height: calc(100vh - 210px); border: 1px solid var(--line); }
.customer-analytics-table table { min-width: max-content; font-size: 11px; }
.customer-analytics-table th { position: sticky; top: 0; z-index: 3; padding: 7px 8px; white-space: nowrap; }
.customer-analytics-table td { padding: 6px 8px; height: 38px; }
.customer-analytics-table tbody tr { cursor: pointer; }
.customer-analytics-table tbody tr:hover td { background: #f8f6ff; }
.customer-analytics-table .customer-analytics-company {
  position: sticky; left: 0; z-index: 2; min-width: 230px; max-width: 230px; background: var(--panel);
}
.customer-analytics-table th.customer-analytics-company { z-index: 5; background: var(--card); }
.customer-analytics-table tr.customer-analytics-risk-row td { background: #fffcf7; }
.customer-analytics-table tr.customer-analytics-risk-row td.customer-analytics-company { background: #fffcf7; }
.customer-analytics-table tr:hover td.customer-analytics-company { background: #f8f6ff; }
.customer-analytics-ltv { font-weight: 650; }
.customer-analytics-signal { min-width: 145px; white-space: nowrap; }
.customer-risk-mark { color: #98651f; font-weight: 600; }
.customer-month-head {
  width: 43px; max-width: 43px; min-width: 43px; overflow: hidden; text-align: center;
  color: var(--muted); font-size: 10px;
}
.customer-month-cell {
  width: 43px; min-width: 43px; padding: 0 !important; text-align: center;
  border-left: 3px solid var(--panel); border-right: 3px solid var(--panel);
  font-variant-numeric: tabular-nums; color: #3f3550;
}
.customer-month-cell.level-1 { background: #f1edff; }
.customer-month-cell.level-2 { background: #ddd4ff; }
.customer-month-cell.level-3 { background: #c5b5ff; color: #30205e; font-weight: 600; }
.customer-month-cell.level-4 { background: #a992ff; color: #251454; font-weight: 700; }
.dashboard-nps-panel { max-width: 900px; }
.dashboard-nps-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.dashboard-nps-head h3 { margin-bottom: 3px; }
.dashboard-nps-head .dashboard-month { margin-left: auto; }
.dashboard-month { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; }
.dashboard-month input {
  height: 38px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--panel); color: var(--text); font: inherit;
}
.dashboard-nps-table { max-height: 520px; }
.dashboard-nps-table th { top: 0; }
.dashboard-nps-table td { vertical-align: middle; padding-top: 9px; padding-bottom: 9px; }
.dashboard-nps-table tr.nps-priority td { background: #f5faf8; }
.dashboard-nps-table tr.nps-priority:hover td { background: #eef7f3; }
.nps-order-mark {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 8px;
  border-radius: 7px; background: var(--green-bg); color: var(--green-ink);
  font-size: 11px; font-weight: 500;
}
.nps-order-mark span { color: #628177; font-weight: 400; }
.nps-score-cell { width: 150px; }
.nps-score {
  width: 86px; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--panel); color: var(--text); font: inherit;
  font-variant-numeric: tabular-nums;
}
.nps-score:focus { outline: none; border-color: var(--accent); }
.nps-score.good { background: var(--green-bg); border-color: #b9dfc7; color: var(--green-ink); }
.nps-score.bad { background: var(--red-bg); border-color: #f2c9c5; color: var(--red-ink); }
.nps-state { display: inline-block; padding: 4px 9px; border-radius: 8px; font-size: 12px; }
.nps-state.good { background: var(--green-bg); color: var(--green-ink); }
.nps-state.bad { background: var(--red-bg); color: var(--red-ink); }
.nps-state.empty { background: var(--chip); color: var(--muted); }
.nps-comment-cell { min-width: 300px; width: 48%; }
.nps-comment {
  display: block; width: 100%; min-height: 38px; max-height: 110px; resize: vertical;
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--panel); color: var(--text); font: inherit; line-height: 1.35;
}
.nps-comment:focus { outline: none; border-color: var(--accent); }
.nps-comment::placeholder { color: #b3b3bb; }
@media (max-width: 640px) {
  .dashboard-toolbar { align-items: stretch; }
  .dashboard-range { width: 100%; }
  .dashboard-range label { flex: 1 1 130px; }
  .dashboard-range input { width: 100%; }
  .dashboard-kpi { max-width: none; grid-template-columns: 1fr; }
  .dashboard-nps-head .dashboard-month { margin-left: 0; }
  .dashboard-nps-backdrop { padding: 0; align-items: stretch; }
  .dashboard-nps-dialog { max-height: 100vh; padding: 20px 14px; border-radius: 0; }
  .dashboard-customers-backdrop { padding: 0; align-items: stretch; }
  .dashboard-customers-dialog { max-height: 100vh; padding: 18px 12px; border-radius: 0; }
  .customer-analytics-toolbar input { width: 100%; }
  .customer-analytics-found { margin-left: 0; }
}

/* воронка */
.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel-row { display: grid; grid-template-columns: 170px 1fr 52px; gap: 12px; align-items: center; }
.funnel-row .t { color: var(--muted); font-size: 13px; }
.funnel-row .track { background: var(--chip); border-radius: 6px; height: 10px; overflow: hidden; }
/* display:block обязателен — у строчного элемента ширина и высота не применяются */
.funnel-row .fill { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.funnel-row .fill.green { background: var(--green); }
.funnel-row .fill.orange { background: var(--orange); }
.funnel-row .fill.red { background: var(--red); }
.funnel-row .fill.blue { background: var(--blue); }
.funnel-row .fill.gray { background: var(--line-strong); }
.funnel-row .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

/* столбики по дням */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-top: 6px; }
/* height:100% нужен, чтобы проценты у столбиков считались от высоты графика, а не от нуля */
.bars .bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 4px; }
.bars .b1 { background: var(--accent-soft); border-radius: 3px 3px 0 0; }
.bars .b2 { background: var(--accent); border-radius: 3px 3px 0 0; }
.bars-legend { display: flex; gap: 16px; color: var(--muted); font-size: 12px; margin-top: 10px; }
.bars-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* прогресс укомплектованности */
.progress { background: var(--chip); border-radius: 6px; height: 8px; overflow: hidden; min-width: 70px; }
.progress i { display: block; height: 100%; background: var(--accent); }
.progress i.full { background: var(--green); }
.progress i.low { background: var(--orange); }

/* --- страница-карточка --- */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; padding: 4px 8px 4px 0;
}
.back-link:hover { color: var(--accent); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
@media (max-width: 1150px) { .detail { grid-template-columns: 1fr; } }

.block { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; background: var(--panel); }
.block > h3 { margin: 0 0 14px; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.block > h3 .right { margin-left: auto; font-weight: 400; }
.side-card { background: #f6f6f8; border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.side-card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.side-total { font-size: 24px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }

.props { display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px; font-size: 14px; }
.props dt { color: var(--muted); }
.props dd { margin: 0; word-break: break-word; }

.steps { display: flex; flex-direction: column; gap: 13px; }
.steps .step { display: flex; align-items: center; gap: 11px; color: var(--muted); }
.steps .step .mark {
  width: 24px; height: 24px; border-radius: 50%; background: #e3e3e7; color: #fff;
  display: flex; align-items: center; justify-content: center; flex: 0 0 24px;
}
.steps .step.done { color: var(--text); }
.steps .step.done .mark { background: var(--accent); }
.steps .step .icon { width: 14px; height: 14px; flex: 0 0 14px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs button {
  border: 0; background: none; font: inherit; padding: 11px 16px; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.tabs .count { font-size: 12px; opacity: .7; margin-left: 5px; }

.note { white-space: pre-wrap; line-height: 1.45; background: var(--bg); border-radius: 10px; padding: 14px 16px; }
.warn-box { background: var(--orange-bg); color: #8a5a1e; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; }
.err-box { background: var(--red-bg); color: #a3372e; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; }
.info-box { background: var(--blue-bg); color: #24519f; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; }

/* --- поля и формы --- */
input[type="date"], input[type="text"], input[type="number"], input[type="time"],
input[type="datetime-local"], select, textarea {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; font: inherit;
  background: var(--panel); color: var(--text); max-width: 100%;
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b8b93" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9 4-4 4 4"/><path d="m16 15-4 4-4-4"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px 15px;
}
select::-ms-expand { display: none; }

/* У поля даты родной значок браузера выбивается из набора — гасим его и кладём свой.
   Сам значок оставляем кликабельным: он и открывает календарь. */
input[type="date"] {
  padding-right: 34px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b8b93" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>');
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0; cursor: pointer; margin: 0; padding: 0; width: 20px;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
/* Поля конкретного физлица появляются только у системного заказчика
   «Физические лица». display:flex выше не должен перебивать hidden. */
.form-grid label.field[hidden] { display: none; }
label.field > span { font-size: 12px; }
.required-mark { color: var(--red); font-weight: 600; }
label.field input, label.field select, label.field textarea { color: var(--text); font-size: 14px; }
.search-select { position: relative; }
.search-select > input { width: 100%; }
.search-select-menu {
  display: none; position: absolute; z-index: 45; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; padding: 6px; background: var(--panel);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 20, 35, .14);
}
.search-select-menu.open { display: block; }
.search-select-item {
  display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.search-select-item:hover, .search-select-item.active { background: var(--accent-soft); color: var(--accent); }
.search-select-empty { padding: 10px; color: var(--muted); }
label.check { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; padding: 7px 0; }
label.check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.form-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; margin: 4px 0 18px;
}
.form-grid > * { min-width: 0; }
.form-grid label.field input, .form-grid label.field select, .form-grid label.field textarea {
  width: 100%; min-width: 0;
}
.datetime-parts {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
}
.datetime-time { display: flex; align-items: center; gap: 5px; font-size: 16px; color: var(--muted); }
.form-grid label.field .datetime-time input {
  width: 48px; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Прошлые заказы выбранного контрагента — быстрые шаблоны новой заявки. */
.deal-template-box {
  grid-column: 1 / -1; border: 1px solid #e3deed; border-radius: 12px;
  background: #faf9fc; padding: 12px; margin-top: -2px;
}
.deal-template-box[hidden] { display: none; }
.deal-template-head { margin-bottom: 9px; }
.deal-template-list { display: flex; flex-direction: column; gap: 7px; }
.deal-template-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.deal-template-info { min-width: 0; }
.deal-template-title { font-size: 13px; font-weight: 600; }
.deal-template-address, .deal-template-task {
  margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deal-template-task { color: #625b70; }
.deal-template-meta { margin-top: 5px; color: var(--muted); font-size: 11px; }
.deal-template-loading, .deal-template-empty { padding: 12px 4px; color: var(--muted); font-size: 13px; }
@media (max-width: 480px) {
  .deal-template-item { grid-template-columns: minmax(0, 1fr); }
  .deal-template-item .btn { justify-self: start; }
}

/* --- боковая панель редактирования --- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(16, 14, 32, .3); z-index: 30; display: flex; justify-content: flex-end; }
.drawer {
  width: 520px; max-width: 100%; background: var(--panel); height: 100%;
  overflow-y: auto; overflow-x: hidden; padding: 22px 26px 32px;
  box-shadow: -8px 0 30px rgba(0,0,0,.1);
}
.drawer h2 { margin: 0 0 2px; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.drawer .close { float: right; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--muted); line-height: 1; }
.drawer-actions { display: flex; gap: 10px; padding-top: 6px; position: sticky; bottom: -32px; background: var(--panel); padding-bottom: 4px; }
.drawer-actions .right { margin-left: auto; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #16151a; color: #fff; padding: 12px 18px; border-radius: 12px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,.22); max-width: 80vw;
}
.toast.error { background: var(--red); }

.loading { padding: 60px; text-align: center; color: var(--muted); }

/* --------------------------------------------------------------- вход и аккаунт */

.auth-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; z-index: 50;
}
.auth-box {
  width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-title { font-size: 22px; font-weight: 600; margin-top: 6px; }
.auth-hint { color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-input {
  width: 100%; padding: 12px 14px; font-size: 16px; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel);
}
.auth-input:focus { outline: none; border-color: var(--accent); }
.auth-code { letter-spacing: 8px; text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; }
.auth-err { color: var(--red); font-size: 13px; line-height: 1.45; }
.auth-submit { justify-content: center; padding: 12px; font-size: 15px; }
.auth-back { justify-content: center; color: var(--muted); font-size: 13px; }

.account {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 6px; margin: -6px;
  border-radius: 10px; font: inherit; color: inherit;
}
.account:hover { background: var(--chip); }
.account-chevrons { flex: none; display: flex; color: var(--muted); }

/* Выпадает вбок от сайдбара: снизу места нет, карточка и так прижата к краю окна. */
.account-menu {
  position: absolute; left: calc(100% - 10px); bottom: 6px; z-index: 30; width: 268px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .14); overflow: hidden;
}
.account-menu-head {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--line);
}
.account-menu-head .account-name { font-size: 15px; font-weight: 600; }
.account-avatar.big { width: 42px; height: 42px; font-size: 15px; }
.account-menu-list { padding: 6px; }
.account-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text); border-radius: 8px;
}
.account-menu-item:hover { background: var(--chip); }
.account-menu-icon { display: flex; color: var(--muted); flex: none; }
.account-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.account-who { min-width: 0; flex: 1; }
.account-name { color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-role { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-db { margin-top: 10px; font-size: 11px; opacity: .8; }


/* --- кнопка «Фильтры» с выпадающей панелью дат --- */
.filter-wrap { position: relative; }
.bar > .filter-wrap { align-self: center; }
/* Ровняем по поиску: у него высота 48 и скругление 12, кнопка должна совпасть. */
.bar .filter-wrap > .btn { height: 48px; border-radius: 12px; padding: 0 18px; }
.bar .deal-date-filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bar .deal-date-quick {
  height: 48px; border-radius: 12px; padding: 0 15px;
  border-color: #e2dcf2; background: #faf8ff; color: #655d75;
}
.bar .deal-date-quick:hover { background: #f4f0ff; border-color: #d6ccec; }
.bar .deal-date-quick.btn-active { background: #eee8ff; border-color: #bba9ec; color: var(--accent); }
.btn.btn-active { border-color: var(--accent); color: var(--accent); }
.btn .count {
  background: var(--accent); color: #fff; border-radius: 10px;
  padding: 1px 7px; font-size: 11px; font-variant-numeric: tabular-nums;
}
.filter-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 360px; max-width: calc(100vw - 48px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .14); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.filter-menu-row { display: flex; gap: 12px; width: 100%; }
/* min-width: 0 обязателен: иначе поле даты не сжимается ниже своей родной ширины
   и вылезает за край панели. */
.filter-menu-row label.field { flex: 1 1 0; min-width: 0; }
.filter-menu-row input[type="date"] {
  width: 100%; min-width: 0; height: 42px; border-radius: 10px;
}

.filter-menu-block { width: 100%; }
.filter-menu-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 8px; }
.filter-menu-block .chips { margin-bottom: 0; max-height: 168px; overflow-y: auto; }

/* --- управление заказами --- */

/* Переключатель «канбан / список» — одна кнопка на два состояния, как в амо. */
.view-toggle { display: flex; background: var(--chip); border-radius: 10px; padding: 3px; gap: 2px; }
.view-btn {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--muted);
  font-size: 13px; font-family: inherit;
}
.view-btn:hover { color: var(--text); }
.view-btn.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Доска прокручивается по горизонтали целиком: колонок десять, в экран они не влезают
   ни при каком размере, а перенос на вторую строку ломает саму идею воронки. */
.board {
  display: flex; gap: 12px; align-items: stretch;
  overflow-x: auto; padding: 4px 4px 18px; margin: 0 -4px;
  scroll-snap-type: x proximity;
}
/* Колонка без фона и рамки — как в амо: этап обозначен цветной линией под названием,
   а не залитым прямоугольником. Так на доске видны карточки, а не границы столбцов. */
.board-col {
  flex: 0 0 268px; background: transparent; border: 0; border-radius: 10px;
  display: flex; flex-direction: column;
  height: calc(100vh - 210px); min-height: 320px; scroll-snap-align: start;
}
.board-col.drop { background: var(--accent-soft); }
.board-head {
  padding: 2px 6px 9px; text-align: center;
  border-bottom: 3px solid var(--line-strong);
}
/* Цвет этапа берём из тех же переменных, что и таблетки статусов */
.board-blue .board-head { border-bottom-color: var(--blue); }
.board-orange .board-head { border-bottom-color: var(--orange); }
.board-green .board-head { border-bottom-color: var(--green); }
.board-red .board-head { border-bottom-color: var(--red); }
.board-yellow .board-head { border-bottom-color: var(--yellow); }
.board-orange-dark .board-head { border-bottom-color: var(--orange-dark); }
.board-teal .board-head { border-bottom-color: var(--teal); }
.board-green-light .board-head { border-bottom-color: var(--green-light); }
.board-title {
  font-weight: 600; font-size: 12px; line-height: 1.3; text-transform: uppercase;
  letter-spacing: .3px; color: var(--text);
}
.board-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.board-cards {
  padding: 10px 0; display: flex; flex: 1 1 auto; min-height: 0;
  flex-direction: column; gap: 8px; overflow-y: auto;
}
/* Карточка на сером поле: белая с лёгкой тенью, чтобы читалась как отдельный объект */
body.canvas .deal-card { box-shadow: 0 1px 3px rgba(20, 20, 35, .08); }
.board-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 14px 0; }
.deal-card { box-shadow: 0 1px 2px rgba(20, 20, 35, .05); }
.board-more {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted);
  border-radius: 10px; padding: 8px; cursor: pointer; font-size: 12px; font-family: inherit;
}
.board-more:hover { color: var(--accent); border-color: var(--accent); }

.deal-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  /* Ширина карточки задаётся колонкой и не меняется; растёт только высота —
     длинный адрес или описание переносятся, а не обрезаются. */
  overflow-wrap: anywhere;
}
.deal-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(20,20,35,.1); }
.deal-card.order-today { background: var(--today-bg); border-color: var(--today-line); }
.deal-card.order-tomorrow { background: var(--tomorrow-bg); border-color: var(--tomorrow-line); }
.deal-card.order-today .deal-card-when { color: var(--today-ink); }
.deal-card.order-tomorrow .deal-card-when { color: var(--tomorrow-ink); }
.deal-card-when.upcoming { font-weight: 600; }
.deal-card.dragging { opacity: .45; }
.deal-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.deal-card-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.deal-card-manager { color: var(--muted); font-size: 12px; white-space: nowrap; }
.deal-card-addr { color: var(--text); font-size: 13px; line-height: 1.35; }
.deal-card-task {
  color: #625b70; background: #f6f4fa; font-size: 13px; line-height: 1.35;
  padding: 6px 8px; border-radius: 7px;
}
.deal-card-when { font-size: 13px; }
.deal-card-people { color: var(--muted); font-size: 12px; }
.deal-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.deal-age { color: var(--muted); }
.deal-age.hot { color: var(--red); font-weight: 600; }

/* Поддержка использует ту же карточку и канбан, но её вторичные данные визуально
   тише имени исполнителя: телефон и мессенджеры помогают найти человека, не споря с этапом. */
.support-card-phone { color: var(--text); font-size: 13px; }
.support-card-ids { color: var(--muted); font-size: 12px; line-height: 1.35; }
.support-card-recipient { color: var(--muted); font-size: 12px; line-height: 1.35; }
.support-card-tasks {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  color: var(--orange-dark); font-size: 12px;
}
.support-card-tasks.overdue { color: var(--red); font-weight: 600; }

/* Ведение клиентов: показатели компактные, а НДЗ заметен без яркой заливки всей карточки. */
.client-care-ndz {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
  background: #fff1f0; color: #b42318; border: 1px solid #f5c4bf;
  font-size: 11px; font-weight: 750; letter-spacing: .25px; white-space: nowrap;
}
.client-care-order { color: var(--text); font-size: 12px; line-height: 1.4; }
.client-care-days, .client-care-stats, .client-care-contact {
  color: var(--muted); font-size: 12px; line-height: 1.4;
}
.client-care-rhythm-alert { color: #9a682b; font-size: 11px; font-weight: 600; line-height: 1.35; }
.client-care-task-ndz { color: var(--red); font-weight: 600; }
.support-card-tasks .ico { width: 14px; height: 14px; }
.support-contact-card { margin-top: 14px; }
.support-contact-props { margin-top: 8px; }
.support-funds {
  margin-top: 14px; padding: 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card);
}
.support-funds > .check { margin-top: 10px; }
.support-funds-recipient { display: block; margin-top: 12px; }
.support-funds-recipient[hidden] { display: none; }

/* --- карточка заказа: слева данные, справа лента --- */
/* Класс вешается на body при заходе на карточку заказа (см. render в app.js):
   покрасить только контейнер нельзя — фон нужен и под залипающей шапкой. */
body.canvas { background: var(--canvas); }
body.canvas .topbar { background: var(--canvas); }
/* На карточке заказа прокручиваются колонки, а не страница: нижний отступ страницы
   давал ей лишние полсотни пикселей хода, и форма ввода уползала за нижний край. */
body.deal-card .page { padding-bottom: 0; }
body.deal-card .topbar { padding-top: 12px; padding-bottom: 6px; }
body.deal-card .back-link { padding-top: 0; padding-bottom: 2px; }
body.deal-card { overflow: hidden; }
@media (max-width: 1150px) { body.deal-card { overflow: auto; } body.deal-card .page { padding-bottom: 40px; } }

/* Две независимые прокрутки: колесо крутит ту колонку, над которой мышь.
   Раскладка занимает окно по высоте (её задаёт fitDealLayout в app.js), сама страница
   при этом не прокручивается — иначе поехали бы обе колонки разом. */
.deal-layout {
  display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px;
  align-items: stretch; overflow: hidden;
}
@media (max-width: 1150px) {
  .deal-layout { grid-template-columns: 1fr; height: auto !important; overflow: visible; }
  .deal-side, .deal-main { height: auto; }
  .deal-side-scroll, .deal-scroll { overflow: visible; }
}

.deal-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.deal-side-scroll {
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; min-height: 0; padding-right: 4px;
}
.deal-client {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.deal-client .label { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.deal-client-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.deal-client-head .label { margin-bottom: 12px; }
.deal-client-link {
  display: inline-flex; align-items: center; gap: 5px; margin: -4px 0 8px; padding: 4px 7px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; cursor: pointer;
}
.deal-client-link:hover { background: var(--accent-soft); color: var(--accent); }
.deal-client-link .icon { display: inline-flex; }
.deal-client-link .icon svg { width: 13px; height: 13px; }
.deal-stage-box, .deal-props {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.deal-stage-box .label { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.deal-stage-now { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* Воронка в карточке: этап меняется кликом, не только перетаскиванием на доске */
.deal-steps { display: flex; flex-wrap: wrap; gap: 5px; }
.deal-step {
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  padding: 5px 10px; border-radius: 20px; cursor: pointer; font-size: 11px; font-family: inherit;
  text-align: left;
}
.deal-step:hover { border-color: var(--accent); color: var(--accent); }
.deal-step.done { background: var(--chip); color: var(--text); }
.deal-step.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.deal-step.final.won { border-color: var(--green); color: var(--green); }
.deal-step.final.won.active { background: var(--green); color: #fff; }
.deal-step.final.lost { border-color: var(--red); color: var(--red); }
.deal-step.final.lost.active { background: var(--red); color: #fff; }

.deal-side-scroll::-webkit-scrollbar, .deal-scroll::-webkit-scrollbar { width: 8px; }
.deal-side-scroll::-webkit-scrollbar-thumb, .deal-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 4px;
}
.deal-side-scroll::-webkit-scrollbar-track, .deal-scroll::-webkit-scrollbar-track { background: transparent; }

/* --- лента --- */
.deal-main { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.deal-scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.deal-feed { padding: 0 2px; min-height: 160px; }
.deal-shift {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  margin: 12px 0; cursor: pointer; background: var(--bg);
}
.deal-shift:hover { border-color: var(--accent); }
.deal-shift-right { text-align: right; }

/* Открытые задачи — вверху и с рамкой: к ним и возвращаются, остальное читается сверху вниз */
.tasks-open { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
/* Цвет открытой задачи — по сроку: зелёная, пока срок не вышел, красная — просрочена */
.task-card { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 10px; padding: 12px 14px; }
.task-card.future { border-color: var(--green); background: var(--green-bg); }
.task-card.overdue { border-color: var(--red); background: var(--red-bg); }
.task-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.task-icon { display: flex; color: var(--muted); }
.task-card.future .task-icon { color: var(--green); }
.task-card.overdue .task-icon { color: var(--red); }
.task-do { display: flex; gap: 8px; }
.task-do input { flex: 1; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px; font-family: inherit; font-size: 13px; background: var(--panel); }

/* Лента: примечания и задачи — карточками, потому что их пишет человек и читают
   глазами; смена этапа и правка поля — строкой, это след системы. Если рисовать
   всё одинаково, из сотни строк примечание уже не выхватить. */
.timeline { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }

.day-split { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; color: var(--muted); }
.day-split::before, .day-split::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day-split span { font-size: 12px; white-space: nowrap; }

.event-line {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 5px 2px; font-size: 13px; color: var(--text);
}
.event-line .pill { font-size: 11px; padding: 2px 9px; }
.event-time { color: var(--muted); font-size: 12px; flex: 0 0 38px; }

.event-card {
  display: flex; gap: 12px; padding: 12px 14px; margin: 6px 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 20, 35, .04);
}
.event-mark {
  flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--chip); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.event-note .event-mark { background: var(--blue-bg); color: var(--blue); }
.event-task .event-mark { background: var(--green-bg); color: var(--green); }
.event-body { min-width: 0; }
.event-text { white-space: pre-wrap; line-height: 1.4; margin-top: 3px; }
/* Выполненная задача зачёркнута — как в амо: закрытое видно, но глаз по нему скользит */
.event-text.done { color: var(--muted); text-decoration: line-through; }
.event-card.done { background: var(--bg); }
.event-card.done .event-mark { background: var(--green-bg); color: var(--green); }
.event-result { margin-top: 4px; line-height: 1.4; white-space: pre-wrap; }

/* Форма примечания и задачи закреплена внизу экрана, как в амо: лента прокручивается
   под ней, и записать мысль можно из любого места истории, не долистывая до конца. */
.composer {
  flex: 0 0 auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: 0 6px 20px rgba(20, 20, 35, .08);
}
.composer-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.composer-tab {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit;
}
.composer-tab:hover { color: var(--text); }
.composer-tab.active { background: var(--accent-soft); color: var(--accent); }
.composer textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: inherit; font-size: 14px; resize: vertical; background: var(--panel); color: var(--text);
}
/* Кнопки под полем слева, главная первой — как в амо: рука идёт от текста вниз-влево,
   а не через всю ширину карточки вправо. */
.composer-actions { display: flex; justify-content: flex-start; gap: 8px; margin-top: 10px; align-items: center; }
.composer-actions input {
  padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: 9px;
  font-family: inherit; font-size: 13px; background: var(--panel);
}
/* Подписи полей заказа длинные («Дата и время выполнения заказа»), под 110px
   они рвались на три строки — колонке нужна ширина, а не перенос. */
.props-narrow { grid-template-columns: 175px 1fr; gap: 12px 12px; }
.props-narrow dt { line-height: 1.3; }

/* --- карточка заказа: правка по месту --- */

/* Поля выглядят как текст, пока их не трогают: карточку чаще читают, чем правят,
   и полтора десятка рамок превратили бы её в форму. */
/* Селекторы с именем тега — иначе общее правило для input/select/textarea
   выше по файлу перебивает класс и рисует рамку у каждого поля. */
input.field-inline, select.field-inline, textarea.field-inline {
  width: 100%; border: 1px solid transparent; border-radius: 8px;
  padding: 5px 8px; margin: -5px -8px; background: transparent; box-shadow: none;
  font: inherit; font-size: 14px; color: var(--text); resize: vertical; height: auto;
}
input.field-inline:hover, select.field-inline:hover, textarea.field-inline:hover {
  border-color: var(--line); background: var(--panel);
}
input.field-inline:focus, select.field-inline:focus, textarea.field-inline:focus {
  outline: 0; border-color: var(--accent); background: var(--panel); box-shadow: none;
}
input.field-inline.changed, select.field-inline.changed, textarea.field-inline.changed {
  border-color: var(--accent); background: var(--accent-soft);
}
select.field-inline { cursor: pointer; padding-right: 26px; }
textarea.field-inline { line-height: 1.4; }

/* Этап: сейчас один, список открывается по клику */
.stage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }
.stage-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--panel); border-radius: 20px; padding: 3px 8px 3px 4px; cursor: pointer;
  font: inherit;
}
.stage-btn:hover { border-color: var(--accent); }
.stage-chevron { display: flex; color: var(--muted); }
.stage-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 20;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 20, 35, .14); padding: 6px; min-width: 250px;
  max-height: 320px; overflow-y: auto;
}
.stage-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  border: 0; background: transparent; border-radius: 9px; padding: 6px 8px; cursor: pointer;
  font: inherit; color: var(--muted);
}
.stage-menu-item:hover { background: var(--chip); }
.stage-menu-item.active { background: var(--accent-soft); }

/* Панель сохранения: появляется, как только что-то изменили, и держится внизу
   левой колонки — правку видно и в длинной карточке, не прокручивая её вверх. */
.deal-save {
  display: none; flex: 0 0 auto;
  align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(20, 20, 35, .12);
}
.deal-save.show { display: flex; }
.deal-save-text { margin-right: auto; line-height: 1.25; }
.deal-save-text b { display: block; font-size: 13px; }

/* --- компания и контакты в карточке заказа --- */
.contacts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.contact { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.contact.main { border-color: var(--accent); background: var(--accent-soft); }
.contact-head { display: flex; align-items: center; gap: 8px; }
/* Отметка «этот контакт по заказу»: у компании контактов несколько, а договариваются
   с кем-то одним — именно он попадает в списки и на карточку канбана. */
.contact-pick {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.contact-pick:hover { border-color: var(--accent); }
.contact-pick.on { background: var(--accent); border-color: var(--accent); }
.contact-pick .icon svg { width: 14px; height: 14px; }
.phones { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0 30px; }
.phone-row { display: flex; align-items: center; gap: 4px; }
.phone-row .phone { font-variant-numeric: tabular-nums; }
.icon-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.icon-btn:hover { color: var(--red); background: var(--red-bg); }
.add-line {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted);
  border-radius: 9px; padding: 5px 10px; cursor: pointer; font: inherit; font-size: 12px;
}
.add-line:hover { color: var(--accent); border-color: var(--accent); }
.add-line .icon svg { width: 14px; height: 14px; }
.contacts-more summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 0; }
.contacts-more summary:hover { color: var(--accent); }
.contacts-rest { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.requisites { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.requisites summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 2px 0 8px; }
.requisites summary:hover { color: var(--accent); }
.requisites .props { grid-template-columns: 140px 1fr; }

/* --- постановка задачи фразой, как в амо --- */
.task-form { display: flex; flex-direction: column; gap: 10px; }
.task-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
/* Поля-выпадашки внутри фразы: выглядят частью текста, а не формой */
select.inline-select {
  height: auto; padding: 4px 26px 4px 10px; border-radius: 8px; font-size: 13px;
  background-color: var(--chip); border-color: transparent; color: var(--text); cursor: pointer;
}
select.inline-select:hover { border-color: var(--line-strong); }
.inline-date { height: auto; padding: 4px 8px; border-radius: 8px; font-size: 13px; }
.task-text {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: inherit; font-size: 14px; background: var(--panel);
}
/* Подсказка о сроке: молча не сохранять — значит оставить менеджера в догадках */
.task-hint { display: none; color: var(--red); font-size: 12px; margin: -4px 0 2px; }
.task-hint.show { display: block; }
/* Граница между тем, что заполняет менеджер, и тем, что подставится само */
.props-split {
  grid-column: 1 / -1; height: 1px; background: var(--line);
  margin: 8px 0 6px;
}

/* Свёрнутая форма: одна строка-приглашение, разворачивается по клику */
.composer.collapsed { padding: 0; }
.composer.collapsed .composer-open { display: none; }
.composer:not(.collapsed) .composer-closed { display: none; }
.composer-closed {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 14px 16px; font: inherit; font-size: 14px; color: var(--muted); cursor: text;
  border-radius: var(--radius);
}
.composer-closed:hover { background: var(--bg); }
.composer-closed-link { color: var(--accent); }
.composer-closed:hover .composer-closed-link { text-decoration: underline; }
/* Растущее текстовое поле: переносим строки и показываем всё, без внутренней прокрутки */
textarea.field-inline.grow {
  overflow: hidden; resize: none; min-height: 0; line-height: 1.35;
  white-space: pre-wrap; word-break: break-word;
}

/* Меню фильтра: выбор копится внутри и применяется кнопкой */
.pick-btn { max-width: 280px; }
.pick-menu {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 30; min-width: 264px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 20, 35, .14); padding: 6px;
}
.pick-rows { max-height: 340px; overflow-y: auto; }
.pick-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; border-radius: 8px; padding: 7px 10px; margin-bottom: 3px; cursor: pointer;
  font: inherit; font-size: 13px;
}
/* Фон и цвет задаём только тем строкам, у которых нет цвета этапа: иначе это правило
   перебивало бы .pill-* и фильтр этапов терял бы свои цвета. */
.pick-item:not([class*="pill-"]) { background: transparent; color: var(--text); }
.pick-item:not([class*="pill-"]):hover { background: var(--chip); }
.pick-item[class*="pill-"]:hover { filter: brightness(.96); }
.pick-item.active { box-shadow: inset 0 0 0 1.5px currentColor; }
/* Место под галочку резервируем всегда, иначе строки прыгают при выборе */
.pick-check { flex: 0 0 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.pick-check .icon svg { width: 14px; height: 14px; }
.pick-date { padding: 4px 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.pick-date input { width: 100%; }
.pick-actions {
  display: flex; gap: 8px; padding: 8px 4px 2px; border-top: 1px solid var(--line); margin-top: 4px;
}
.pick-menu.company-menu { width: 370px; max-width: calc(100vw - 32px); }
.pick-search {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px;
  margin: 0 0 6px; padding: 7px 9px; border-bottom: 1px solid var(--line);
  background: var(--panel); color: var(--muted);
}
.pick-search input {
  width: 100%; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13px;
}
.pick-company-text { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.pick-company-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-company-text small { color: var(--muted); font-size: 10px; }
.pick-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }

/* Свой выпадающий список: значение переносится по строкам, чего <select> не умеет */
.field-inline.picker {
  cursor: pointer; white-space: pre-wrap; word-break: break-word; line-height: 1.35;
  min-height: 28px; padding-right: 22px; position: relative;
}
.field-inline.picker::after {
  content: ""; position: absolute; right: 8px; top: 12px; width: 6px; height: 6px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}
.field-inline.picker.picker-empty { color: var(--muted); }
.picker-menu {
  position: fixed; z-index: 40; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 20, 35, .14); padding: 6px;
  max-height: 300px; overflow-y: auto;
}
.picker-item {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--text); white-space: normal;
}
.picker-item:hover { background: var(--chip); }
.picker-item.active { background: var(--accent-soft); color: var(--accent); }



/* --- массовые действия --- */
.bulk-panel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 14px;
}
.bulk-count { font-weight: 600; margin-right: auto; }
.deal-card.pickable { position: relative; padding-left: 34px; }
/* Галочка в углу карточки: место под неё отводим только в режиме выделения,
   иначе обычная доска потеряла бы 22 px ширины ни за чем. */
.deal-check {
  position: absolute; left: 10px; top: 11px; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line-strong); background: var(--panel);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.deal-check.on { background: var(--accent); border-color: var(--accent); }
.deal-check .icon svg { width: 12px; height: 12px; }
.deal-card.picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pick-confirm { padding: 10px 10px 12px; font-size: 13px; line-height: 1.4; }
/* Та же галочка в таблице: положение не абсолютное, она стоит в своей колонке */
.deal-check.inline { position: static; }
tbody tr.picked td { background: var(--accent-soft); }
/* Галочка в шапке колонки: отмечает всю колонку разом */
.board-head { position: relative; }
.deal-check.board-check { position: absolute; left: 0; top: 0; cursor: pointer; }
.deal-check.board-check:hover { border-color: var(--accent); }
/* Список заказчиков: контакты строками внутри ячейки */
.client-person {
  display: grid; grid-template-columns: minmax(160px, 1fr) max-content;
  gap: 12px; align-items: start; width: 100%; line-height: 1.35;
}
.client-person .sub { white-space: nowrap; text-align: right; }
.client-contacts-col { min-width: 320px; }
.client-row-actions { display: flex; align-items: center; gap: 2px; margin: 7px 0 0 -8px; }
.client-history-button { margin: 0; }
.client-history-button .icon { width: 16px; height: 16px; }
.client-delete-button { color: var(--muted); }
.client-delete-button:hover { color: var(--red); background: var(--red-bg); }
.client-history-drawer { width: 680px; }
.client-history-company { margin-top: 5px; }
.client-history-content { min-height: 120px; }
.client-history-content .loading { padding: 42px 10px; }
.client-history-list { display: flex; flex-direction: column; gap: 9px; }
.client-history-item {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.client-history-item:hover { border-color: var(--line-strong); background: #faf9fc; }
.client-history-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.client-history-head .pill { margin-left: auto; }
.client-history-date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.client-history-task { margin-top: 9px; color: #625b70; line-height: 1.4; }
.client-history-address { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.client-history-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 12px; color: var(--muted); }
.client-history-meta span:first-child { color: var(--text); font-weight: 600; }
.client-history-empty { border: 1px dashed var(--line); border-radius: 11px; padding: 42px 16px; }
.client-footer { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.client-footer .label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.client-footer .contact { margin-bottom: 8px; }
.client-footer .add-line { margin-top: 4px; }
.field-inline.mail { margin-top: 6px; margin-left: 30px; width: calc(100% - 30px); font-size: 13px; }

/* Настройки интеграций */
.settings-page { display: flex; flex-direction: column; gap: 18px; }
.settings-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.integration-card { padding: 24px; max-width: 980px; }
.integration-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.integration-head h2 { margin: 0 0 5px; }
.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.integration-actions { display: flex; gap: 10px; margin-top: 18px; }
.integration-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; color: var(--muted); font-size: 13px; }
.integration-note { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--chip); color: var(--muted); font-size: 13px; }
.integration-error { margin-top: 16px; }

/* Общий inbox: слева диалоги, справа переписка в привычном виде мессенджера. */
.messenger {
  display: grid; grid-template-columns: 360px minmax(520px, 1fr); min-height: calc(100vh - 150px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow: hidden;
}
.messenger-sidebar { border-right: 1px solid var(--line); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.messenger-buckets { display: flex; gap: 5px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.messenger-buckets button {
  flex: 0 0 auto; border: 0; border-radius: 999px; padding: 7px 10px; background: var(--chip);
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.messenger-buckets button.active { background: var(--accent-soft); color: var(--accent); }
.messenger-search { position: relative; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.messenger-search .icon { position: absolute; left: 23px; top: 22px; color: var(--muted); }
.messenger-search input { width: 100%; padding-left: 36px; }
.messenger-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.messenger-dialog {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 13px 14px;
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.messenger-dialog:hover, .messenger-dialog.active { background: #f7f4ff; }
.messenger-dialog.pinned { box-shadow: inset 2px 0 rgba(91,44,232,.42); }
.messenger-dialog-pin { flex: 0 0 auto; font-size: 11px; filter: saturate(.55); opacity: .58; }
.messenger-dialog:focus-visible { outline: 2px solid rgba(91, 44, 232, .3); outline-offset: -2px; }
.messenger-dialog.overdue { box-shadow: inset 3px 0 #d97861; background: #fff9f6; }
.messenger-dialog-top, .messenger-dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.messenger-dialog-name, .messenger-chat-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.messenger-dialog-name .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-channel { flex: 0 0 auto; padding: 1px 5px; border: 1px solid #dedee3; border-radius: 5px; background: #f7f7f8; color: #85858e; font-size: 9px; font-weight: 600; letter-spacing: .15px; line-height: 15px; }
.messenger-channel.channel-max { color: #6d6481; background: #f6f4f9; }
.messenger-dialog-company, .messenger-dialog-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-dialog-company { margin-top: 4px; color: var(--accent); font-size: 12px; }
.messenger-dialog-context { display: flex; align-items: center; gap: 5px; min-width: 0; margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; }
.messenger-dialog-context > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messenger-dialog-context > * + *::before { content: '·'; margin-right: 5px; color: #b5b5bc; }
.messenger-context-link { border: 0; padding: 0; background: transparent; color: #73737d; font: inherit; cursor: pointer; }
.messenger-context-link:hover { color: var(--accent); text-decoration: underline; }
.messenger-context-text { color: #73737d; }
.messenger-dialog-preview { margin-top: 6px; color: var(--muted); font-size: 13px; }
.messenger-dialog-foot { margin-top: 7px; color: var(--muted); font-size: 11px; }
.messenger-unread { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; background: var(--accent); color: #fff; text-align: center; line-height: 20px; font-size: 11px; }
.messenger-overdue { color: #b04b35; }
.messenger-list-empty, .messenger-stream-empty { padding: 34px 18px; color: var(--muted); text-align: center; }
.messenger-chat {
  position: relative; min-width: 0; min-height: 0; height: 100%; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.messenger-mark-read {
  position: static; display: flex; width: max-content; min-height: 34px;
  align-items: center; gap: 7px; margin: 12px 0 2px;
  padding: 5px 6px 5px 11px; border: 1.5px solid #6b53c6; border-radius: 18px;
  background: rgba(255,253,249,.94); color: #5b42b2; font: inherit; font-size: 11px;
  font-weight: 650; cursor: pointer; box-shadow: 0 3px 12px rgba(74,56,42,.12);
  backdrop-filter: blur(5px);
}
.messenger-mark-read[hidden] { display: none; }
.messenger-mark-read:hover { background: #fffdf9; border-color: var(--accent); color: var(--accent); }
.messenger-mark-read:disabled { cursor: wait; opacity: .62; }
.messenger-mark-read .icon { display: grid; place-items: center; }
.messenger-mark-read .icon svg { width: 14px; height: 14px; }
.messenger-mark-read-count {
  display: grid; min-width: 23px; height: 23px; place-items: center; padding: 0 5px;
  border-radius: 12px; background: var(--accent); color: #fff; font-size: 10px; line-height: 1;
}
.messenger-chat-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.messenger-head-actions { display: flex; align-items: center; gap: 8px; }
.messenger-actions-menu { position: relative; }
.messenger-actions-menu summary {
  display: grid; width: 31px; height: 31px; place-items: center; border-radius: 8px;
  color: var(--muted); cursor: pointer; font-size: 13px; letter-spacing: 1px; list-style: none;
}
.messenger-actions-menu summary::-webkit-details-marker { display: none; }
.messenger-actions-menu summary:hover { background: var(--chip); color: var(--text); }
.messenger-actions-list {
  position: absolute; z-index: 35; top: calc(100% + 5px); right: 0; width: 210px;
  padding: 5px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel); box-shadow: 0 10px 30px rgba(20, 20, 35, .14);
}
.messenger-actions-list button {
  width: 100%; border: 0; border-radius: 7px; padding: 8px 10px; background: transparent;
  color: var(--text); text-align: left; font: inherit; font-size: 12px; cursor: pointer;
}
.messenger-actions-list button:hover { background: var(--chip); }
.messenger-actions-list button.danger { color: #a44b3d; }
.messenger-link { flex: 0 0 auto; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 9px; align-items: end; padding: 10px 18px; border-bottom: 1px solid var(--line); background: #fcfbfe; }
.messenger-link[hidden] { display: none; }
.messenger-link.unlinked {
  position: relative; padding-top: 28px; border-bottom-color: #edcfca;
  background: #fff8f7; box-shadow: inset 3px 0 #cf7665;
}
.messenger-link.unlinked::before {
  content: 'Диалог не привязан'; position: absolute; top: 8px; left: 18px;
  color: #a44b3d; font-size: 11px; font-weight: 600;
}
.messenger-link label span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.messenger-link select, .messenger-link .search-select > input {
  min-width: 0; width: 100%; padding: 8px 28px 8px 9px; font-size: 12px;
}
.messenger-link .search-select-menu { z-index: 30; }
.messenger-link-actions { display: flex; align-items: center; gap: 4px; }
.messenger-stream {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 20px; background: linear-gradient(180deg, #f4efe7 0%, #eee7dd 100%);
}
.message-row { display: flex; margin: 7px 0; }
.message-row.reply-selected .message-bubble { outline: 2px solid rgba(91, 44, 232, .32); outline-offset: 2px; }
.message-row.reply-focus .message-bubble { animation: message-reply-focus 1.45s ease-out; }
@keyframes message-reply-focus {
  0%, 35% { box-shadow: 0 0 0 3px rgba(91,44,232,.38), 0 1px 2px rgba(25,45,60,.08); }
  100% { box-shadow: 0 1px 2px rgba(25,45,60,.08); }
}
.message-row.outgoing { justify-content: flex-end; }
.message-bubble { max-width: min(72%, 680px); padding: 9px 11px 6px; border: 1px solid rgba(115,96,76,.12); border-radius: 13px 13px 13px 4px; background: #fffefa; color: #242127; box-shadow: 0 1px 2px rgba(78, 63, 47, .11); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.outgoing .message-bubble { border-color: #dcd2f1; background: #f4f0fc; border-radius: 13px 13px 4px 13px; }
.message-kind { margin-bottom: 4px; color: var(--accent); font-size: 11px; text-transform: uppercase; }
.message-media { width: min(320px, 62vw); min-height: 80px; margin: 3px 0 6px; overflow: hidden; border-radius: 10px; background: rgba(95, 85, 120, .07); }
.message-media img, .message-media video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #e8edf1; }
.message-media audio { display: block; width: 100%; min-width: 260px; }
.message-media-placeholder { display: grid; min-height: 96px; place-items: center; padding: 14px; color: var(--muted); font-size: 12px; }
.message-media.error { display: grid; place-items: center; padding: 12px; border: 1px dashed #d8b2aa; background: #fff3f0; }
.message-media.error button { border: 0; background: transparent; color: #a84736; cursor: pointer; }
.message-file-link { display: flex; align-items: center; gap: 7px; min-height: 64px; padding: 12px; color: var(--accent); text-decoration: none; }
.message-body { line-height: 1.42; }
.message-inline-reply {
  display: block; width: 100%; min-width: 120px; margin: 1px 0 6px; padding: 4px 7px;
  overflow: hidden; border: 0; border-left: 3px solid var(--accent); border-radius: 5px;
  background: rgba(91,44,232,.1); color: inherit; text-align: left; font: inherit;
}
.message-inline-reply.clickable { cursor: pointer; }
.message-inline-reply.clickable:hover { background: rgba(91,44,232,.13); }
.message-inline-reply-author, .message-inline-reply-text {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message-inline-reply-author { color: #563bb6; font-size: 10px; font-weight: 700; }
.message-inline-reply-text { margin-top: 1px; color: #49444f; font-size: 11px; }
.message-row.outgoing .message-inline-reply { background: #e8e0f8; }
.message-row.outgoing .message-inline-reply.clickable:hover { background: rgba(91,44,232,.15); }
.message-row.deleted .message-bubble {
  border: 1px solid #d8dde1; background: #e3e8eb; color: #68717a; opacity: 1;
}
.message-row.outgoing.deleted .message-bubble {
  background: #e3e8eb;
}
.message-change-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
  color: #717b84; font-size: 12px; font-style: italic; font-weight: 700;
}
.message-change-icon { font-size: 17px; font-style: normal; font-weight: 500; line-height: 1; }
.message-row.deleted .message-body { color: #6f7780; font-style: italic; text-decoration: none; }
.message-original-text {
  max-width: 100%; margin-top: 3px; overflow: hidden; color: rgba(65,61,70,.58);
  font-size: 9px; font-style: italic; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.message-original-text span { color: rgba(65,61,70,.48); }
.message-edited-inline { color: #77717d; font-size: 9px; font-style: italic; }
.message-audit {
  display: flex; width: fit-content; max-width: 76%; align-items: center; gap: 6px;
  margin: 8px auto; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.62); color: #7a7c85; font-size: 10px;
  line-height: 1.35; text-align: center;
}
.message-audit-mark { color: #a25d52; font-size: 14px; line-height: 1; }
.message-audit time { white-space: nowrap; color: #999ba3; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.message-row.outgoing .message-reactions { justify-content: flex-end; }
.message-reaction {
  display: inline-flex; align-items: center; gap: 3px; min-width: 26px; min-height: 24px;
  padding: 1px 7px; border: 1px solid #d9dce2; border-radius: 999px;
  background: rgba(255,255,255,.72); font-size: 15px; line-height: 20px;
}
.message-reaction.mine { border-color: #bfb1ec; background: #f4efff; }
.message-reaction small { color: var(--muted); font-size: 10px; }
.message-reaction.removing { pointer-events: none; animation: message-reaction-remove .18s ease-in forwards; }
@keyframes message-reaction-remove {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.55); }
}
@media (prefers-reduced-motion: reduce) {
  .message-reaction.removing { animation-duration: .01ms; }
}
.message-context-layer { position: fixed; inset: 0; z-index: 90; }
.message-context-menu {
  position: absolute; width: 246px; padding: 7px; border: 1px solid var(--line-strong);
  border-radius: 13px; background: var(--panel); box-shadow: 0 12px 35px rgba(20,20,35,.18);
}
.message-context-reactions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.message-context-reactions button {
  display: grid; height: 38px; place-items: center; border: 0; border-radius: 9px;
  background: transparent; font-size: 20px; cursor: pointer;
}
.message-context-reactions button:hover { background: var(--accent-soft); transform: scale(1.06); }
.message-context-divider { height: 1px; margin: 6px 2px; background: var(--line); }
.message-context-action {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.message-context-action:hover { background: var(--chip); }
.message-context-action.danger { color: #ad4336; }
.message-context-action.danger:hover { background: #fff0ed; }
.message-context-action .icon, .message-context-action-icon {
  display: inline-flex; width: 18px; justify-content: center; color: var(--muted);
}
.dialog-context-menu { width: 238px; }
.message-time { margin-top: 4px; color: var(--muted); font-size: 10px; text-align: right; }
.message-edited-note { margin-top: 3px; color: var(--muted); font-size: 9px; font-style: italic; text-align: right; }
.messenger-composer {
  position: relative; z-index: 2; flex: 0 0 auto; min-height: 71px; padding: 10px 15px 12px;
  border-top: 1px solid var(--line); background: var(--panel);
}
.messenger-ignored-note {
  padding: 11px 16px; border-top: 1px solid var(--line); background: #f8f7f9;
  color: var(--muted); font-size: 12px; line-height: 1.4;
}
.messenger-composer-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: end; }
.messenger-composer textarea { min-height: 48px; max-height: 140px; resize: vertical; }
.messenger-file-input { display: none; }
.messenger-composer-tools { display: flex; gap: 4px; padding-bottom: 5px; }
.messenger-tool-button {
  display: grid; width: 36px; height: 36px; place-items: center; border: 0;
  border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer;
}
.messenger-tool-button:hover { background: var(--accent-soft); color: var(--accent); }
.messenger-tool-button:disabled { opacity: .42; cursor: wait; }
.messenger-tool-button.recording { background: #fff0ed; color: #c34c3b; animation: mic-pulse 1.25s ease-in-out infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 5px rgba(195,76,59,.11); } }
.messenger-recording {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 7px 9px;
  border-radius: 9px; background: #fff5f3; color: #8f4135; font-size: 12px;
}
.messenger-recording[hidden], .messenger-upload-status[hidden] { display: none; }
.messenger-recording-dot { width: 7px; height: 7px; border-radius: 50%; background: #d14f3d; }
.messenger-recording button { border: 0; background: transparent; font: inherit; cursor: pointer; }
.messenger-record-cancel { margin-left: auto; color: var(--muted); }
.messenger-record-send { color: var(--accent); font-weight: 600 !important; }
.messenger-upload-status { margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.messenger-attachment-draft {
  display: flex; min-height: 48px; align-items: center; gap: 9px; margin-bottom: 8px;
  padding: 7px 9px; border: 1px solid #ddd7ef; border-radius: 11px; background: #f7f4ff;
}
.messenger-attachment-draft[hidden] { display: none; }
.messenger-attachment-draft > img {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 7px; object-fit: cover;
}
.messenger-attachment-draft > audio { width: min(280px, 42vw); height: 34px; }
.messenger-attachment-draft > .icon { flex: 0 0 auto; color: var(--accent); }
.messenger-attachment-meta { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.messenger-attachment-meta b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.messenger-attachment-meta span { color: var(--muted); font-size: 9px; }
.messenger-attachment-draft > button {
  display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 19px; cursor: pointer;
}
.messenger-attachment-draft > button:hover { background: #ebe5fb; color: var(--accent); }
.message-reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 7px 10px; border-left: 3px solid var(--accent); border-radius: 7px; background: var(--accent-soft); }
.message-reply-quote { min-width: 0; }
.message-reply-author { color: var(--accent); font-size: 11px; font-weight: 650; }
.message-reply-preview { max-width: 680px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-cancel { flex: 0 0 auto; border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.messenger-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 520px; color: var(--muted); text-align: center; }
.messenger-empty .icon svg { width: 38px; height: 38px; }
.messenger-empty h3 { margin: 0; color: var(--text); }
.deal-messenger-drawer { width: min(1180px, calc(100vw - 40px)); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.deal-messenger-title { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.deal-messenger-title h2 { margin: 0 0 3px; }
.deal-messenger-title .close { float: none; flex: 0 0 auto; }
.deal-messenger-content { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.deal-messenger { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; max-height: 100%; border: 0; border-radius: 0; }
.deal-messenger .messenger-chat { height: 100%; min-height: 0; }
.deal-messenger .messenger-stream {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.deal-messenger-list-head { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.deal-company-filter { display: inline-flex; align-items: center; gap: 9px; margin: -5px 0 13px; padding: 5px 9px; border-radius: 8px; background: #f5f4f8; color: var(--muted); font-size: 12px; }
.deal-company-filter b { color: #575761; font-weight: 600; }
.deal-company-filter button { border: 0; padding: 0 2px; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.client-footer .contact.focused { border-color: rgba(91, 44, 232, .35); background: #faf8ff; box-shadow: 0 0 0 2px rgba(91, 44, 232, .08); }

/* Переписка: плотность интерфейса Wappi, цвета и компоненты нашей CRM. */
.messenger {
  grid-template-columns: 344px minmax(520px, 1fr); border-radius: 18px;
  border-color: #e4e2e9; box-shadow: 0 8px 30px rgba(40, 35, 60, .055);
}
.messenger-sidebar { background: #fcfcfd; }
.messenger-search { order: 0; padding: 11px 12px 9px; border-bottom: 0; background: #fff; }
.messenger-search .icon { left: 25px; top: 23px; color: #aaa9b2; }
.messenger-search input {
  height: 38px; border-color: transparent; border-radius: 19px; padding: 8px 14px 8px 37px;
  background: #f3f3f6; font-size: 13px;
}
.messenger-search input:focus { border-color: rgba(91,44,232,.25); background: #fff; box-shadow: 0 0 0 3px rgba(91,44,232,.07); }
.messenger-buckets { order: 1; gap: 4px; padding: 5px 12px 9px; border-bottom-color: #eceaf0; background: #fff; }
.messenger-buckets button { padding: 6px 9px; background: transparent; font-size: 11px; }
.messenger-buckets button:hover { background: #f4f2f8; color: #686570; }
.messenger-buckets button.active { background: #eee9ff; color: var(--accent); font-weight: 600; }
.messenger-list { order: 2; padding: 5px 6px 10px; }
.messenger-dialog {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; width: calc(100% - 4px);
  min-height: 72px; margin: 2px; padding: 10px 9px; border: 0; border-radius: 12px;
  transition: background .14s ease, box-shadow .14s ease;
}
.messenger-dialog:hover { background: #f3f1f7; }
.messenger-dialog.active { background: #ede9fb; box-shadow: inset 3px 0 var(--accent); }
.messenger-dialog.overdue { background: #fff6f3; box-shadow: inset 3px 0 #d66c57; }
.messenger-dialog.overdue.active { background: #f8edf0; }
.messenger-avatar {
  --avatar-hue: 258; position: relative; display: grid; width: 46px; height: 46px; place-items: center;
  flex: 0 0 auto; border-radius: 50%; background: linear-gradient(145deg,
    hsl(var(--avatar-hue) 68% 91%), hsl(var(--avatar-hue) 56% 80%));
  color: hsl(var(--avatar-hue) 38% 34%); font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
.messenger-avatar.large { width: 42px; height: 42px; font-size: 12px; }
.messenger-avatar > img {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  border-radius: inherit; background: #eceaf1; object-fit: cover;
}
.messenger-avatar-initials { position: relative; z-index: 0; }
.messenger-avatar-channel {
  position: absolute; right: -2px; bottom: -1px; z-index: 2; display: grid; width: 17px; height: 17px;
  place-items: center; border: 2px solid #fff; border-radius: 50%; background: #2f9fe8;
  color: #fff; font-size: 8px; font-weight: 800; line-height: 1;
}
.messenger-avatar.channel-max .messenger-avatar-channel { background: #7664dd; }
.messenger-dialog-main { min-width: 0; }
.messenger-dialog-top { min-width: 0; height: 20px; }
.messenger-dialog-name .name { font-size: 13px; font-weight: 650; }
.messenger-dialog-top time { flex: 0 0 auto; color: #9a99a3; font-size: 10px; }
.messenger-dialog-context { height: 16px; margin-top: 0; color: #8b8994; font-size: 10px; }
.messenger-context-link, .messenger-context-text { color: #85838e; }
.messenger-dialog-bottom { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 2px; }
.messenger-dialog-preview { flex: 1 1 auto; min-width: 0; margin-top: 0; color: #777580; font-size: 12px; }
.messenger-unread {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; line-height: 19px;
  font-size: 10px; font-weight: 650;
}
.messenger-overdue {
  min-width: 22px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f5d7d0;
  color: #a94735; text-align: center; font-size: 9px; font-weight: 700; line-height: 18px;
}
.messenger-chat-head { min-height: 66px; padding: 10px 17px; background: rgba(255,255,255,.96); }
.messenger-chat-person { display: flex; min-width: 0; align-items: center; gap: 11px; }
.messenger-chat-person > div { min-width: 0; }
.messenger-chat-name .name { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.messenger-chat-name + .sub { margin-top: 2px; font-size: 10px; }
.messenger-channel { border-color: #dfdce7; background: #faf9fc; font-size: 8px; }
.messenger-stream {
  padding: 16px 22px 22px;
  background: linear-gradient(180deg, #f4efe7 0%, #eee7dd 100%);
}
.message-day { position: relative; display: flex; justify-content: center; margin: 10px 0 13px; }
.message-day span {
  padding: 4px 10px; border-radius: 10px; background: rgba(119,98,76,.13); color: #776b60;
  font-size: 10px; font-weight: 600; backdrop-filter: blur(3px);
}
.message-row { margin: 5px 0; }
.message-bubble {
  max-width: min(70%, 650px); padding: 8px 10px 5px; border-radius: 12px 12px 12px 4px;
  border: 1px solid rgba(115,96,76,.12); background: #fffefa; color: #242127;
  box-shadow: 0 1px 2px rgba(78,63,47,.11); font-size: 13px;
}
.message-row.outgoing .message-bubble { border-color: #dcd2f1; border-radius: 12px 12px 4px 12px; background: #f4f0fc; }
.message-sender { margin-bottom: 3px; color: #563bb6; font-size: 10px; font-weight: 700; }
.message-kind { margin-bottom: 3px; font-size: 9px; font-weight: 650; letter-spacing: .2px; text-transform: none; }
.message-time { display: flex; justify-content: flex-end; align-items: center; gap: 4px; color: #77717d; font-size: 9px; line-height: 1; }
.message-delivery {
  display: inline-flex; min-width: 11px; height: 13px; padding: 0 2px;
  align-items: center; justify-content: center; border-radius: 7px;
  color: #aaa5ae; font-size: 10px; font-weight: 800; letter-spacing: -2px;
}
.message-delivery.delivered { min-width: 16px; color: #55515a; background: #e4e1e7; }
.message-delivery.read { min-width: 16px; color: #fff; background: #5b2ce8; }
.message-delivery.failed { color: #fff; background: #c74e43; letter-spacing: 0; }
.messenger-composer { min-height: 66px; padding: 9px 13px 10px; background: #fafafa; }
.messenger-composer-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.messenger-composer-tools { gap: 1px; padding-bottom: 0; }
.messenger-composer-input { border: 1px solid #e2e0e7; border-radius: 22px; background: #fff; }
.messenger-composer textarea {
  display: block; width: 100%; min-height: 42px; max-height: 118px; padding: 10px 14px;
  border: 0; border-radius: 22px; background: transparent; resize: none; font-size: 13px;
}
.messenger-composer textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(91,44,232,.12); }
.messenger-tool-button { width: 34px; height: 34px; border-radius: 50%; }
.messenger-send-button {
  display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(91,44,232,.2);
}
.messenger-send-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.messenger-send-button:disabled { opacity: .45; cursor: wait; transform: none; }
.messenger-send-button .icon svg { width: 16px; height: 16px; }

@media (max-width: 1050px) {
  .messenger { grid-template-columns: 300px minmax(430px, 1fr); }
  .messenger-link { grid-template-columns: 1fr 1fr; }
  .integration-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .deal-messenger-drawer { width: 100%; }
  .deal-messenger { grid-template-columns: 150px minmax(360px, 1fr); overflow-x: auto; }
}