/* AddChat — пульт.
   Направление: винный погреб. Тёплая темнота, латунь, пергамент,
   издательская типографика. Не дашборд, а рабочая книга сомелье. */

:root {
  --ground:      #14090d;
  --ground-2:    #1c1015;
  --ground-3:    #24151b;
  --ink:         #ede3d4;
  --ink-dim:     #a2907e;
  --ink-faint:   #6b5a51;

  --wine:        #8e2440;
  --wine-lit:    #c4405f;
  --brass:       #c9a227;
  --brass-lit:   #e6c874;
  --sage:        #7f9e70;
  --rust:        #c4643a;

  --rule:        #3a2229;
  --rule-soft:   #2a171d;

  --display: "Fraunces", Georgia, serif;
  --ui:      "Instrument Sans", system-ui, sans-serif;
  --mono:    "Sometype Mono", ui-monospace, monospace;

  --step: 8px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Обязательно: у .gate, .modal и .view задан display, а он перебивает
   атрибут hidden из стилей браузера — без этого скрытое остаётся на виду. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1219 0%, transparent 60%),
    linear-gradient(180deg, var(--ground) 0%, #100608 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

/* Зерно и виньетка: без них тёмный фон выглядит пластиковым. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(100% 75% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ── Типографика ──────────────────────────────────────────────────── */

.h-display {
  font-family: var(--display);
  font-variation-settings: "opsz" 48, "SOFT" 20, "WONK" 1;
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}
.h-display--sm { font-size: 1.15rem; }

.prose { color: var(--ink-dim); margin: 0 0 calc(var(--step)*2); max-width: 62ch; }
.prose--warn { color: var(--rust); }

.note { font-size: .8rem; color: var(--ink-faint); margin: var(--step) 0 0; }

/* ── Вход ──────────────────────────────────────────────────────────── */

.gate {
  position: relative; z-index: 2;
  min-height: 100vh; display: grid; place-items: center; padding: 6vh 6vw;
}
.gate__inner { width: min(380px, 100%); animation: rise .7s var(--ease) both; }
.gate__eyebrow {
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 calc(var(--step)*1.5);
}
.gate__mark, .mark {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-weight: 600; letter-spacing: -.04em; margin: 0; line-height: .95;
}
.gate__mark { font-size: clamp(2.6rem, 9vw, 3.6rem); }
.gate__mark em, .mark em { font-style: italic; color: var(--wine-lit); }
.gate__rule {
  height: 1px; margin: calc(var(--step)*3) 0;
  background: linear-gradient(90deg, var(--brass), transparent);
}
.gate__form { display: grid; gap: calc(var(--step)*2); }
.gate__error { color: var(--rust); font-size: .85rem; margin-top: var(--step)*2; }

/* ── Шапка ─────────────────────────────────────────────────────────── */

.masthead {
  position: relative; z-index: 2;
  padding: calc(var(--step)*4) clamp(20px, 5vw, 56px) 0;
  animation: rise .6s var(--ease) both;
}
.masthead__row {
  display: flex; align-items: flex-end; gap: calc(var(--step)*4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: calc(var(--step)*2);
}
.mark { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

.ledger {
  display: flex; gap: calc(var(--step)*3); flex-wrap: wrap;
  margin-left: auto; font-family: var(--mono); font-size: .72rem;
}
.ledger__item { display: grid; gap: 2px; }
.ledger__item b { color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.ledger__item i {
  font-style: normal; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .16em; font-size: .62rem;
}
.ledger__item b.is-live { color: var(--wine-lit); }
.ledger__item b.is-shadow { color: var(--brass); }

.tabs { display: flex; gap: calc(var(--step)*4); padding: calc(var(--step)*2) 0 0; flex-wrap: wrap; }
.tabs a {
  position: relative; padding-bottom: calc(var(--step)*1.5);
  color: var(--ink-faint); text-decoration: none;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  transition: color .25s var(--ease);
}
.tabs a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px;
  background: var(--brass); transition: right .35s var(--ease);
}
.tabs a:hover { color: var(--ink-dim); }
.tabs a.is-on { color: var(--ink); }
.tabs a.is-on::after { right: 0; }

/* ── Страница ──────────────────────────────────────────────────────── */

.page {
  position: relative; z-index: 2;
  padding: calc(var(--step)*5) clamp(20px, 5vw, 56px) calc(var(--step)*10);
}

.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: calc(var(--step)*4); }
.split__major, .split__minor { display: grid; gap: calc(var(--step)*4); align-content: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.panel {
  background: linear-gradient(180deg, var(--ground-2), var(--ground));
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: calc(var(--step)*3.5);
  box-shadow: 0 18px 44px -28px #000;
}

/* Появление — только при переходе на вкладку, и только поверх уже видимого
   содержимого. Если анимация не отработает, панель всё равно на месте:
   вёрстка не должна зависеть от того, доиграл ли кадр. */
.view.is-entering .panel { animation: rise .55s var(--ease) both; }
.view.is-entering .panel:nth-child(2) { animation-delay: .07s; }
.view.is-entering .panel:nth-child(3) { animation-delay: .14s; }
.view.is-entering .stat { animation: rise .5s var(--ease) both; }

.panel__head {
  display: flex; align-items: center; gap: calc(var(--step)*2);
  margin-bottom: calc(var(--step)*2);
  padding-bottom: calc(var(--step)*1.5);
  border-bottom: 1px solid var(--rule-soft);
}
.panel__head .btn { margin-left: auto; }
.counter { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }

/* Штамп — как оттиск печати на документе. */
.stamp {
  margin-left: auto;
  font-family: var(--display);
  font-variation-settings: "WONK" 1;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); border: 2px solid var(--brass);
  padding: 3px 12px; border-radius: 2px;
  transform: rotate(-3deg);
  opacity: .9;
  animation: stampin .5s var(--ease) both .2s;
}
.stamp.is-live { color: var(--wine-lit); border-color: var(--wine-lit); }

@keyframes stampin { from { transform: rotate(-14deg) scale(1.35); opacity: 0 } to { transform: rotate(-3deg) scale(1); opacity: .9 } }
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ── Переключатель режима ──────────────────────────────────────────── */

.switchbar { display: flex; align-items: center; gap: calc(var(--step)*3); flex-wrap: wrap; }
.switch { background: none; border: 0; padding: 0; cursor: pointer; display: grid; gap: 6px; justify-items: center; }
.switch__track {
  width: 116px; height: 38px; border-radius: 2px; display: block; position: relative;
  background: var(--ground-3); border: 1px solid var(--rule);
  box-shadow: inset 0 2px 8px #0008;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 54px; height: 30px; border-radius: 1px;
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  box-shadow: 0 3px 10px -2px #000a;
  transition: transform .38s var(--ease), background .3s var(--ease);
}
.switch[aria-checked="false"] .switch__knob { transform: translateX(53px); background: linear-gradient(180deg, var(--wine-lit), var(--wine)); }
.switch[aria-checked="false"] .switch__track { border-color: var(--wine); }
.switch__labels { display: flex; gap: 22px; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.switch__labels b { font-weight: 500; }
.switch[aria-checked="true"] .switch__labels b:first-child { color: var(--brass); }
.switch[aria-checked="false"] .switch__labels b:last-child { color: var(--wine-lit); }
.switch__hint { margin: 0; font-size: .82rem; color: var(--ink-dim); max-width: 34ch; }

/* ── Показатели ────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.stat { background: var(--ground-2); padding: calc(var(--step)*2.5); }
.stat b { display: block; font-family: var(--display); font-variation-settings: "opsz" 90, "WONK" 1; font-size: 1.8rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.stat i { font-style: normal; display: block; margin-top: 6px; font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint); }
.stat--accent b { color: var(--brass-lit); }
.stat--wine b { color: var(--wine-lit); }

/* ── Доступы ───────────────────────────────────────────────────────── */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step); }
.checks li { display: flex; gap: var(--step); align-items: baseline; font-size: .84rem; }
.checks__idle { color: var(--ink-faint); font-style: italic; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; translate: 0 -1px; }
.dot--ok { background: var(--sage); box-shadow: 0 0 10px -1px var(--sage); }
.dot--bad { background: var(--rust); box-shadow: 0 0 10px -1px var(--rust); }
.checks b { font-weight: 500; }
.checks span { color: var(--ink-faint); font-family: var(--mono); font-size: .74rem; }

/* ── Диалоги ───────────────────────────────────────────────────────── */

.two { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: calc(var(--step)*4); }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.two__head { display: flex; align-items: center; gap: var(--step); margin-bottom: calc(var(--step)*2); padding-bottom: var(--step); border-bottom: 1px solid var(--rule); }
.two__head .btn { margin-left: auto; }

.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 3px; overflow: hidden; max-height: 68vh; overflow-y: auto; }
.dlist li { background: var(--ground-2); }
.dlist button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: inherit;
  padding: calc(var(--step)*1.8) calc(var(--step)*2);
  display: grid; gap: 4px; border-left: 2px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease);
  font: inherit;
}
.dlist button:hover { background: var(--ground-3); }
.dlist button.is-on { border-left-color: var(--brass); background: var(--ground-3); }
.dlist__top { display: flex; gap: var(--step); align-items: baseline; }
.dlist__name { font-weight: 500; }
.dlist__origin { margin-left: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.dlist__last { font-size: .8rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.thread { display: grid; gap: calc(var(--step)*2); }
.bubble { max-width: 74%; padding: calc(var(--step)*1.6) calc(var(--step)*2.2); border-radius: 3px; animation: rise .4s var(--ease) both; }
.bubble--in { background: var(--ground-3); border: 1px solid var(--rule); justify-self: start; }
.bubble--out { background: linear-gradient(180deg, #2c1a20, #241318); border: 1px solid var(--rule); justify-self: end; }
.bubble__who { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble time { display: block; margin-top: 6px; font-family: var(--mono); font-size: .66rem; color: var(--ink-faint); }

/* Неотправленный ответ — с оттиском поверх. */
.draft { position: relative; border: 1px solid var(--brass); background: #1e1410; padding: calc(var(--step)*3); border-radius: 3px; overflow: hidden; }
.draft::after {
  content: "не отправлено";
  position: absolute; right: -34px; top: 16px; transform: rotate(24deg);
  font-family: var(--display); font-variation-settings: "WONK" 1;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); border: 2px solid var(--brass); padding: 3px 44px; opacity: .35;
}
.draft__head { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--step); }
.draft p { margin: 0; white-space: pre-wrap; }
.draft__meta { margin-top: calc(var(--step)*1.5); font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); }

.sent { border-color: var(--sage); background: #131a13; }
.sent .draft__head { color: var(--sage); }
.sent::after { content: "отправлено"; color: var(--sage); border-color: var(--sage); }
.failed { border-color: var(--rust); background: #1e1210; }
.failed .draft__head { color: var(--rust); }
.failed::after { content: "сбой"; color: var(--rust); border-color: var(--rust); }

.empty { color: var(--ink-faint); font-style: italic; padding: calc(var(--step)*6) 0; text-align: center; }

.pausebar { display: flex; align-items: center; gap: calc(var(--step)*2); padding: calc(var(--step)*1.5) calc(var(--step)*2); border: 1px dashed var(--rule); border-radius: 3px; margin-bottom: calc(var(--step)*3); font-size: .84rem; color: var(--ink-dim); }
.pausebar .btn { margin-left: auto; }

/* ── Редактор инструкции ───────────────────────────────────────────── */

.editor {
  width: 100%; min-height: 46vh; resize: vertical;
  background: #12080b; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: calc(var(--step)*2.5);
  font-family: var(--mono); font-size: .84rem; line-height: 1.7;
  margin-bottom: calc(var(--step)*2);
}
.editor:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px #c9a2271a; }

.versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule-soft); }
.versions li { background: var(--ground-2); padding: calc(var(--step)*1.6) calc(var(--step)*2); display: flex; gap: var(--step); align-items: baseline; font-size: .82rem; }
.versions time { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
.versions .cur { color: var(--brass); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.versions .btn { margin-left: auto; }
.versions em { color: var(--ink-dim); font-style: normal; }

/* ── Проба ─────────────────────────────────────────────────────────── */

.sandbox { max-width: 760px; }
.tryout { margin-top: calc(var(--step)*3); display: grid; gap: calc(var(--step)*2); }

/* ── Формы ─────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; }
.field__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.field__label b { color: var(--brass); font-weight: 500; }
.field__hint { font-size: .76rem; color: var(--ink-faint); }
.field__input {
  background: #12080b; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 11px 13px; font: inherit; font-size: .9rem; width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field__input--mono { font-family: var(--mono); }
.field__input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px #c9a2271a; }

.inline { display: flex; gap: var(--step); flex-wrap: wrap; }
.inline .field__input { flex: 1 1 240px; width: auto; }
.inline--wide .field__input { flex: 1 1 420px; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--step)*3); }
.grid .field--wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.radios { display: flex; gap: var(--step); flex-wrap: wrap; }
.radios label { cursor: pointer; }
.radios input { position: absolute; opacity: 0; pointer-events: none; }
.radios span {
  display: inline-block; padding: 8px 18px; border: 1px solid var(--rule); border-radius: 2px;
  font-size: .8rem; color: var(--ink-dim); transition: all .2s var(--ease);
}
.radios input:checked + span { border-color: var(--brass); color: var(--brass-lit); background: #c9a2270f; }

.saved { margin-left: var(--step); font-size: .78rem; color: var(--sage); }

/* ── Кнопки ────────────────────────────────────────────────────────── */

.btn {
  font: inherit; font-size: .8rem; letter-spacing: .06em;
  padding: 10px 22px; border-radius: 2px; cursor: pointer;
  border: 1px solid transparent; transition: all .22s var(--ease);
}
.btn--sm { padding: 8px 16px; font-size: .76rem; }
.btn--xs { padding: 5px 11px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.btn--brass { background: linear-gradient(180deg, var(--brass-lit), var(--brass)); color: #1b1206; font-weight: 600; }
.btn--brass:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn--wine { background: linear-gradient(180deg, var(--wine-lit), var(--wine)); color: #fff; font-weight: 600; }
.btn--wine:hover:not(:disabled) { filter: brightness(1.1); }
.btn--ghost { background: none; border-color: var(--rule); color: var(--ink-dim); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-lit); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Модальное окно ────────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 5vw; background: #0a0406cc; backdrop-filter: blur(6px); animation: fade .25s var(--ease) both; }
.modal__card { width: min(460px, 100%); background: var(--ground-2); border: 1px solid var(--wine); border-radius: 3px; padding: calc(var(--step)*4); display: grid; gap: calc(var(--step)*2); animation: rise .35s var(--ease) both; box-shadow: 0 40px 80px -40px #000; }
.modal__actions { display: flex; gap: var(--step); justify-content: flex-end; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ── Уведомление ───────────────────────────────────────────────────── */

.toast {
  position: fixed; z-index: 30; left: 50%; bottom: 28px; translate: -50% 0;
  background: var(--ground-3); border: 1px solid var(--brass); color: var(--ink);
  padding: 11px 22px; border-radius: 2px; font-size: .84rem;
  box-shadow: 0 18px 40px -20px #000;
  animation: rise .3s var(--ease) both;
}
.toast.is-bad { border-color: var(--rust); color: var(--rust); }

/* ── Подвал ────────────────────────────────────────────────────────── */

.foot {
  position: relative; z-index: 2;
  padding: calc(var(--step)*3) clamp(20px, 5vw, 56px) calc(var(--step)*5);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .7rem; color: var(--ink-faint);
  display: flex; gap: var(--step);
}
.foot__dot { opacity: .5; }

.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--step); font-size: .82rem; }
.channels li { display: flex; gap: var(--step); align-items: baseline; }
.channels code { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}