/* ============================================================
   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 в ряд вместо столбика ——— */
html.cc-m .cc-sn { display: grid; grid-template-columns: repeat(3, minmax(0, 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) {
  html.cc-m .cc-sn { grid-template-columns: repeat(5, 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); }
.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); }
.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); }