* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  height: 100%;
}
/* Плавные переходы между страницами (MPA cross-document view transitions) — нативная
   фича браузера (Chrome/Edge 126+), никакого роутера/JS не нужно: при обычном клике по
   <a href> старая и новая страница кросс-фейдятся вместо резкой смены. В Safari/Firefox
   просто игнорируется — обычная навигация, деградация безопасна. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* Сплэш при загрузке страницы — тёмный фон + блик, пробегающий по названию,
   гаснет и открывает контент (решение сессии: по образцу референса клиента —
   OBS-запись их сайта stomatologia-n1.ru, тот же приём "загрузка → блик → реальный
   контент"). Держим коротким (~900ms), не назойливым. */
.site-splash {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #14161d 0%, #060608 72%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: none;
}
.site-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-splash-logo {
  position: relative;
  width: clamp(180px, 34vw, 340px);
}
.site-splash-logo img { width: 100%; height: auto; display: block; }
/* Блик — не через text-gradient (буквы становились разноцветными по очереди),
   а через полосу-градиент, обрезанную по силуэту самого лого его же alpha-каналом
   (mask-image), и наложенную поверх через mix-blend-mode: только один ровный
   пробегающий блик по всей картинке целиком, без "разноцветных" букв. */
.site-splash-logo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.95) 50%, transparent 60%);
  background-size: 260% 100%;
  -webkit-mask-image: url(/static/indrik-logo.png);
  mask-image: url(/static/indrik-logo.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: overlay;
  animation: splash-shine 1.4s ease-in-out infinite;
}
@keyframes splash-shine {
  0% { background-position: 220% 0; }
  100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-splash-logo::after { animation: none; display: none; }
}
:root {
  /* Editorial dark — без purple/glow AI-клише */
  --bg: #0b0b0c;
  --bg-card: #141415;
  --bg-card-2: #1a1a1c;
  --border: #2a2a2e;
  --accent: #e8e4dc;
  --accent-2: #f5f2eb;
  --accent-glow: rgba(232, 228, 220, 0.14);
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --font: "Fredoka", "DM Sans", "Segoe UI", sans-serif;
  --font-display: "Fredoka", "DM Sans", "Segoe UI", sans-serif;
  --radius: 12px;
  --focus: #e8e4dc;
  /* Акцент бренда (editorial cream) — не IG purple/pink. Alias --ig-gradient для старых селекторов. */
  --brand-gradient: linear-gradient(135deg, #cfc8bc 0%, #e8e4dc 48%, #f5f2eb 100%);
  --brand-on-gradient: #0a0a0a;
  --ig-gradient: var(--brand-gradient);
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* overflow-x убран отсюда: html уже задаёт overflow-x:hidden и по спецификации
     "отдаёт" его вьюпорту — если то же самое продублировать на body, body сам
     становится отдельным скролл-контейнером, а position:sticky у потомков
     (стопка карточек) считается относительно него, а не настоящего вьюпорта,
     из-за чего sticky не прилипает как надо. */
}
body > .container { flex: 1 0 auto; }
body > .site-footer { margin-top: auto; flex-shrink: 0; }
/* Без этого голые <a> без класса (например "← Бизнес" или "Полная история →" в
   тексте) рендерятся дефолтным синим/фиолетовым браузера — не по палитре сайта. */
a { color: var(--accent-2); }
a:visited { color: var(--accent-2); }
.container.landing .panel-title {
  font-family: var(--font);
  letter-spacing: 0.06em;
}
.icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
}
.icon-slot svg {
  width: 34%;
  height: 34%;
  min-width: 22px;
  min-height: 22px;
}
.location-library-generated .icon-slot svg {
  width: 44%;
  height: 44%;
  min-width: 20px;
  min-height: 20px;
}
.niche-fallback {
  display: block;
  width: 28%;
  height: 28%;
  min-width: 18px;
  min-height: 18px;
  margin: auto;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: 0.55;
  color: var(--text-muted);
  position: relative;
}
.niche-fallback::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -4px;
  height: 5px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: auto; display: block; }
.brand-link { text-decoration: none; color: inherit; display: flex; align-items: center; }
/* Мобиле: гамбургер + выпадающая панель. ПК: пункты сразу в строке шапки. */
.topbar-menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  cursor: pointer; padding: 0;
}
.topbar-menu-toggle:hover { border-color: var(--accent-2); color: var(--accent-2); }
.topbar-actions {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  position: absolute;
  top: calc(100% + 10px);
  right: 24px;
  min-width: 220px;
  padding: 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  z-index: 150;
}
.topbar-actions.is-open { display: flex; }
.topbar-lang-row { display: flex; align-items: center; gap: 8px; align-self: flex-start; }
.inline-logout { margin: 0; }
.topbar-actions .pill { width: 100%; }

@media (min-width: 641px) {
  .topbar-menu-toggle { display: none; }
  .topbar-actions,
  .topbar-actions.is-open {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: static;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .topbar-lang-row { align-self: center; }
  .topbar-actions .pill { width: auto; }
  body.is-cabinet .topbar-actions {
    background: transparent;
    border: none;
    border-radius: 0;
  }
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
/* Переключатель языка с картинками-флагами (23 языка). Нативный select оставлен в
   разметке как запасной вариант без JS и скрывается скриптом. */
.lang-picker { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 4px 8px; border-radius: 999px; cursor: pointer;
}
.lang-current:hover { background: rgba(255, 255, 255, 0.06); }
.lang-flag { border-radius: 2px; display: block; flex-shrink: 0; object-fit: cover; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto;
  min-width: 190px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.lang-menu[hidden] { display: none !important; }
.lang-option {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 13px; text-align: left;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
}
.lang-option:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.lang-option.is-active { color: var(--text); font-weight: 700; }
/* Меню открывается влево на узких экранах, чтобы не уезжало за край. */
@media (max-width: 520px) { .lang-menu { right: auto; left: 0; } }

/* Тот же компонент внутри формы (язык роликов в настройках бизнеса): на всю ширину
   поля, меню раскрывается влево-вниз под ним. */
.lang-picker--field { display: block; margin-top: 6px; }
.lang-picker--field .lang-current {
  width: 100%; justify-content: flex-start;
  border: 1px solid var(--border); background: var(--bg);
  padding: 10px 14px; border-radius: 12px;
}
.lang-picker--field .lang-menu { left: 0; right: auto; width: 100%; min-width: 0; }

/* Запасной нативный select прячется атрибутом hidden из JS, но общее правило
   `select { display: block }` выше перебивает браузерный `[hidden] { display: none }`
   (авторский стиль сильнее пользовательского агента) — без этой строки скрытый
   список остаётся на экране. Та же ловушка, что была с панелью чата-ассистента. */
select[hidden] { display: none !important; }

/* Запасной нативный select — виден только без JS. */
.lang-select {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  max-width: 132px;
}
.lang-select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
/* Список раскрывается системным виджетом — там фон свой, задаём явно, иначе
   в тёмной теме на части браузеров получается белым по белому. */
.lang-select option { background: var(--bg-card); color: var(--text); }

.lang-btn {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.lang-btn.is-active {
  background: var(--accent-glow);
  color: var(--text);
  cursor: default;
}
.lang-btn:not(.is-active):hover { color: var(--text); }
body.is-cabinet .lang-btn.is-active {
  background: var(--accent-glow);
  color: var(--text);
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1px solid var(--border);
  background: transparent; color: var(--text); white-space: nowrap;
}
.pill:hover { border-color: var(--accent-2); }
.pill-solid { background: var(--text); color: #0a0a0a; border: none; }
.pill-solid:hover { background: var(--accent-2); color: #0a0a0a; }
.pill-danger { background: #e5484d; color: #fff; border-color: #e5484d; }
.pill-danger:hover { background: #ff5f5f; border-color: #ff5f5f; }
.pill:focus-visible,
.lang-btn:focus-visible,
.profile-icon-link:focus-visible,
.auth-social-btn:focus-visible,
.auth-modal-tab:focus-visible,
.auth-modal-close:focus-visible,
.tag:focus-visible,
.feature-card:focus-visible,
.feature-card-switch-btn:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.profile-icon-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border);
  color: var(--text); flex-shrink: 0;
  background: transparent; padding: 0; cursor: pointer; font: inherit;
}
.profile-icon-link:hover,
.profile-icon-link.is-active { border-color: var(--accent-2); color: var(--accent-2); }
.profile-meta {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.15);
  text-align: left;
}
.profile-meta > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: baseline;
}
.profile-meta dt { margin: 0; font-size: 12px; color: var(--text-muted); font-weight: 550; }
.profile-meta dd { margin: 0; font-size: 14px; font-weight: 600; word-break: break-word; }
#profile-modal .flash { margin: 0 0 12px; text-align: left; }

.container { max-width: 720px; width: 100%; min-width: 0; margin: 0 auto; padding: 24px; box-sizing: border-box; }
.container.cabinet { max-width: 920px; padding: 28px 24px 64px; }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: 0.01em; }
.hint { color: var(--text-muted); font-size: 14px; }
.muted { opacity: 0.7; }
.error { color: #ff6b6b; font-weight: 600; margin: 0 0 12px; }
.ok { color: #4caf50; font-size: 13px; margin: 0 0 12px; }
fieldset { border: 1px solid var(--border); border-radius: 16px; margin-bottom: 16px; padding: 18px; background: var(--bg-card); }
legend { padding: 0 8px; color: var(--text-muted); }
label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=search],
textarea,
select {
  display: block;
  width: 100%;
  padding: 11px 14px;
  margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=url]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
/* Поля, растущие по тексту (data-autosize, высоту считает app.js): скроллбар внутри
   не нужен и ручной ресайз тоже — иначе пользователь тянет уголок, а скрипт тут же
   пересчитывает высоту обратно. */
textarea[data-autosize] { overflow-y: hidden; resize: none; }
.weekday-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.checkbox { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.checkbox input { width: auto; }
.credit-estimate { margin: 16px 0; }
.credit-bar { height: 8px; background: var(--bg-card); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.credit-fill { height: 100%; width: 0%; background: var(--accent); transition: width 0.15s ease; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; margin-bottom: 12px;
  border: 2px dashed var(--border); border-radius: 12px; cursor: pointer;
  background: var(--bg-card); text-align: center;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone-icon { font-size: 28px; line-height: 1; color: var(--accent-2); }
.dropzone-text { font-size: 13px; color: var(--text-muted); word-break: break-all; }
.dropzone-preview { max-width: 100%; max-height: 160px; border-radius: 8px; object-fit: cover; }
/* Компактный квадрат для лого (мастер онбординга) — не на всю ширину модалки, как обычный
   dropzone под фото персонажа/товара, а маленький квадрат с "+" рядом с подписью поля. */
.dropzone--sm {
  width: 96px; height: 96px; padding: 8px; margin: 0 auto; gap: 4px;
  text-align: center; align-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dropzone--sm .dropzone-icon { font-size: 22px; }
.dropzone--sm .dropzone-text { font-size: 11px; line-height: 1.2; }
.dropzone--sm .dropzone-preview { max-height: 100%; width: 100%; height: 100%; }
/* .field label { margin: 0; } (селектор с тегом label, выше специфичность) перебивал
   margin:0 auto у .dropzone--sm, обнуляя центрирование квадрата лого — та же природа
   бага, что и остальные "тихие" переопределения этой сессии, просто через margin,
   не display. */
.field .dropzone--sm { margin: 0 auto; }
.business-field-confirm { margin-top: 8px; }
.auth-modal-form .field:has(.dropzone--sm) { align-items: center; }

/* --- Кастомный выпадающий список (замена native <select>, см. app.js data-custom-select) --- */
.custom-select { position: relative; width: 100%; }
/* Нативный select спрятан ЗА кастомным списком (нужен только для формы/FormData) — просто
   [hidden] тут не хватает: и общее правило `select {...}`, и `.auth-modal-form select {...}`
   задают display:block на уровне автора, который перебивает UA-дефолт [hidden]{display:none}
   (та же ловушка, что уже была с .topbar-actions в этой сессии). */
.custom-select select[data-custom-select-native] { display: none !important; }
.custom-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 14px; cursor: pointer;
}
.custom-select-trigger-label { flex: 1; text-align: center; }
.custom-select-trigger::after {
  content: ""; flex-shrink: 0; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg); translate: 0 -2px; transition: transform 0.15s ease;
}
.custom-select.is-open .custom-select-trigger::after { transform: rotate(225deg); translate: 0 2px; }
.custom-select-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 220px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: var(--bg-card-2, #1a1a22); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.custom-select-option {
  padding: 9px 10px; border-radius: 7px; font-size: 14px; color: var(--text);
  cursor: pointer; text-align: left;
}
.custom-select-option:hover { background: var(--accent-glow); }
.custom-select-option.is-selected { background: var(--accent-glow); color: var(--accent-2); font-weight: 600; }

/* --- Локации в мастере онбординга (шаг "Нейроагент") — несколько повторяемых рядов --- */
#setup-locations-list { display: flex; flex-direction: column; gap: 10px; }
.setup-location-row { display: flex; flex-direction: column; gap: 8px; }
.setup-location-row input[type=text] { flex: 1; min-width: 0; margin: 0; }
.setup-add-location-btn {
  display: block; margin-top: 10px; padding: 0;
  background: none; border: none; color: var(--accent-2);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.setup-add-location-btn:hover { text-decoration: underline; }
button, .button {
  display: inline-block; background: var(--accent); color: #0a0a0a; border: none;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
button:hover, .button:hover { background: var(--accent-2); color: #0a0a0a; }
button:active, .button:active { transform: scale(0.96); }
.platform-grid { display: grid; gap: 16px; }
.platform-card { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--bg-card); }
.photo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ref-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--accent-2); font-size: 14px; margin-bottom: 8px; }
summary.button-summary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0a0a0a; border: none; width: fit-content;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 16px; list-style: none;
}
summary.button-summary::-webkit-details-marker { display: none; }
summary.button-summary:hover { background: var(--accent-2); color: #0a0a0a; }
.inline-form { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-top: 8px; background: var(--bg-card); }
.tag {
  display: inline-block; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; margin: 0 6px 6px 0;
}
.tag:not(.tag-active):hover { background: var(--bg-card); color: var(--text); border-color: var(--accent-2); }
.location-picker { margin-bottom: 12px; }
.rubric-checks { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.radio-row { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; }
.radio-row input { width: auto; margin-right: 4px; }

.business-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.inline-switch { margin: 0; }
.inline-switch .tag { border: none; cursor: pointer; font: inherit; }
.tag-active { background: var(--text); border-color: var(--text); color: #0a0a0a; font-weight: 700; }
.tab-switch { display: flex; gap: 8px; }
.tab-switch .tag { border: none; cursor: pointer; font: inherit; margin: 0; }

.character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 16px 0; }
.character-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-card); }
.character-photo { aspect-ratio: 1; }
.character-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.character-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.character-card-footer strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-toggle-form { margin: 0; }
.status-pill { border: none; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.status-pill--lg { padding: 8px 18px; font-size: 14px; }
.status-on { background: rgba(76, 175, 80, 0.18); color: #4caf50; }
.status-off { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; }

.platform-row-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.platform-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
}
.platform-row-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.platform-row-icon svg { width: 22px; height: 22px; }
.platform-row-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.platform-row-text { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; color: #fff; }
.platform-icon-youtube { background: #ff0000; }
.platform-row-name { flex: 1; font-size: 14px; font-weight: 600; }
.platform-row-action { margin: 0; }
.platform-connect-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--text); color: #0a0a0a; border: none;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.platform-connect-btn:hover { background: var(--accent-2); color: #0a0a0a; }
.platform-connect-btn-on { background: var(--bg-card-2); color: #4caf50; border: 1px solid rgba(76, 175, 80, 0.4); }
.platform-connect-btn-on:hover { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); }

.draft-carousel { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.draft-carousel::-webkit-scrollbar { display: none; }
.video-draft-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--bg-card); flex: 0 0 240px; scroll-snap-align: start; }
.draft-video { width: 100%; max-width: 260px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; display: block; margin: 8px 0; background: #000; }
.draft-video-placeholder {
  width: 100%; max-width: 260px; aspect-ratio: 9 / 16; border-radius: 10px; margin: 8px 0;
  background: var(--bg-card-2, #161616); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12px;
}
.draft-video-placeholder .hint { margin: 0; }
.draft-post-image { aspect-ratio: 1 / 1; }
.draft-kind-badge {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px; background: var(--bg-card-2, #161616);
  border: 1px solid var(--border); margin-bottom: 4px;
}
.draft-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 8px; }
.draft-actions form { margin: 0; }
.video-draft-card .hint { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Локации персонажа, витрина (как у голосов) --- */
.location-library-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.location-library-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 96px; padding: 10px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-card); text-align: center;
}
.location-library-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.location-photo-remove-form { position: absolute; top: 4px; right: 4px; margin: 0; }
.location-photo-remove {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: none;
  background: rgba(11, 11, 12, 0.75); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.location-photo-remove:hover { background: var(--danger); color: #fff; }
.location-delete-form { position: absolute; top: 4px; left: 4px; margin: 0; z-index: 1; }
.location-delete-btn {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; border: none;
  background: var(--danger); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.location-delete-btn:hover { background: #ff5f5f; }
.location-delete-btn[hidden] { display: none; }
.location-library-generated {
  width: 64px; height: 64px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-2); border: 1px dashed var(--border); font-size: 20px; color: var(--text-muted);
}
.location-library-card strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
a.location-library-card { color: inherit; text-decoration: none; }
a.location-library-card:hover { border-color: var(--accent-2); }
.location-library-card-link { display: contents; color: inherit; text-decoration: none; }
.location-library-card:has(.location-library-card-link:hover) { border-color: var(--accent-2); }
.location-library-toggle-form { margin: 2px 0 0; }

/* --- Рубрика → локация(и), карточки вместо сырых чекбоксов --- */
.rubric-location-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.rubric-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--bg-card); }
.rubric-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rubric-card-head input { width: auto; }
.location-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.location-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; padding: 8px; margin: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card-2); text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.location-chip input { position: absolute; opacity: 0; pointer-events: none; }
.location-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.location-chip-generated {
  width: 56px; height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); border: 1px dashed var(--border); font-size: 18px; color: var(--text-muted);
}
.location-chip span:last-child { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.location-chip:hover, .location-chip:has(input:checked) { border-color: var(--accent); box-shadow: none; }
.location-chip:has(input:checked) span:last-child { color: var(--text); }
.location-mode-panel { margin-top: 4px; }

/* --- Карточки голосов с плеером --- */
.media-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.media-toggle-option { display: flex; flex-direction: column; gap: 10px; }
.media-toggle-option video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--border); background: #000;
}
.media-toggle-option form { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-width: 480px) { .media-toggle-grid { gap: 8px; } }
/* На широком экране 9:16-видео растягивалось до полной ширины колонки (могло
   выйти за 500-600px в высоту) — на десктопе ограничиваем реальную ширину
   превью, чтобы блок B-roll/Субтитры не занимал пол-экрана по вертикали. */
@media (min-width: 700px) {
  .media-toggle-option { align-items: center; }
  .media-toggle-option video { width: 100%; max-width: 190px; }
}

.toggle-switch {
  width: 52px; height: 28px; border-radius: 14px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border-strong, var(--border)); background: var(--bg-card-2, var(--bg-card));
  position: relative; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-muted); transition: transform 0.15s ease, background 0.15s ease;
}
.toggle-switch.is-on { background: var(--accent); border-color: var(--accent); }
.toggle-switch.is-on .toggle-switch-knob { transform: translateX(24px); background: #0a0a0a; }
.toggle-switch-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted);
}
.toggle-switch.is-on ~ .toggle-switch-label, .media-toggle-option form:has(.toggle-switch.is-on) .toggle-switch-label { color: var(--text); }
/* Галочки услуг бизнеса — чипы в несколько колонок, а не длинный столбик:
   в нишах вроде стоматологии услуг до десяти. */
.service-checks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 12px; margin: 8px 0 4px;
}
.service-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.service-check input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }

.voice-card-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; margin: 12px 0; padding-bottom: 4px; }
.voice-card-grid .voice-card { flex-shrink: 0; }
.voice-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  width: 150px; padding: 12px; margin: 0; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card-2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.voice-card input { position: absolute; opacity: 0; pointer-events: none; }
.voice-card:hover, .voice-card:has(input:checked) { border-color: var(--accent); box-shadow: none; }
.voice-card-name { font-size: 14px; font-weight: 700; }
.voice-card-tag { font-size: 11px; color: var(--text-muted); }
.voice-play { display: flex; align-items: center; gap: 6px; }
.voice-play-btn {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #0a0a0a; font-size: 11px; cursor: pointer;
}
.voice-play-disabled .voice-play-btn { background: var(--border); color: var(--text-muted); cursor: not-allowed; }
.voice-waveform { display: flex; align-items: center; gap: 2px; height: 16px; flex: 1; }
.voice-waveform i { display: block; width: 2px; border-radius: 1px; background: var(--text-muted); opacity: 0.6; }
.voice-waveform i:nth-child(1) { height: 40%; } .voice-waveform i:nth-child(2) { height: 90%; }
.voice-waveform i:nth-child(3) { height: 60%; } .voice-waveform i:nth-child(4) { height: 100%; }
.voice-waveform i:nth-child(5) { height: 50%; } .voice-waveform i:nth-child(6) { height: 80%; }
.voice-waveform i:nth-child(7) { height: 35%; } .voice-waveform i:nth-child(8) { height: 65%; }
.voice-card:has(input:checked) .voice-waveform i { background: var(--accent-2); opacity: 1; }

/* --- Скролл-анимации: нативная замена Framer Motion, см. DESIGN.md ---
   .reveal-group автоматически помечает своих ПРЯМЫХ детей классом .reveal и
   раздаёт им --d по порядку (стаггер), сами .reveal тоже можно ставить
   вручную с inline --d для точного контроля порядка (см. hero). */
.reveal {
  opacity: 0; translate: 0 28px;
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), translate 0.7s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in-view { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; transition: none; }
  .hero-compact-video { display: none; }
}

/* --- Лендинг --- */
.container.landing { max-width: 1080px; width: 100%; min-width: 0; }
@media (min-width: 900px) {
  body:not(.is-cabinet) .container.landing { max-width: 1160px; }
  body:not(.is-cabinet) .feature-carousel:not(.feature-carousel--compact):not(.feature-carousel--portrait) .feature-card {
    flex: 0 0 min(340px, 38%);
    max-width: 360px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    border-radius: 18px;
  }
  body:not(.is-cabinet) .hero-full { margin-bottom: 72px; }
  body:not(.is-cabinet) .hero-carousel { border-radius: 16px; }
}

/* Hero — первый экран целиком: видео на весь блок фоном, подпись лежит
   поверх видео справа (затемнение градиентом под текстом для читаемости). */
.hero {
  position: relative; width: 100vw; margin: -24px calc(50% - 50vw) 0;
  min-height: 100vh; overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, transparent 35%, rgba(8, 7, 13, 0.55) 60%, rgba(8, 7, 13, 0.88) 100%);
}
.hero-video-caption {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 100vh; margin: 0; padding: 24px 6vw; text-align: right;
  font-size: clamp(24px, 3.2vw, 42px); font-weight: 800; letter-spacing: -0.01em;
}
@media (max-width: 640px) {
  .hero-video-caption { justify-content: center; text-align: center; padding: 24px; }
}
/* Горизонтальная карусель карточек продуктов — одинаково на ПК и телефоне:
   на телефоне — обычный свайп вбок (нативный overflow-x + scroll-snap, без
   кастомной scroll-математики — именно она была источником всех багов со
   стопкой), на ПК вдобавок кнопка-стрелка справа, прокручивающая к
   следующей карточке. */
.feature-carousel { position: relative; margin: 40px 0; min-width: 0; max-width: 100%; }
.feature-grid {
  display: flex;
  gap: 20px;
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  scrollbar-width: none;
  min-width: 0;
  max-width: 100%;
}
.feature-grid::-webkit-scrollbar { display: none; }
.feature-card {
  flex: 0 0 86%;
  max-width: 420px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-decoration: none;
  color: var(--text);
}
/* nth-child по цветам — только исходная витрина лендинга (.feature-carousel без
   --compact/--portrait). Кабинетные варианты (бизнесы/нейроагенты/товары) сюда не
   попадают — там всегда тёмный фон карточки, а color:#0a0a0a из этих правил делал
   название бизнеса нечитаемым, если оно оказывалось вторым ребёнком в сетке. */
.feature-carousel:not(.feature-carousel--compact):not(.feature-carousel--portrait) .feature-card:nth-child(1) { background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card)); }
.feature-carousel:not(.feature-carousel--compact):not(.feature-carousel--portrait) .feature-card:nth-child(2) { background: var(--accent); color: #0a0a0a; }
.feature-carousel:not(.feature-carousel--compact):not(.feature-carousel--portrait) .feature-card:nth-child(3) { background: linear-gradient(160deg, var(--bg-card), #121214); }
.feature-carousel:not(.feature-carousel--compact):not(.feature-carousel--portrait) .feature-card:nth-child(2) .feature-cta { color: #0a0a0a; }
.feature-eyebrow {
  display: block; margin-bottom: 18px;
  font: 700 12px/1 "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.feature-card:nth-child(2) .feature-eyebrow { color: rgba(10, 10, 10, 0.55); }
/* Длинные разворачиваемые абзацы (Подробнее о продукте) прячем — не нужны
   в формате карточки карусели, список с галочками остаётся виден. */
.feature-carousel .feature-details-toggle,
.feature-carousel .feature-details { display: none; }
.feature-carousel .feature-image-slot { margin-top: 22px; }
.feature-carousel .feature-list { margin-bottom: 4px; gap: 14px; }
.feature-carousel .feature-card h3 { margin-bottom: 12px; }
.feature-carousel .feature-card p { margin-bottom: 22px; }
/* Кнопки — по бокам ленты (паттерн Netflix/Amazon): прозрачный на события
   слой на всю карусель, сами кнопки внутри него — снова кликабельны и лежат
   по левому/правому краю, по центру по вертикали. Лежат поверх карточек
   (position:absolute), высоты ленты не занимают. */
.feature-carousel-nav {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.feature-carousel-prev,
.feature-carousel-next {
  pointer-events: auto;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 11, 12, 0.78); color: #fff; border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 18px; line-height: 1; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  margin: 0 8px;
}
.feature-carousel-prev:hover, .feature-carousel-next:hover { background: var(--accent); color: #0a0a0a; }
.feature-carousel-prev:disabled, .feature-carousel-next:disabled { opacity: 0; pointer-events: none; }

/* Стрелки остаются по краям — но у узких каруселей (бизнесы/нейроагенты, там
   видно сразу 2-3 карточки) лента получает "карман" под саму кнопку, чтобы
   она сидела в пустом месте, а не поверх крайней карточки (клик по краю
   карточки раньше на самом деле попадал по стрелке). На широкой карусели
   лендинга (одна карточка почти на весь экран) карман не помогает — карточка
   всё равно проезжает под стрелкой при скролле, а карман только сжимает её
   по ширине, поэтому там его не делаем. */
.feature-carousel--compact .feature-grid { padding-left: 52px; padding-right: 52px; }

/* Видео на согласовании — на телефоне просто свайп, кнопки только на ПК
   (на узком экране стрелки поверх видео мешали бы его собственным контролам). */
.feature-carousel--desktop-nav { margin: 12px 0; }
.feature-carousel--desktop-nav .feature-carousel-nav { display: none; }
@media (min-width: 641px) {
  .feature-carousel--desktop-nav .feature-carousel-nav { display: flex; }
}

/* Компактный вариант — карточки бизнесов/нейроагентов в кабинете (мельче,
   без брендовых цветов по индексу, как у карточек продуктов на лендинге). */
.feature-carousel--compact .feature-grid { gap: 12px; }
.feature-carousel--compact .feature-card {
  flex: 0 0 148px; max-width: 148px; padding: 16px;
  border-radius: 18px; box-shadow: none; border: 1px solid var(--border);
  background: var(--bg-card);
}
.feature-carousel--compact .feature-card.is-active { border-color: var(--accent); background: var(--bg-card-2); }

/* Бизнесы/нейроагенты/товары в кабинете: стрелки-карусель тут были нужны только пока
   не помещалось на телефонной ширине (там и так остаётся чистый свайп пальцем — общее
   правило ниже прячет .feature-carousel-nav на <640px). На десктопе места достаточно,
   чтобы карточки просто переносились на следующую строку — обычная сетка со скроллом
   страницы вниз, без бессмысленных стрелок ради одной-двух карточек (решение сессии
   2026-09-08, поймано на живом тесте создания бизнеса). */
@media (min-width: 641px) {
  .feature-carousel--compact .feature-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .feature-carousel--compact .feature-grid { padding-left: 0; padding-right: 0; }
  .feature-carousel--compact .feature-carousel-nav { display: none; }
}
.business-card-icon {
  width: 100%; aspect-ratio: 1; border-radius: 12px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: linear-gradient(160deg, var(--accent-glow), var(--bg-card-2));
  overflow: hidden;
}
.business-card-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.business-card-name {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}
@media (max-width: 640px) {
  .feature-carousel--compact .feature-card {
    flex: 0 0 min(70vw, 200px);
    max-width: min(70vw, 200px);
  }
  .business-card-name { white-space: normal; }
}
.business-card-niche { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.business-card-active-badge {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-glow); color: var(--accent-2); font-size: 11px; font-weight: 700;
}
.business-card-settings {
  display: block; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--accent-2); text-decoration: none;
}
.business-card-settings:hover { text-decoration: underline; }
.feature-carousel--compact .character-card-photo { aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.feature-carousel--compact .character-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Нейроагенты — вертикальные карточки (под формат видео, которое они снимают),
   в отличие от квадратных карточек бизнеса. Фото — на всю карточку, без
   внутренних отступов (постер), имя и статус лежат поверх фото на затемнении
   снизу — так должно выглядеть у любого персонажа с фото, не только у одного
   тестового. */
.feature-carousel--portrait .feature-card { flex: 0 0 128px; max-width: 128px; }
.feature-carousel--portrait .business-card-icon { aspect-ratio: 9 / 16; }
.feature-carousel--portrait .feature-card:has(.character-card-photo) {
  position: relative; padding: 0; overflow: hidden;
  aspect-ratio: 9 / 16;
}
.feature-carousel--portrait .character-card-photo {
  position: absolute; inset: 0; margin: 0; border-radius: 0;
  aspect-ratio: auto;
}
.feature-carousel--portrait .character-card-photo img,
.feature-carousel--portrait .feature-card:has(.character-card-photo) .feature-image-slot {
  width: 100%; height: 100%; border-radius: 0; border: none; margin: 0;
}
.feature-carousel--portrait .character-card-footer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 32px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(8, 7, 13, 0.92) 70%);
}
.feature-carousel--portrait .character-card-footer .business-card-name { color: #fff; }
.feature-carousel--portrait .character-toggle-form { margin: 0; }
/* Карточка-кнопка переключения бизнеса — form.feature-card оборачивает
   button, сбрасываем базовые стили button/.button, чтобы кнопка выглядела
   как обычное содержимое карточки, а не как акцентная плашка. */
.feature-card-switch-btn {
  all: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; cursor: pointer; color: inherit; text-align: left; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
/* `all: unset` выше снимает только СВОИ стили кнопки, но не мешает более поздним
   правилам: глобальное `button:hover { background: var(--accent-2); color: #0a0a0a }`
   (специфичность 0,1,1) выигрывало у `.feature-card-switch-btn` (0,1,0) и заливало
   карточку бизнеса светлым при наведении/нажатии. Гасим явно — карточка тёмная
   всегда, а сигнал наведения даёт рамка на самой карточке (ниже). */
.feature-card-switch-btn:hover,
.feature-card-switch-btn:active,
.feature-card-switch-btn:focus {
  background: transparent;
  color: inherit;
  transform: none;
}
.feature-card:has(.feature-card-switch-btn):hover { border-color: var(--accent-2); }

/* Плавное нажатие вместо резкой мобильной подсветки по умолчанию (та же жалоба на
   "обрубыш" — угловатая вспышка тапа не по форме скруглённой карточки). */
.feature-card:has(.feature-card-switch-btn) { transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
.feature-card:has(.feature-card-switch-btn):active { transform: scale(0.96); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-glow); font-size: 20px; margin-bottom: 16px;
}
.feature-image-slot {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.feature-image-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.feature-card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; }
.feature-card p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feature-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.feature-list li::before { content: "✓"; color: var(--accent-2); font-weight: 700; }
.feature-cta { margin-top: 18px; font-size: 13px; font-weight: 700; color: var(--accent-2); }

.feature-launch { position: relative; display: block; overflow: hidden; }
.feature-launch img { transition: filter 0.15s ease; }
.feature-launch-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 7, 13, 0.55);
  color: #fff; font-weight: 700; font-size: 17px;
  opacity: 0; transition: opacity 0.15s ease;
}
.feature-launch:hover, .feature-launch:focus-visible {
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.feature-launch:hover .feature-launch-overlay,
.feature-launch:focus-visible .feature-launch-overlay { opacity: 1; }
.feature-launch:hover img, .feature-launch:focus-visible img { filter: brightness(0.62); }

.feature-details-toggle {
  display: block; margin-top: 18px; padding: 0;
  background: none; border: none; color: var(--accent-2);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.feature-details-toggle:hover { text-decoration: underline; }
.feature-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.feature-details p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.feature-details p:last-child { margin-bottom: 0; }

.creative-panel-start { display: flex; justify-content: center; padding: 12px 0; }
.pill-accent-blue {
  background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.7);
  padding: 14px 32px; font-size: 15px; font-weight: 700;
}
.pill-accent-blue:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

/* Три карточки внахлёст под наклоном + "парение" (решение сессии — скетч на бумаге:
   видео слева/справа под углом, бейдж "Создай ID" в центре чуть приподнят). Ширины —
   clamp() от vw, не фиксированный брейкпоинт: на любой ширине телефона карточки сами
   пропорционально уменьшаются и остаются на экране, даже с учётом того, что повёрнутый
   прямоугольник визуально шире своего исходного width (см. rotate ниже). */
.showcase-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  margin: 56px 0;
  padding: 28px 12px;
}
.showcase-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.7);
  animation: showcase-float 5s ease-in-out infinite;
}
.showcase-card--left,
.showcase-card--right {
  width: clamp(76px, 22vw, 160px);
  aspect-ratio: 9 / 16;
  z-index: 1;
}
.showcase-card--left { rotate: -9deg; animation-delay: 0s; }
.showcase-card--right { rotate: 9deg; animation-delay: 1.4s; }
.showcase-card--badge {
  width: clamp(64px, 18vw, 120px);
  aspect-ratio: 3 / 4;
  rotate: -4deg;
  translate: 0 -10px;
  z-index: 2;
  animation-delay: 0.7s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; text-align: center; text-decoration: none; cursor: pointer;
}
.showcase-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-card-id-icon {
  width: clamp(24px, 6vw, 32px); height: clamp(24px, 6vw, 32px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: #0a0a0a; font-size: clamp(14px, 3.4vw, 18px); font-weight: 700;
  line-height: 1;
}
.showcase-card-id-label {
  font-family: var(--font); font-weight: 800; font-size: clamp(11px, 2.6vw, 13px); color: var(--text);
}
@keyframes showcase-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.showcase-card--badge { animation-name: showcase-float-badge; }
@keyframes showcase-float-badge {
  0%, 100% { translate: 0 -10px; }
  50% { translate: 0 -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-card, .trust-tour-stage { animation: none; }
}

/* Десктопный масштаб hero-карточек (решение сессии 2026-08-21) — clamp() выше
   был настроен под мобильный экран (потолок 120-160px), на широком десктопе
   (контейнер .landing до 1080px) карточки оставались мелкими относительно
   ширины страницы, вокруг них — заметная пустота. Поднимаем потолок только от
   641px и шире, мобильная раскладка не трогается. */
@media (min-width: 641px) {
  .showcase-card--left, .showcase-card--right { width: clamp(160px, 20vw, 240px); }
  .showcase-card--badge { width: clamp(120px, 15vw, 180px); }
  .showcase-card-id-icon { width: clamp(32px, 4vw, 44px); height: clamp(32px, 4vw, 44px); font-size: clamp(18px, 2.4vw, 24px); }
  .showcase-card-id-label { font-size: clamp(13px, 1.6vw, 16px); }
  .showcase-cards { gap: 24px; }
}

/* --- Иконки соцсетей (переиспользуются в hero, см. .hero-full-platforms) --- */
.autopost-platform-icon {
  width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.autopost-platform-icon svg { width: 26px; height: 26px; }
.autopost-platform-icon--img { background: transparent; }
.autopost-platform-icon--img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* --- Экономика: сравнение с наймом SMM-специалиста --- */
.savings-section { margin: 56px 0; }
.savings-section h2 { font-size: 22px; margin: 0 0 20px; text-align: center; }
/* Сравнение с SMM-агентством (решение сессии 2026-08-21, четвёртая попытка —
   сначала таблица только с ценой, потом "VS" построчно, потом таблица по всем
   критериям — везде были проблемы либо с мобильной вёрсткой, либо визуально не
   нравилось). Теперь два блока друг под другом: сверху агентство с красными
   крестиками у каждого пункта, снизу Indrik с зелёными галочками — та же
   восьмёрка критериев, просто не сведённая построчно, а как два списка
   "минусы / плюсы". Сама по себе адаптивна, брейкпоинты не нужны. */
.savings-compare {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
}
.savings-compare-col {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  background: var(--bg-card);
}
.savings-compare-col h3 {
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}
.savings-compare-us {
  border-color: var(--accent);
  box-shadow: none;
}
.savings-compare-us h3 { color: var(--accent); }
.savings-compare-list { list-style: none; margin: 0; padding: 0; }
.savings-compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}
.savings-icon { flex-shrink: 0; font-weight: 700; line-height: 1.4; }
.savings-icon-no { color: #e5484d; }
.savings-icon-yes { color: #3dd68c; }
/* На ПК — рядом (минусы СММ слева, плюсы Indrik справа), а не друг под другом: на
   узких экранах вертикальная колонка нужна, на широких только тратит впустую место. */
@media (min-width: 900px) {
  .savings-compare {
    flex-direction: row;
    align-items: stretch;
    max-width: 920px;
  }
  .savings-compare-col { flex: 1 1 0; }
}

/* --- Тарифы, встроенные в лендинг (переиспользуют .pricing-grid/.pricing-card) --- */
.landing-pricing { margin: 56px 0; }
.landing-pricing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.landing-pricing-head h2 { font-size: 22px; margin: 0; }
/* Карточки тарифов на лендинге — светлые (тот же тёплый бежевый токен, что и
   у чётных строк trust-grid), в отличие от тёмных карточек /pricing и сравнения
   с SMM-специалистом, которые не трогаем. */
.landing-pricing .pricing-card {
  background: var(--accent-2); border-color: transparent; color: #0a0a0a;
}
.landing-pricing .pricing-card-label,
.landing-pricing .pricing-card-tagline,
.landing-pricing .pricing-card-period { color: rgba(10, 10, 10, 0.58); }
.landing-pricing .pricing-card-features { color: #0a0a0a; }
.landing-pricing .pricing-card-feature-off { color: rgba(10, 10, 10, 0.45); }
.landing-pricing .pricing-card-highlight {
  border-color: #0a0a0a; box-shadow: 0 0 0 1px #0a0a0a;
}
.landing-pricing .pricing-card .pill { border-color: rgba(10, 10, 10, 0.32); color: #0a0a0a; }
.landing-pricing .pricing-card .pill:hover { border-color: #0a0a0a; }
.landing-pricing .pricing-card .pill-solid { background: #0a0a0a; color: #fff; }
.landing-pricing .pricing-card .pill-solid:hover { background: #000; color: #fff; }
.landing-pricing .pricing-card-examples-link { color: rgba(10, 10, 10, 0.58); }
.landing-pricing .pricing-card-examples-link:hover { color: #0a0a0a; }
/* Trust tour: одно превью + 4 пункта (клик меняет ролик и текст). */
.trust-tour {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 28px 40px;
  align-items: center;
  margin: 40px 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-card);
}
.trust-tour-stage {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.trust-tour-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Мобильная сетка карточек доверия (.trust-grid, скрыта на десктопе — см. правило
   @media(min-width:900px) ниже). Базовых правил для .trust-grid/.trust-strip*
   раньше не было вообще — видео (720×1280, портретное) рендерилось без
   ограничения размера в полный рост и вылезало далеко за экран, так что во
   вьюпорте была видна случайная средняя часть кадра (рука/рукав) вместо лица —
   найдено по скриншоту пользователя 2026-09-14. */
.trust-grid { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; }
.trust-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-card);
}
.trust-strip-media {
  flex: 0 0 92px;
  width: 92px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card-2);
}
.trust-strip-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-strip-text { flex: 1 1 auto; min-width: 0; }
.trust-strip-text strong { display: block; font-size: 16px; line-height: 1.3; margin: 0 0 4px; }
.trust-strip-text span { display: block; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
/* Карточка со списком ниш: видео+текст в ряд, сам список — отдельной строкой во всю
   ширину под ними. Иначе чипы (их уже 39) складывались в узкой текстовой колонке
   рядом с видео в очень длинный столбик и вытягивали лендинг. */
.trust-strip--stacked { flex-direction: column; align-items: stretch; gap: 12px; }
.trust-strip-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* Ниш будет становиться больше — ограничиваем высоту раскрытого списка, дальше скролл,
   чтобы карточка не росла бесконечно при каждой новой нише. */
.trust-niches-list { max-height: 168px; overflow-y: auto; }

.trust-tour-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.trust-tour-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trust-tour-tab {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.trust-tour-tab:hover {
  border-color: var(--accent-2);
  color: var(--text);
}
.trust-tour-tab.is-active {
  background: var(--accent-2);
  border-color: transparent;
  color: #0a0a0a;
}
.trust-tour-copy strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 10px;
}
.trust-tour-copy span {
  display: block;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}
.trust-niches { margin-top: 14px; }
.trust-niches[hidden] { display: none !important; }
.trust-niches summary {
  display: inline-block; cursor: pointer; color: var(--accent-2);
  font-size: 13px; font-weight: 700; list-style: none;
}
.trust-niches summary::-webkit-details-marker { display: none; }
.trust-niches summary::after { content: " ↓"; }
.trust-niches[open] summary::after { content: " ↑"; }
.trust-niches-intro { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.trust-niches-list {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.trust-niches-list li {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--text-muted);
}

@media (max-width: 800px) {
  .trust-tour {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .trust-tour-stage {
    max-width: 200px;
  }
  .trust-tour-tabs {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .trust-tour-tabs::-webkit-scrollbar { display: none; }
  .trust-tour-tab {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 13px;
  }
  .trust-tour-copy strong { font-size: 18px; }
}

/* Desktop trust-tour: один ролик + табы вместо мобильной сетки .trust-grid.
   По умолчанию скрыт — раскрывается только от 900px, где карточкам .trust-strip
   уже тесно в ряд. Размеры — оригинальные, как у партнёра (только видео свои). */
.trust-tour { display: none; }
@media (min-width: 900px) {
  .trust-grid { display: none; }
  .trust-tour {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
    gap: 28px 40px;
    align-items: center;
    margin: 40px 0;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--bg-card);
  }
  .trust-tour-stage {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card-2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }
  .trust-tour-video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .trust-tour-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .trust-tour-tabs { display: flex; flex-direction: column; gap: 8px; }
  .trust-tour-tab {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .trust-tour-tab:hover { border-color: var(--accent-2); color: var(--text); }
  .trust-tour-tab.is-active { background: var(--accent-2); border-color: transparent; color: #0a0a0a; }
  .trust-tour-copy strong { display: block; font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
  .trust-tour-copy span { display: block; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
  .trust-tour .trust-niches { margin-top: 14px; }
  .trust-tour .trust-niches[hidden] { display: none !important; }
}

.faq { margin: 48px 0; }
.faq h2 { font-size: 22px; margin: 0 0 16px; }
.faq-item {
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  padding: 4px 20px; margin-bottom: 10px;
}
.faq-item summary {
  padding: 16px 0; margin: 0; font-size: 15px; font-weight: 700; color: var(--text);
  cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--accent-2); font-weight: 400; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding-bottom: env(safe-area-inset-bottom, 0); }
.site-footer-inner {
  max-width: 1080px; margin: 0 auto; padding: 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  color: var(--text-muted); font-size: 13px;
}
.site-footer-links { display: flex; gap: 20px; }
.site-footer-links a { color: var(--text-muted); text-decoration: none; }
.site-footer-links a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .topbar {
    padding: 10px 12px;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .brand-link { flex-shrink: 0; min-width: 0; }
  .container { padding: 16px; }
  .container.cabinet { padding: 20px 16px 48px; }
  .hero { margin-top: -16px; }
  h1 { font-size: 24px; }
  fieldset { padding: 12px; }
  .weekday-grid { grid-template-columns: repeat(2, 1fr); }
  button, .button { width: 100%; text-align: center; }
  .form-actions button,
  .form-actions .button,
  .form-actions .pill,
  .panel .status-pill,
  .character-toggle-form button,
  .auth-modal-close { width: auto; }
  .platform-card { padding: 12px; }
  /* Раньше left+right вместе растягивали панель на всю ширину экрана — на телефоне
     она превращалась в сплошную полосу от края до края, тогда как на компьютере это
     компактная карточка у правого угла. max-width — просто страховка для очень узких
     экранов, сама панель остаётся такой же компактной, как на десктопе (решение
     сессии 2026-09-08). */
  .topbar-actions { right: 12px; max-width: calc(100vw - 24px); }
  .brand img { height: 20px; }
  .feature-carousel { margin: 20px 0; }
  .feature-carousel--compact .feature-card {
    flex: 0 0 132px;
    max-width: 132px;
    padding: 14px;
  }
  /* Нейроагенты на телефоне — сетка в 2 колонки со свободным вертикальным скроллом
     страницы, а не горизонтальная лента: на узком экране обрезанные стрелками карточки
     были не видны и требовали свайпа вбок, который легко не заметить. */
  .feature-carousel--portrait .feature-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-left: 0;
    padding-right: 0;
  }
  .feature-carousel--portrait .feature-card {
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }
  .feature-carousel-nav { display: none; }
  .hero-compact { margin-bottom: 16px; }
  .business-card-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* --- Кабинет / профиль --- */
.crumb {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 20px; font-size: 13px; color: var(--text-muted);
}
.crumb a { color: var(--accent-2); text-decoration: none; font-weight: 550; }
.crumb a:hover { color: var(--text); }
.crumb-sep { opacity: 0.45; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 0 0 24px;
}
.page-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; max-width: 52ch; }

.panel-stack { display: flex; flex-direction: column; gap: 16px; }
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.panel-link {
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
/* Выше специфичности body.is-cabinet .panel/.panel-title (тёмная тема кабинета) —
   добавляем тип a.panel-link, чтобы гарантированно выигрывать независимо от
   порядка правил в файле. */
body.is-cabinet a.panel-link {
  background: #0a0a0a;
  border: 2px solid #fff;
  color: #fff;
}
body.is-cabinet a.panel-link * { color: #fff; }
body.is-cabinet a.panel-link .panel-title { color: #fff; }
.panel-link::after {
  content: "→";
  position: absolute;
  top: 22px;
  right: 24px;
  color: #fff;
  font-size: 18px;
}
body.is-cabinet a.panel-link:hover { background: #1a1a1a; }
.character-name-row { display: flex; align-items: center; gap: 10px; }
.character-name-row h1 { margin: 0; }
.character-name-edit-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--border-strong, var(--border));
  background: transparent; color: var(--text-muted);
  font-size: 15px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.character-name-edit-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.character-name-edit-btn[hidden] { display: none; }
.character-name-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.character-name-form[hidden] { display: none; }
.character-name-form input[type=text] { flex: 1; min-width: 160px; }
.character-name-form .pill { width: auto; flex-shrink: 0; }
.character-name-form-actions { display: flex; gap: 8px; flex-shrink: 0; }
.inline-edit-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.inline-edit-row p { flex: 1; margin: 0; }
.inline-edit-row .character-name-edit-btn { margin-top: 2px; }
.inline-edit-row .character-name-form { flex-direction: column; align-items: stretch; }
.inline-edit-row .character-name-form textarea { width: 100%; box-sizing: border-box; }
.inline-edit-row .character-name-form .pill { align-self: flex-start; }
.panel-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.panel-head .panel-title { margin: 0; }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
.meta-item {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 0;
}
.meta-item dt {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 550;
}
.meta-item dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .meta-grid { grid-template-columns: 1fr; }
}

.stack-form { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.field { margin: 0 0 14px; }
.field > span {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 550;
  margin-bottom: 6px;
}
.field label { margin: 0; }
.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 8px;
}
.form-actions .btn-ghost,
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.form-actions .btn-ghost:hover,
.btn-ghost:hover {
  border-color: var(--accent-2);
  background: var(--accent-glow);
}

.flash {
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 14px;
  border: 1px solid var(--border);
}
.flash-ok { background: rgba(76, 175, 80, 0.12); border-color: rgba(76, 175, 80, 0.35); color: #7dcea0; }
.flash-err { background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.35); color: #ff8e8e; }

.panel .feature-carousel { margin: 0; }
.panel .feature-carousel-nav { margin-top: 12px; }
.cabinet-section-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.empty-inline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Studio theme: ONLY personal cabinet (body.is-cabinet) — same neutral palette as
   the public site (no separate brass/brown accent — removed per user request). --- */
body.is-cabinet {
  --bg: #0b0b0c;
  --bg-card: #141415;
  --bg-card-2: #1a1a1c;
  --border: #2a2a2e;
  --border-strong: #3a3a3f;
  --accent: #e8e4dc;
  --accent-2: #f5f2eb;
  --accent-glow: rgba(232, 228, 220, 0.14);
  --text: #f4f4f5;
  --text-muted: #a1a1aa;
  --danger: #d97777;
  --ok: #7aab93;
  --radius: 6px;
  --radius-lg: 10px;
  --font: "Fredoka", "DM Sans", "Segoe UI", sans-serif;
  --font-display: "Fredoka", "DM Sans", "Segoe UI", sans-serif;
  font-family: var(--font);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(232, 228, 220, 0.05), transparent 55%),
    var(--bg);
  color: var(--text);
}
body.is-cabinet .topbar {
  background: var(--bg);
  padding: 14px 28px;
}
body.is-cabinet .container.cabinet { max-width: 1160px; padding: 36px 32px 72px; }
body.is-cabinet .container.auth-shell { max-width: 440px; }
body.is-cabinet h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 44px);
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.1;
}
body.is-cabinet h1.voice-page-title { margin-top: -12px; }
body.is-cabinet .eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.plan-status {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 28px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
}
.plan-status-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  background: var(--accent); color: #0a0a0a;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.plan-status-period { color: var(--text-muted); font-size: 13px; }
.plan-status-empty { color: var(--text-muted); font-size: 14px; justify-content: space-between; }
.plan-status-empty .pill { flex-shrink: 0; }
body.is-cabinet .pill,
body.is-cabinet .btn,
body.is-cabinet button.btn,
body.is-cabinet .button {
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
body.is-cabinet .pill {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
body.is-cabinet .pill:hover {
  border-color: var(--accent-2);
  background: var(--accent-glow);
  color: var(--text);
}
body.is-cabinet .pill-danger {
  background: #e5484d;
  color: #fff;
  border-color: #e5484d;
}
body.is-cabinet .pill-danger:hover {
  background: #ff5f5f;
  border-color: #ff5f5f;
}
body.is-cabinet .pill-solid,
body.is-cabinet .btn-solid {
  background: var(--accent);
  color: #12110e;
  border-color: var(--accent);
}
body.is-cabinet .pill-solid:hover,
body.is-cabinet .btn-solid:hover {
  background: #fff;
  color: #12110e;
}
body.is-cabinet .btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
body.is-cabinet .btn-quiet:hover {
  border-color: var(--accent-2);
  background: var(--accent-glow);
}
body.is-cabinet .btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #12110e;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
body.is-cabinet .profile-icon-link {
  border-radius: var(--radius);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
body.is-cabinet .profile-icon-link:hover,
body.is-cabinet .profile-icon-link.is-active {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
body.is-cabinet .topbar-menu-toggle {
  border-radius: var(--radius);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
body.is-cabinet .topbar-menu-toggle:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}
body.is-cabinet .topbar-actions {
  background: #14140f;
  border-color: var(--border-strong);
  border-radius: var(--radius-lg);
}
body.is-cabinet input[type=text],
body.is-cabinet input[type=email],
body.is-cabinet input[type=password],
body.is-cabinet input[type=number],
body.is-cabinet input[type=url],
body.is-cabinet input[type=search],
body.is-cabinet textarea,
body.is-cabinet select {
  background: #0e0e0c;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 11px 12px;
}
body.is-cabinet input:focus,
body.is-cabinet textarea:focus,
body.is-cabinet select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
body.is-cabinet .panel {
  background: rgba(20, 20, 18, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
body.is-cabinet .panel-title {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
body.is-cabinet .crumb {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 28px; font-size: 12px; color: var(--text-muted);
  letter-spacing: 0.02em;
}
body.is-cabinet .crumb a { color: var(--text-muted); text-decoration: none; font-weight: 500; }
body.is-cabinet .crumb a:hover { color: var(--accent-2); }
body.is-cabinet .crumb-sep { opacity: 0.4; }
body.is-cabinet .page-head { margin: 0 0 28px; }
body.is-cabinet .page-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
/* Строка "название бизнеса + кнопка справа от него" — эйбров (ниша/бизнес) остаётся
   отдельной строкой НАД этой парой, а не третьим элементом в одном flex-ряду с ней:
   иначе кнопка равнялась по низу всего блока (эйбров+h1) и на длинных названиях
   зависала где-то на середине огромного заголовка, а не рядом с текстом (решение
   сессии 2026-09-08, dashboard.html/support_chat.html). */
body.is-cabinet .page-head-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 16px; flex-wrap: wrap;
}
/* Базовый .page-head (без модификатора) сам по себе flex-ряд с align-items: flex-end
   (нужно другим страницам, где в шапке title+description) — на дашборде/поддержке это
   же превращало эйбров в СОСЕДА заголовка в одном ряду, а не строку НАД ним, хотя в
   разметке эйбров и .page-head-row идут одно под другим (баг, пойманный на живом
   скриншоте: "ТУРАГЕНТСТВО" оказался сбоку от "PEGAS", а не сверху). Явно переводим
   именно эту комбинацию в колонку, не трогая .page-head в остальных шаблонах. */
body.is-cabinet .page-head--stack {
  display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 4px;
}
body.is-cabinet .cabinet-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 820px) {
  body.is-cabinet .cabinet-layout { grid-template-columns: 1fr; }
}
body.is-cabinet .data-table { width: 100%; border-collapse: collapse; }
body.is-cabinet .data-table th,
body.is-cabinet .data-table td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
body.is-cabinet .data-table tr:last-child th,
body.is-cabinet .data-table tr:last-child td { border-bottom: none; }
body.is-cabinet .data-table th {
  width: 34%;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-right: 16px;
}
body.is-cabinet .data-table td {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
body.is-cabinet .stack-form { display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
body.is-cabinet .field { margin: 0 0 14px; display: block; }
/* Выше специфичности body.is-cabinet .field выше — иначе поле лого в модалках
   (auth-modal-form) теряет display:flex, и align-self:center у .dropzone--sm
   перестаёт работать (обнаружено 2026-08-22: квадрат лого прижимался влево именно
   в кабинете, не на лендинге, где .field ещё не переопределён этим правилом). */
body.is-cabinet .auth-modal-form .field { display: flex; }
body.is-cabinet .field > span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
body.is-cabinet .form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 6px;
}
body.is-cabinet .flash {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  border: 1px solid var(--border);
}
body.is-cabinet .flash-ok { background: rgba(122, 171, 147, 0.1); border-color: rgba(122, 171, 147, 0.3); color: var(--ok); }
body.is-cabinet .flash-err { background: rgba(217, 119, 119, 0.1); border-color: rgba(217, 119, 119, 0.3); color: #e8a0a0; }
body.is-cabinet .auth-foot {
  margin: 18px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
body.is-cabinet .auth-foot a { color: var(--accent-2); text-decoration: none; font-weight: 600; }
body.is-cabinet .auth-foot a:hover { text-decoration: underline; color: var(--text); }
body.is-cabinet .section-gap { margin-top: 16px; }
body.is-cabinet .empty-inline { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }
body.is-cabinet .panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
body.is-cabinet .panel-head .panel-title { margin: 0; }
body.is-cabinet .panel .feature-carousel { margin: 0; }
body.is-cabinet .feature-carousel--compact .feature-card {
  border-radius: var(--radius-lg);
  background: #101011;
}
body.is-cabinet .feature-carousel--compact .feature-card.is-active {
  border-color: var(--accent-2);
  box-shadow: none;
}
/* Desktop: сетка вместо телефонной ленты; switcher — не квадрат на весь ряд */
@media (min-width: 900px) {
  body.is-cabinet .feature-carousel--compact .feature-grid {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-left: 0;
    padding-right: 0;
    gap: 14px;
  }
  body.is-cabinet .feature-carousel--compact .feature-carousel-nav { display: none; }
  body.is-cabinet .feature-carousel--compact:not(.feature-carousel--portrait) .feature-card {
    flex: 0 0 176px;
    max-width: 176px;
    padding: 14px;
  }
  body.is-cabinet .feature-carousel--compact:not(.feature-carousel--portrait) .business-card-icon {
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
  }
  body.is-cabinet .feature-carousel--portrait .feature-card {
    flex: 0 0 152px;
    max-width: 152px;
  }
  body.is-cabinet .feature-carousel--portrait .feature-card:has(.character-card-photo) {
    aspect-ratio: 9 / 16;
    min-height: 0;
  }
  body.is-cabinet .page-head,
  body.is-cabinet .panel-head,
  body.is-cabinet .form-actions {
    flex-wrap: wrap;
  }
  body.is-cabinet .form-actions .btn,
  body.is-cabinet .form-actions .btn-solid,
  body.is-cabinet .form-actions .btn-quiet,
  body.is-cabinet .page-head .btn,
  body.is-cabinet .page-head .btn-quiet,
  body.is-cabinet .panel-head .btn,
  body.is-cabinet .panel-head .pill {
    width: auto;
    flex: 0 0 auto;
  }
}
body.is-cabinet .status-pill {
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 4px 9px;
  font-size: 11px;
}
body.is-cabinet .status-pill--lg { padding: 8px 17px; font-size: 14px; }
body.is-cabinet .status-on { background: rgba(122, 171, 147, 0.14); color: var(--ok); border-color: rgba(122, 171, 147, 0.35); }
body.is-cabinet .status-off { background: rgba(217, 119, 119, 0.12); color: var(--danger); border-color: rgba(217, 119, 119, 0.3); }
@media (max-width: 640px) {
  body.is-cabinet .container.cabinet { padding: 24px 16px 56px; }
  body.is-cabinet h1 { font-size: 32px; }
  body.is-cabinet .form-actions .btn,
  body.is-cabinet .form-actions .btn-solid,
  body.is-cabinet .form-actions .btn-quiet,
  body.is-cabinet .page-head .btn-quiet { width: auto; }
}

/* --- Творческое видео: промпт-бар в духе pollo.ai — только общие цветовые токены
   (--bg-card/--border/--accent/...), НЕ токены bone/brass-темы (--radius и т.п.), чтобы
   один и тот же CSS корректно перекрашивался и в кабинете (body.is-cabinet), и на
   публичных страницах (те же имена токенов переопределены в :root с другими значениями). */
.creative-panel .empty-inline { margin-bottom: 14px; }
.creative-form { display: flex; flex-direction: column; gap: 12px; }
.creative-prompt-box {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.creative-prompt-box textarea {
  width: 100%;
  max-width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 4px 2px 12px;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.creative-prompt-box textarea:focus { outline: none; }
.creative-resolution-select { width: auto; align-self: flex-start; }
.creative-resolution-select .custom-select-trigger {
  width: auto; border-radius: 999px; padding: 5px 12px; font-size: 13px; gap: 6px;
}
.creative-resolution-select .custom-select-list { min-width: 100px; }
.creative-characters-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.creative-characters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.creative-character-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.creative-character-chip input { position: absolute; opacity: 0; pointer-events: none; }
.creative-character-chip:hover { border-color: var(--accent-2); }
.creative-character-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent-2);
  font-weight: 600;
}
.creative-attachments {
  /* Строка ВНУТРИ .creative-prompt-box (та же рамка, что и у textarea), не отдельный
     блок над ним — просьба сессии 2026-09-08. Идёт ПОСЛЕ textarea (по просьбе
     пользователя "+ снизу текста"), тонкая верхняя граница отделяет её от textarea
     визуально, оставаясь при этом одной карточкой. Ячейки маленькие (34px) — раньше
     "+" был размером с саму карточку (64px) и из-за этого читался как отдельный блок,
     а не как часть строки внутри неё. */
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.creative-photo-attach {
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px dashed var(--border-strong, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.creative-photo-attach:hover { border-color: var(--accent-2); color: var(--accent-2); }
/* Заполненная превьюшка — обычный div, не подписанный на клик (замена фото — через
   крестик-удаление, не через повторный клик по превью), курсор не должен звать нажать. */
.creative-photo-attach--filled { cursor: default; border-style: solid; }
.creative-photo-attach--filled:hover { border-color: var(--border-strong, var(--border)); color: var(--text-muted); }
.creative-photo-attach .dropzone-icon { font-size: 16px; line-height: 1; position: relative; top: 1px; }
.creative-photo-attach .dropzone-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.creative-attach-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid var(--bg-card, #141415);
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.creative-attach-remove[hidden] { display: none; }
.creative-generate-btn { width: 100%; padding: 13px 20px; font-size: 15px; font-weight: 700; }
.creative-error { color: #f87171; font-size: 14px; }

/* --- Карточки тарифов 720p/1080p (лендинг + страница примеров видео) --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
/* Было 4 карточки (см. git-историю); теперь 2 тарифа по разрешению (720p/1080p, решение
   сессии 2026-09-09) — .pricing-grid--2col держит их рядом на ПК без старого хака под 3
   колонки + растянутая последняя карточка, тот приём был нужен только для 4 карточек. */
.pricing-grid--2col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (min-width: 640px) {
  .pricing-grid--2col { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
}
/* Третья карточка "Посты" (решение сессии 2026-09-11) — на средних экранах остаётся
   2-в-ряд (Посты переносится под них), на широких хватает места на все три сразу. */
@media (min-width: 980px) {
  .pricing-grid--2col { grid-template-columns: repeat(3, minmax(0, 300px)); }
}
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pricing-card-highlight {
  border-color: var(--accent);
  box-shadow: none;
}
.pricing-card-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.pricing-card-tagline {
  font-size: 13px;
  color: var(--text-muted);
  margin: 2px 0 6px;
}
.pricing-card-price { display: flex; align-items: baseline; gap: 6px; }
/* font-family явно DM Sans — у Fredoka на жирном начертании (700) баг рендеринга цифр
   (горизонтальная черта поперёк числа), см. .chat-pricing-period-amount, решение
   сессии 2026-09-09. */
.pricing-card-amount { font-family: "DM Sans", "Segoe UI", sans-serif; font-size: 32px; font-weight: 700; }
.pricing-card-period { color: var(--text-muted); font-size: 14px; }
.pricing-card-price-secondary { margin-bottom: 10px; }
.pricing-card-price-secondary .pricing-card-amount { font-size: 20px; }
.pricing-card-periods { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 10px; }
.pricing-card-periods .pricing-card-price { margin-bottom: 0; }
.pricing-card-periods .pricing-card-amount { font-size: 22px; }
/* Площадки/модель/качество под ценами (решение сессии 2026-09-11: "напиши также
   соцсети для каждого тарифа и модели которые используются") — отдельный, приглушённый
   список НАД чекбоксовым списком фич, не смешивается с ним визуально. */
.pricing-card-meta {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.landing-pricing .pricing-card-meta {
  border-top-color: rgba(10, 10, 10, 0.14);
  color: rgba(10, 10, 10, 0.58);
}
.pricing-card-features {
  list-style: none;
  margin: 10px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}
/* Кнопка выбора тарифа всегда у нижнего края карточки, независимо от того, сколько
   строк заняли площадки/модель наверху (жалоба "видишь скачет" — три карточки в ряд
   растягиваются grid'ом до одной высоты, но раньше только .pricing-card-features{flex:1}
   ловил разницу, а разная высота блока "под ценами" выше нарушала выравнивание кнопки;
   margin-top:auto прибивает именно кнопку к низу, независимо от того, что выше неё —
   решение сессии 2026-09-11). */
.pricing-card .pill { margin-top: auto; }
.pricing-card-features li { padding-left: 18px; position: relative; }
.pricing-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}
.pricing-card-feature-off { color: var(--text-muted); }
.pricing-card-feature-off::before { content: "–" !important; color: var(--text-muted) !important; }
.pricing-card .pill { width: 100%; }
.pricing-card-examples-link {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
  text-decoration: none;
}
.pricing-card-examples-link:hover { text-decoration: underline; }

/* --- Страница примеров видео по тарифу (/pricing/examples/<tier>) --- */
.examples-back {
  display: inline-block;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 20px;
}
.examples-back:hover { text-decoration: underline; }
.examples-tier-head {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
}
.examples-title { font-size: 20px; margin: 0 0 16px; }
.examples-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.examples-video-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
}
.examples-video-card video { width: 100%; display: block; aspect-ratio: 9 / 16; object-fit: cover; }

/* --- Компактный hero на лендинге (решение сессии: не полноэкранное видео, а маленький
   тизер + сразу рабочий интерфейс ниже, по образцу Higgsfield/Pollo) --- */
/* --- Hero: видео-карусель во весь блок, заголовок+кнопка поверх (по образцу
   BytePlus/Dreamina — решение сессии), наши парящие карточки внахлёст на нижний край. --- */
.hero-full { margin: 8px 0 96px; }
.hero-carousel {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.hero-carousel-video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.hero-carousel-video:not(.is-active) { display: none; }
.hero-carousel-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.25) 40%, rgba(11,11,12,0.65) 100%);
}
.hero-carousel-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px;
  text-align: center;
}
/* Жирный гротеск (var(--font), не --font-display) намеренно — перекликается с логотипом
   Indrik (тоже жирный геометричный sans, не засечный шрифт остального сайта). Белый+тень
   всегда, независимо от темы — под видео яркость фона непредсказуема. */
.hero-full-headline {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  max-width: 18ch;
}
.hero-carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 1;
}
.hero-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.25);
  cursor: pointer;
}
.hero-carousel-dot.is-active { background: #fff; }
.showcase-cards--overlap {
  margin: -32px 0 0;
  position: relative;
  z-index: 2;
}
/* Текст про смысл ID — под карточками, внутри hero. Обычный текст, не карточка: короткая
   подпись (для кого ID) + строка про то, что дальше работает целая команда (сценарист,
   оператор, монтажёр) — раньше это объяснял отдельный блок final-cta, теперь живёт здесь. */
.hero-full-subtext {
  max-width: 46ch;
  margin: 20px auto 0;
  padding: 0 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.hero-full-subtext strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.hero-full-platforms { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; }
.autopost-platform-icon--sm { width: 34px; height: 34px; border-radius: 10px; }
.autopost-platform-icon--sm svg { width: 17px; height: 17px; }
.hero-full-platforms-hint { margin: 8px 0 0; text-align: center; color: var(--text-muted); font-size: 12px; }
/* Посты — второстепенное упоминание рядом с видео (главной фичей), не отдельный
   равнозначный заголовок — просьба сессии 2026-09-08 ("не придавай значимости"). */
.hero-full-platforms-hint--minor { margin-top: 2px; font-size: 11px; opacity: 0.65; }
@media (max-width: 640px) {
  .hero-carousel-video { aspect-ratio: 3 / 4; }
  .hero-full { margin-bottom: 80px; }
  .showcase-cards--overlap { margin-top: -20px; }
}

.closing-logo {
  display: flex; justify-content: center; align-items: center;
  padding: 72px 0 56px;
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.closing-logo img { height: clamp(64px, 16vw, 140px); width: auto; opacity: 0.96; }

/* --- Модалка входа/регистрации для гостя (клик по [data-requires-auth]) --- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-modal[hidden] { display: none; }
.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--bg-card-2) 0%, var(--bg-card) 48%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.auth-modal-box--wide { max-width: 420px; }
.setup-progress {
  display: flex;
  gap: 6px;
  margin: 0 28px 12px 0;
}
.setup-progress span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.2s ease;
}
.setup-progress span.is-active { background: var(--accent); }
.setup-progress span.is-done {
  background: var(--accent-2);
  opacity: 0.75;
}
.setup-steps {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-align: left;
}
.setup-platforms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; text-align: left; }
.setup-platform-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.setup-platform-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.setup-platform-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.setup-platform-row .autopost-platform-icon { width: 32px; height: 32px; border-radius: 9px; }
.setup-platform-row .autopost-platform-icon svg { width: 16px; height: 16px; }
.setup-platform-row .pill { margin: 0; flex-shrink: 0; }
.auth-modal-form textarea,
.auth-modal-form select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg, #0f0f14);
  color: var(--text);
  font: inherit;
}
.auth-modal-form .checkbox { flex-direction: row; align-items: flex-start; gap: 8px; }
.auth-modal-form .checkbox input { width: auto; margin-top: 3px; }
.confirm-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.confirm-modal-actions .pill { flex: 1; }
.auth-modal-box h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.auth-modal-box .hint { margin: 0 0 16px; }
.auth-modal-box--wide,
.auth-modal-box--wide h2,
.auth-modal-box--wide .hint { text-align: left; }
.auth-modal-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}
.auth-modal-tab {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}
.auth-modal-tab.is-active {
  background: var(--bg-card, #1a1a22);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.auth-modal-error {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(220, 60, 60, 0.15);
  color: #ff8a8a;
  font-size: 13px;
  text-align: left;
}
.auth-modal-form { text-align: left; }
.auth-modal-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.auth-modal-form .field input,
.custom-select-trigger {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg, #0f0f14);
  color: var(--text);
  font: inherit;
}
.custom-select-trigger { background: #0f0f14 !important; color: #f4f4f5 !important; }
.auth-modal-btn {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.auth-modal-btn:disabled { opacity: 0.6; cursor: wait; }

/* Сетка на 140px+ колонку сама решает раскладку: один провайдер (сейчас только
   Google) занимает всю ширину, а не половину строки — раньше сетка была жёстко на
   два столбца, и единственная кнопка выглядела зажатой на десктопе (на телефоне
   спасал отдельный @media-костыль, десктоп его не получал). */
.auth-social {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.auth-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #2a3542);
  background: var(--bg-elevated, #121820);
  color: var(--text, #e8eef4);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
}
.auth-social-btn:hover:not(.is-disabled) {
  border-color: var(--accent, #0066ff);
}
.auth-social-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Внутри — настоящий логотип провайдера (см. macros_auth.html). Раньше здесь был
   закрашенный квадрат-заглушка, который читался как битая картинка. */
.auth-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
}
.auth-social-icon svg { display: block; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--text-muted, #8b9bb0);
  font-size: 0.75rem;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, #2a3542);
}
.auth-panel .auth-social { margin-top: 4px; }

.topbar-actions button.pill {
  font: inherit;
  cursor: pointer;
}
button.feature-card {
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.auth-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.auth-modal-close:hover { color: var(--text); }
@media (max-width: 640px) {
  .auth-modal {
    align-items: flex-end;
    padding: 0;
  }
  .auth-modal-box {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
  }
  .auth-modal-box h2 { font-size: 24px; }
  .setup-progress { margin-right: 32px; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.support-thread {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.support-msg {
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
}
.support-msg p { margin: 4px 0 0; }
.support-msg-who { font-size: 12px; color: var(--text-muted); }
.support-msg--client { align-self: flex-end; }
.support-msg--ops { align-self: flex-start; }
.support-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

/* Ассистент-шар кабинета (тур по кнопкам первого визита + FAQ-чат) — см. static/orb.js.
   Цвет "белого свечения" — тот же --accent/--accent-glow, что уже есть в теме (тёплый
   off-white), не отдельный неоновый оттенок — чтобы не спорить с общим editorial-dark
   стилем сайта. */
/* Шар (z-index 500) сидел ВЫШЕ модалок (.auth-modal — та же разметка что и у мастера
   "бизнес→соцсети→..." — z-index 200) и перекрывал их кнопки ("Далее" и т.п.) —
   поймано на скриншоте живого теста (решение сессии 2026-09-08). Модалка на весь экран,
   так что пока она открыта, ассистенту всё равно нечего показывать под ней. */
body:has(.auth-modal:not([hidden])) .orb,
body:has(.auth-modal:not([hidden])) .orb-bubble,
body:has(.auth-modal:not([hidden])) .orb-chat-panel {
  display: none;
}
.orb {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 0 18px 4px rgba(232, 228, 220, 0.35), 0 0 40px 10px rgba(232, 228, 220, 0.16);
  will-change: transform;
  transform-style: preserve-3d;  /* иначе rotateX/rotateY колец схлопываются в плоскость */
}
.orb-core {
  display: block; position: absolute; inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 70%);
}
/* Три кольца, вращающиеся в разных плоскостях и с разной скоростью — из плоского
   круга получается объёмная сфера, при этом без картинок и без WebGL. Кольца
   декоративные (aria-hidden), клик всегда по самой кнопке. */
.orb-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
}
.orb-ring--1 { animation: orb-spin-1 3.2s linear infinite; }
.orb-ring--2 { animation: orb-spin-2 4.6s linear infinite; border-color: rgba(255, 255, 255, 0.5); }
.orb-ring--3 { animation: orb-spin-3 6.1s linear infinite; border-color: rgba(255, 255, 255, 0.32); }
@keyframes orb-spin-1 {
  0%   { transform: rotateY(0deg)   rotateX(18deg); }
  100% { transform: rotateY(360deg) rotateX(18deg); }
}
@keyframes orb-spin-2 {
  0%   { transform: rotateX(0deg)   rotateZ(28deg); }
  100% { transform: rotateX(360deg) rotateZ(28deg); }
}
@keyframes orb-spin-3 {
  0%   { transform: rotateY(0deg)   rotateZ(-40deg); }
  100% { transform: rotateY(-360deg) rotateZ(-40deg); }
}

.orb.orb-idle { animation: orb-bob 3.6s ease-in-out infinite; }

@keyframes orb-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -8px; }
}

/* Полёт шара к подсвечиваемой кнопке (см. orb.js::moveOrbTo): сам шар остаётся
   position: fixed в своём углу, а к цели уезжает трансформом — так не надо трогать
   раскладку страницы и легко вернуть его "домой" (transform: none). */
.orb.orb-travelling { transition: transform 0.55s cubic-bezier(0.34, 1.2, 0.5, 1); }
.orb.orb-travelling.orb-idle { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .orb-ring { animation: none; }
  .orb.orb-travelling { transition: none; }
}

.orb-highlight {
  position: relative;
  z-index: 5;
  border-radius: var(--radius, 12px);
  animation: orb-pulse 1.4s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 228, 220, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(232, 228, 220, 0); }
}

.orb-bubble {
  position: absolute;
  z-index: 501;
  max-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.orb-bubble p { margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 1.4; }
.orb-bubble-link { display: block; margin: -4px 0 10px; font-size: 13px; color: var(--accent-2, var(--accent)); }
.orb-bubble-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Тот же баг, что чинили у .orb-chat-panel: кнопки Пропустить/Понятно рождаются в
   разметке БЕЗ hidden (видны по умолчанию), а глобальное `button{display:inline-block}`
   всегда побеждает UA-правило `[hidden]{display:none}` независимо от специфичности —
   без этой строки скрытие через JS (bubbleSkip.hidden = true и т.п.) визуально ничего
   не меняло, и в режиме "ответ из чата" вместо одной кнопки "Понятно" были видны обе. */
.orb-bubble-actions button[hidden] { display: none; }

/* Раньше панель была того же тёмного оттенка, что и фон страницы под ней, — на любой
   странице тонула среди остальных тёмных карточек. Обводка+свечение в тон самому шару
   (--accent/--accent-glow, тот же тёплый off-white, что уже используется у выделенных
   карточек тарифов) визуально связывают панель с шаром, не вводя новый цвет вопреки
   editorial-dark стилю сайта. */
.orb-chat-panel {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 500;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--bg-card-2);
  border: 1px solid var(--accent);
  border-radius: 16px;
  box-shadow: 0 0 32px var(--accent-glow), 0 16px 44px rgba(0, 0, 0, 0.55);
  padding-top: 12px;
}
/* `display: flex` выше имеет тот же вес специфичности, что и `[hidden]` из UA-стиля
   браузера, а авторские правила всегда побеждают агентские независимо от специфичности
   — поэтому без этой строки панель игнорировала атрибут hidden и была видна всегда,
   даже когда JS его выставлял. Такого же свойства display на .orb-bubble/.orb нет —
   там hidden уже работал корректно. */
.orb-chat-panel[hidden] { display: none; }

/* Быстрые вопросы — компактные чипсы, переносятся на вторую строку (flex-wrap), а не
   горизонтальная прокрутка — иначе часть кнопок пряталась за краем панели и не было
   видно, что их вообще можно долистать. */
.orb-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.orb-quick-replies:empty { display: none; }
.orb-quick-reply {
  /* width:auto явно перебивает общее правило `button{width:100%}` из мобильного
     медиа-запроса (@media max-width:640px) — без этого каждая кнопка растягивалась
     на всю ширину панели, даже с коротким текстом типа "Вкл/Выкл". */
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.orb-quick-reply:hover { border-color: var(--accent-2, var(--accent)); }

/* Одна широкая пилюля ввода на всю ширину панели, кнопка отправки — маленький кружок
   со стрелкой прямо в её углу (по эскизу: не отдельная большая кнопка "Send"). */
.orb-chat-form {
  position: relative;
  padding: 10px 14px 14px;
}
.orb-chat-form input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  /* Справа внутри поля лежат сразу две кнопки (микрофон + стрелка), поэтому отступ
     больше обычного — иначе текст заезжает под них. */
  padding: 11px 100px 11px 16px;
  color: var(--text);
  font-size: 13px;
}
/* Квадратная кнопка отправки, а не голая стрелка: на телефоне в символ без фона
   попасть пальцем тяжело — нужна нормальная область нажатия (34px). Форма именно
   квадратная со скруглением, а не круг: круглая заливка рядом с самим шаром читалась
   как второй, лишний "шар" в интерфейсе. */
.orb-chat-send {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #0a0a0a;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.orb-chat-send:hover { background: var(--accent-2, var(--accent)); color: #0a0a0a; }
.orb-chat-send:active { transform: translateY(-50%) scale(0.94); }
/* Микрофон голосового ввода — рядом со стрелкой отправки. Пульсирует, пока слушает,
   чтобы было видно, что запись идёт. */
.orb-chat-mic {
  all: unset;
  box-sizing: border-box;
  /* Абсолютно внутри поля ввода, слева от стрелки отправки — форма для этого
     position: relative. В обычном потоке кнопка сваливалась под поле. */
  position: absolute;
  top: 50%;
  right: 62px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer;
  color: var(--text);
  opacity: 0.75;
}
.orb-chat-mic:hover { opacity: 1; color: var(--accent-2, var(--accent)); }
.orb-chat-mic:active { transform: translateY(-50%) scale(0.92); }
.orb-chat-mic[hidden] { display: none; }
.orb-chat-mic.is-listening { color: var(--accent); animation: orb-mic-pulse 1.1s ease-in-out infinite; }
@keyframes orb-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 228, 220, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(232, 228, 220, 0); }
}
@media (prefers-reduced-motion: reduce) { .orb-chat-mic.is-listening { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .orb.orb-idle { animation: none; }
  .orb-highlight { animation: none; box-shadow: 0 0 0 4px rgba(232, 228, 220, 0.45); }
}

@media (max-width: 480px) {
  .orb { width: 48px; height: 48px; right: 14px; bottom: 14px; }
  .orb-chat-panel { right: 10px; left: 10px; width: auto; bottom: 74px; }
  .orb-bubble { max-width: calc(100vw - 40px); }
}

/* Гость — по образцу Higgsfield: язык, "Тарифы" и "Регистрация" сразу в строке, без
   бургера и выпадающей панели (там всего 3 пункта, прятать нечего). На любой ширине,
   не только на телефоне — на десктопе бургер точно так же не нужен для трёх пунктов.
   "Войти" отдельной кнопкой не показываем — та же модалка регистрации открывается
   с вкладкой "Вход", переключить её можно там же одним касанием.
   Для залогиненного шапка остаётся как была (бургер + выпадающее меню). */
body.is-guest .topbar-menu-toggle { display: none; }
body.is-guest .topbar-actions {
  display: flex;
  position: static;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}
/* Высота языка была больше соседних пилюль — .lang-switch добавляет свою рамку и
   отступ ПОВЕРХ отступа .lang-current внутри, из-за двойного слоя паддинга бордер
   выходил на несколько пикселей выше "Тарифы"/"Регистрация" и строка "прыгала".
   Задаём всем трём одну и ту же высоту через box-sizing:border-box, а не гадаем
   с паддингами по отдельности. */
body.is-guest .topbar-actions .lang-switch,
body.is-guest .topbar-actions .pill {
  height: 38px;
  box-sizing: border-box;
}
body.is-guest .topbar-actions .lang-switch { padding: 0; }
body.is-guest .topbar-actions .lang-current { height: 100%; padding: 0 10px; }
/* "Регистрация" — тёмный текст на светлой заливке визуально читается тоньше, чем
   светлый текст на тёмном фоне у соседей ("Тарифы"), хотя вес шрифта тот же
   (оптическая иллюзия iridescence/irradiation) — компенсируем весом чуть выше. */
body.is-guest .topbar-actions .pill-solid { font-weight: 800; }
body.is-guest .topbar-actions [data-open-auth="login"] { display: none; }
@media (max-width: 640px) {
  body.is-guest .topbar-actions .pill { padding: 0 12px; font-size: 13px; }
  /* На узком телефоне флаг+полное название языка ("Български" и т.п.) + "Цены" +
     "Регистрация" в один ряд без гамбургера (см. правило выше — у гостя бургер скрыт
     специально) не помещаются и обрезаются по краю экрана (жалоба "точно ли влезают
     в телефонную версию", решение сессии 2026-09-11). Оставляем только флаг, полное
     название языка скрываем — самый узнаваемый элемент (флаг) остаётся, освобождает
     достаточно места для остальных двух пунктов. */
  body.is-guest .topbar-actions .lang-current span { display: none; }
  body.is-guest .topbar-actions .lang-current { padding: 0 8px; }
}
.profile-logout-row { display: flex; justify-content: flex-end; margin: 0 0 14px; }

/* --- Чат-первый кабинет (GET /dashboard, см. dashboard_chat.html/.js) --- */
/* Решение сессии 2026-09-09: бизнесы = отдельные "чаты" (по образцу списка диалогов
   ChatGPT/Grok) — сайдбар со списком, выдвижной на мобильном (по гамбургеру), постоянно
   открытый на ПК. Настройки (соцсети, ссылка на текстовые поля бизнеса) — под шестерёнкой,
   отдельно от основной ленты переписки, а не вперемешку с ней. */
/* Раньше .cabinet--chat никогда не срабатывал: .container.cabinet (0,2,0) забивал его
   padding/max-width (0,1,0) по специфичности — карточка чата всегда получала чужие
   28px/24px отступы и потолок 920px, отсюда "конверт" на ПК и лишние поля на мобильном.
   Фикс сессии 2026-09-10: dashboard_chat.html больше не добавляет класс "cabinet"
   к <main> вообще (см. container_class блок) — .cabinet--chat остаётся единственным
   автором padding/max-width для этой страницы. */
.cabinet--chat { padding: 0; max-width: none; }
.chat-layout {
  display: flex;
  height: 100dvh;
  min-height: 480px;
  background: #000;
}
.chat-sidebar-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 40;
}
.chat-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Чисто чёрный, не var(--bg-card-2) — решение сессии 2026-09-10: "сделай всё чёрным,
     как у Grok, только чат оставь серым". Пузыри сообщений и капсула ввода (var(--bg-
     card)) остаются серыми для контраста — это и есть тот самый "чат", который просили
     не трогать. */
  background: #000;
}
/* Лого переехало сюда из шапки чата (см. dashboard_chat.html) — здесь простор сайдбара
   не конкурирует за место с названием бизнеса, как это было в узкой шапке на мобильном.
   Тот же приём, что и .brand на лендинге — фиксированная высота, ширина по пропорциям. */
.chat-sidebar-brand { display: flex; justify-content: center; padding: 4px 0 12px; flex-shrink: 0; }
.chat-sidebar-brand img { height: 24px; width: auto; display: block; }
.chat-sidebar-new-btn { width: 100%; flex-shrink: 0; }
/* Список бизнесов прокручивается сам по себе (flex:1 + свой overflow) — сайдбар-футер
   (язык/профиль/выход) остаётся приколот внизу, даже если бизнесов много. */
.chat-sidebar-list { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
/* Список бизнесов длиннее видимой области — браузер сам рисует полосу прокрутки, но
   нестилизованная светлая системная полоса торчит на чёрном фоне (жалоба "что за
   беспонтовая линия", решение сессии 2026-09-11). Тонкая, в цвет темы. */
.chat-sidebar-list::-webkit-scrollbar { width: 6px; }
.chat-sidebar-list::-webkit-scrollbar-track { background: transparent; }
.chat-sidebar-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.chat-sidebar-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* Строка бизнеса — раньше была ОДНОЙ <button> на всю ширину; крестик-удаление рядом
   потребовал бы вложенной интерактивной кнопки внутри кнопки (невалидный HTML,
   конфликтующие клики) — теперь обёртка-<div>, а переключение и удаление это два
   независимых соседних элемента внутри неё (решение сессии 2026-09-10). */
.chat-sidebar-item {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
}
.chat-sidebar-item:hover { background: var(--bg-card); }
.chat-sidebar-item.is-active { background: var(--bg-card); border: 1px solid var(--border); font-weight: 600; }
.chat-sidebar-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: inherit;
  padding: 8px 6px 8px 10px;
  cursor: pointer;
  text-align: left;
}
/* Плашка иконки раньше была светлее (--bg-card-2) у обычных строк и темнее (--bg) —
   только у активной, из-за чего у активной строки белая иконка выглядела "ярче" по
   контрасту, а у остальных тусклее, хотя цвет линий один и тот же currentColor. Теперь
   у всех одинаково тёмный, максимально контрастный фон (решение по жалобе "нужны
   светлые иконки" — дело было не в цвете самой иконки, а в контрасте плашки под ней). */
.chat-sidebar-item-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  /* Жалоба "убери окружность эту и оставь только иконку" (решение сессии 2026-09-11) —
     рамка+градиент чипа, добавленные раньше для контраста на чисто чёрном сайдбаре,
     на новых сгенерированных иконках (свой чёрный квадрат-канва уже встроен в саму
     картинку) читались как лишний двойной контур/"кружок" вокруг иконки. Просто
     прозрачная область под иконкой, без своего фона/рамки. */
  display: flex; align-items: center; justify-content: center;
}
/* Разные ниши рисованы с разной толщиной линии (у зуба линия жирная, у ДНК/цветка/
   скрепки — тонкая) — на одинаково тёмной плашке тонкие иконки всё равно кажутся
   тусклее просто по площади белого, хотя цвет и контраст у всех уже совпадают.
   stroke-width задан атрибутом на самом <svg> (icons.html::_ic), но CSS-правило в
   таблице стилей всегда перебивает presentation-атрибут — увеличиваем толщину линии
   единообразно для всех inline-SVG ниш, не трогая 39 разных путей вручную. Площадь
   иконки внутри чипа увеличена (58%→64%) — на 32px-чипе с рамкой прежний размер читался
   ещё мельче.*/
.chat-sidebar-item-icon svg { width: 64%; height: 64%; object-fit: contain; stroke-width: 2.6; }
.chat-sidebar-item-delete {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat-sidebar-item-delete:hover { background: rgba(229, 72, 77, 0.15); color: #e5484d; }
/* PNG-иконки ниш (стоматология/биохакинг/флористика/единоборства/ремонт/детский
   центр) — это готовые квадраты "белая линия на чёрном" с большими полями вокруг
   самого рисунка (не обрезанные вплотную, как inline-SVG). При тех же 58%, что у SVG,
   сам рисунок внутри становился в 2 раза меньше и превращался в еле заметную точку —
   отсюда жалоба "иконки не блёклые, а чёрные" (не проблема цвета, проблема масштаба).
   cover на всю плашку — свои чёрные поля картинки сливаются с фоном плашки бесшовно. */
.chat-sidebar-item-icon img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 10px;
  /* Раньше здесь был drop-shadow, подсвечивающий тонкие линии старых PNG-иконок
     (ДНК, цветок и т.п.) — но у НЕПРОЗРАЧНЫХ картинок (сплошной чёрный квадрат, как у
     новых сгенерированных иконок) filter:drop-shadow обводит светящимся контуром весь
     прямоугольник картинки целиком, а не только линии внутри — жалоба "убери рамку/
     кружок вокруг иконки" (решение сессии 2026-09-11). Убрано; старые ещё не
     перегенерированные тонколинейные PNG временно будут выглядеть чуть бледнее, пока
     не заменены тем же способом, что и стоматология. */
}
/* indrik-mark.png (для бизнесов, у которых ещё не спрошена ниша) — НЕ такой же файл,
   как остальные PNG-иконки ниш: у тех своё чёрное поле на весь квадрат (для них нужен
   cover), у бренд-знака прозрачный фон вокруг силуэта — при cover он растягивался бы и
   обрезался как чужой логотип. Второй класс на том же <img> перебивает cover/100%
   выше специфичностью (0,2,0 против 0,1,0), не трогая правило для настоящих PNG-ниш. */
.chat-sidebar-item-icon img.chat-sidebar-mark-icon {
  width: 62%; height: 62%; object-fit: contain; border-radius: 0;
}
.chat-sidebar-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sidebar-deleted-label {
  margin: 12px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chat-sidebar-item.is-deleted {
  opacity: 0.72;
  padding: 4px 6px 4px 10px;
  gap: 8px;
}
.chat-sidebar-item.is-deleted .chat-sidebar-item-name { flex: 1; min-width: 0; }
.chat-sidebar-item-restore {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 8px;
}
.chat-sidebar-item-restore:hover { color: var(--text); background: var(--bg-card-2); }

/* Топбар сайта целиком скрыт на этой странице (body.is-chat-cabinet, см. base.html) —
   вход/язык/выход переехали сюда, вниз сайдбара, чтобы полностью совпадать с мобильным
   Grok/ChatGPT (один хедер, один гамбургер), а не дублировать функциональность. */
.chat-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-sidebar-footer .chat-icon-btn { width: 34px; height: 34px; }
.chat-sidebar-lang { flex: 1; min-width: 0; }
.chat-sidebar-lang .lang-select { width: 100%; padding: 6px 8px; font-size: 12px; margin-top: 0; }
/* Кнопка языка теперь внизу сайдбара — меню, открывающееся ВНИЗ (общее правило
   .lang-menu), рисовалось бы за пределами экрана и казалось бы "не работающим".
   Здесь открываем вверх и прижимаем к левому краю узкого сайдбара. */
.chat-sidebar-lang .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.chat-sidebar-logout { display: contents; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; }
/* Колонка переписки: max-width 48rem, по центру pane. На узком экране = 100%
   минус padding .chat-main. Не путать с .cabinet--chat { max-width: none } —
   тот сброс убирает конверт всего <main>, не ширину поля ввода. */
.chat-column {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.chat-shell-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chat-shell-head-title { flex: 1; min-width: 0; text-align: center; }
.chat-shell-balance { margin: 2px 0 0; font-size: 12px; color: var(--muted, #8a8a8a); }
.chat-shell-head h1 {
  margin: 0;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Пустышка той же ширины, что и гамбургер слева, — просто чтобы название бизнеса
   осталось визуально по центру шапки без второй кнопки справа. */
.chat-shell-head-spacer { flex-shrink: 0; width: 38px; height: 38px; }
.chat-icon-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-2, #1a1a1c);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
}
.chat-icon-btn:hover { border-color: var(--accent-2); }
/* Без явного CSS-размера SVG внутри flex-центрированной кнопки схлопывается по ширине
   до 0 (voспроизведено: computed width 0px при height 20px) — HTML-атрибутов
   width/height на самом <svg> недостаточно, флексбокс их не уважает как intrinsic
   size здесь. Найдено headless-скриншотом, решение сессии 2026-09-09. */
.chat-icon-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Сайдбар всегда открыт на ПК; на мобильном выдвигается по гамбургеру поверх контента
   (см. .chat-sidebar-open, переключается в dashboard_chat.js). */
@media (max-width: 820px) {
  .chat-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 41;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .chat-layout.chat-sidebar-open .chat-sidebar { transform: translateX(0); }
}
@media (min-width: 821px) {
  .chat-sidebar-backdrop, #chat-sidebar-toggle { display: none; }
  /* Камера/Галерея не имеют смысла на ПК (нет камеры устройства/мобильной галереи) —
     там в меню "+" остаётся только "Файлы" (решение сессии 2026-09-11). Селектор —
     ДВА класса вместе (специфичность 0,2,0), а не один: .chat-attach-menu-item сам по
     себе (0,1,0) объявлен НИЖЕ по файлу и без этого перевешивал бы "display:none" по
     порядку в каскаде при равной специфичности — жалоба "на пк версии не изменились
     чисто файлы", реально не срабатывало. */
  .chat-attach-menu-item.chat-attach-menu-item--mobile-only { display: none; }
}

.chat-settings-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

/* Переключатель "Видео"/"Посты" — два чата в одном бизнесе (решение сессии 2026-09-10,
   по образцу переключателя режимов Ask/Image/Build в Claude.ai). */
.chat-mode-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 10px;
  background: var(--bg-card-2, #1a1a1c);
  border-radius: 12px;
  width: fit-content;
}
.chat-mode-tab {
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  cursor: pointer;
}
.chat-mode-tab.is-active { background: var(--bg-card); color: var(--text); }
.chat-mode-tabs[hidden] { display: none; }

/* Нэг-чип "Нет активного тарифа" после каждого ответа ассистента, пока тариф не выбран
   (по образцу апселла Grok/ChatGPT) — открывает #chat-upgrade-overlay. */
.chat-upgrade-nag {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card-2, #1a1a1c);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
}
.chat-upgrade-nag button { font-size: 12px; padding: 5px 12px; }

/* Модалка выбора тарифа — по образцу экрана апгрейда Grok (сегментированные вкладки
   тарифа сверху, сетка периодов, крупная кнопка CTA, список фич снизу). */
.chat-upgrade-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.chat-upgrade-overlay[hidden] { display: none; }
.chat-upgrade-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 24px 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  text-align: center;
  scrollbar-width: none;
}
.chat-upgrade-box::-webkit-scrollbar { display: none; }
.chat-upgrade-box h2 { margin: 0 0 4px; font-size: 20px; }
.chat-upgrade-tiers {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 18px 0 14px;
  background: var(--bg-card-2, #1a1a1c);
  border-radius: 12px;
}
/* Скрывается через .hidden=true во вкладке "Посты" (нет оси разрешения, решение сессии
   2026-09-11) — без явного правила display:flex выше перебивает [hidden] (тот же баг,
   что уже не раз ловили на .chat-settings-overlay/.auth-modal в этом файле). */
.chat-upgrade-tiers[hidden] { display: none; }
.chat-upgrade-tier-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px;
  cursor: pointer;
}
.chat-upgrade-tier-tab.is-active { background: var(--bg-card); color: var(--text); }
.chat-upgrade-tagline { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; text-align: left; }
/* minmax(0, 1fr), не голый 1fr: "1fr" сам по себе значит minmax(auto, 1fr) — колонка не
   может стать уже min-content своего содержимого, и на узком экране сетка раздувает
   диалог за пределы вьюпорта вместо переноса текста. */
.chat-upgrade-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.chat-upgrade-period-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg-card-2, #1a1a1c);
  border: 2px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: inherit;
  padding: 12px;
  cursor: pointer;
  text-align: left;
}
.chat-upgrade-period-btn.is-selected { border-color: var(--accent-2); }
.chat-upgrade-period-btn .chat-pricing-period-amount { font-family: "DM Sans", "Segoe UI", sans-serif; font-weight: 700; font-size: 17px; }
.chat-upgrade-period-btn .chat-pricing-period-label { font-size: 12px; color: var(--text-muted); }
.chat-upgrade-cta { width: 100%; padding: 14px; font-size: 15px; }
.chat-upgrade-note { font-size: 11px; margin: 10px 0 16px; }
.chat-upgrade-features { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.chat-upgrade-features li { padding-left: 20px; position: relative; }
.chat-upgrade-features li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); }

/* Раньше это был <label for=...> без меню — сразу открывал системный выбор файла.
   Теперь настоящая <button>, открывающая меню "Камера / Фото" (решение сессии
   2026-09-10, по образцу Grok — там нажатие "+" тоже сначала предлагает выбор
   источника, а не сразу системный пикер). margin:0 больше не для <label> (был баг с
   тем, что кнопка "+" сидела на 7px выше соседней — margin-bottom:14px глобального
   label), но оставлен как защита на случай, если разметка ещё раз поменяется. */
.chat-attach-wrap { position: relative; flex-shrink: 0; }
.chat-attach-btn {
  margin: 0;
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
}
.chat-attach-btn:hover { color: var(--text); border-color: var(--accent-2); }
/* Та же ловушка, что уже не раз чинили в этом файле (гамбургер/шестерёнка/микрофон/
   отправка): <svg> без явного размера внутри flex-центрированной кнопки схлопывается
   по ширине до 0 — а этой конкретной кнопке размер ни разу не выставляли, с самого
   первого дня, когда это был <label>. "+" был невидим всё это время. */
.chat-attach-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Меню открывается ВВЕРХ — кнопка внизу экрана, вниз ему уже некуда (та же ловушка,
   что чинили для выпадающего списка языков в сайдбаре). */
.chat-attach-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 200px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.chat-attach-menu[hidden] { display: none; }
.chat-attach-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; margin: 0;
}
.chat-attach-menu-item:hover { background: var(--bg-card-2, #1a1a1c); }
.chat-attach-menu-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card-2, #1a1a1c); color: var(--text);
}
.chat-attach-menu-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Несколько превью в ряд — жалоба "можно только одну фотку вставить", решение сессии
   2026-09-11: каждое фото — свой .chat-attach-thumb, крестик — бейдж в ВЕРХНЕМ ПРАВОМ
   углу миниатюры (как в Grok/Instagram), а не сбоку от неё. */
.chat-attach-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.chat-attach-thumb { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.chat-attach-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.chat-attach-remove {
  /* SVG вместо текстового "×" — у шрифтового глифа центр рисунка смещён от
     геометрического центра box'а, из-за чего внутри маленького круглого бейджа он
     выглядел "кривым" (жалоба "крестик косячный, не ровный"), тот же класс бага, что
     уже чинили на .chat-attach-btn/.chat-mic-btn — явный size вместо текста/шрифта.
     position:absolute прижимает бейдж к углу миниатюры, а не ставит его сбоку. */
  position: absolute; top: -6px; right: -6px;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; padding: 0;
  background: #000; border: 2px solid var(--bg-card, #232326);
  color: #fff; cursor: pointer; line-height: 1;
}
.chat-attach-remove svg { width: 10px; height: 10px; flex-shrink: 0; }
/* Образец голоса (Фаза C/C3) — не картинка, поэтому не квадратная миниатюра, а
   широкая пилюля с подписью; .chat-attach-thumb даёт только position:relative для
   бейджа-крестика, ширину/фон переопределяем здесь. */
.chat-attach-voice-badge {
  width: auto; height: 36px; display: flex; align-items: center;
  padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--bg-card, #232326); border: 1px solid var(--border, #3a3a3d);
  font-size: 13px; white-space: nowrap;
}
/* Видео-примеры в ленте чата (Фаза C/C3) — как превью фото, БЕЗ цветного пузыря под
   ними (тот же принцип, что у вложенных фото в user-сообщениях). */
.chat-example-clips { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0; }
/* #11 UX-02: один ролик и переключатель «без / с» опцией — как вкладки в Reels. */
.chat-compare { display: flex; flex-direction: column; gap: 8px; width: 220px; max-width: 70vw; }
.chat-compare .chat-example-clip { width: 100%; max-width: none; }
.chat-compare-stage { border-radius: 16px; overflow: hidden; }
.chat-compare-switch {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px;
  border-radius: 999px; background: var(--bg-card-2, #1a1a1c); border: 1px solid var(--border, #2a2a2e);
}
.chat-compare-switch button {
  font: inherit; font-size: 12.5px; color: var(--text-muted, #a1a1aa); background: transparent;
  border: 0; border-radius: 999px; padding: 7px 8px; cursor: pointer; white-space: nowrap;
}
.chat-compare-switch button.is-active {
  color: var(--brand-on-gradient, #0a0a0a); background: var(--brand-gradient); font-weight: 600;
}
.chat-compare-switch button:focus-visible { outline: 2px solid var(--focus, #e8e4dc); outline-offset: 1px; }
/* «Как это выглядит»: что пишет клиент → что приходит. */
.chat-demo {
  width: 260px; max-width: 78vw; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: 20px; background: var(--bg-card, #141415); border: 1px solid var(--border, #2a2a2e);
}
.chat-demo-head {
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted, #a1a1aa);
}
.chat-demo-ask {
  align-self: flex-end; max-width: 92%; padding: 8px 11px; border-radius: 16px 16px 4px 16px;
  font-size: 13px; line-height: 1.35; color: var(--brand-on-gradient, #0a0a0a); background: var(--brand-gradient);
}
.chat-demo-result { align-self: flex-start; width: 86%; display: flex; flex-direction: column; gap: 6px; }
.chat-demo-result .chat-example-clip, .chat-demo-result img {
  width: 100%; max-width: none; border-radius: 14px; display: block;
}
.chat-demo-result--post img { aspect-ratio: 1 / 1; object-fit: cover; }
.chat-demo-caption { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text, #f4f4f5); }
.chat-demo--recording { width: 230px; }
.chat-demo--recording .chat-example-clip { width: 100%; max-width: none; border-radius: 16px; }
.chat-compare-soon {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px;
  font-size: 12.5px; opacity: 0.7; border: 1px dashed var(--border, #3a3a3d); background: var(--bg-card, #232326);
  cursor: default;
}
.chat-example-clip {
  width: 160px; max-width: 45vw; border-radius: 14px; display: block;
  aspect-ratio: 9 / 16; object-fit: cover; background: #000;
}
/* Готовый ролик на согласование — превью с controls, открыть / одобрить */
.chat-review-card {
  align-self: flex-start; max-width: min(280px, 82%);
  display: flex; flex-direction: column; gap: 8px;
  margin: 4px 0 10px; padding: 10px;
  border-radius: 16px; background: var(--bg-card, #232326);
  border: 1px solid var(--border, #3a3a3d);
}
.chat-review-card--done { opacity: 0.72; }
.chat-review-video {
  width: 100%; border-radius: 12px; display: block; background: #000;
  aspect-ratio: 9 / 16; max-height: 420px; object-fit: contain;
}
.chat-review-image {
  width: 100%; border-radius: 12px; display: block; object-fit: cover;
  aspect-ratio: 1 / 1; background: #111;
}
.chat-review-caption {
  margin: 0; font-size: 13px; opacity: 0.85; white-space: pre-wrap;
}
.chat-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-review-note { margin: 0; font-size: 12px; opacity: 0.6; }
.chat-review-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 12px; border-radius: 10px; font: inherit; font-size: 13px;
  text-decoration: none; cursor: pointer; border: 1px solid var(--border, #3a3a3d);
  background: transparent; color: var(--text, #eee);
}
.chat-review-btn-primary {
  background: var(--text, #eee); color: var(--bg, #111); border-color: transparent;
}
.chat-review-btn:disabled { opacity: 0.5; cursor: default; }
/* #46 UX-17 / #76 UX-27: библиотека и «Мои сотрудники» — вертикальный 3:4, не CRM-кружок.
   Клик по фото → lightbox; управление по-прежнему сообщением. */
.chat-character-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; align-items: flex-start; }
.chat-character-card {
  width: 140px; border-radius: 16px; padding: 0; overflow: hidden;
  background: var(--bg-card, #232326); border: 1px solid var(--border, #3a3a3d);
  display: flex; flex-direction: column; text-align: left;
  box-shadow: none; flex: none;
}
.chat-character-card--detail { width: min(168px, calc(50% - 6px)); max-width: 180px; }
.chat-character-card-media {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--bg-muted, #333); flex: none;
}
.chat-character-card-media img,
.chat-character-card-media .chat-character-card-placeholder {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover; object-position: center top; display: block;
  background: var(--bg-muted, #333);
}
.chat-character-card img.chat-zoomable { cursor: zoom-in; }
.chat-character-card-meta {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; min-width: 0;
}
.chat-character-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.chat-character-card-name {
  font-size: 13px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.25;
}
.chat-character-card-status {
  align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.chat-character-card-status.is-on { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.chat-character-card-status.is-off { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.chat-character-card--detail .chat-card-row {
  border: 0; padding: 0; font-size: 11.5px; gap: 4px; align-items: baseline;
}
.chat-character-card--detail .chat-card-row-label { flex: none; }
.chat-character-card-audio {
  width: 100%; max-width: 100%; min-width: 0; height: 32px; margin-top: 2px;
}
@media (max-width: 420px) {
  .chat-character-card--detail { width: calc(50% - 6px); max-width: none; }
}
/* #14 UX-05: загрузка с единорогом, пока генерируются видео/посты. */
.chat-gen-loader {
  display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 10px 14px;
  border-radius: 16px; background: var(--bg-card, #232326); border: 1px solid var(--border, #3a3a3d);
}
.chat-gen-loader[hidden] { display: none; }
.chat-gen-unicorn { position: relative; width: 44px; height: 44px; flex: none; }
.chat-gen-unicorn img { width: 44px; height: 44px; border-radius: 12px; animation: chat-gen-gallop 0.9s ease-in-out infinite; }
.chat-gen-spark {
  position: absolute; left: -6px; font-size: 11px; color: #f5d76e; opacity: 0;
  animation: chat-gen-spark 1.8s ease-out infinite;
}
.chat-gen-spark--1 { top: 30px; }
.chat-gen-spark--2 { top: 18px; animation-delay: 0.6s; }
.chat-gen-spark--3 { top: 6px; animation-delay: 1.2s; }
.chat-gen-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-gen-phrase { margin: 0; font-size: 13.5px; }
.chat-gen-count { margin: 0; font-size: 12px; opacity: 0.6; }
.chat-gen-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.chat-gen-bar span {
  display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f5d76e, #c084fc, transparent);
  animation: chat-gen-shimmer 1.6s ease-in-out infinite;
}
@keyframes chat-gen-gallop {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(4deg); }
}
@keyframes chat-gen-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-18px, -6px) scale(1.1); }
}
@keyframes chat-gen-shimmer {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-gen-unicorn img, .chat-gen-spark, .chat-gen-bar span { animation: none; }
  .chat-gen-spark { opacity: 0.8; }
}
/* #10 / #47: сотрудники / товары / локации — кнопки над полем ввода. */
.chat-panel-buttons {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 8px; max-width: 480px;
}
@media (max-width: 520px) {
  .chat-panel-buttons { grid-template-columns: 1fr; max-width: none; }
}
.chat-panel-buttons[hidden] { display: none; }
.chat-panel-btn {
  width: 100%; height: 40px; margin: 0; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap;
  border-radius: 999px; cursor: pointer;
  background: var(--bg-card, #232326); color: var(--text, #eee); border: 1px solid var(--border, #3a3a3d);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-panel-btn svg { flex: none; opacity: 0.8; }
.chat-panel-btn span { overflow: hidden; text-overflow: ellipsis; }
.chat-panel-btn:hover { border-color: var(--text-muted, #888); }
.chat-panel-btn:focus-visible { outline: 2px solid var(--text-muted, #888); outline-offset: 2px; }
.chat-panel-btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 640px) {
  .chat-panel-buttons { max-width: none; }
}
/* Сайдбар: кружок с первой буквой названия, если иконки ниши ещё нет. */
.biz-letter {
  width: 100%; height: 100%; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; line-height: 1;
}
.chat-sidebar-item-name.is-unnamed { opacity: 0.55; font-style: italic; }
.chat-cards { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; max-width: 34rem; }
.chat-card {
  display: flex; gap: 12px; padding: 10px; border-radius: 14px; text-align: left;
  background: var(--bg-card, #232326); border: 1px solid var(--border, #3a3a3d); color: var(--text, #eee);
}
.chat-card-photo {
  width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover;
  background: var(--bg-muted, #333);
}
.chat-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.chat-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-card-row { display: flex; gap: 6px; font-size: 13px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.chat-card-row-label { opacity: 0.6; }
/* #41: 28px сжимал native controls — play не нажимался. */
.chat-card-audio { height: 36px; max-width: 100%; min-width: 180px; }
/* Ниши кружочками (Фаза C, жалоба "всё напичкано сплошным текстом") — те же реальные
   PNG-иконки, что уже использует классический кабинет для карточек бизнеса. */
.chat-niche-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0; max-width: 100%; }
.chat-niche-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text, #eee); font: inherit;
}
.chat-niche-chip-icon {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  background: var(--bg-card, #232326); border: 1px solid var(--border, #3a3a3d);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.chat-niche-chip-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-niche-chip:hover .chat-niche-chip-icon { border-color: var(--accent-2, var(--accent)); transform: translateY(-2px); }
.chat-niche-chip:disabled { opacity: 0.5; cursor: default; }
.chat-niche-chip:disabled .chat-niche-chip-icon { transform: none; }
.chat-niche-chip-label { font-size: 11.5px; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.chat-niche-hint { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 4px; }
.chat-log.is-setup-empty {
  justify-content: center;
}
.chat-log.is-setup-empty::before { display: none; }
.chat-setup {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px 12px;
}
.chat-setup-title {
  margin: 0 0 18px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text);
}
.chat-setup .chat-niche-chips { justify-content: center; }
.chat-setup .chat-niche-hint { text-align: center; margin-top: 10px; }
.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px 16px;
}
/* Переписка начинается сверху, как в ChatGPT (решение 2026-10-13, «ответ должен быть в
   самом верху»). Раньше здесь был spacer ::before, прижимавший короткий тред к полю
   ввода, — сообщения «улетали» вниз под пустотой. */
/* Тонкая полоса в цвет темы вместо нестилизованной светлой системной (тот же баг, что
   уже чинили на .chat-sidebar-list, — раньше не проявлялся здесь, потому что лента
   редко была высокой настолько, чтобы вообще скроллиться, до появления кружочков-ниш). */
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.chat-log::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
}
.chat-bubble p { margin: 0; white-space: pre-wrap; }
/* Реальные превью отправленных фото вместо слипшихся emoji-скрепок без пробела
   (жалоба "при отправке файлы достаточно странные", решение сессии 2026-09-11). */
/* Фото — ВСЕГДА отдельно от цветного пузыря, без фона под ними (как в ChatGPT/Grok,
   решение сессии 2026-09-11: "без белого чисто фотки"/"давай так и сделаем"). Прямой
   ребёнок .chat-log (тот же flex-column), поэтому выравнивание по правому краю задаём
   здесь же, а не наследуем от .chat-bubble. */
.chat-bubble-images { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-end; max-width: 82%; justify-content: flex-end; }
.chat-bubble-images img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; display: block; }
/* #15 UX-06: медиа как в мессенджере — одно фото крупно, клик открывает на весь экран. */
.chat-bubble-images.is-single img { width: auto; height: auto; max-width: min(260px, 70vw); max-height: 320px; }
.chat-zoomable, .chat-example-clip, img.chat-card-photo, .chat-review-image { cursor: zoom-in; }
.chat-bubble-audio { align-self: flex-end; max-width: 82%; }
.chat-bubble-audio audio { height: 36px; max-width: 280px; display: block; }
.chat-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out;
}
.chat-lightbox[hidden] { display: none; }
.chat-lightbox-media {
  max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; cursor: default;
  background: #000;
}
.chat-bubble--assistant {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble--user {
  align-self: flex-end;
  background: var(--accent-2);
  color: #0a0a0a;
  border-bottom-right-radius: 4px;
}
.chat-bubble--thinking p { opacity: 0.6; }
.chat-system-note {
  align-self: center;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-card-2, #1a1a1c);
  border-radius: 999px;
  padding: 5px 12px;
  max-width: 90%;
  text-align: center;
}
/* #69 OP-05: строка отладки чата (модель / токены / $ / время) — только CHAT_DEBUG_*. */
.chat-system-note--debug {
  color: #f0e6b8;
  background: #2c2612;
  border: 1px solid #b8972e;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
  opacity: 1;
  max-width: min(36rem, 95%);
}
.chat-target-link-row { align-self: flex-start; }
/* Виджет "подключить соцсеть" прямо в ленте чата — клон того же списка, что в панели
   настроек (см. platform_row в dashboard_chat.html), просто в рамке под ширину
   сообщения, а не модалкой (решение сессии 2026-09-10: "всё решается через чат"). */
.chat-connect-widget {
  align-self: flex-start;
  max-width: 82%;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
}
.chat-connect-widget .platform-row-list { margin: 0; }
.chat-target-link { font-size: 13px; padding: 6px 14px; }
.chat-input-row { display: block; }
/* Единая скруглённая "капсула" вместо плоского ряда — по образцу поля ввода Grok:
   текст сверху, ряд управляющих кнопок снизу внутри той же карточки (без переключателя
   режима и без отдельной кнопки "Speak" — этого явно не хотел пользователь, решение
   сессии 2026-09-10). */
.chat-input-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 14px 16px 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.chat-input-card textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 8px;
  resize: none;
  max-height: 160px;
  /* auto/scroll снят по умолчанию: у textarea с rows="1" высота "одной строки",
     которую браузер считает сам, почти всегда на доли пикселя меньше реальной
     line-height нашего шрифта — из-за этого постоянно торчал обрезок нативного
     скроллбара (стрелки вверх/вниз) даже без единого переноса строки. JS
     (autosize) сам включает overflow-y обратно, когда текст реально не влезает
     в max-height. */
  overflow-y: hidden;
  background: transparent;
  border: none;
  padding: 2px 2px 6px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.chat-input-card:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.chat-input-card textarea:focus-visible { outline: none; }
.chat-input-controls { display: flex; align-items: center; justify-content: space-between; }
.chat-input-controls-right { display: flex; align-items: center; gap: 8px; }
.chat-send-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--text);
  color: #0a0a0a;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.chat-send-btn[hidden] { display: none; }
.chat-send-btn:hover { background: var(--accent-2); }
.chat-send-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.chat-mic-btn {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
}
.chat-mic-btn[hidden] { display: none; }
.chat-mic-btn:hover { color: var(--text); border-color: var(--accent-2); }
.chat-mic-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Пока идёт распознавание речи — пульсирующая красная точка поверх иконки, тот же
   визуальный язык, что у "запись идёт" в большинстве голосовых интерфейсов. */
.chat-mic-btn.is-listening { color: #e5484d; border-color: #e5484d; position: relative; }
.chat-mic-btn.is-listening::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 999px; background: #e5484d;
  animation: chat-mic-pulse 1s ease-in-out infinite;
}
@keyframes chat-mic-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-mic-btn.is-listening::after { animation: none; }
}

/* Полоса записи голоса — заменяет капсулу ввода на время диктовки (по образцу Grok:
   крестик слева отменяет, галочка справа завершает и подставляет распознанный текст
   в поле). */
.chat-recording-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 8px 8px 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.chat-recording-bar[hidden] { display: none; }
.chat-recording-cancel,
.chat-recording-confirm {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.chat-recording-cancel { background: var(--bg-card-2, #1a1a1c); color: var(--text-muted); }
.chat-recording-cancel:hover { color: var(--text); }
.chat-recording-confirm { background: var(--text); color: #0a0a0a; }
.chat-recording-confirm:hover { background: var(--accent-2); }
/* Тот же баг, что уже бил гамбургер/шестерёнку и кнопку отправки: <svg> внутри
   flex-центрированной круглой кнопки без явного размера схлопывается по ширине до 0 —
   крестик и галочка были невидимы. */
.chat-recording-cancel svg, .chat-recording-confirm svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Столбики "прыгают" по реальной громкости голоса (Web Audio API, см.
   dashboard_chat.js) — не декоративная анимация по кругу, а честный отклик на звук,
   как просил пользователь ("как у Грока"). Пока микрофон недоступен для анализа
   (getUserMedia не разрешили/не поддерживается), JS оставляет столбики в состоянии
   покоя — минимальная высота ниже уже сама по себе читается как "линия". */
/* justify-content:space-between, а не flex-grow на самих столбиках: с фиксированной
   шириной точки не "выигрывают" лишнее место у гэпа — при flex:1 на баре оно уходило
   вникуда за max-width и вся полоса повисала хвостом в начале ряда, не доходя до
   галочки (жалоба "линия короткая"). Теперь именно ПРОБЕЛЫ между точками растягиваются
   на всю ширину капсулы, сами точки остаются тонкими. */
.chat-recording-wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
}
.chat-wave-bar {
  flex-shrink: 0;
  width: 3px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-muted);
  transition: height 0.08s ease-out;
}

/* Тарифная сетка теперь только внутри модалки апгрейда (#chat-upgrade-overlay,
   решение сессии 2026-09-10) — не отдельной секцией над журналом, см. .chat-upgrade-*
   выше. Базовая типографика суммы/периода переиспользуется там же (font-family явно
   DM Sans, не унаследованный Fredoka — у Fredoka на жирном начертании (700) обнаружен
   визуальный баг рендеринга цифр, решение сессии 2026-09-09). */
.chat-pricing-period-amount { font-family: "DM Sans", "Segoe UI", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; }
.chat-pricing-period-label { font-size: 11px; color: var(--text-muted); }

/* #49 UX-20: tour первого входа + лист инструкций (чат не блокируем). */
.chat-tour { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.chat-tour[hidden] { display: none !important; }
.chat-tour-dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.chat-tour-spot {
  position: absolute; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent-2, #f5f2eb);
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
  pointer-events: none;
}
.chat-tour-card {
  position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(22rem, calc(100vw - 32px));
  padding: 14px 16px 12px;
  border-radius: 16px;
  background: var(--bg-card, #141415);
  border: 1px solid var(--border, #3a3a3d);
  color: var(--text, #f4f4f5);
  pointer-events: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.chat-tour-title {
  margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3;
}
.chat-tour-text {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted, #a1a1aa);
}
.chat-tour-demos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px;
}
.chat-tour-demos[hidden] { display: none !important; }
.chat-tour-demos video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 10px; background: #000; display: block;
}
.chat-tour-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.chat-tour-skip {
  border: 0; background: transparent; color: var(--text-muted, #a1a1aa);
  font: inherit; font-size: 13px; cursor: pointer; padding: 6px 0;
}
.chat-tour-skip:hover { color: var(--text, #f4f4f5); }
.chat-tour-next { min-width: 7rem; }

.chat-help-sheet { position: fixed; inset: 0; z-index: 90; }
.chat-help-sheet[hidden] { display: none !important; }
.chat-help-sheet-backdrop {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); border: 0; cursor: pointer;
}
.chat-help-sheet-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(26rem, 100%); max-height: min(85vh, 640px); overflow: auto;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--bg-card, #141415);
  border: 1px solid var(--border, #3a3a3d);
  color: var(--text, #f4f4f5);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}
.chat-help-sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px;
}
.chat-help-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.chat-help-list {
  margin: 0 0 16px; padding-left: 1.1rem;
  color: var(--text-muted, #a1a1aa); font-size: 13.5px; line-height: 1.5;
}
.chat-help-list li { margin: 0 0 6px; }
.chat-help-demos-label {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text, #f4f4f5);
}
.chat-help-demos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.chat-help-demo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.chat-help-demo video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 12px; background: #000; display: block;
}
.chat-help-demo span { font-size: 12px; color: var(--text-muted, #a1a1aa); }
.chat-help-replay { width: 100%; }