/* ─────────────────────────────────────────────────────────────────────────
   ДаЛи · RCA — профессиональная тема (shadcn-токены: slate + строгий синий).
   Значения — HSL-триплеты (используются как hsl(var(--token))).
   Без внешних CDN (air-gapped): системный стек шрифтов.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --background: 210 40% 99% !important;
  --foreground: 222 47% 11% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 222 47% 11% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 222 47% 11% !important;
  --primary: 221 72% 40% !important;            /* строгий индиго-синий */
  --primary-foreground: 210 40% 98% !important;
  --secondary: 210 40% 96% !important;
  --secondary-foreground: 222 47% 15% !important;
  --muted: 210 40% 96% !important;
  --muted-foreground: 215 16% 43% !important;
  --accent: 213 96% 94% !important;             /* светло-голубой акцент */
  --accent-foreground: 221 72% 30% !important;
  --destructive: 0 72% 51% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 214 32% 90% !important;
  --input: 214 32% 90% !important;
  --ring: 221 72% 40% !important;
  --radius: 0.55rem !important;
}

.dark, html.dark, [data-theme="dark"] {
  --background: 222 47% 8% !important;
  --foreground: 210 40% 96% !important;
  --card: 222 44% 11% !important;
  --card-foreground: 210 40% 96% !important;
  --popover: 222 44% 11% !important;
  --popover-foreground: 210 40% 96% !important;
  --primary: 213 94% 62% !important;            /* яркий синий на тёмном */
  --primary-foreground: 222 47% 11% !important;
  --secondary: 217 33% 16% !important;
  --secondary-foreground: 210 40% 96% !important;
  --muted: 217 33% 16% !important;
  --muted-foreground: 215 20% 65% !important;
  --accent: 217 40% 22% !important;
  --accent-foreground: 210 40% 96% !important;
  --destructive: 0 63% 47% !important;
  --destructive-foreground: 0 0% 98% !important;
  --border: 217 33% 20% !important;
  --input: 217 33% 22% !important;
  --ring: 213 94% 62% !important;
}

/* Современный системный шрифт (без CDN) */
html, body, button, input, textarea, select {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code, pre, kbd, .font-mono {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
}

/* Читабельная колонка сообщений */
#message-container, .cl-message-container { line-height: 1.62; }

/* ── Анти-переполнение по ширине (заметно в Firefox) ──────────────────────
   Флекс-дети по умолчанию имеют min-width:auto и не сжимаются уже своего
   контента → длинные URL/таблицы/код в ответе распирают строку за край окна.
   min-width:0 разрешает сжатие; длинные слова переносим; overflow-x:hidden — страховка. */
html, body { overflow-x: hidden; max-width: 100%; }
.ai-message, .user-message, .message-content { min-width: 0; }
.message-content { overflow-wrap: anywhere; word-break: break-word; }
.message-content pre { overflow-x: auto; max-width: 100%; }
#dali-logo { height: 30px !important; width: auto !important; max-width: 150px; flex: 0 0 auto; }

/* Иконка у встроенной кнопки «Справка» (Readme) в шапке справа. Chainlit рисует её ТЕКСТОМ без
   иконки (встроенный компонент #readme-button — не вставить img), поэтому добавляем бренд-иконку
   через ::before. Та же сине-янтарная палитра, что у иконки «Опрос» рядом → смотрятся парой. */
#readme-button::before {
  content: "";
  display: inline-block;
  width: 1.15rem; height: 1.15rem;
  margin-right: 0.35rem;
  vertical-align: -0.22rem;
  background: url("/public/help.svg") center / contain no-repeat;
}

/* Таблицы (RCA: Исикава / первопричины) — карточный, аккуратный вид */
table {
  border-collapse: separate; border-spacing: 0;
  width: 100%; margin: 0.75rem 0; font-size: 0.9rem;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden;
}
thead th {
  background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
  font-weight: 600; text-align: left;
}
th, td { padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: hsl(var(--muted) / 0.4); }

/* Заголовки внутри ответа */
.markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 650; letter-spacing: -0.01em; }
h2 { border-bottom: 1px solid hsl(var(--border)); padding-bottom: 0.25rem; }

/* Разделитель источников / цитаты */
hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 1rem 0; }
blockquote {
  border-left: 3px solid hsl(var(--primary)); background: hsl(var(--accent) / 0.4);
  padding: 0.5rem 0.85rem; border-radius: 0 var(--radius) var(--radius) 0; color: hsl(var(--foreground));
}

/* Плашка «Незакрытые диагнозы» (контур B) — мягкий оранжевый фон-предупреждение.
   Полупрозрачный тон читается и на светлой, и на тёмной теме. */
.nag-open-loops {
  background: hsl(35 92% 50% / 0.12);
  border: 1px solid hsl(35 92% 45% / 0.35);
  border-left: 3px solid hsl(32 92% 48%);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  margin: 0.15rem 0;
}
.nag-open-loops > :first-child { margin-top: 0; }
.nag-open-loops > :last-child { margin-bottom: 0; }

/* Инлайновые метки [ID:n] — читаемый моно-акцент */
p code, li code, td code {
  background: hsl(var(--accent) / 0.6); color: hsl(var(--accent-foreground));
  padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.85em;
}

/* Поле ввода — мягкая тень/скругление */
[data-testid="input-composer"], .cl-input, textarea {
  border-radius: var(--radius) !important;
}

/* Режим закрытия кейса (CaseSkin.jsx): служебное пустое сообщение-носитель скина скрыто, ... */
.step:has(.case-skin-marker), .ai-message:has(.case-skin-marker) { display: none !important; }
/* ... а поле ввода на это время мягко оранжевое — визуальный сигнал «идёт закрытие».
   Композер = div-бокс, у которого внутри textarea (div:has(> div > textarea)); своего data-testid нет,
   фон задаёт Tailwind bg-accent/dark:bg-card → перекрываем !important. */
html.closing-case div:has(> div > textarea) {
  background: hsl(35 92% 50% / 0.14) !important;
  box-shadow: inset 0 0 0 1.5px hsl(32 92% 48% / 0.55) !important;
  transition: background 0.2s, box-shadow 0.2s;
}

/* Кнопки — плотные, современные */
button { border-radius: calc(var(--radius) - 2px); }

/* Приветственное сообщение / заголовок — чуть плотнее */
a { color: hsl(var(--primary)); }