/* Айдентика ДИКСИ: Montserrat — фирменный шрифт основного текста (брендбук, стр. 13;
   заголовочные ExoSoft/Coolvetica — коммерческие, в вебе не используем).
   Подключается через [UI].custom_css; шрифт грузится через theme.json custom_fonts. */
body {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Метка даты-времени в бабблах сообщений (вставляется сервером как <span class="msg-time">,
   требует [features].unsafe_allow_html). */
.msg-time {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
  text-align: right;
  user-select: none;
  opacity: 0.85;
}

/* Логотип в шапке — не давать ужимать */
img[src*="/logo"] {
  max-height: 32px;
}

/* №2 (v1.6): контролы прогона — фиксированная полоса в строке хедера (рендерит
   CustomElement RunControls v4 из welcome-сообщения; сам узел наш, React Chainlit
   его не трогает). Хедер ~56px, наши контролы h-32px → top 12px. Полоса по центру,
   чтобы не накрывать ни имя треда слева, ни Readme/New Chat справа. */
#run-header-controls {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 30;
  background: hsl(var(--background));
}

/* Чипы тред-итога (вход/выход токенов + ₽ за ВЕСЬ тред) в полосе контролов рядом с
   моделью. Накопительно по ходам; стоимость одного хода — отдельной строкой в финале. */
#run-header-controls .sku-tok-chips {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sku-tok-label {
  font-size: 0.68rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

.sku-tok-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
}

.sku-tok-chip-rub {
  color: #fff;
  background: #ff8200;
  border-color: #ff8200;
}

/* №2.1: длинные значения дропдаунов (категория с названием и числом SKU) вылезали
   за рамку — обрезаем многоточием. Селектор общий для radix-триггеров select
   (других комбобоксов в приложении нет). */
button[role="combobox"] {
  overflow: hidden;
}

button[role="combobox"] > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* №2.5: тосты (sonner) появлялись вплотную к верхнему краю и закрывали кнопку README.
   Сдвигаем ниже шапки; !important перебивает инлайновый --offset тостера. */
[data-sonner-toaster] {
  --offset: 72px !important;
}

/* №2.5: крестик закрытия тоста (вставляется custom.js) */
[data-sonner-toast] {
  padding-right: 2rem;
}

.toast-close {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
  font-size: 1rem;
  border-radius: 0.25rem;
  color: hsl(var(--muted-foreground));
  background: none;
  cursor: pointer;
}

.toast-close:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

/* №4 (v1.5): markdown-таблицы финала стали шире (цена/продажи/маржа/классы/оценка).
   Обёртка div.overflow-auto у таблиц УЖЕ есть в дистрибутиве (shadcn Table внутри Card),
   но table имеет w-full и ячейки переносят текст — таблица сжимается вместо скролла.
   Запрещаем перенос в ячейках → штатный горизонтальный скролл оживает.
   !important — custom.css грузится раньше дист-CSS. */
.prose table th,
.prose table td {
  white-space: nowrap !important;
}

/* v1.9.1: ВРЕМЕННОЕ превью стрима финала — плоский серый текст (агент печатает вживую,
   потом баббл перерисуется полноценным markdown). Серый цвет + чуть мельче = сигнал
   «черновик, ещё пишется»; pre-line сохраняет переносы строк плоского текста (внутри
   raw-HTML <div> markdown не парсится — текста уже без разметки от _plainify). */
.sku-stream-draft {
  white-space: pre-line;
  color: hsl(var(--muted-foreground));
  font-size: 0.94em;
}

/* Shimmer running-шага («Агент работает…»): дефолт Chainlit красит базу в hsl(--muted) —
   на светлой теме текст почти сливается с фоном (доработка №1). База — muted-foreground
   (читаемый серый на обеих темах), бегущий блик — фирменный оранжевый ДИКСИ #FF8200.
   Animation-свойства не трогаем — их задаёт исходное правило .loading-shimmer в dist. */
.loading-shimmer {
  /* !important нужен: custom.css подключается раньше бандла дист-CSS, иначе каскад
     оставляет родное правило (база hsl(--muted) ≈ белый на светлой теме). Переопределяем
     ТОЛЬКО background-image/color: шортхенд background с !important сбросил бы
     background-position и заглушил keyframes-анимацию (important бьёт анимации). */
  background-color: hsl(var(--muted-foreground)) !important;
  background-image: linear-gradient(to right,
      hsl(var(--muted-foreground)) 0%,
      #ff8200 50%,
      hsl(var(--muted-foreground)) 100%) !important;
}

/* ─────────────────────────── Мобильная вёрстка (iPhone и др. узкие экраны) ───────────
   Десктоп: контролы прогона — фиксированная полоса по центру шапки (left:50%, ~1160px).
   На телефоне (≤640px) шапка всего ~390px → центрированная полоса в 1160px вылезает за
   ОБА края (обрезается и налезает на кнопки Readme/New Chat). Перестраиваем её в
   ПАНЕЛЬ ИНСТРУМЕНТОВ во всю ширину СРАЗУ ПОД шапкой (#header = 60px, normal-flow flex):
   контролы переносятся по строкам (flex-wrap) — видны все, без скрытого гориз. скролла —
   а ленту сообщений опускаем на высоту панели, чтобы приветствие не пряталось под ней. */
@media (max-width: 640px) {
  /* Панель контролов: открепляем от центра, тянем во всю ширину под шапкой */
  #run-header-controls {
    top: 60px;          /* сразу под #header (h-[60px]) */
    left: 0;
    right: 0;
    transform: none;    /* отменяем translateX(-50%) десктопа */
    width: 100%;
    flex-wrap: wrap;     /* переносим контролы по строкам — все видны */
    gap: 0.4rem 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
    box-shadow: 0 1px 4px rgba(29, 37, 45, 0.06);
  }

  /* Компактные, но читаемые дропдауны (десктопные w-60/w-44/w-40 = 240/176/160px не лезут).
     Растягиваем по доступной ширине: ~2 контрола в строку; значение обрезается многоточием
     правилом button[role=combobox] выше. flex-grow заполняет хвост строки. */
  #run-header-controls > button[role="combobox"] {
    width: auto;
    min-width: 8.5rem;
    max-width: 100%;
    flex: 1 1 8.5rem;
  }

  /* Тумблер отладки и кнопка журнала — по содержимому, не растягивать */
  #run-header-controls > label,
  #run-header-controls > button:not([role="combobox"]) {
    flex: 0 0 auto;
  }

  /* Лента сообщений (скролл-контейнер между шапкой и композером) — опускаем под панель.
     Селектор бьёт именно её (.relative + .overflow-y-auto); у композера .relative без
     overflow-y-auto, под него не попадает. Высота панели ~2 строки контролов ≈ 96px. */
  main div.relative.overflow-y-auto {
    padding-top: 116px;
  }

  /* Тосты (sonner): десктопный сдвиг через --offset на телефоне уходит в ГОРИЗОНТАЛЬ
     (data-x-position=right → left/right=offset), из-за чего тост вылезал за правый край и
     налезал на панель контролов. Поэтому на мобиле пиним КОРОБКУ тостера напрямую: во всю
     ширину с полями 12px и СРАЗУ ПОД панелью контролов (её низ ≈186px). */
  [data-sonner-toaster] {
    --width: calc(100vw - 24px) !important;
  }
  [data-sonner-toaster][data-y-position="top"] {
    top: 196px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  /* Превью стрима: на узком экране страхуемся от вылета сверхдлинного токена за край */
  .sku-stream-draft {
    overflow-wrap: anywhere;
  }

  /* На мобиле лента и так почти во всю ширину — кнопка «Во всю ширину» не нужна, прячем
     (экономит ряд в полосе контролов). Класс body.sku-wide, если был включён на десктопе,
     остаётся безвредным. !important — базовое правило .sku-wide-btn идёт НИЖЕ этого медиа-
     блока в файле, при равной специфичности победило бы оно. */
  .sku-wide-btn {
    display: none !important;
  }
}

/* ─────────────────────── Доработка: «Во всю ширину» ────────────────────────────
   Лента сообщений и композер ограничены инлайновым `max-width: min(48rem, 100vw)`
   (Chainlit задаёт его атрибутом style на контейнере ленты, обёртках сообщений и
   композере). Кнопка «Во всю ширину» в полосе контролов вешает на <body> класс
   sku-wide — снимаем лимит ровно с этих элементов, и отчёт с широкими таблицами
   занимает всю ширину области чата (минус открытый сайдбар). Селектор бьёт только
   элементы с этим инлайн-лимитом; !important нужен, чтобы перебить inline-style. */
body.sku-wide [style*="48rem"] {
  max-width: 100% !important;
}

/* Кнопка-тумблер «Во всю ширину» (вставляется custom.js в полосу контролов). Иконка
   (SVG ←→), квадратная под вид соседних shadcn icon-кнопок (h-8 w-8); включённое
   состояние — фирменный оранжевый. */
.sku-wide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  padding: 0;
  line-height: 1;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}

.sku-wide-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.sku-wide-btn.sku-wide-btn-on {
  color: #fff;
  background: #ff8200;
  border-color: #ff8200;
}

.sku-wide-btn.sku-wide-btn-on:hover {
  background: #e87600;
  border-color: #e87600;
}

/* ─────────────────────── Доработка: «Таблицу на весь экран» ─────────────────────
   custom.js вставляет панель с кнопкой над каждой markdown-таблицей финала; клик
   открывает полноэкранный оверлей с копией таблицы (оригинал в ленте не трогаем). */
.sku-table-tools {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.25rem;
}

.sku-table-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
  background: none;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  padding: 0.15rem 0.55rem;
  cursor: pointer;
  white-space: nowrap;
}

.sku-table-expand:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}

.sku-table-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: hsl(var(--background));
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.sku-table-overlay-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
}

.sku-table-overlay-body {
  flex: 1 1 auto;
  overflow: auto;
}

/* Копия таблицы в оверлее: размер по содержимому (а не w-full) → честный скролл;
   собственные границы/заголовок, т.к. вне .prose дист-стили не применяются. */
.sku-table-overlay-body table {
  width: max-content;
  max-width: none;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.sku-table-overlay-body th,
.sku-table-overlay-body td {
  border: 1px solid hsl(var(--border));
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
  text-align: left;
}

.sku-table-overlay-body thead th {
  position: sticky;
  top: 0;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}