/* css/components/account-access.css — Блок аккаунта Puter и вид кнопок до входа (до токена / до логина в Puter).
   Порядок подключения всех стилей задан в layout/head.php — он важен. */
/* ===== БЛОК СТАТУСА PUTER-АККАУНТА ===== */

.puter-key-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Статус ключа — строка под инпутом */
.puter-key-status {
  font-size: 12px;
  color: var(--text-dim);
  transition: color 0.2s;
}

.puter-key-status.ok   { color: var(--success); }
.puter-key-status.warn { color: #ffaa44; }
.puter-key-status.empty { color: var(--text-dim); }

/* Ссылка на получение ключа */
.puter-key-link {
  font-size: 12px;
  color: var(--text-link);
  text-decoration: none;
}

.puter-key-link:hover {
  text-decoration: underline;
}


/* Puter Account */
.puter-resources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 10px 0 6px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(124, 92, 255, 0.15);
  background: rgba(255, 255, 255, 0.02);
}

/* Label над значением вместо "Label .... Value" в одну строку —
   компактнее по высоте и лучше работает в 2 колонки */
.puter-resource-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.puter-resource-row span:last-child {
  font-size: 15px;
  color: var(--text-link);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* CVB Balance (см. #proBalanceData в credit-panel.js) — значения
   белые вместо общего голубоватого var(--text-link).
   Scoping по ID контейнера — не задевает Puter Account (#puterResourcesData),
   у которого та же общая .puter-resource-row/:last-child разметка, но её
   специально не трогаем (см. .stats-strip выше). */
#proBalanceData .puter-resource-row span:last-child {
  color: #ffffff;
}

/* Прогресс-бар и предупреждение про guest-сессию — единственные прямые
   дети .puter-resources, которые не .puter-resource-row — растягиваем
   их на всю ширину сетки */
.puter-resources > div:not(.puter-resource-row) {
  grid-column: 1 / -1;
}

/* Внутри узкой боковой панели (340px, см. .stats-panel в разделе Token
   Usage panel ниже) 2 колонки слишком тесные для длинных чисел вроде
   "24,721,147" — одна колонка + чуть мельче шрифт значений. */
.stats-panel .puter-resources {
  grid-template-columns: 1fr;
  gap: 8px;
}

/* В одну колонку (см. выше) вертикальная стопка "название/значение" из
   базового .puter-resource-row смотрится тяжело — возвращаем "название
   слева, значение справа" в одну строку. */
.stats-panel .puter-resource-row {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.stats-panel .puter-resource-row span:first-child {
  flex-shrink: 0;
}

.stats-panel .puter-resource-row span:last-child {
  font-size: 13px;
  text-align: right;
  word-break: break-word;
}

/* Ссылка на /pro-history — статичная разметка (см. pages/generators/pro-image.php/pro-video.php),
   сразу под "Lost your access token? Resend it" (.pro-resend-link) — НЕ внутри
   .puter-resources/.puter-resource-row: раньше жила там и визуально сливалась
   с обычными строками баланса, хотя это переход на другую страницу, а не
   цифра (перенесено по замечанию пользователя 2026-08-12). Видимость/badge
   переключает credit-panel.js (updateHistoryLinkUI()), сама разметка статична. */
/* Обёртка ссылки+тумблера — сама .is-hidden теперь здесь (не на
   .history-static-link), т.к. это уже не единственный элемент строки.
   justify-content:center сохраняет прежнее центрированное расположение
   (было у самой ссылки, когда тумблера ещё не было). */
.history-static-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 24px, не 10px — .history-notif-badge торчит на right:-20px за пределы
     .history-static-link (откалибровано, чтобы не наезжать на текст "History"),
     при маленьком gap этот вылет упирался в тумблер (замечание пользователя
     2026-08-12). Больший зазор даёт бейджу место, не трогая уже подобранное
     положение самого бейджа. */
  gap: 24px;
  margin: 2px 0 4px;
}

.history-static-link {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
}
.history-static-link:hover {
  color: var(--neon-cyan);
}

/* Обёртка вокруг иконки+текста, сжатая по контенту (inline-flex) и
   position:relative — точка отсчёта для абсолютно спозиционированного
   badge ниже. Без неё badge был обычным flex-соседом в строке шириной
   100% и "плавал" по baseline вместе с текстом — не центрирован и не
   приподнят (замечание пользователя 2026-08-12). */
.history-static-link-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Красный (--neon-red) — та же конвенция, что .danger по всему сайту, и
   тот же цвет, что используют соцсети для непрочитанных уведомлений.
   position:absolute от .history-static-link-inner — классическое
   "приподнятое" положение badge над правым краем текста, а не инлайн
   в строке. .is-hidden (глобальный утилитарный класс) скрывает badge
   при 0 записей.
   right:-20px (не -12px) — при ширине бейджа ~16-20px старое значение
   давало лишь половинчатый отступ, и кружок наполовину наезжал на "y" в
   "History" (замечание пользователя 2026-08-12). line-height:16px+
   text-align:center вместо flex-центрирования — надёжнее держит цифру
   строго по центру круга для однострочного текста. */
.history-notif-badge {
  position: absolute;
  top: -9px;
  right: -20px;
  background: var(--neon-red);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(12, 18, 32, 0.95);
}

/* "✓ Signed in as X" живёт только в узкой строке над Settings (#statsStrip,
   см. free-image/puter-account.js) — в боковой панели дублировать не
   нужно. Элемент оставляем в DOM (JS его использует для error/loading
   состояний), просто визуально прячем именно в контексте панели. */
.stats-panel #puterStatus {
  display: none;
}

.puter-privacy-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  padding-left: 2px;
}

.puter-credits-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.puter-credits-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Тот же визуал, что у .puter-credits-bar/-fill выше, но под своим именем —
   это CVB (см. common/pro/credit-panel.js), не Puter-система кредитов,
   специально не переиспользуем "puter-"-классы для другого продукта
   (CVB и кредиты Puter — разные системы, классы не смешиваем). Используется и в CVB
   Balance (боковая панель), и компактно в Stats Strip. */
.credits-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.credits-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* =============================================================
   ДОСТУП ДО АВТОРИЗАЦИИ (Pro: до ввода Access Token, Free: до логина
   в Puter) — НЕ прячем весь функционал (пользователь
   должен иметь возможность "пощупать" интерфейс/увидеть цену), но пара
   конкретных кнопок либо скрыта целиком (бессмысленны без токена/сессии —
   Refresh Balance/Account, Export/Import Settings), либо визуально и
   функционально дезактивирована (Generate, Manage Custom Platforms).
   .btn-locked — НЕ трогает нативный disabled (чтобы не конфликтовать с
   существующей логикой startBtn.disabled на паузы/резюме батча), вместо
   этого блокирует клики через pointer-events — независимый, отдельный
   переключатель поверх любого другого состояния кнопки.
   ============================================================= */
.is-hidden {
  display: none !important;
}

.btn-locked {
  opacity: 0.45;
  filter: grayscale(0.3);
  pointer-events: none;
  cursor: not-allowed;
}