/* Экраны нейромодулей: структура блоков из CloudSend, вид — наш.
 *
 * Разметка и её классы (card, btn-primary, badge, input, nr-*, nc-*) перенесены
 * дословно и трогать их нельзя: на них завязаны neuroreply.js и neurocomment.js.
 * Поэтому здесь не копия чужой темы, а АДАПТЕР: те же имена классов, но все
 * значения берутся из переменных кабинета MaxTool.
 *
 * 🔑 Ни одного своего цвета: только var(--…) кабинета. Так модули сами следуют
 * светлой и тёмной теме, хотя оригинал знал лишь тёмную.
 */

.cs-scope {
  /* Их токены → наши переменные. Имена оставлены их, потому что на них ссылается
     перенесённая разметка и внутренние <style> секций. */
  --bg: var(--bg-card);
  --surface-1: var(--bg-card);
  --surface-2: var(--bg-2);
  --surface-3: var(--bg-2);
  --surface-4: var(--bg-hover);
  --txt-1: var(--text);
  --txt-2: var(--text-2);
  --txt-3: var(--text-3);
  --accent-deep: var(--accent-hover);
  --accent-bright: var(--accent);
  --hairline: var(--border);
  --hairline-strong: var(--border-med);
  --radius: var(--radius-lg);
  --radius-sm: var(--radius);
  --shadow-card: none;
  --shadow-pop: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, .18));

  color: var(--text);
  font-family: var(--font);
}

/* ── Каркас ─────────────────────────────────────────────────────────────── */
.cs-scope h2,
.cs-scope h3 { color: var(--text); font-family: var(--font-display, var(--font)); }
.cs-scope p { color: var(--text-2); }

.cs-scope .card {
  background: var(--bg-card);
  border: 1px solid var(--frame-border, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ── Кнопки: те же классы, наш вид ──────────────────────────────────────── */
.cs-scope .btn-primary,
.cs-scope .btn-secondary,
.cs-scope .btn-ghost {
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--tr, .15s), border-color var(--tr, .15s), color var(--tr, .15s);
}
.cs-scope .btn-primary {
  background: var(--accent);
  color: var(--accent-fg, #fff);
  border: 1px solid var(--accent);
}
.cs-scope .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.cs-scope .btn-secondary,
.cs-scope .btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.cs-scope .btn-secondary:hover,
.cs-scope .btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.cs-scope button:disabled { opacity: .5; cursor: default; }

/* ── Поля ввода ─────────────────────────────────────────────────────────── */
.cs-scope input[type="text"],
.cs-scope input[type="number"],
.cs-scope input:not([type]),
.cs-scope select,
.cs-scope textarea,
.cs-scope .input {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  padding: 9px 11px;
  width: 100%;
}
.cs-scope input:focus,
.cs-scope select:focus,
.cs-scope textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.cs-scope label { color: var(--text-3); }
.cs-scope input[type="checkbox"] { accent-color: var(--accent); width: auto; }

/* ── Метки состояния ────────────────────────────────────────────────────── */
.cs-scope .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
}
.cs-scope .badge-success { background: var(--green-bg, rgba(52,199,89,.12)); color: var(--green-text, #34c759); border-color: transparent; }
.cs-scope .badge-warning { background: var(--amber-bg, rgba(255,159,10,.12)); color: var(--amber-text, #ff9f0a); border-color: transparent; }
.cs-scope .badge-danger  { background: var(--accent-bg, rgba(212,0,0,.10)); color: var(--accent); border-color: transparent; }
.cs-scope .badge-neutral { background: var(--bg-2); color: var(--text-3); }

/* ── Переключатель задач и журнал (внутренние классы секций) ────────────── */
.cs-scope .nr-switch input:checked + .sl,
.cs-scope .nc-switch input:checked + .sl { background: var(--accent); border-color: var(--accent); }
.cs-scope .nr-entry:hover,
.cs-scope .nc-entry:hover { background: var(--bg-hover); }
.cs-scope .nr-out { border-left-color: var(--accent); }
.cs-scope .nr-table th { background: var(--bg-2); color: var(--text-3); }
.cs-scope .nr-table td { border-top-color: var(--border); }
.cs-scope .nr-muted,
.cs-scope .nc-muted { color: var(--text-3); }

/* Чипы задач: активная задача подсвечивается акцентом кабинета. */
.cs-scope .nr-task-chip,
.cs-scope .nc-task-chip {
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  border-radius: var(--radius);
}
.cs-scope .nr-task-chip.active,
.cs-scope .nc-task-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg, rgba(212, 0, 0, .08));
}

/* ── Разделители из Tailwind-разметки ───────────────────────────────────── */
.cs-scope [class*="border-dark-"],
.cs-scope [class*="border-surface-"] { border-color: var(--border) !important; }
.cs-scope [class*="bg-dark-"],
.cs-scope [class*="bg-surface-"] { background-color: var(--bg-2) !important; }
.cs-scope [class*="text-gray-"] { color: var(--text-3) !important; }
.cs-scope .text-white { color: var(--text) !important; }