:root {
  color-scheme: light;
  --background: #f0f4f8;
  --foreground: #1a202c;
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --card-bg: #fff;
  --header-bg: rgba(255, 255, 255, 0.8);
  --link: var(--blue);
}

/* серые оттенки в светлой теме работают и на текст (темные), и на рамки и
   подложки (светлые), поэтому в тёмной теме просто разворачиваем шкалу:
   бывшие темные серые становятся светлыми и наоборот */
html[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b1117;
  --foreground: #e5e7eb;
  --gray-800: #e5e7eb;
  --gray-700: #cbd5e1;
  --gray-600: #cbd5e1;
  --gray-500: #94a3b8;
  --gray-400: #7d8b9c;
  --gray-300: #3b4552;
  --gray-200: #262f3b;
  --gray-100: #1a222c;
  --card-bg: #141b24;
  --header-bg: rgba(11, 17, 23, 0.8);
  --link: #7db3ff;
}

/* Geist из static/fonts, шрифт вариативный (100-900), поэтому один файл на вес.
   Подмножества разбиты по unicode-range, браузер тянет только нужное.
   Вьетнамский сет пропущен, в русском интерфейсе он не нужен. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Geist-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/Geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Geist", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.center { text-align: center; }

.landing {
  min-height: 100vh;
  /* dvh учитывает экранную клавиатуру, иначе на телефоне нижние кнопки
     уезжают под неё. vh оставлен запасным вариантом для старых браузеров */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.landing-inner { max-width: 42rem; width: 100%; text-align: center; }
.landing-inner > * + * { margin-top: 2rem; }
.landing-head h1 { font-size: 2.25rem; font-weight: 700; color: var(--gray-800); margin: 0 0 0.75rem; }
.subtitle { font-size: 1.125rem; color: var(--gray-500); margin: 0; }

.scenario-grid { display: grid; gap: 1rem; text-align: left; }
@media (min-width: 640px) { .scenario-grid { grid-template-columns: 1fr 1fr; } }

.scenario-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.scenario-card:hover { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); border-color: #93c5fd; }
.scenario-card h2 { font-size: 1.25rem; font-weight: 600; color: var(--gray-800); margin: 0 0 0.5rem; }
.scenario-card p { font-size: 0.875rem; color: var(--gray-500); line-height: 1.625; margin: 0; }

.disclaimer {
  font-size: 0.75rem;
  color: var(--gray-400);
  line-height: 1.625;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}

.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  font-size: 0.875rem;
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-ghost:hover { background: var(--gray-200); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.center-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.center-stack { text-align: center; }
.center-stack > * + * { margin-top: 1rem; }
.muted-lg { color: var(--gray-500); font-size: 1.125rem; }

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 4px solid var(--blue);
  border-top-color: transparent;
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* прогресс анализа: полоса и подпись с процентом */
.progress-track {
  height: 0.375rem;
  width: 100%;
  background: var(--gray-200);
  border-radius: 9999px;
  overflow: hidden;
  margin: 0.5rem 0 1rem;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.progress-label {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin-left: 0.5rem;
}

/* консоль аналитика: что модель делает прямо сейчас */
.console { margin: 1rem 0 0; border-top: 1px solid var(--gray-200); padding-top: 0.75rem; }
.console summary { cursor: pointer; font-size: 0.875rem; color: var(--gray-600); }
.console-log { margin-top: 0.5rem; max-height: 16rem; overflow-y: auto; }
.console-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--gray-600);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 0.25rem;
}
.console-progress { color: var(--blue); }
.console-tool { color: var(--gray-800); }
.console-output { color: var(--gray-500); }
.console-error { color: #b91c1c; }

/* полный код аналитика раскрывается по клику, в консоли он мешал бы читать ход работы */
.console-step { margin: 0 0 0.5rem; }
.code-box { margin: 0.125rem 0 0 0.75rem; }
.code-box summary {
  cursor: pointer;
  font-size: 0.6875rem;
  color: var(--blue);
  user-select: none;
}
.code-view {
  margin: 0.375rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--gray-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  /* код модели - это код, а не абзац текста: не переносим и не растягиваем
     по ширине, иначе отступы съезжают и структура теряется */
  white-space: pre;
  overflow-x: auto;
  max-height: 22rem;
  overflow-y: auto;
  color: var(--gray-800);
  tab-size: 4;
}
.code-view code { font: inherit; background: none; padding: 0; }

.chat-shell {
  height: 100vh;
  /* без dvh поле ввода и кнопка «Отправить» прячутся под экранной
     клавиатурой, и ученик не может ответить */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 42rem;
  margin: 0 auto;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
}
.chat-header h1 { font-size: 1.125rem; font-weight: 600; color: var(--gray-800); margin: 0; }

.messages { flex: 1; overflow-y: auto; padding: 1rem; }

.chat-input-bar {
  padding: 1rem;
  border-top: 1px solid var(--gray-200);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
}
.chat-input-row { display: flex; gap: 0.5rem; }
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--gray-300);
  border-radius: 9999px;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  background: var(--card-bg);
  outline: none;
}
.chat-input-row input:focus { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa; }

.msg-row { display: flex; margin-bottom: 1rem; }
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }

.msg-bubble { max-width: 80%; border-radius: 1rem; padding: 0.75rem 1rem; }
.msg-row.user .msg-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 0.375rem; }
.msg-row.assistant .msg-bubble {
  background: var(--card-bg);
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
  border-bottom-left-radius: 0.375rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.msg-author { font-size: 0.75rem; font-weight: 500; margin-bottom: 0.25rem; }
.msg-row.user .msg-author { color: #dbeafe; }
.msg-row.assistant .msg-author { color: var(--gray-400); }
.msg-text { font-size: 0.875rem; white-space: pre-wrap; line-height: 1.625; overflow-wrap: anywhere; }
.typing { display: inline-flex; align-items: baseline; gap: 5px; padding: 8px 4px; color: var(--gray-400); font-size: 0.875rem; font-style: italic; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--gray-400); animation: typing-bounce 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-3px); opacity: 1; } }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.topbar-user { font-size: 0.875rem; color: var(--gray-500); margin-right: 0.75rem; }
.topbar-link { font-size: 0.875rem; color: var(--link); text-decoration: none; margin-right: 0.75rem; cursor: pointer; }
.topbar-link:last-child { margin-right: 0; }
.chat-header .btn-ghost { margin-right: 0.75rem; }
.page { max-width: 42rem; margin: 0 auto; padding: 1.5rem; }
.page > * + * { margin-top: 1.5rem; }
.page h1 { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.session-row { display: block; background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: 1rem; padding: 1rem 1.5rem; text-decoration: none; color: inherit; margin-bottom: 0.75rem; cursor: pointer; }
.session-row:hover { border-color: #93c5fd; }
.session-meta { font-size: 0.875rem; color: var(--gray-500); margin: 0.5rem 0 0; }
.badge { display: inline-block; font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.75rem; border-radius: 9999px; background: var(--gray-100); color: var(--gray-600); }
.badge-done { background: #dcfce7; color: #166534; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-busy { background: #dbeafe; color: #1d4ed8; }
.form-card { background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: 1rem; padding: 2rem; width: 100%; max-width: 24rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); text-align: center; }
.form-card > * + * { margin-top: 1rem; }
.form-card h1 { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.form-card .btn-primary { display: block; width: 100%; }
.field-input { width: 100%; border: 1px solid var(--gray-300); border-radius: 9999px; padding: 0.625rem 1rem; font-size: 0.875rem; background: var(--card-bg); outline: none; }
.field-input:focus { border-color: #60a5fa; box-shadow: 0 0 0 1px #60a5fa; }
.form-error { color: #991b1b; background: #fee2e2; font-size: 0.875rem; margin: 0; padding: 0.625rem 1rem; border-radius: 0.75rem; }
.auth-switch { font-size: 0.875rem; color: var(--gray-500); margin: 0; }

.done-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.done-inner { max-width: 42rem; width: 100%; }
.done-inner > * + * { margin-top: 1.5rem; }
.done-inner h2 { font-size: 1.5rem; font-weight: 700; color: var(--gray-800); margin: 0; }
.analysis-card {
  background: var(--card-bg);
  border: 1px solid var(--gray-200);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.markdown { color: var(--gray-700); font-size: 0.875rem; line-height: 1.625; overflow-wrap: anywhere; }
.markdown p { margin: 0.25rem 0; }
.markdown ul, .markdown ol { margin: 0.25rem 0; padding-left: 1.25rem; }
.markdown li { margin: 0.125rem 0; }
.markdown h1, .markdown h2, .markdown h3 { color: var(--gray-800); }
/* отчёт может содержать таблицы и код, им нужен свой скролл, иначе
   страница уезжает вбок на телефоне */
.markdown table, .markdown pre { display: block; overflow-x: auto; max-width: 100%; }
.markdown pre { padding: 0.75rem; border-radius: 0.5rem; background: var(--gray-100); }

/* транскрипт в карточке сессии не должен растягивать страницу на всю
   длину опроса, поэтому у него своя высота и свой скролл */
.messages-transcript { max-height: 55vh; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 1rem; background: var(--card-bg); }

.theme-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 1px solid var(--gray-200);
  background: var(--card-bg);
  color: var(--foreground);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s;
}
.theme-toggle:hover { border-color: #93c5fd; }

@media (max-width: 50rem) {
  /* запас снизу и справа, чтобы плавающая кнопка темы не закрывала
     дисклеймер и кнопку "Отправить" на узких экранах */
  .landing { padding-bottom: 4.5rem; }
  .chat-input-bar { padding-right: 4.5rem; }
}

/* уважаем настройку «меньше движения»: спиннер и точки перестают
   крутиться, иначе они непрерывно перерисовываются */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--gray-300); }
  .typing span { animation: none; opacity: 0.6; }
  * { transition-duration: 0.01ms !important; }
}