/* ============================================================
   re:premium — телефонный слой панели cloudcli (2026-09-24).
   Все правила висят на html.cc-m — его ставит cc-mobile-early в index.html:
   ширина <768 (мобильная раскладка бандла) или сенсорный экран ниже 500px
   (телефон горизонтально). На ПК класса нет — ПК-вид не меняется.
   Только токены из reprem-tokens.css; shadcn-переменные бандла — там,
   где элемент живёт внутри его разметки.
   repremium 2026-10-03: перенос на вёрстку 1.37.3 (поле ввода, вкладки, баннер пула).
   ============================================================ */

/* ——— G. масштаб пальцами разрешён (viewport); чтобы iPhone не приближал
   страницу сам при нажатии в поле — шрифт полей не меньше 16px ——— */
html.cc-m body { touch-action: manipulation; }
html.cc-m input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.cc-m textarea,
html.cc-m select,
html.cc-m .chat-input-placeholder { font-size: var(--text-body) !important; }

/* ——— шапка: кнопки под палец; на главном экране шапка — одна кнопка меню, делаем её строкой для значка индикатора ——— */
html.cc-m .pwa-header-safe:has(> button) { display: flex; align-items: center; justify-content: space-between; }
html.cc-m .pwa-header-safe button { min-width: var(--hit-min); min-height: var(--hit-min); justify-content: center; }
/* вкладка «Задачи» (TaskMaster, у нас не настроен) на телефоне только отнимает место у названия чата
   (1.37.3: вкладки — [role=tab] с подписью в aria-label; положение баннера пула считает cc-dom от шапки) */
html.cc-m .pwa-header-safe div:has(> [role="tab"][aria-label="Задачи"]),
html.cc-m .pwa-header-safe div:has(> button > svg.lucide-clipboard-check) { display: none; }
/* баннер состояния пула (cc-dom) на телефоне — во всю ширину под шапкой, а не узкой колонкой по центру */
html.cc-m #ccPoolBar { left: var(--space-3) !important; right: var(--space-3) !important; transform: none !important; width: auto !important; max-width: none !important; }

/* ——— E. боковое меню: разделы плиткой 3 в ряд вместо столбика ——— */
/* 21.10.2026 (основная; в тестовой — 22.10): колонка не уже самого длинного слова подписи — «Пользователи» вылезало
   из своей плитки и слипалось с «Мой расход» в одну строку */
html.cc-m .cc-sn { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: var(--space-1); }
html.cc-m .cc-sn .cc-tn {
  flex-direction: column; justify-content: center; gap: var(--space-1);
  min-height: 64px; padding: var(--space-2) var(--space-1);
  white-space: normal; text-align: center; font-size: var(--text-caption); line-height: var(--lh-snug);
}
/* ссылки разработчиков панели; #ccLogout строится копией класса обёртки — его не прячем */
/* телефон горизонтально (сайдбар ПК-раскладки, высота ~390px): разделы — одной строкой значков, иначе не видно проектов */
@media (min-width: 768px) {
  /* 21.10.2026: пунктов 5–6 (добавились «Быстрые настройки») — все в одну строку, сколько бы их ни было */
  html.cc-m .cc-sn { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  html.cc-m .cc-sn .cc-tn { min-height: var(--hit-min); padding: 0; }
  html.cc-m .cc-sn .cc-tn span { display: none; }
}
html.cc-m .cc-m-hide:not(#ccLogout) { display: none !important; }
/* корзина и карандаш у проекта — за кнопкой «⋯» (телефонная карточка проекта) */
html.cc-m .cc-acts:not(.cc-open) > button:has(> svg.lucide-trash-2),
html.cc-m .cc-acts:not(.cc-open) > button:has(> svg.lucide-pen-line) { display: none; }
html.cc-m .cc-acts.cc-open > button:has(> svg.lucide-trash-2),
html.cc-m .cc-acts.cc-open > button:has(> svg.lucide-pen-line) { min-width: var(--hit-min); min-height: var(--hit-min); }
/* 21.10.2026 (основная; в тестовой 1.37.5 — 22.10, разметка та же): горизонтальная ориентация — ПК-строка проекта
   бандла (вся строка — кнопка, значки — div внутри, на сенсорном экране видны всегда и ложились на путь проекта).
   Значки спрятаны совсем; «⋯» — отдельная кнопка справа от строки, «Переименовать»/«Убрать» — строкой под проектом
   (reprem-mobile.js, rowMenu) */
html.cc-m .cc-rowwrap > button div:has(> svg.lucide-pen-line),
html.cc-m .cc-rowwrap > button div:has(> svg.lucide-trash-2) { display: none !important; }
html.cc-m .cc-rowwrap > button .min-w-0 .text-xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) {
  html.cc-m .cc-rowwrap { display: flex; flex-wrap: wrap; align-items: center; }
  html.cc-m .cc-rowwrap > button:not(.cc-more) { flex: 1 1 0; min-width: 0; }
  html.cc-m .cc-rowwrap > .cc-more { flex: none; }
  html.cc-m .cc-acts-line:not([hidden]) {
    flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2);
  }
  html.cc-m .cc-acts-line { flex-wrap: nowrap; }
  html.cc-m .cc-acts-line .cc-btn { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-3); white-space: nowrap; }
}
@media (max-width: 767.98px) { html.cc-m .cc-rowwrap > .cc-more, html.cc-m .cc-acts-line { display: none !important; } }
.cc-btn.cc-danger { color: var(--color-action-600); }
/* в тёмной теме красный текст на тёмной кнопке ниже AA — текст светлый, «опасность» — красной рамкой */
.dark .cc-btn.cc-danger:not(.primary) { color: var(--color-on-dark); border-color: var(--color-action); }
.cc-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cc-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--hit-min); min-height: var(--hit-min); padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-ink-2); cursor: pointer;
}
.cc-more[aria-expanded="true"] { background: var(--color-surface-2); color: var(--color-ink); }
.cc-more:focus-visible, button.cc-tn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dark .cc-more { color: var(--color-on-dark); }
.dark .cc-more[aria-expanded="true"] { background: var(--color-dark); }
html:not(.cc-m) .cc-more { display: none !important; }

/* ——— F. поле ввода (вёрстка 1.37.3: form[data-slot=prompt-input] > [data-slot=prompt-input-footer]):
   кнопки крупнее, без счётчика команд («/» в поле делает то же). Режим разрешений в 1.37.3 — значок
   с подписями в меню, модель и усилие — одна кнопка с меню, поэтому подписи «Обычный/…» и «Усилие:»
   из 1.36 не нужны. ——— */
html.cc-m [data-slot="prompt-input-footer"] { align-items: flex-end; }
html.cc-m [data-slot="prompt-input-tools"] { flex-wrap: wrap; row-gap: var(--space-1); }
html.cc-m [data-slot="prompt-input-footer"] button { min-height: 40px; min-width: 40px; }
html.cc-m [data-slot="prompt-input-footer"] > div.ml-auto button { min-width: var(--hit-min); min-height: var(--hit-min); }
html.cc-m [data-slot="prompt-input-tools"] div.relative:has(> button > svg.lucide-message-square) { display: none; }
/* узкий телефон: счётчик контекста (82K) — второстепенный, иначе кнопки переносятся во вторую строку */
@media (max-width: 419.98px) { html.cc-m [data-slot="prompt-input-tools"] button:has(svg.lucide-activity) { display: none; } }

/* ——— C/D. главный экран телефона: последние разговоры + уведомления ——— */
html.cc-m .cc-home-host { width: 100%; max-width: 480px; padding: var(--space-4); }
html.cc-m div:has(> .cc-home-host) { align-items: flex-start; overflow-y: auto; }
.cc-home { width: 100%; min-width: 0; text-align: left; }
.cc-home h3 { margin: 0 0 var(--space-3); font-size: var(--text-title3); font-weight: var(--fw-bold); color: var(--color-ink); }
.dark .cc-home h3 { color: var(--color-on-dark); }
.cc-rl { display: flex; flex-direction: column; gap: var(--space-1); }
.cc-ri {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--space-1);
  width: 100%; min-width: 0; text-align: left; font: inherit; cursor: pointer;
  min-height: var(--hit-min); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink); text-decoration: none;
}
.cc-ri:active { background: var(--color-surface-2); }
.cc-ri b { font-size: var(--text-subhead); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ri span { font-size: var(--text-caption); color: var(--color-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .cc-ri { background: var(--color-dark); border-color: var(--color-navy); color: var(--color-on-dark); }
.dark .cc-ri span { color: color-mix(in srgb, var(--color-on-dark) 70%, transparent); }
.cc-home .cc-muted { font-size: var(--text-footnote); color: var(--color-ink-2); padding: var(--space-2) 0; }
.cc-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--hit-min); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  font: var(--fw-semibold) var(--text-footnote)/1 var(--font-sans); cursor: pointer;
}
.cc-btn.primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-on-action); }
.cc-btn.primary:active { background: var(--color-action-600); }
.dark .cc-btn:not(.primary) { background: var(--color-dark); border-color: var(--color-navy); color: var(--color-on-dark); }
.cc-note {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-ink);
  font-size: var(--text-footnote); line-height: var(--lh-snug);
}
.cc-note b { display: block; margin-bottom: var(--space-1); font-size: var(--text-subhead); }
.dark .cc-note { background: var(--color-dark); color: var(--color-on-dark); border: 1px solid var(--color-navy); }

/* ——— окно подтверждения (опасный режим) ——— */
.cc-dlg-back {
  position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: flex-end; justify-content: center;
  padding: var(--space-4) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  background: color-mix(in srgb, var(--color-ink) 45%, transparent);
}
.cc-dlg {
  width: min(440px, 100%); padding: var(--space-5); border-radius: var(--radius-xl);
  background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-lg);
}
.cc-dlg h2 { margin: 0 0 var(--space-2); font-size: var(--text-title3); font-weight: var(--fw-bold); }
.cc-dlg p { margin: 0 0 var(--space-4); font-size: var(--text-subhead); line-height: var(--lh-snug); color: var(--color-ink-2); }
.cc-dlg .cc-actions { justify-content: flex-end; margin-top: 0; }
.dark .cc-dlg { background: var(--color-dark); color: var(--color-on-dark); border: 1px solid var(--color-navy); }
.dark .cc-dlg p { color: color-mix(in srgb, var(--color-on-dark) 75%, transparent); }

/* ============================================================
   2026-10-22 — перенос в тестовую панель (1.37.5) правок основной 21.10 (телефон, строка под полем ввода, меню
   разделов). Селекторы — по разметке 1.37.5 (проверено на живой тестовой: 390×844, 844×390, 1024, 1440).
   ============================================================ */

/* 1. Настройки на телефоне: разделы (ряд .md:hidden над содержимым) и провайдеры (Claude / Cursor / Codex / OpenCode)
   в 1.37.5 — одной строкой с прокруткой вбок, провайдеры обрезаны до «C…». Переносом в несколько строк, под палец. */
@media (max-width: 767.98px) {
  html.cc-m .modal-backdrop div.md\:hidden > div.scrollbar-hide.overflow-x-auto { flex-wrap: wrap; overflow: visible; row-gap: var(--space-1); }
  html.cc-m .modal-backdrop div.md\:hidden > div.scrollbar-hide.overflow-x-auto > button {
    flex: 1 1 auto; justify-content: center; min-height: var(--hit-min);
  }
  html.cc-m .modal-backdrop [role="tablist"].overflow-x-auto { flex-wrap: wrap; overflow: visible; }
  html.cc-m .modal-backdrop [role="tablist"].overflow-x-auto > [role="tab"] {
    flex: 1 1 auto; min-height: var(--hit-min); padding-left: var(--space-3); padding-right: var(--space-3);
  }
  /* поле адреса плагина не выдавливает кнопку «Установить» за край */
  html.cc-m .modal-backdrop main input { min-width: 0; }
  /* «Настройки успешно сохранены!» рядом с заголовком — не налезает на него */
  html.cc-m .modal-backdrop h2 + div > span { text-align: right; line-height: var(--lh-snug); }
}
html.cc-m .modal-backdrop main div.inline-flex:has(> button > span.truncate) { flex-wrap: wrap; max-width: 100%; row-gap: var(--space-1); }
html.cc-m .modal-backdrop main div.inline-flex:has(> button > span.truncate) > button { flex: 1 1 auto; min-height: var(--hit-min); max-width: none; }
html.cc-m .modal-backdrop main div.inline-flex > button > span.truncate { overflow: visible; text-overflow: clip; }

/* 3. Ярлык «‹» быстрых настроек бандла у правого края закрывал текст переписки — на телефоне скрыт, быстрые настройки
   открываются пунктом бокового меню (reprem-mobile.js). Открытую панель закрывает тот же ярлык с другой подписью
   («Закрыть панель настроек») — его не трогаем. Плавающая «Спросить re:ai» (вставка nginx) на телефоне дублирует пункт
   меню и тоже закрывала текст справа (и окно «Настройки» в горизонтальной ориентации). */
html.cc-m button[aria-label="Открыть панель настроек"],
html.cc-m button[aria-label="Open settings panel"],
html.cc-m body > a[href="https://ai.reprem.ru"] { display: none !important; }
button.cc-tn { border: 0; background: transparent; }
/* кнопка admin «Аккаунты Claude» (interactive-browser-button.js) — в тестовой не подключена; правило — на случай,
   если подключат: на телефоне в чате и в открытом меню она закрывала «Отправить» и «Настройки» */
html.cc-m body:has(form textarea) #cc-interactive-browser,
html.cc-m body:has(.fixed.inset-0.z-50:not(.invisible)) #cc-interactive-browser { display: none !important; }

/* 5. Тёмная тема: фон самого документа — цвет темы (иначе полоса над страницей, «оттяжка» при прокрутке и зона под
   часами у значка на экране «Домой» в браузере телефона — белые). ПК не меняется: там страницу закрывает панель. */
html.dark { background-color: hsl(var(--background, 0 0% 8%)); }
html:not(.dark) { background-color: hsl(var(--background, 44 22% 96%)); }
html.cc-m.dark { color-scheme: dark; }

/* Кнопка «133K токена» под полем ввода (1.37.5: aria-label «Расход токенов») меняла ширину вместе с числом
   (950 → 95K → 133K → 1.2M) — число цифрами одной ширины в поле постоянной ширины (5 знаков), кнопка не сжимается. */
button[aria-label="Расход токенов"], button[aria-label="Token usage"] { flex: 0 0 auto; }
button[aria-label="Расход токенов"] > span.font-medium, button[aria-label="Token usage"] > span.font-medium {
  display: inline-block;
  min-width: 5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Плавающее меню разделов на главном экране (#ccTopNavF) с подписями помещается только от ~1440 px; уже — оно
   переносилось в две строки (1024 px) и закрывало пилюлю фоновых процессов. Уже 1440 px — значки 44×44 без подписей
   (подпись — во всплывающей подсказке и для диктора: title и aria-label у ссылки есть). Меню в шапке чата (#ccTopNav)
   в 1.37.5 сжимается само (cc-dom, fitTopNav). */
@media (max-width: 1439.98px) {
  html:not(.cc-m) #ccTopNavF .cc-tn { position: relative; min-width: var(--hit-min); min-height: var(--hit-min); justify-content: center; padding: 0; }
  html:not(.cc-m) #ccTopNavF .cc-tn span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}