/* Дополнения к app.css панели хостинга: только то, чего в ней не было. Радиусы и размеры — её же переменные. */
.profile-text { max-height: 260px; overflow: auto; white-space: pre; line-height: 1.5; }
.gap-0\.5 { gap: calc(var(--spacing) * .5); }

/* Чёрно-белая тема. app.css не тронут: его цвета — переменные, здесь они переопределены
   (правила вне слоёв сильнее слоёв app.css). Чтобы вернуть прежний вид, достаточно удалить всё ниже.
   Зелёный и красный оставлены: ими помечены «на связи», ошибки и опасные действия. */
:root {
  --color-bg: #000;
  --color-surface: #101010;
  --color-raised: #1c1c1c;
  --color-hover: #272727;
  --color-strong: #363636;
  --color-muted: #868686;
  --color-soft: #b6b6b6;
  --color-fg: #fff;
  --color-accent: #fff;
  --color-accent-hover: #fff;
  --color-accent-soft: #ffffff1f;
}

/* Акцент стал белым, поэтому всё, что лежит на нём, — чёрное. */
::selection { color: #000; }
.btn-primary { color: #000; }
.btn-primary:hover, .btn-primary:focus-visible { background: #d4d4d4; }
input[type=checkbox]:not(.sr-only):before { background: #000; }
input[type=checkbox]:not(.sr-only):checked:hover { background: #d4d4d4; }

/* Уведомления: на ПК — сверху справа, на телефоне — сверху во всю ширину (в app.css они внизу). Новое — выше прежних. */
.tray { top: 16px; bottom: auto; flex-direction: column-reverse; }
.toast { box-shadow: inset 0 0 0 1px var(--color-hover), 0 10px 30px #000c; }
@media (max-width: 63.99rem) {
  .tray { top: calc(8px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; width: auto; }
}

/* Помощник: лента разговора. */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 220px; max-height: 58dvh; overflow-y: auto; scrollbar-width: none; }
.chat::-webkit-scrollbar { width: 0; height: 0; }
.msg { max-width: min(680px, 88%); padding: 10px 14px; border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 20px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-user { align-self: flex-end; background: var(--color-accent); color: #000; }
.msg-bot { align-self: flex-start; background: var(--color-raised); }
.act { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-hover); font-size: var(--text-xs); line-height: var(--text-xs--line-height); color: var(--color-soft); }
/* Блок во всю ширину сетки. */
.span-all { grid-column: 1 / -1; }
/* Нижнее меню телефона: шесть ячеек (в app.css есть только пять). */
.tabs-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tabs-6 .tab { font-size: 9.5px; letter-spacing: -.01em; }
.chat-pick { width: auto; max-width: 260px; min-height: 30px; padding-block: 5px; font-size: var(--text-xs); }
textarea.chat-input { min-height: 56px; max-height: 200px; resize: none; }
.input:disabled { opacity: .5; }

/* Полупрозрачные шапка и нижнее меню: в app.css для старых браузеров зашиты прежние цвета. */
.bg-bg\/70 { background-color: #000000b3; }
.bg-surface\/60 { background-color: #10101099; }

/* Подписки: QR-код и код активации (в app.css этих классов нет). */
.break-all { word-break: break-all; }
.max-w-\[260px\] { max-width: 260px; }
.bg-white { background-color: #fff; }
.text-2xl { font-size: 24px; line-height: 32px; letter-spacing: .04em; }
.overflow-hidden { overflow: hidden; }
.qr svg, .bg-white > svg { display: block; width: 100%; height: auto; }