/* ===========================================================================
   EVA · пульт — экран «Тест-чат» на «Стекле» (12.09.2026).

   Был: две карточки `.card` — поле выбора канала над пустым прямоугольником и
   `textarea` с кнопкой «Отправить» под ним. Разговор с EVA не выглядел
   разговором, хотя открывают этот экран ровно за этим: увидеть, КАК покупатель
   прочтёт ответ.

   Стало то же устройство, что в «Инбоксе», и общие с ним классы — не
   копипаста, а один компонент: `.msg`, `.ibx-bubble`, `.ibx-bubble-wrap`,
   `.ibx-mmeta`, `.ibx-by`, `.ib-orb`, `.ibx-typing`, `.ibx-field`,
   `.ibx-send`, `.ibx-round` объявлены в `inbox.css` и здесь только
   расставляются. Второй набор пузырей на продукт означал бы, что однажды они
   разъедутся — и тест-чат перестанет показывать то, что увидит покупатель.

   Отдельный файл, а не строки в `app.css`, по той же причине, что у
   `orders.css` и `access.css`: `app.css` лежит в CRLF.

   Общие кадры движения (`gFade`, `gRow`, `gSheen`, `ibType`, `ibIn`) живут в
   `overview.css` и `inbox.css`; второй копии здесь нет.
   ======================================================================== */

/* ===================================================== РАСКЛАДКА ЭКРАНА */

#hermes-open:not([hidden]) {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s5);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-md);
  font-weight: 650;
  text-decoration: none;
}
#hermes-open:focus-visible { outline: none; box-shadow: var(--sh-ring); }

#tab-sandbox .sbx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  gap: var(--s4);
  align-items: stretch;
  margin-bottom: var(--s4);
}

/* ------------------------------------------------------------- лента */
#tab-sandbox .sbx-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Высота ленты задана окном, а не содержимым: чат, который тянет страницу
     вниз на каждый ответ, заставляет догонять его прокруткой. */
  height: clamp(28rem, calc(100vh - 18rem), 46rem);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

#tab-sandbox .sbx-chat-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

#tab-sandbox .sbx-chat-head > div {
  min-width: 0;
  flex: 1;
}

#tab-sandbox .sbx-chat-head .state-pill {
  flex: none;
  margin-top: 0;
}

#tab-sandbox .sbx-chat-head h3 {
  margin: 0;
  font-family: var(--f-disp);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--milk);
}

#tab-sandbox .sbx-chat-sub {
  margin: 0.1rem 0 0;
  color: var(--mute);
  font-size: var(--t-micro);
  overflow-wrap: anywhere;
}

/* Колодец ленты: пузыри обязаны лежать НА поверхности, а не сливаться с
   панелью — та же ступень фона, что у ленты «Инбокса». */
#tab-sandbox .sbx-feed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  overflow-y: auto;
  background: var(--ink-860);
}

/* 🔴 Потолок ширины пузыря. «78 % ленты» правильно на экране ноутбука и
   неверно на широком мониторе: при контейнере в 106rem реплика растягивается
   на тысячу с лишним пикселей, и строка перестаёт читаться на середине.
   64 знака — та же мера текста, что у остальных экранов пульта. */
#tab-sandbox .ibx-bubble-wrap {
  max-width: min(78%, var(--read-max, 64ch));
}

#tab-sandbox .sbx-feed .msg {
  display: flex;
  align-self: stretch;
  align-items: flex-end;
  gap: var(--s2);
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Сторона реплики: покупатель слева, EVA справа — как в «Инбоксе». */
#tab-sandbox .sbx-feed .msg.eva {
  justify-content: flex-end;
}

#tab-sandbox .sbx-feed .msg.eva .ibx-bubble {
  background: var(--grad-brand);
  border-bottom-right-radius: var(--r-xs);
  color: var(--on-grad);
}

#tab-sandbox .sbx-feed .msg.client .ibx-bubble {
  background: var(--glass-3);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline-hi);
  outline: 1px solid var(--line);
  outline-offset: -1px;
  border-top-left-radius: var(--r-xs);
  color: var(--milk);
}

#tab-sandbox .sbx-feed .msg.eva .ibx-mmeta {
  justify-content: flex-end;
}

/* Пустая лента говорит словами и стоит по центру колодца: пустой
   прямоугольник читается как поломка. */
#tab-sandbox .sbx-empty {
  display: grid;
  place-items: center;
  flex: 1;
  padding: var(--s6);
  text-align: center;
}

#tab-sandbox .sbx-empty p {
  max-width: 24rem;
  margin: 0;
  color: var(--mute);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* --------------------------------------- диагностика под ответом EVA
   Что позвала модель, во что это обошлось и что сказал бы валидатор.
   Стоит ПОД пузырём и мельче его: это подпись к ответу, а не ответ. */
#tab-sandbox .sbx-diag {
  display: grid;
  gap: var(--s1);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px dashed var(--line-2);
  color: var(--mute);
  font-size: var(--t-micro);
  line-height: 1.5;
  text-align: left;
}

#tab-sandbox .sbx-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

#tab-sandbox .sbx-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface-flat);
  color: var(--silver);
}

#tab-sandbox .sbx-tool code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--t-micro);
}

#tab-sandbox .sbx-tool.is-bad {
  border-color: var(--bad-line);
  background: var(--bad-soft);
  color: var(--bad);
}

#tab-sandbox .sbx-tool b {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

#tab-sandbox .sbx-price {
  font-variant-numeric: tabular-nums;
}

#tab-sandbox .sbx-price b {
  color: var(--silver);
  font-weight: 700;
}

#tab-sandbox .sbx-dim { color: var(--faint); }
#tab-sandbox .sbx-warn { color: var(--warn); }
#tab-sandbox .sbx-bad { color: var(--bad); }

/* 🔴 Капс снимается намеренно: `app.css` набирает `.msg details summary`
   капслоком — это осталось от прежнего экрана, где спойлер был служебной
   строкой. Здесь он подпись к ответу, и «ЧТО ВЕРНУЛ GET_CATALOG» рядом с
   человеческим текстом EVA читается как заголовок таблицы. */
#tab-sandbox .sbx-raw {
  margin-top: var(--s2);
  font-size: var(--t-micro);
}

#tab-sandbox .sbx-raw > summary {
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute);
}

#tab-sandbox .sbx-raw pre {
  max-height: 12rem;
  margin: 0;
  padding: var(--s2) var(--s3);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-860);
  color: var(--silver);
  font-size: var(--t-micro);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ----------------------------------------------------------- композер */
#tab-sandbox .sbx-composer {
  flex: none;
  width: auto;
  min-width: 0;
  margin: var(--s3) var(--s5) var(--s4);
}

#tab-sandbox .sbx-cmp {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
}

#tab-sandbox .sbx-cmp .ibx-field textarea {
  min-height: 3.4rem;
}

/* ================================================== КАРТОЧКА УСЛОВИЙ */

#tab-sandbox .sbx-side {
  display: grid;
  align-content: start;
  gap: var(--s3);
  min-width: 0;
  isolation: isolate;
}

#tab-sandbox .sbx-side h3 {
  margin: 0;
  font-family: var(--f-disp);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--milk);
}

#tab-sandbox .sbx-chips {
  display: grid;
  gap: var(--s2);
}

#tab-sandbox .sbx-chips .gchip { min-width: 0; }
#tab-sandbox .sbx-chips .gchip b { overflow-wrap: anywhere; }

#tab-sandbox .sbx-chips .gchip.is-warn { border-color: var(--warn-line); }
#tab-sandbox .sbx-chips .gchip.is-warn .ibox { color: var(--warn); }

#tab-sandbox .sbx-field {
  margin: 0;
}

#tab-sandbox .sbx-side .buttons {
  margin: 0;
}

/* --------------------------------------------------- выгрузка в eval */
#tab-sandbox .sbx-export {
  isolation: isolate;
  margin-bottom: var(--s6);
}

#tab-sandbox .sbx-export h3 {
  margin: 0 0 var(--s2);
  font-family: var(--f-disp);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--milk);
}

/* ------------------------------------------------------------- телефон */
@media (max-width: 62rem) {
  #tab-sandbox .sbx {
    grid-template-columns: minmax(0, 1fr);
  }

  /* На телефоне условия опыта читают ПЕРЕД тем, как написать первое
     сообщение: цена хода и «заявка имитируется» — часть решения нажать. */
  #tab-sandbox .sbx-side { order: -1; }

  #tab-sandbox .sbx-chat {
    height: clamp(24rem, calc(100vh - 12rem), 40rem);
  }
}

@media (max-width: 40rem) {
  #tab-sandbox .sbx-feed { padding: var(--s4); }
  #tab-sandbox .sbx-composer { margin: var(--s3) var(--s4) var(--s4); }
  #tab-sandbox .sbx-chat-head { padding: var(--s3) var(--s4); }
  #tab-sandbox .ibx-bubble-wrap { max-width: 88%; }
}

/* ===========================================================================
   ДВИЖЕНИЕ

   Границы те же, что везде: в кадре только transform / opacity,
   микроанимации ≤ 300 мс, декоративные циклы ≥ 6 с. Кадр приезда пузыря и
   кадр трёх точек берутся у «Инбокса» — одна форма ожидания на продукт.
   ======================================================================== */

/* Пузырь приезжает снизу с проявлением. Кадр берётся у «Инбокса»
   (`ibMsgIn` в `inbox.css`) — второй такой же с другим именем означал бы, что
   однажды приезд реплики станет разным в двух лентах одного продукта. */
#tab-sandbox .sbx-feed .msg.is-new {
  animation: ibMsgIn 180ms var(--ease-out) both;
}

/* Пузырь «···» показывается ровно тогда, когда НАШ ход в полёте. Точки —
   те же три, что у «EVA печатает…» в «Инбоксе» (кадр `ibType`). */
#tab-sandbox .ibx-typing {
  align-self: flex-end;
  background: var(--grad-brand);
}

#tab-sandbox .ibx-typing i {
  animation: ibType 1.2s var(--ease) infinite;
}

#tab-sandbox .ibx-typing i:nth-child(2) { animation-delay: 0.16s; }
#tab-sandbox .ibx-typing i:nth-child(3) { animation-delay: 0.32s; }

/* Блик под курсором — общее правило `.glass:hover > .g-gloss::after` в
   `overview.css`; здесь только контекст наложения. */
#tab-sandbox .glass { isolation: isolate; }

#tab-sandbox button.ibx-send:active:not(:disabled),
#tab-sandbox button.ibx-round:active:not(:disabled) { translate: 0 1px; }

@media (prefers-reduced-motion: reduce) {
  #tab-sandbox .sbx-feed .msg.is-new,
  #tab-sandbox .ibx-typing i {
    /* 🔴 `opacity: 1` здесь НЕ ставится (та же грабля, что в `access.css`):
       селектор с `#tab-sandbox` весит больше базового правила. Анимации с
       `both`/`backwards` сами возвращают свойству его собственное значение,
       стоит их выключить. */
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}