/*
 * Наши правки интерфейса CloudCLI (ai.purrr1.com). Подключается из dist/index.html скриптом apply.sh.
 * Описание и причины: trendytrade.ru docs/INFRA_CLAUDE_CODE_REMOTE.md §7.
 * Классы на <body> ставит ui.js: tt-tabs-open, tt-more-open, tt-folded, tt-ctx-warn.
 */

/* ---------- ① Вкладки (Чат / Терминал / ...) на телефоне — под кнопку в строке названия ---------- */
.tt-tabs-btn { display: none; }
@media (max-width: 639px) {
  body:not(.tt-tabs-open) div:has(> div > [role="tablist"][aria-label="Workspace views"]) { display: none !important; }
  .tt-tabs-btn {
    display: inline-flex; align-items: center; gap: 2px; flex: none;
    height: 32px; padding: 0 6px 0 8px; border-radius: 8px;
    background: hsl(var(--muted) / .6); color: hsl(var(--muted-foreground));
  }
  .tt-tabs-btn svg { width: 16px; height: 16px; }
  .tt-tabs-btn .tt-chev { width: 14px; height: 14px; transition: transform .2s; }
  body.tt-tabs-open .tt-tabs-btn .tt-chev { transform: rotate(180deg); }
}

/* ---------- ③ Прокручиваемые инструменты; микрофон и отправка всегда рядом ---------- */
[data-slot="prompt-input-scroll"] {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 0%; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
[data-slot="prompt-input-scroll"] > * { flex-shrink: 0; }
[data-slot="prompt-input-tools"] > * { flex-shrink: 0; }
[data-slot="prompt-input-options"] { white-space: nowrap; gap: 4px; }
[data-slot="prompt-input-actions"] { flex: none; gap: 4px; margin-left: 6px; }
[data-slot="prompt-input-actions"] > * { display: inline-flex !important; flex-shrink: 0; }
[data-slot="prompt-input-voice"] button { width: 40px; height: 40px; }
[data-slot="prompt-input-tools"] > * { order: 3; }
[data-slot="prompt-input-tools"] > :first-child { order: 0; }
.tt-more-btn { order: 2; }
@media (max-width: 767px) {
  body:not(.tt-more-open) [data-slot="prompt-input-tools"] > :not(:first-child):not(.tt-more-btn) { display: none !important; }
  body:not(.tt-more-open) [data-slot="prompt-input-options"] { display: none !important; }
  [data-slot="prompt-input-footer"] { flex-wrap: nowrap; }
}
@media (min-width: 768px) { .tt-more-btn { display: none !important; } }
.tt-more-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 32px; border-radius: 8px;
  background: hsl(var(--muted) / .7); color: hsl(var(--muted-foreground));
}
.tt-more-btn svg { width: 16px; height: 16px; transition: transform .2s; }
body.tt-more-open .tt-more-btn svg { transform: rotate(180deg); }
/* Ширина ограничена формой; переполнение остаётся внутри scroll, не всей страницы. */
[data-slot="prompt-input-footer"] { min-width: 0; padding-left: 8px; padding-right: 8px; }
[data-slot="prompt-input-tools"] { gap: 3px; }
@media (max-width: 639px) {
  [aria-label="Select model and reasoning effort"] { max-width: 140px !important; }
}

/* ---------- ④ Счётчик контекста от 50 % окна: выходит перед «>» и подсвечивается ---------- */
/* Специфичность выше, чем у правила «спрятать» в блоке ③ — иначе оно перебивает */
body.tt-ctx-warn [data-slot="prompt-input-tools"] > [aria-label="Show token usage"]:not(:first-child):not(.tt-more-btn) { order: 1; display: inline-flex !important; }
body.tt-ctx-warn [aria-label="Show token usage"] {
  background: #fff4e0 !important; border-color: #f0c070 !important; color: #8a5300 !important;
}
.dark body.tt-ctx-warn [aria-label="Show token usage"], body.dark.tt-ctx-warn [aria-label="Show token usage"] {
  background: #3a2a10 !important; border-color: #8a6420 !important; color: #f3c97a !important;
}

/* ---------- ② Сворачивание поля ввода ---------- */
.tt-fold-btn {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 24px; border-radius: 12px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
body.tt-has-text .tt-fold-btn, body.tt-folded .tt-fold-btn { display: inline-flex; }
.tt-fold-btn svg { width: 16px; height: 16px; transition: transform .2s; }
body.tt-folded .tt-fold-btn svg { transform: rotate(180deg); }
.tt-preview { display: none; }
body.tt-folded [data-slot="prompt-input-textarea"] { display: none !important; }
body.tt-folded .tt-preview {
  display: block; padding: 10px 16px 8px; font-size: 14px; line-height: 24px; cursor: text;
  color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt-preview em { font-style: normal; font-size: 12px; margin-left: 6px; opacity: .7; }

/* ---------- ⑤ Боковая панель: без GitHub, «Сообщить о проблеме», сообщества, версии ---------- */
.group\/star { display: none !important; }
/* Нижний блок целиком (сообщить / сообщество / настройки / версия) — настройки переезжают шестерёнкой вверх */
/* Только прямой родитель обёрток ссылок: на компьютере вся панель — тоже div.flex-shrink-0 с этой ссылкой внутри */
/* :not(.border-r) — свёрнутая панель (узкая полоска w-12 с кнопкой «Показать панель») лежит прямо в обёртке
   div.h-full.flex-shrink-0.border-r и тоже подходила под :has(> div > a) — пряталась целиком, панель было не вернуть */
div.flex-shrink-0:not(.border-r):has(> div > a[href*="discord.gg"]) { display: none !important; }
.tt-gear svg { width: 16px; height: 16px; }

/* ---------- ⑥ Названия чатов: больше ширины на просторном экране, до двух строк ---------- */
/* Корень только развёрнутой панели: свёрнутая полоска w-12 сюда не подходит (ОШ-190). */
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) {
  white-space: normal;
  min-height: 0;
  align-items: flex-start;
}
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) > .flex { align-items: flex-start; }
/* Название до двух строк; время рядом, без третьей строки карточки. */
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) .flex:has(> .truncate[title]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 8px;
}
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) .truncate[title] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
  line-height: 20px;
  max-height: 40px;
}
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) .flex:has(> .truncate[title]) > .ml-auto {
  justify-self: end;
  align-self: center;
  white-space: nowrap;
  line-height: 14px;
  margin-left: 0;
}
/* Меню остаётся в правом верхнем углу карточки, вне текста заголовка. */
[data-tt-sidebar="expanded"] .group.relative:has(a[href^="/session/"]) > div > .absolute,
[data-tt-sidebar="expanded"] div.relative:has(> .flex .truncate[title]) > .absolute {
  top: 8px;
  transform: none;
}
/* Штатный пустой контейнер счётчика не должен добавлять зазор. */
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative):has(> .flex .truncate[title]) .min-w-0.flex-1:has(> .flex > .truncate[title]) > .mt-0\.5:empty { display: none; }

/* Отправка остаётся видимой и недоступной, даже когда штатная кнопка уже стала Stop. */
form[data-slot="prompt-input"] [data-slot="prompt-input-actions"] > button[aria-busy="true"] {
  display: inline-flex !important;
  cursor: progress;
  opacity: .65;
}
.tt-send-notice { padding: 6px 12px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.tt-send-notice:empty { display: none; }

/* Текущий чат: заметный фон, рамка и полоса слева; одинаково в обеих панелях. */
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5:has(> .flex .truncate[title]) {
  background-color: #dce5ff !important;
  border-color: #5367d9 !important;
  box-shadow: inset 3px 0 0 #5367d9;
}
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5:has(> .flex .truncate[title]):hover { background-color: #cedaff !important; }
[data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5 .truncate[title] { color: #172554; font-weight: 600; }
.dark [data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5:has(> .flex .truncate[title]) {
  background-color: #293967 !important;
  border-color: #879bff !important;
  box-shadow: inset 3px 0 0 #879bff;
}
.dark [data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5:has(> .flex .truncate[title]):hover { background-color: #344777 !important; }
.dark [data-tt-sidebar="expanded"] :is(a[href^="/session/"], div.relative).bg-primary\/5 .truncate[title] { color: #eef2ff; }