/* css/components/status-bar.css — Верхняя строка состояния (баланс, сводка настроек) и левая вкладка Token Usage.
   Порядок подключения всех стилей задан в layout/head.php — он важен. */
/* ===================== Token Usage panel (общий для всех генераторов) =====
   Зеркальная копия .side-tools-tabs/.batch-tools-tab/.batch-tools-panel,
   только слева — см. common/ui/stats-panel.js + pages/modals/stats-panel.php. */
.side-tools-tabs-left {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.stats-tab {
  writing-mode: vertical-rl;
  /* rotate(180deg) переворачивает и рамку/скругления — компенсируем их
     заранее в "зеркальных" значениях, чтобы после поворота вкладка
     по-прежнему выглядела прижатой к левому краю с закруглением наружу. */
  transform: rotate(180deg);
  padding: 14px 5px;
  border-radius: 10px 0 0 10px;
  border: 1px solid rgba(124, 92, 255, 0.25);
  border-right: none;
  background: rgba(20, 28, 45, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-link);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: -4px 0 20px rgba(0,0,0,0.25); /* offset тоже зеркалим — см. transform выше */
  transition: all 0.2s ease;
}

.stats-tab:hover {
  color: #ffffff;
  border-color: rgba(0, 229, 255, 0.4);
  background: rgba(20, 28, 45, 0.65);
  box-shadow: -4px 0 24px rgba(124, 92, 255, 0.2);
}

.stats-panel {
  position: fixed;
  left: -340px;
  top: 0;
  height: 100%;
  width: 340px;
  background: linear-gradient(180deg, rgba(20, 28, 45, 0.99), rgba(10, 16, 28, 0.99));
  border-right: 1px solid rgba(124, 92, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: left 0.25s ease;
  z-index: 1000;
  padding: 20px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(124, 92, 255, 0.4) transparent;
}

.stats-panel.open { left: 0; }

/* Верхняя панель страницы — две колонки в общей рамке (см.
   pages/generators/pro-image.php/pro-video.php/gen-puter.php): слева Stats Strip
   (#statsStrip — баланс/аккаунт, не трогаем, справа
   Settings Summary (#settingsSummary — сводка текущих настроек, только
   чтение, см. common/settings/settings-summary.js). Раньше это была одна
   строка-сводка, прижатая вправо — с одной колонкой это оставляло пустой
   всю левую половину; теперь рамка/фон/паддинг переехали сюда, на общий
   контейнер, а сами колонки — просто flex-дети без своего оформления. */
.top-status-bar {
  position: relative; /* якорь для .top-status-bar-icon ниже */
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(124, 92, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
  overflow: hidden; /* иконка ниже не должна вылезать за скруглённые углы */
}

/* Разделитель между .stats-strip/.settings-summary убран 2026-08-20 (по
   — .top-status-bar-icon ниже занял его место визуально,
   бар теперь читается как один непрерывный блок, а не два через палочку. */

/* Тематическая иконка (Image/Video/Audio) — переехала из шапки (см.
   .hero-icon в css/base/template.css, теперь удалено) сюда, в фон статус-бара,
   на всю его высоту. Тот же вид, что был в шапке (никакой полупрозрачности
   — тот же currentColor-shimmer + drop-shadow, просто сильно крупнее),
   2026-08-20: "должна быть один в один как в шапке, только с
   нужными размерами" — приглушённым водяным знаком быть не должна. Строго
   фоновая только в смысле слоя: position:absolute + z-index ниже
   .stats-strip/.settings-summary (см. z-index:1 у них ниже) — если чипы
   settings-summary/stats-strip налезают на неё, это ожидаемо и нормально,
   а не баг; главное, что она никогда не перекрывает их и не двигает их
   собственную раскладку (толщина/перенос строк чипов совершенно не
   зависит от присутствия иконки). height:100% от .top-status-bar — без
   единой строчки JS подстраивается под реальную высоту бара при любом
   изменении контента (перенос строк Settings Summary на мобильном и т.п.).
   aspect-ratio:1 — сама SVG квадратная (viewBox 24x24), поэтому ширина
   всегда следует за высотой. pointer-events:none — никогда не перехватывает
   клики по кнопке/чипам поверх неё. */
.top-status-bar-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 1 / 1;
  z-index: 0;
  filter: drop-shadow(0 0 8px currentColor);
  pointer-events: none;
  animation: hero-icon-shimmer 8s linear infinite;
}
.top-status-bar-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.top-status-bar > .stats-strip,
.top-status-bar > #settingsSummary {
  position: relative;
  z-index: 1;
}

/* Узкая строка-сводка над Settings — то же содержимое коротко, без
   разворачивания панели. Левая колонка .top-status-bar — контент прижат
   ВЛЕВО (внешний край панели), к центру-разделителю ближе кнопка.
   Раньше каждый <span> был пилюлей (background/border/padding) — убрано:
   при таком количестве полей (Img/Video/Audio × generated/remaining, см.
   credit-panel.js) сплошной ряд коробок был визуально тяжёлым. Разделитель
   между пунктами — через ::before, раз фона/рамки для границы больше нет.
   Puter Account (free-image/puter-account.js) использует ЭТУ, плоскую версию
   разметки (span/бар/span/.../кнопка — прямые дети .stats-strip) — по
   её содержимое/цвета/порядок НЕ трогаем, меняется
   только направление выравнивания (было вправо, раз .stats-strip была
   единственной колонкой — теперь влево, раз она левая колонка общей
   панели). Pro (credit-panel.js) с этого места ушла на другую структуру —
   см. .stats-strip-rows ниже — 4 строки по темам (CVB/Img/Video/
   Audio) не помещались в одну и выглядели тяжело; .stats-strip > span
   здесь остаётся только ради Puter. */
.stats-strip {
  display: flex;
  /* 4:7 (было 3:7) — на Free с новым фоновым чипом-фоном верстка чуть
     поплыла на узком .stats-strip, увеличено
     2026-08-20. basis:0 у обеих колонок сохранён — без него grow-
     соотношение считалось бы от разного контента, а не от чистого веса. */
  flex: 4 1 0;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px 14px;
}

.stats-strip.empty { display: none; }

.stats-strip > span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
}

.stats-strip > span::before {
  content: "·";
  margin-right: 14px;
  color: var(--text-dim);
}

/* :first-of-type, не :first-child — кнопка .stats-strip-btn (Puter) теперь
   стоит ПЕРЕД первым <span> (для симметрии с кнопкой Settings справа, см.
   puter-account.js), так что первый <span> больше не первый РЕБЁНОК среди
   ВСЕХ детей .stats-strip, но всё ещё первый среди <span>. */
.stats-strip > span:first-of-type::before {
  content: none;
  margin-right: 0;
}

/* Descendant-селектор (не .stats-strip > span.ic) — "Signed in as" теперь
   вложен в .stats-strip-rows > .stats-strip-row (см. puter-account.js),
   больше не прямой ребёнок #statsStrip — прежний селектор с прямым
   потомком перестал совпадать вовсе, цвет не применялся. */
.stats-strip span.ic {
  color: var(--success); /* #00e5a0 — та же тема, что у "Used:"/"Remaining:"/"CVB:"/"Cost:" */
}

/* Ошибка токена в этой же строке (невалидный/забаненный — см. refresh() в
   common/pro/credit-panel.js). Без этого правила сообщение наследовало зелёный
   от .stats-strip span.ic выше и читалось как обычная статистика, хотя
   говорит "токен приостановлен" (2026-08-28).
   Цвет — тот же var(--neon-red), что у "Not enough credits" (.ss-shortfall),
   чтобы тревожное в интерфейсе было одного цвета.
   Три класса против двух у правила выше — перебивает по специфичности,
   !important не нужен. Класс живёт на самом <span>, поэтому снимать его не
   надо: следующая успешная отрисовка баланса переписывает innerHTML строки
   целиком и уносит его с собой. */
.stats-strip span.ic.stats-strip-alert {
  color: var(--neon-red);
}

/* Pro (credit-panel.js) — 4 строки по темам (CVB / Img / Video /
   Audio), каждая — свой .stats-strip-row (то же самое ::before-разделение
   на "·" между пунктами ВНУТРИ строки, что и у Puter выше, только на
   уровень глубже). Кнопка (.stats-strip-btn) — сосед .stats-strip-rows на
   том же уровне, что и у Puter (прямой ребёнок .stats-strip) — тот же
   align-items:center на родителе центрирует её по высоте всего блока
   строк само по себе, без анкера к конкретной строке. */
.stats-strip-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* column-gap маленький (~ширина одного пробела) — это расстояние между
   ВСЕМИ соседними элементами ряда без разбора, в т.ч. между "название:" и
   его же значением (они должны стоять тесно, одной парой). Разрыв ПЕРЕД
   каждым новым полем даёт не gap, а margin-right у ::before-точки ниже —
   так одна и та же величина gap не создаёт лишний зазор внутри пары
   "название — значение". */
.stats-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px 6px;
}

.stats-strip-row > span {
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
}

/* Разные смысловые группы — баланс и три типа медиа (Img/Video/Audio) —
   получают свой акцент из единой палитры neon-color-palette.html (корень
   проекта, см. переменные --neon-..., --lime, --electric-... в :root выше).
   Audio пока всегда "0" (заготовка — генератора ещё нет), но цвет уже
   зарезервирован. Красим только "название:" (label) — значение остаётся
   белым (см. .stats-strip strong/.stats-strip-row strong ниже — в Stats
   Strip не жирным, в CVB Balance — см. #proBalanceData
   .puter-resource-row span:last-child выше) — разделение цветом
   "название — значение", а не одноцветный текст на весь пункт. БЕЗ
   scoping под .stats-strip/-row — те же классы использует и боковая панель. */
.stat-chip-balance {
  color: var(--success); /* #00e5a0 — CVB / "Used" у Puter, единая тема с "Remaining"/Signed in as/Cost */
}

.stat-chip-remaining {
  color: var(--success);
}

.stat-media-img {
  color: var(--neon-blue);
}

.stat-media-video {
  color: var(--neon-green);
}

.stat-media-audio {
  color: var(--neon-orange);
}

.stats-strip strong {
  color: #ffffff;
  font-weight: 700;
}

/* Значения в Pro-строках (.stats-strip-row, см. credit-panel.js) — той же
   гарнитуры/размера, что и название рядом (.stats-strip-row > span, 12px),
   без утолщения —. Специфичность равна .stats-strip strong
   выше (0,1,1) — работает только за счёт порядка (эта позже в файле), не
   трогает Puter-строку (там <strong> — прямой потомок .stats-strip, не
   .stats-strip-row, эта строка её не матчит вовсе). */
.stats-strip-row strong {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}

/* Полная перестилизация .top-status-bar (2026-08-11,
   уточнено 2026-08-11) — каждая пара "лейбл + значение" в ОБЕИХ половинах
   (.ss-pair слева — credit-panel.js/puter-account.js; .ss-pair/.pe-row
   справа — settings-summary.js/price-estimate.js) получает одинаковую
   рамку-чип, БЕЗ точек-разделителей между парами (см. удалённые
   *-row > span::before — раньше были здесь и у .settings-summary-row). */
.ss-pair,
#settingsSummary .pe-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  border: 1px solid #343A66;
  border-radius: 5px;
  padding: 1px 6px;
  /* Почти непрозрачный фон — та же заливка, что у .tooltip (css/base/template.css,
     rgba(15, 25, 50, 0.95)), нужен с 2026-08-20: чипы теперь могут лежать
     поверх фоновой иконки генератора в .top-status-bar и должны оставаться
     читаемыми, а не просвечивать её насквозь. */
  background: rgba(15, 25, 50, 0.95);
}

/* Цвет лейбла — единый зелёный в ОБЕИХ половинах .top-status-bar (уточнено
   2026-08-11: справа тоже должно быть как слева). Старые точечные
   классы — .stat-media-* / .stat-chip-* слева, .ss-model/.ss-field/
   .ss-platform/.ss-format/.ss-toggle/.ss-behavior справа — больше не красят
   свои span ЗДЕСЬ, перебиты этим правилом; .stat-media-* / .stat-chip-*
   по-прежнему красят те же классы в сайдбаре/#proBalanceData, а .ss-cost —
   в сайдбарной копии котировки (#proPriceEstimate) — там их не трогаем,
   scoping через #statsStrip/#settingsSummary (ID) гарантированно перебивает
   любой из этих класс-only rules без !important. */
#statsStrip .ss-pair,
#settingsSummary .ss-pair,
#settingsSummary .pe-row {
  color: #00e5a0;
}

#statsStrip .ss-pair strong,
#settingsSummary .ss-pair strong {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}

/* Кнопка-иконка в конце строки — дублирует #statsTab (вертикальную вкладку
   сбоку экрана), подпись — только всплывающей подсказкой (title/aria-label
   в разметке, см. credit-panel.js/puter-account.js), не текстом рядом. */
.stats-strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(124, 92, 255, 0.25);
  background: rgba(124, 92, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

/* Сама иконка (SVG) идёт с зашитыми width/height=16 в разметке (см.
   common/ui/icons.js) — увеличение кнопки само по себе иконку не растягивает,
   нужно явно переопределить размер SVG внутри. */
.stats-strip-btn svg {
  width: 24px;
  height: 24px;
}

.stats-strip-btn:hover {
  border-color: rgba(124, 92, 255, 0.5);
  color: #ffffff;
  background: rgba(124, 92, 255, 0.15);
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.15);
}

/* Правая колонка .top-status-bar — сводка Settings, только чтение (см.
   common/settings/settings-summary.js). Прижата к правому краю панели, кнопка
   (открывает боковую панель Settings) — снаружи, у самого края, симметрично
   кнопке слева от Stats Strip. Та же механика ::before-разделителей "·",
   что у .stats-strip-row (см. выше) — просто зеркально, вправо. */
.settings-summary {
  display: flex;
  /* 7:3 — см. комментарий у .stats-strip выше. */
  flex: 7 1 0;
  min-width: 0;
  align-items: center;
  gap: 8px 14px; /* тот же column-gap 14px между блоком пар и кнопкой, что у .stats-strip слева */
  justify-content: flex-end;
}

.settings-summary-rows {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

/* column-gap — тот же смысл, что у .stats-strip-row выше (маленький, "на
   один пробел", раз он же — расстояние внутри пары "название — значение"). */
.settings-summary-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 6px;
}
/* #settingsSummaryCost — теперь ВНУТРЕННИЙ span внутри .settings-summary-row
   (см. settings-summary.js/settings-summary-audio.js), не сама строка —
   display:contents делает его невидимым как бокс, дети (.pe-row от
   price-estimate.js) ведут себя как прямые дети flex-row, будто span'а нет
   вовсе. Нужно, чтобы renderCostHtml() мог перезаписывать только этот span,
   не стирая соседний .ss-shortfall (2026-08-21). */
#settingsSummaryCost {
  display: contents;
}

.settings-summary-row > span {
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
}

/* Тот же размер, что у названия рядом (.settings-summary-row > span, 12px),
   без утолщения — та же правка, что раньше была сделана для Stats Strip
   (.stats-strip-row strong), просто забыл сразу применить и сюда. */
.settings-summary strong {
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}

/* Разные смысловые группы полей сводки — свой акцент на каждую, точный
   список — (не общая логика "по палитре",
   а конкретные hex на конкретные лейблы):
   Cost — var(--success) #00e5a0 (та же тема, что CVB/Used/Remaining/
   Signed in as в Stats Strip); Title/Description/Keywords/Top keywords —
   var(--electric-blue) #0066FF; Model/Platform — var(--electric-violet)
   #8A2BE2; Custom Platform/Suggest categories (.ss-toggle) — var(--neon-pink)
   #FF2BD6; Auto-apply/Auto-remove (.ss-behavior, отдельный от .ss-toggle
   класс) — var(--neon-red) #FF1744. */
.ss-cost     { color: var(--success); }
.ss-field    { color: #0087ff; }
.ss-model    { color: #e2ce2b; }
.ss-platform { color: #e2ce2b; }
.ss-format   { color: var(--neon-orange); }
.ss-toggle   { color: var(--neon-pink); }       /* Custom Platform / Suggest categories */
.ss-behavior { color: var(--neon-red); }        /* Auto-apply Include/Exclude/Trademarks, Auto-remove duplicate keywords */

.ss-state.ss-on  { color: #FF6D00; }
.ss-state.ss-off { color: var(--text-dim); }

/* Значения, которые сам пользователь вбивает свободным текстом (Audio:
   Artist/Record Label/Buy Link/Album, Author Name — settings-summary-
   audio.js) — могут быть длиннее, чем разумно показывать целиком в узкой
   колонке; обрезаем многоточием, сам факт заполнения важнее полного
   текста. Строка-обёртка вокруг них по-прежнему flex-wrap (обычное
   поведение .settings-summary-row) — переносится целиком, если не влезает,
   отдельные длинные значения при этом не растягивают её сами по себе. */
.ss-truncate strong {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Кнопка-иконка справа от сводки — открывает боковую панель Settings
   (#settingsToolsTab, см. common/settings/settings-panel.js/settings-summary.js), тот же
   визуал, что у .stats-strip-btn слева, просто своя копия — разные родители
   (JS каждой колонки перерисовывает свой innerHTML независимо). */
.settings-summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(124, 92, 255, 0.25);
  background: rgba(124, 92, 255, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.settings-summary-btn svg {
  width: 24px;
  height: 24px;
}

.settings-summary-btn:hover {
  border-color: rgba(124, 92, 255, 0.5);
  color: #ffffff;
  background: rgba(124, 92, 255, 0.15);
  box-shadow: 0 0 14px rgba(124, 92, 255, 0.15);
}