/* ==========================================================================
   Forms
   ========================================================================== */
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.field-label .required-mark { color: var(--color-danger); margin-left: 0.15rem; }
.field-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}
.field-error {
  font-size: 0.75rem;
  color: var(--color-danger);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Drop zone (add-account's "Файл" tab: one .session file or a whole TData folder,
   dragged in or picked by hand — the same box either way). */
.dropzone {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast) var(--ease), background var(--transition-fast) var(--ease);
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--color-primary); }
.dropzone.dropzone-drag {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.dropzone-icon { width: 2rem; height: 2rem; color: var(--color-text-faint); margin: 0 auto 0.5rem; }
.dropzone-title { font-size: 0.9rem; font-weight: 500; color: var(--color-text); margin-bottom: 0.6rem; }
.dropzone-or {
  font-size: 0.7rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}
.dropzone-filled-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.6rem;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.dropzone-filled-icon .icon { width: 1.3rem; height: 1.3rem; }

/* Page-level error banner — one real component instead of the same inline
   background/padding/radius repeated (and once forgotten) on every page. */
.alert-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.alert-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.alert-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.input {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast) var(--ease), box-shadow var(--transition-fast) var(--ease);
}
.input::placeholder { color: var(--color-text-faint); }
.input:hover { border-color: var(--color-text-faint); }
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.input:disabled, .input[readonly] {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.input[readonly] { border-style: dashed; }

/* Chrome/Edge/Safari paint <input type="time">'s clock icon as a fixed black glyph —
   readable on the light theme's pale field background, but it blends straight into
   this app's dark surfaces (see the "Активность аккаунта с/до" fields on every role
   settings page). Firefox doesn't expose this pseudo-element at all (it draws its own
   native time control), so this rule is simply inert there — never a visible change,
   just a no-op selector. */
.input::-webkit-calendar-picker-indicator { cursor: pointer; }
:root.dark .input::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Every checkbox in the app (role assignment, bulk-select, channel pickers, on/off
   settings) — restyled as one rounded square matching the existing selected-state
   look from .pricing-checkbox-box, instead of the browser's stock checkbox. A single
   type-selector rule, not a class, so it applies everywhere automatically and no
   template needs to opt in (or can forget to). */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 6px;
  /* --color-border is a near-invisible 9%-white tint in dark mode (fine for a passive
     card outline, unusable for something people need to actually spot and click) — a
     dedicated, much stronger border keeps the box visible against any card/surface
     tone instead of blending into it. */
  border: 1.5px solid var(--color-text-faint);
  background: var(--color-surface);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  transition: background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease);
}
input[type="checkbox"]:hover:not(:disabled) { border-color: var(--color-primary); }
input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 70% no-repeat;
}
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Поле загрузки списка. Раньше на его месте была кнопка «Загрузить из файла»: в неё
   нельзя перетащить, и она никак не говорила, что файл вообще можно бросить. Поле
   говорит это своим видом — тем же, что и большая зона загрузки в других разделах,
   только ниже: здесь оно стоит ПОД текстовым полем, а не вместо него. */
.dm-drop {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
}
.dm-drop:hover,
.dm-drop:focus-visible { border-color: var(--color-primary); background: rgb(139 92 246 / 0.05); }
.dm-drop.dropzone-drag { border-color: var(--color-primary); background: rgb(139 92 246 / 0.10); }
.dm-drop-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-primary); }
.dm-drop-text { font-size: 12px; font-weight: 600; }
.dm-drop .dm-hint { margin-left: auto; }


/* Вариант, недоступный без лицензии: приглушён, не нажимается, рядом — ссылка на
   тарифы. Раньше такой переключатель просто не реагировал на клик, и понять почему
   было нельзя. */
.is-locked-option { opacity: .55; }
.is-locked-option input { pointer-events: none; }
.autoresponder-locked-link {
  font-size: .72rem;
  font-weight: 700;
  color: var(--color-primary-hover);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.autoresponder-locked-link:hover { color: var(--color-primary); }

/* Сетка галочек «о чём уведомлять» и карточки сценариев переписки. */
.dm-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; margin-top: .35rem; }
@media (max-width: 720px) { .dm-check-grid { grid-template-columns: 1fr; } }
.nd-profile > summary strong { display: block; }
.nd-profile-form { padding: .2rem 0 0; }
.nd-profile-knowledge {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--color-border);
}


/* Сценарий переданной переписки: выбор манеры разговора и «свой продукт» под ним. */
.handoff-scenario { display: flex; flex-direction: column; gap: .3rem; }
.handoff-own {
  margin-top: .6rem;
  padding: .7rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface-muted);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.handoff-own.hidden { display: none; }
.handoff-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.handoff-file-state { font-size: .74rem; color: var(--color-text-muted); min-width: 0; overflow-wrap: anywhere; }
.handoff-file-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.handoff-file-actions .hidden { display: none; }