/* Диалоги и листы (.crm-dialog), формы, шаги записи, подключения, напоминания, завершение сеанса, выпадающие списки. */
.formerror {
  color: var(--danger);
  font-size: 14px;
}
.checkline {
  display: flex;
  gap: 10px;
  align-items: center;
}
.checkline input {
  flex: none;
}
.intake-steps {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  gap: 8px;
  counter-reset: step;
}
.intake-steps li {
  color: var(--text-2);
  font-size: 13px;
}
.intake-steps li:before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  background: var(--surface-2);
  border-radius:50%;
  width: 26px;
  height: 26px;
  margin-right: 6px;
}
.intake-steps li[aria-current='step'] {
  color: var(--text);
}
.intake-steps li[aria-current='step']:before {
  background: var(--surface-2);
}
#intake-slots [aria-pressed='true'] {
  border-color: var(--btn);
  background: var(--surface-2);
}
.variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.variable-chips button {
  color: var(--text);
  background: var(--surface-2);
  border: 0;
}
.connection-result {
  display: grid;
  place-items: center;
  margin-top: 20px;
}
.connection-result img {
  max-width: 240px;
  width: 100%;
  background: white;
  padding: 12px;
  border-radius:var(--r-card);
}
.connection-result strong {
  font-size: 32px;
  letter-spacing: 0.12em;
}
.calendar-sheet {
  color-scheme: dark;
  border: 0;
  border-radius:var(--r-panel);
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 22px 24px;
  width: min(440px, 100%);
  max-width: 100%;
  box-shadow: 0 16px 60px #0006;
}
.calendar-sheet::backdrop {
  background: #0008;
}
.calendar-sheet .dialoghead {
  margin: 0 0 14px;
}
.calendar-sheet h2 {
  font-size: 18px;
  font-weight: 600;
}
.sheet-grab {
  height: 4px;
  width: 40px;
  background: color-mix(in srgb, var(--text) 28%, var(--surface));
  margin: 0 auto 12px;
  border-radius:4px;
}
.calendar-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.calendar-quick button {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius:var(--r-col);
  font-size: 12px;
  min-height: 36px;
  padding: 7px 12px;
}
.calendar-quick [aria-pressed='true'] {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--btn);
}
.calendar-caption {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 16px 0;
}
.calendar-apply {
  width: 100%;
  background: var(--btn);
  color: var(--btn-on);
}
.calendar-sheet .icon-button {
  color: var(--text);
}
.choice-list {
  display: grid;
  margin-top: 14px;
}
.choice-row {
  width: 100%;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  min-height: 60px;
}
.choice-row:last-child {
  border: 0;
}
.choice-row > span {
  flex: 1;
}
.choice-row strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.choice-row small {
  font-size: 12px;
  color: var(--text-2);
  display: block;
  margin-top: 3px;
}
.choice-row > i {
  border: 1px solid var(--line);
  border-radius:50%;
  width: 20px;
  height: 20px;
}
.choice-row[aria-pressed='true'] > i {
  border: 5px solid var(--btn);
}
.choice-row[aria-pressed='true'] > span {
  color: var(--action);
}
.choice-row svg {
  color: var(--text-2);
}
.dialog-form section[data-intake-step] {
  display: grid;
  gap: 16px;
}
.dialog-form input,
.dialog-form select,
.dialog-form textarea {
  background: var(--bg);
}
.intake-steps {
  gap: 6px;
  margin-bottom: 20px !important;
}
.intake-steps li {
  font-size: 12px;
}
.intake-steps li:before {
  width: 23px;
  height: 23px;
  font-size: 11px;
}
#intake-next {
  flex: 1;
}
.crm-dialog input[type='checkbox'] {
  appearance: none;
  position: relative;
  width: 42px !important;
  height: 25px;
  min-height: 25px;
  border: 0;
  background: color-mix(in srgb, var(--text) 24%, var(--surface));
  border-radius:var(--r-col);
  padding: 0;
  flex: none;
  cursor: pointer;
  vertical-align: middle;
}
.crm-dialog input[type='checkbox']:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 19px;
  height: 19px;
  background: #fff;
  border-radius:50%;
  transition: transform var(--dur-base);
}
.crm-dialog input[type='checkbox']:checked {
  background: var(--btn);
}
.crm-dialog input[type='checkbox']:checked:before {
  transform: translateX(17px);
}
@media (max-width: 700px) {
.calendar-sheet {
    margin: auto 0 0;
    width: 100%;
    max-height: 92dvh;
    border-radius:var(--r-panel) var(--r-panel) 0 0;
    padding: 12px 18px max(24px, env(safe-area-inset-bottom));
    overflow: auto;
  }
.calendar-sheet .dialoghead {
    padding: 0;
    border: 0;
  }
.crm-dialog .split {
    gap: 12px;
  }
}
.crm-dialog .tabs:has([data-reminder-type]),
.crm-dialog .tabs:has([data-reminder-when]) {
  background: var(--bg);
  padding: 4px;
  border-radius:var(--r-field);
  border: 0;
  gap: 4px;
}
.crm-dialog .tabs:has([data-reminder-type]) button,
.crm-dialog .tabs:has([data-reminder-when]) button {
  flex: 1;
  min-height: 40px;
  border-radius:9px;
  font-size: 13px;
}
.crm-dialog .tabs:has([data-reminder-type]) button[aria-pressed='true'],
.crm-dialog .tabs:has([data-reminder-when]) button[aria-pressed='true'] {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}
.reminder-rule {
  border: 1px solid var(--line);
  border-radius:var(--r-card);
  padding: 16px;
  display: grid;
  gap: 14px;
}
.dialog-form > .checkline {
  flex-direction: row-reverse;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.reminder-rule .checkline {
  flex-direction: row-reverse;
  font-size: 14px;
}
.dialog-form input[type='date']::-webkit-calendar-picker-indicator {
  pointer-events: none;
}
.connection-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  padding: 20px 0;
  text-align: left;
  font: inherit;
}
.connection-row small {
  display: block;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13px;
}
.connection-steps {
  padding-left: 22px;
  color: var(--text-2);
  line-height: 1.7;
}
.connection-note {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.crm-dialog input[type='checkbox']:checked {
  background: var(--btn);
}
.choice-row[aria-pressed='true'] > i {
  border-color: var(--btn);
}
.choice-row[aria-pressed='true'] > span {
  color: var(--text);
}
:where(.crm-dialog, .calendar-sheet) {
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 90dvh;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
  border-radius:var(--r-panel);
  padding: 24px;
  color: var(--text);
  box-shadow: 0 28px 100px #0008;
}
.crm-dialog::backdrop {
  background: #0009;
  backdrop-filter: blur(7px);
}
.crm-dialog form,
.dialog-form {
  display: grid;
  gap: 20px;
}
.dialoghead,
.crm-dialog .dialoghead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.crm-dialog h2,
.crm-dialog .dialoghead h2 {
  font-size: 20px;
  padding-right: 0;
}
.dialoghead > button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius:50%;
  background: var(--surface-2);
  border: 0;
  color: var(--text-2);
}
.dialog-form .field {
  font-size: 13px;
  gap: 9px;
}
.dialog-form > .row:last-child {
  padding-top: 12px;
}
.dialog-form > .row:last-child .primary {
  flex: 1;
}
@media (max-width: 700px) {
.crm-dialog,
  .crm-dialog {
    width: calc(100% - 20px);
    padding: 22px 18px;
    max-height: 92dvh;
    border-radius:var(--r-panel);
  }
}
.crm-dialog input[type=checkbox]:checked{background:var(--btn)}
.visit-summary{display:grid;gap:7px;padding:2px 0 20px}
.visit-summary h3{font-size:20px;letter-spacing:-.4px;margin:0}
.visit-summary p{font-size:15px;color:var(--text)}
.visit-summary small{font-size:13px}
.visit-summary .badge{justify-self:start;margin-top:5px}
.visit-links{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.visit-links .link{padding:5px 0;font-size:13px;min-height:36px}
.visit-other{margin-top:20px}
.visit-other summary{font-size:13px;color:var(--text-2);cursor:pointer;padding:6px 0}
.visit-other-actions{display:grid;gap:8px;margin-top:12px}
.visit-other-actions button{justify-content:flex-start;font-size:13px}
.visit-action-bar{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.visit-action-bar .primary{flex:1}
.visit-action-bar>.secondary:only-child{width:100%}
.request-consultation-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.request-consultation-actions button{min-height:52px;font-size:13px;padding:12px}
.request-sheet-choices{display:grid;gap:12px;margin-top:24px}
.request-sheet-choices button{min-height:52px}
@media(max-width:700px) {
.crm-dialog--sheet{position:fixed;top:auto;left:0;right:0;bottom:0;margin:0;width:100%;max-width:none;max-height:92dvh;border-radius:var(--r-panel) var(--r-panel) 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));border-bottom:0}
.crm-dialog--sheet::before{content:'';display:block;width:36px;height:4px;background:color-mix(in srgb, var(--text) 21%, transparent);border-radius:4px;margin:-10px auto 20px}
}
@media(max-width:360px) {
.request-consultation-actions{grid-template-columns:1fr}
}
.consultation-finish-summary{display:grid;gap:6px;padding:16px;background:var(--surface-2);border-radius:var(--r-card);margin:14px 0}
.consultation-finish-summary strong{font-size:15px;line-height:1.4}
.consultation-finish-summary span{font-size:12px;color:var(--text-2)}
.crm-dialog--center{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;width:calc(100% - 28px);max-width:530px;max-height:86dvh;padding:20px;border:1px solid color-mix(in srgb, var(--text) 9%, transparent);border-radius:var(--r-panel);overflow:hidden;background:var(--surface);box-shadow:0 30px 100px #000b,0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset}
.crm-dialog--center::before{display:none}
.crm-dialog--center .dialoghead{margin-bottom:14px;padding-bottom:14px}
.crm-dialog--center .dialoghead h2{font-size:20px;letter-spacing:-.4px}
.crm-dialog--center .dialog-form{display:flex;flex-direction:column;min-height:0;gap:0}
.crm-dialog--center .session-finish-scroll{max-height:calc(80dvh - 170px);overflow:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
.crm-dialog--center .dialog-form>.row:last-child{flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding-top:16px;margin:0;background:var(--surface);border-top:1px solid var(--line)}
.crm-dialog--center .dialog-form>.row:last-child button{min-height:48px;font-size:14px;padding:12px 14px}
.crm-dialog--center .formerror:empty{display:none}
.session-finish-context{display:grid;gap:5px;margin:0 0 20px}
.session-finish-context strong{font-size:14px;font-weight:500;line-height:1.4}
.session-finish-context small{font-size:11px;color:var(--text-2)}
.session-money-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
.session-money-grid .field{margin:0;font-size:11px;min-width:0}
.session-money-grid input{font-size:22px;font-weight:500;padding:12px;min-width:0;width:100%;font-variant-numeric:tabular-nums}
.session-consumables-heading{margin:0 0 18px}
.session-consumables-heading h3{font-size:15px;font-weight:500;margin-bottom:4px}
.session-consumables-heading small{font-size:11px;color:var(--text-2)}
.session-extra{border-top:1px solid var(--line);padding:16px 0}
.session-extra>summary{font-size:12px;color:var(--text-2);cursor:pointer}
.session-extra[open]>summary{margin-bottom:16px}
.session-extra .field{font-size:12px}
.filter-dropdown{position:relative;min-width:0;max-width:75%}
.filter-dropdown select[hidden]{display:none!important}
.filter-trigger:focus-visible,.filter-option:focus-visible{outline:2px solid var(--btn);outline-offset:3px}
.filter-options{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--z-pop);min-width:240px;width:max-content;max-width:calc(100vw - 52px);max-height:50dvh;overflow:auto;padding:6px;border:1px solid color-mix(in srgb, var(--text) 9%, transparent);border-radius:var(--r-col);background:var(--glass-bg);backdrop-filter:blur(24px);box-shadow:0 18px 50px #0009,0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset;animation:filter-arrive 140ms ease-out;transform-origin:top left}
.filter-options[hidden]{display:none}
.filter-dropup .filter-options{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left}
.filter-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px;padding:12px 14px;border:0;background:transparent;border-radius:var(--r-field);color:var(--text-2);text-align:left;font-size:14px;font-weight:400;transition:background 120ms ease}
.filter-option:hover{background:color-mix(in srgb, var(--text) 4%, transparent)}
.filter-option[aria-selected=true]{background:color-mix(in srgb, var(--btn) 11%, transparent);color:var(--action);font-weight:500}
.filter-option>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.filter-option[aria-selected=true]>svg{opacity:1}
@media(prefers-reduced-motion:reduce) {
.filter-options{animation:none}
.filter-trigger>svg,.filter-option{transition:none}
}
.select-dropdown{position:relative;width:100%;min-width:0}
.select-trigger{width:100%;justify-content:space-between;padding:12px 14px;min-height:46px;border:1px solid var(--line);border-radius:var(--r-field);background:var(--surface);font-size:14px}
.select-trigger:disabled{opacity:.45;cursor:not-allowed}
.select-options{min-width:100%;width:max-content;max-width:calc(100vw - 52px)}
.filter-option:disabled{opacity:.4;cursor:not-allowed}
.select-trigger[aria-invalid=true]{border-color:var(--danger)}
.filter-options{scrollbar-width:thin;scrollbar-color:var(--text-2) transparent}
.select-dropdown select[hidden]{display:none!important}


/* ==========================================================================
   Диалоги и листы. Один <dialog class="crm-dialog [модификатор]"> вместо правил по #dialog;
   форма внутри — .dialog-form (раньше #edit-form).
   Модификаторы:
     .crm-dialog--sheet       на телефоне — нижний лист (на десктопе — обычное окно по центру)
     .crm-dialog--center      компактное окно по центру (завершение сеанса)
     .crm-dialog--wide        широкое окно 1040 (редакторы, расчёт)
     .crm-dialog--fullscreen  на весь экран (редактор страницы, 3D) — не зависит от 640x720 по умолчанию
   Структура:
     <dialog class="crm-dialog crm-dialog--sheet">
       <div class="dialoghead"><h2>Заголовок</h2><button class="icon-btn" aria-label="Закрыть">×</button></div>
       <form class="dialog-form"> …поля… <div class="dialog-footer row"><button class="primary">Глагол + объект</button></div></form>
     </dialog>
   Список действий в листе: <div class="sheet-choices"><button class="secondary">…</button>…
     <div class="sheet-choices-danger"><button class="danger">Закрыть заявку</button></div></div>
   ========================================================================== */
.crm-dialog {
  overflow: auto;
  overscroll-behavior: contain;
}
.crm-dialog::backdrop,
.calendar-sheet::backdrop {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.crm-dialog[open] {
  animation: crm-dialog-in var(--dur-panel) var(--ease-out);
}
@keyframes crm-dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}
.dialoghead > .icon-btn,
.dialoghead > button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: none;
  background: transparent;
  color: var(--text-2);
}
.dialog-form > .dialog-footer,
.dialog-footer {
  position: sticky;
  bottom: -24px;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin: 0 -24px -24px;
  padding: 12px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.dialog-footer .primary {
  flex: 1;
  min-height: 56px;
}
.sheet-choices,
.request-sheet-choices {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.sheet-choices button,
.request-sheet-choices button {
  min-height: 56px;
  justify-content: flex-start;
  text-align: left;
}
.sheet-choices-danger {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.sheet-choices-danger button {
  color: var(--danger);
  min-height: 56px;
  justify-content: flex-start;
}
.crm-dialog--wide {
  max-width: 1040px;
}
.crm-dialog--fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 700px) {
  .crm-dialog--sheet {
    border-radius: var(--r-panel) var(--r-panel) 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .crm-dialog--sheet[open] {
    animation: crm-sheet-in var(--dur-sheet) var(--ease-sheet);
  }
  .crm-dialog--sheet .dialog-footer {
    margin-bottom: calc(-24px - env(safe-area-inset-bottom, 0px));
  }
}
@keyframes crm-sheet-in {
  from {
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .crm-dialog[open],
  .crm-dialog--sheet[open] {
    animation: none;
  }
}
.visit-action-bar {
  gap: 8px;
}
.visit-other-actions button,
.visit-links .link {
  min-height: 44px;
  font-size: 15px;
}
.request-consultation-actions button {
  min-height: 48px;
  font-size: 15px;
}
.select-trigger {
  min-height: 48px;
}
.filter-option {
  min-height: 48px;
  font-size: 15px;
}

/* язык приложения (демо language-modal-marker): 15 языков списком, отметка у выбранного */
.language-list {
  display: grid;
  margin-top: 8px;
  max-height: min(70vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
}
.language-list button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 15px;
}
.language-list button > span {
  flex: 1;
}
.language-list small {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.language-list svg {
  width: 18px;
  height: 18px;
  opacity: 0;
}
.language-list button:hover {
  background: var(--surface-2);
}
.language-list [aria-selected='true'] {
  background: color-mix(in srgb, var(--btn) 14%, transparent);
  color: var(--action);
}
.language-list [aria-selected='true'] svg {
  opacity: 1;
}