/* Moment · тёмная тема с фиолетовым акцентом.
   Токены и правила взяты из концепта moment-purple-concept.html (01/2026).
   Файл подключается последним и перекрывает цвета из workspace.css.
   Правки визуала удобнее делать здесь, не трогая остальную вёрстку. */

:root {
  --m-bg: #0F1117;
  --m-card: #171A23;
  --m-raised: #1B1F2A;
  --m-deep: #12141B;
  --m-text: #E8EAF0;
  --m-muted: #9AA2B4;
  --m-dim: #6F7688;
  --m-line: #262B38;
  --m-line-soft: #1F2430;
  --m-accent: #6C5CE7;
  --m-accent-soft: #8B7CF6;
  --m-accent-deep: #241F3D;
  --m-accent-line: #3A2F66;
  --m-accent-text: #C7BFFB;
  --m-success: #22C55E;
  --m-error: #EF4444;
  --m-warn: #F59E0B;

  /* Прежнее имя акцента: используется в старых правилах и в разметке. */
  --green: var(--m-accent);

  color: var(--m-text);
  background: var(--m-bg);
}

body {
  background: var(--m-bg);
  color: var(--m-text);
}

.shell {
  background: var(--m-bg);
}

/* ── Кнопки ────────────────────────────────────────────────────────────── */
.primary,
.onboarding-start,
.voice-actions .primary,
.pay-block .primary,
.subscribe-actions .primary {
  background: var(--m-accent);
  color: #fff;
  border: 0;
}
.primary:active,
.onboarding-start:active { background: var(--m-accent-soft); }
.primary:disabled { background: var(--m-raised); color: var(--m-dim); }

.secondary,
.onboarding-form .secondary,
.voice-actions .secondary,
.pay-block .secondary,
.subscribe-actions .secondary {
  background: var(--m-raised);
  color: var(--m-text);
  border: 1px solid var(--m-line);
}
.secondary:active { background: #222736; }

.text { color: var(--m-muted); }
.danger, .voice-actions .danger { color: #F0A08C; }
.send { background: var(--m-accent); color: #fff; }
.send:disabled { background: var(--m-raised); color: var(--m-dim); }
.icon { background: var(--m-raised); border-color: var(--m-line); color: var(--m-text); }
.dictate { color: var(--m-muted); }
.dictate[aria-pressed='true'] { color: var(--m-accent-soft); }
.speak { color: var(--m-accent-text); }
.speak[aria-pressed='true'] { color: var(--m-accent-soft); }
.add { background: var(--m-accent); color: #fff; }

/* ── Поля ввода ────────────────────────────────────────────────────────── */
textarea,
input,
select,
.composer,
.onboarding-form textarea,
.pay-label input {
  background: var(--m-raised);
  color: var(--m-text);
  border-color: var(--m-line);
}
.composer { background: var(--m-card); border: 1px solid var(--m-line); }
.composer textarea { background: transparent; }
::placeholder { color: var(--m-dim); }

/* ── Онбординг ─────────────────────────────────────────────────────────── */
.onboarding h1 { color: var(--m-text); }
.onboarding h1 span { color: var(--m-accent-soft); }
.onboarding-mic {
  background: var(--m-accent-deep);
  border: 1px solid var(--m-accent-line);
  color: var(--m-accent-text);
}
.onboarding-mic[disabled] { background: var(--m-raised); border-color: var(--m-line); color: var(--m-dim); }
.onboarding-facts {
  background: var(--m-card);
  border: 1px solid var(--m-line);
}
.onboarding-facts span { color: var(--m-muted); }
.eyebrow { color: var(--m-muted); }

/* ── Карточки, списки, панели ──────────────────────────────────────────── */
.thread,
.team-card,
.agent-row,
.snapshot,
.plan-note,
.note,
.run-readiness,
.pay-plan,
.voice-facts,
.subscribe-block {
  background: var(--m-card);
  border-color: var(--m-line);
}
.thread:hover, .agent-row:hover { background: var(--m-raised); }
.message { background: var(--m-card); color: var(--m-text); }
.message.assistant { background: transparent; border: 1px solid var(--m-line); }
.message .meta, .message .status { color: var(--m-muted); }
.badge { color: var(--m-muted); border-color: var(--m-line); background: var(--m-raised); }
.connection-bar { color: var(--m-muted); border-color: var(--m-line-soft); }
footer, .muted, .support, .local-note, .pay-hint, .draft-caption { color: var(--m-muted); }
.error { color: #F0A08C; }
.section-line h2, h1, h2, h3 { color: var(--m-text); }

/* ── Голосовое окно ────────────────────────────────────────────────────── */
.voice-sheet {
  background: var(--m-card);
  border: 1px solid var(--m-line);
  color: var(--m-text);
}
.voice-place {
  background: var(--m-accent-deep);
  border-color: var(--m-accent-line);
  color: var(--m-accent-text);
}
.voice-text { color: var(--m-text); }
.voice-hint, .voice-note, .voice-facts-line { color: var(--m-muted); }
.voice-error { color: #F0A08C; }
.voice-facts-line {
  background: var(--m-raised);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 9px 12px;
}
.voice-progress, .voice-level { background: var(--m-line); }
.voice-progress-fill, .voice-level-fill { background: var(--m-accent); }
.voice-dialog::backdrop { background: rgba(5, 6, 10, .72); }

/* ── Подписка и оплата ─────────────────────────────────────────────────── */
.subscribe-block {
  background: linear-gradient(120deg, var(--m-accent-deep), #1B1730);
  border: 1px solid var(--m-accent-line);
}
.subscribe-block strong { color: var(--m-text); }
.subscribe-block p { color: var(--m-accent-text); }
.subscribe-hint { color: var(--m-muted); }
.pay-status.ok strong { color: var(--m-success); }
.pay-status.bad strong { color: var(--m-error); }
.pay-plan {
  background: linear-gradient(120deg, var(--m-card), var(--m-raised));
}
.pay-plan-title { color: var(--m-muted); }

/* ── Навигация и служебное ─────────────────────────────────────────────── */
.bottom-navigation { background: var(--m-card); border-color: var(--m-line); }
.build-id { color: var(--m-dim); }
#connection { color: var(--m-muted); }
.intro-fill { background: var(--m-accent); }
.intro-mark { color: var(--m-accent-soft); }
#intro { background: var(--m-bg); }

:focus-visible { outline: 3px solid var(--m-accent-soft); outline-offset: 3px; }

/* Раскрытие, что отвечает ИИ: требование к интерфейсу, а не только к документам сайта. */
.ai-disclosure {
  margin: 8px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--m-muted);
}
.ai-disclosure a { color: var(--m-accent-soft); }
.empty .ai-disclosure { margin-top: 14px; }

/* Стенд приёмки на iPhone: переключатель моделей распознавания. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.choice {
  flex: 1 1 45%; text-align: left; padding: 10px 12px;
  border: 1px solid var(--m-line); border-radius: 14px;
  background: var(--m-raised); color: var(--m-text);
}
.choice.current { border-color: var(--m-accent); background: var(--m-accent-deep); }
.choice b { display: block; font-size: 14px; font-weight: 600; }
.choice span { display: block; font-size: 12px; color: var(--m-muted); margin-top: 3px; }
.hint { color: var(--m-muted); font-size: 13px; margin: 4px 0 0; }

/* Ссылка «Открыть Момент в Telegram»: основной способ входа в браузере,
   потому что в мини-аппе Telegram уже знает человека и вход мгновенный. */
.web-app-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--m-accent-deep);
  border: 1px solid var(--m-accent);
  color: var(--m-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.web-app-open:hover { background: var(--m-accent); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────
   Минимализм. Первый заход: убираем то, что спорит за внимание и шумит.
   ───────────────────────────────────────────────────────────────────────── */

/* Белая карточка на тёмной теме читалась как остаток светлой темы и
   перетягивала взгляд с «Нового диалога». Делаем её спокойной парой. */
.create-agent-card {
  background: var(--m-card);
  color: var(--m-text);
  border: 1px solid var(--m-line);
}
.create-agent-card .action-card-icon {
  background: var(--m-raised);
  color: var(--m-muted);
}

/* На фиолетовой карточке подключения серый текст не читался. */
.settings-connection .settings-symbol,
.settings-connection small,
.settings-connection .settings-state {
  color: rgba(255, 255, 255, .8);
}
.settings-connection .settings-state { font-weight: 600; }

/* Надзаголовки дублировали нижнюю навигацию: «ГЛАВНАЯ» прямо над кнопкой
   «Главная». Убираем — заголовок экрана и так всё говорит. */
.dashboard-heading > p { display: none; }
.dashboard-heading { margin-top: 2px; }


/* Две одинаково яркие фиолетовые кнопки спорили друг с другом. Голос остаётся
   на виду, но акцент теперь один — «Начать». */
.onboarding-mic {
  background: var(--m-raised);
  border-color: var(--m-line);
  color: var(--m-text);
}
.onboarding-mic:active { background: var(--m-card); }

/* Подсказка внизу онбординга была в рамке и выглядела как ещё один блок.
   Это одна строка — пусть ею и остаётся. */
.onboarding-facts {
  background: none;
  border: 0;
  padding: 0;
  margin-top: 14px;
}
.onboarding-facts p { color: var(--m-dim); font-size: 13px; }

/* Текст в «На этом устройстве» и строка версии были цвета #262b38 — на тёмном
   фоне это практически невидимо. Делаем их приглушёнными, но читаемыми. */
.settings-data p { color: var(--m-dim); }
.settings-data h2 { color: var(--m-muted); }
.settings-version { color: var(--m-dim); }
.home-history-link span { color: var(--m-dim); }
.home-continue em { color: var(--m-dim); }

/* Справка: разделы раскрываются по одному. Раньше весь текст шёл подряд. */
.help-section { border-top: 1px solid var(--m-line-soft); }
.help-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 0;
  font-size: 17px;
  font-weight: 550;
  letter-spacing: -.2px;
  cursor: pointer;
  list-style: none;
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary::after {
  content: '+';
  color: var(--m-dim);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}
.help-section[open] summary::after { content: '–'; }
.help-section p {
  margin: 0 0 20px;
  color: var(--m-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────
   Команда ботов: стили из макета Claude Design (Командный чат).
   ───────────────────────────────────────────────────────────────────────── */
a{color:var(--m-accent-soft)}a:hover{color:var(--m-accent-text)}
.ico{width:20px;height:20px;display:block}
.hero-voice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:28px 8px 8px}
.mic-big{width:96px;height:96px;border-radius:50%;background:var(--m-accent);color:#fff;border:0;display:grid;place-items:center;box-shadow:0 0 0 10px var(--m-accent-deep)}
.mic-big .ico{width:36px;height:36px}
.or-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.or-row .home-action-card{min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-align:left}
.voice-actions{display:flex;gap:10px;margin-top:18px}.voice-actions button{flex:1;min-height:48px;border-radius:14px}
.caret{display:inline-block;width:2px;height:1em;background:var(--m-accent-soft);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.plan-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 18px}
.agent-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;text-align:left;width:100%;color:var(--m-text)}
.agent-row.off{opacity:.45}
.agent-row strong{font-size:15px;font-weight:600;display:block}
.agent-row small{display:block;color:var(--m-muted);font-size:13px;line-height:1.45;margin-top:3px}
.agent-row .where{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tgl{width:40px;height:24px;border-radius:12px;background:var(--m-line);border:0;position:relative;flex-shrink:0;margin-top:4px}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--m-muted);transition:.15s}
.tgl[aria-pressed=true]{background:var(--m-accent)}.tgl[aria-pressed=true]::after{left:19px;background:#fff}
.bot-avatar{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--m-accent);color:#fff;font-size:22px;flex-shrink:0}
.sticky-cta{position:sticky;bottom:0;padding:12px 0 4px;background:linear-gradient(transparent,var(--m-bg) 30%)}
.sticky-cta .primary{width:100%;min-height:50px;border-radius:14px;font-size:15px}
.build-steps{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.build-step{display:flex;gap:12px;align-items:center;color:var(--m-muted);font-size:14px;transition:.3s}
.build-step.done{color:var(--m-text)}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--m-line);display:grid;place-items:center;font-size:12px;flex-shrink:0}
.build-step.done .dot{background:var(--m-accent);border-color:var(--m-accent);color:#fff}
.build-step.now .dot{border-color:var(--m-accent-soft);border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chat-head{display:flex;align-items:center;gap:10px;padding:0 0 10px;border-bottom:1px solid var(--m-line-soft)}
.chat-head .t{flex:1;min-width:0}.chat-head .t strong{display:block;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-head .t small{color:var(--m-muted);font-size:12px}
.avatars{display:flex}
.avatar.sm{width:30px;height:30px;border-radius:11px;font-size:12px}
.avatar.a0{background:#2e5f4a}.avatar.a1{background:#5a3f7a}.avatar.a2{background:#6b4a2b}
.msg-row{display:flex;gap:10px;align-items:flex-start}
.msg-row .message{flex:1;min-width:0}
.message.mine{align-self:flex-end;background:var(--m-accent-deep);border:1px solid var(--m-accent-line);max-width:85%}
.message .meta{font-size:12px;display:flex;gap:6px;align-items:center;margin-bottom:5px}
.message .meta b{color:var(--m-text);font-weight:600}
.message .content{font-size:14px;line-height:1.5}
.mention{color:var(--m-accent-text);font-weight:600}
.delegs{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.deleg{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:8px 10px;border-radius:12px;background:var(--m-raised);border:1px solid var(--m-line-soft)}
.work-log{margin-top:10px;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--m-muted);background:var(--m-deep);border:1px solid var(--m-line-soft);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.work-log .on{color:var(--m-accent-text)}
.perm{margin-top:10px;border:1px solid var(--m-warn);border-radius:14px;padding:12px;background:var(--m-raised)}
.perm p{margin:0 0 10px;font-size:13px}.perm code{color:var(--m-warn)}
.perm .row{display:flex;gap:8px}.perm .row button{flex:1;min-height:40px;border-radius:12px;font-size:13px}
.typing{font-size:12px;color:var(--m-muted);padding:2px 0 0 40px}
.composer{display:flex;align-items:flex-end;gap:4px;border-radius:18px;padding:6px 6px 6px 12px;margin-top:6px}
.composer textarea{flex:1;border:0;resize:none;min-height:39px;max-height:90px;padding:9px 0;font:inherit;font-size:14px;outline:none}
.send,.dictate{display:grid;place-items:center;flex-shrink:0}
.team-strip{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.team-strip button{display:flex;gap:7px;align-items:center;border:1px solid var(--m-line);background:var(--m-card);color:var(--m-text);border-radius:20px;padding:4px 10px 4px 4px;font-size:12px;white-space:nowrap}
.st{width:7px;height:7px;border-radius:50%;background:var(--m-dim)}.st.busy{background:var(--m-warn)}.st.ok{background:var(--m-success)}
.agent-sheet h2{margin:10px 0 2px}
.agent-sheet textarea{width:100%;min-height:96px;border-radius:12px;padding:10px;font:inherit;font-size:14px;margin-top:6px}
.kv{display:flex;flex-direction:column;gap:8px;margin-top:14px}.kv div{display:flex;justify-content:space-between;font-size:13px;gap:10px}.kv span{color:var(--m-muted)}

/* План команды: липкая кнопка внизу перекрывала подсказку об ИИ. */
.plan-list + .ai-disclosure { margin-bottom: 14px; }
body[data-view] .sticky-cta { margin-top: 8px; }

/* Голосовой экран: микрофон — единственный акцент. Обе карточки ниже нейтральные,
   иначе фиолетовая карточка спорит с кнопкой микрофона за внимание. */
.or-row .new-dialog-card,
.or-row .create-agent-card {
  background: var(--m-card);
  color: var(--m-text);
  border: 1px solid var(--m-line);
}
.or-row .home-action-card {
  min-height: 92px;
  padding: 15px;
  border-radius: 18px;
  gap: 4px;
}
.or-row .home-action-card strong { font-size: 15px; }
.or-row .home-action-card small { font-size: 11px; margin-top: 2px; }
.hero-voice { padding: 18px 8px 4px; gap: 12px; }
.hero-voice h1 { font-size: 26px; line-height: 1.15; }
.hero-voice .support { font-size: 13px; margin: 0; max-width: 280px; }
.mic-big { width: 84px; height: 84px; box-shadow: 0 0 0 9px var(--m-accent-deep); }
.mic-big .ico { width: 32px; height: 32px; }
.or-row { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   Работа агента в песочнице. Разметка этих блоков уже была в
   runtime-workspace.js — с точной командой и digest от сервера, — но правил
   для них не существовало вовсе, поэтому карточка выглядела сырым текстом.
   Одеваем по макету: perm → approval-card, work-log → runtime-events.
   --------------------------------------------------------------------------- */
.approval-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--m-warn);
  border-radius: 14px;
  background: var(--m-raised);
}
.approval-card h2 { font-size: 16px; margin: 0 0 6px; }
.approval-card p { font-size: 13px; line-height: 1.45; color: var(--m-muted); margin: 0 0 10px; }
.approval-card pre {
  margin: 0 0 12px;
  padding: 10px 12px;
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--m-line-soft);
  border-radius: 10px;
  background: var(--m-deep);
  color: var(--m-warn);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.approval-card button { width: 100%; }
.approval-card button + button { margin-top: 8px; }

.runtime-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 12px 0 0;
  padding: 10px 12px;
  max-height: 220px;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--m-line-soft);
  border-radius: 10px;
  background: var(--m-deep);
  color: var(--m-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
}
.runtime-events li::before { content: "› "; }
.runtime-events li:last-child { color: var(--m-accent-text); }

/* ─────────────────────────────────────────────────────────────────────────
   Контраст. Проверено рендером всех правил с цветом текста в итоговом
   каскаде (норма WCAG AA: 4.5:1 для текста, 3:1 для крупного текста и значков).
   ───────────────────────────────────────────────────────────────────────── */

/* Остатки светлой темы: текст цвета линий #262b38 — 1.33:1, не виден. */
.composer-caption,
.panel-footnote,
.personal-editor .support,
.help-heading > span,
.response-usage,
.usage-totals small,
.usage-totals span,
.usage-disclosure,
.usage-attempt small { color: var(--m-dim); }

/* Декоративные значки того же цвета — тоже невидимы. Значкам хватает 3:1. */
.row-chevron,
.environment-symbol { color: var(--m-dim); }

/* Ошибка в голосовом окне: светлый текст на светло-красном фоне — 1.33:1,
   её было не прочитать. Тёмный красноватый тинт — 7.28:1. */
.voice-error { background: rgba(239, 68, 68, .14); }

/* Акцент #6c5ce7 мелким текстом на тёмном — 3.88:1. Мягкий акцент — 5.67:1. */
.pwa-guide-steps,
.web-telegram-handoff > a { color: var(--m-accent-soft); }
.pwa-banner button { color: var(--m-accent-text); }

/* Номер сборки: --m-dim под прозрачностью .7 — 2.64:1. */
.build-id { opacity: 1; }