/* ====== Глобальная тема (взято с лендинга) ====== */
:root {
  --bg-primary: #1a1a1f;
  --bg-secondary: #252530;
  --bg-card: #2a2a35;

  /* Телеграм-акцент */
  --accent: #2AABEE;
  --accent-hover: #0088cc;

  --text-primary: #ffffff;
  --text-secondary: #a0a0b0;
  --border-color: #3a3a45;

  --gradient-accent: linear-gradient(135deg, #2AABEE, #0088cc);
  --shadow-accent: 0 10px 25px rgba(42,171,238,0.25);
}

/* ====== Базовые поверхности/текст ====== */
html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}
.header, header {
  background: rgba(26,26,31,0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color) !important;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

/* ====== Карточки, панели, разделители ====== */
.card, .document-container, .chat-container, .modal .modal-content,
.dropdown-menu, .toast, .analysis-card, .feature-card, .demo-container {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
hr, .stepper-connector { background: var(--border-color) !important; }

/* ====== Кнопки (унификация под .btn, .btn-primary, .btn-secondary) ====== */
.btn, .button {
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover, .button:hover { transform: translateY(-1px); }

.btn-primary, .button.primary, .tokens-badge .cta,
input[type="submit"].btn-primary {
  background: var(--gradient-accent) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover, .button.primary:hover {
  filter: brightness(1.02);
  box-shadow: 0 12px 30px rgba(42,171,238,0.35);
}

.btn-secondary, .button.secondary {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
.btn-secondary:hover { background: var(--bg-secondary) !important; }

/* Малые кнопки в документе */
.btn-sm, .btn-action {
  border-radius: 10px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.btn-action.secondary { opacity: 0.9; }

/* Disabled состояние */
button:disabled, .btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  filter: grayscale(10%);
}

/* ====== Инпуты/текстовые поля ====== */
input, textarea, select {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--text-secondary) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--accent) !important; }

/* ====== Чат ====== */
.chat-messages { background: transparent !important; }
.message.user .message-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.message.bot .message-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}
.typing-dot { background: var(--accent) !important; }

/* ====== Степпер прогресса ====== */
.progress-stepper { background: transparent !important; }
.stepper-item .stepper-number {
  background: var(--bg-card) !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent) !important;
}
.stepper-item.active .stepper-number {
  background: var(--gradient-accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.stepper-item.completed .stepper-number {
  background: var(--bg-secondary) !important;
  border-color: var(--accent) !important;
}

/* ====== Бейдж токенов/иконки ====== */
.tokens-badge {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: #fff !important;
}
.low-balance-badge { background: var(--accent) !important; color:#fff !important; }

/* ====== Модалки ====== */
.modal .modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
}
.modal .modal-actions .btn-primary { background: var(--gradient-accent) !important; }

/* ====== Тосты ====== */
.toast.success { border-left: 3px solid var(--accent) !important; }
.toast.error   { border-left: 3px solid #ff5c5c !important; }

/* ====== Ссылки-крошки/TOC ====== */
.document-toc a {
  color: var(--text-secondary) !important;
}
.document-toc a:hover { color: var(--accent) !important; }

/* ====== Плашки статуса секций ====== */
.section-status.draft {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
.section-status.accepted {
  background: rgba(42,171,238,0.12) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(42,171,238,0.35) !important;
}

/* ====== Прочее ====== */
.badge, .quick-hints .hint-chip {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.hint-chip:hover { background: var(--bg-secondary) !important; }


/* ========= Telegram Theme Tokens (Dark) ========= */
:root{
  /* Brand / Accent */
  --primary-color:        #2AABEE;   /* Telegram Blue */
  --primary-color-2:      #229ED9;   /* Darker Blue */
  --primary-gradient:     linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);

  /* Surfaces & Text (Telegram dark tones) */
  --background-color:     #0E1621;
  --surface-color:        #17212B;
  --surface-hover:        #1C2733;
  --border-color:         #2A3642;

  --text-primary:         #E6EAF2;
  --text-secondary:       #A8B0BA;
  --text-tertiary:        #7E8794;

  /* States */
  --success-color:        #34D399;
  --warning-color:        #FBBF24;
  --danger-color:         #FF6B6B;
  --link-color:           var(--primary-color);

  /* Misc */
  --shadow-strong:        0 12px 32px rgba(0,0,0,.45);
  --radius-md:            12px;
  --radius-lg:            18px;
}

/* ========= Brand overrides for components ========= */

/* Главные «акцентные» элементы */
.card-btn.primary,
.btn.btn-primary,
.filter-tab.active,
.progress-fill,
.active-badge,
.tokens-badge.low-balance .low-balance-badge,
.modal .btn-primary {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* Ссылки */
a { color: var(--link-color); }
a:hover { filter: brightness(1.08); }

/* Фоновые и бордер-цвета по умолчанию */
body {
  background: var(--background-color);
  color: var(--text-primary);
}
.header, .analysis-card, .modal-content, .dropdown-menu,
.chat-input-container .input-wrapper,
.document-container, .tokens-badge, .filter-tabs, .analyses-counter {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Текстовые вторичные */
.meta-item, .section-status.draft, .quick-hints,
.card-btn, .btn.btn-secondary,
.filter-tab, .analyses-counter, .no-results p, .empty-state p {
  color: var(--text-secondary);
}

/* Hover */
.card-btn:hover,
.btn.btn-secondary:hover,
.back-btn:hover,
.filter-tab:hover,
#tokensBtn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

/* Активный бейдж «Активный» в Хабе */
.active-badge {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Аватар (кружок) — делаем синим */
.avatar #avatarInitial, .avatar span#avatarInitial {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background: var(--primary-color);
  color:#fff;
}

/* Кнопка скрепки (прикрепление) — тоже брендовая */
.attach-btn {
  background: var(--surface-hover);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: .2s;
}
.attach-btn:hover { color: var(--text-primary); border-color: var(--primary-color); }

/* Таб-чипсы */
.filter-tab.active { color:#fff; }

/* Прогресс-бар заполнитель */
.progress-fill { background: var(--primary-gradient); }

/* Опасные кнопки (оставим красными) */
.btn.btn-danger, .modal .btn-danger {
  background: linear-gradient(135deg, var(--danger-color) 0%, #FF8F6B 100%) !important;
  color: #0b0f1a !important;
  border: none !important;
}

/* Бордеры и радиусы — единообразие */
.analysis-card, .modal-content, .document-container, .tokens-badge,
.dropdown-menu, .chat-input-container .input-wrapper {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* Тосты */
.toast.success { background: #1B2835; color: #D7F3FF; border-left:4px solid var(--primary-color); }
.toast.error   { background: #2F1D22; color: #FFD7DC; border-left:4px solid var(--danger-color); }

/* Хедер: не расползается и умеет переносить элементы */
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;             /* позволяет переноситься на новую строку */
  min-height:56px;
}
.header .logo{
  flex:1 1 auto;              /* можно сжимать */
  min-width:0;                /* убирает "выталкивание" вправо */
}
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  flex-wrap:wrap;             /* перенос кнопок/токенов/аватара */
}
.tokens-badge{ white-space:nowrap; flex:0 0 auto; }
.avatar{ flex:0 0 auto; }

/* ====== TOKENS BADGE — HUB STYLE ====== */
:root{
  --tb-bg: rgb(42 171 238 / 10%);                /* мягкий фон в теме TG */
  --tb-bg-hover: rgb(42 171 238 / 16%);
  --tb-ring: rgb(42 171 238 / 30%);
  --tb-text: var(--tg-theme-text-color, #e8eef6);
  --tb-accent: var(--tg-theme-button-color, #2AABEE);
  --tb-accent-weak: color-mix(in oklab, var(--tb-accent) 28%, transparent);
}

.tokens-badge.hub-style{
  display:inline-flex; align-items:center; gap:10px;
  border-radius: 999px;                      /* пилюля как в Хабе */
  padding: 8px 14px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-accent-weak);
  color: var(--tb-text);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}

/* иконка и подписи */
.tokens-badge .tb-icon{ font-size: 16px; transform: translateY(.5px); }
.tokens-badge .tb-label{ font-size: 12px; opacity:.9; letter-spacing:.2px; }
.tokens-badge .tb-balance{
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* hover/active/shimmer как в Хабе */
.tokens-badge.hub-style:hover{
  background: var(--tb-bg-hover);
  border-color: var(--tb-accent);
  box-shadow: 0 0 0 4px var(--tb-ring);
}
.tokens-badge.hub-style:active{ transform: translateY(1px) scale(.98); }

/* focus-visible (клавиатура) */
.tokens-badge.hub-style:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--tb-accent);
}

/* низкий баланс — «пульс» */
.tokens-badge.low-balance .tb-balance{
  background: rgba(255, 153, 0, .12);
  border-color: rgba(255, 153, 0, .35);
}
.tokens-badge.low-balance{
  animation: tb-pulse 1.8s ease-in-out infinite;
}
@keyframes tb-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,153,0,.0); }
  50%{ box-shadow: 0 0 0 10px rgba(255,153,0,.12); }
}

/* «поп» при обновлении баланса */
.tokens-badge.bump{ animation: tb-bump .22s ease; }
@keyframes tb-bump{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

/* компактность на узких экранах: прячем слово «Токены», оставляем 💎 + число */
@media (max-width: 420px){
  .tokens-badge .tb-label{ display:none; }
}

/* у кого ограничено движение */
@media (prefers-reduced-motion: reduce){
  .tokens-badge,
  .tokens-badge.hub-style:hover,
  .tokens-badge.low-balance,
  .tokens-badge.bump{ animation: none !important; transition: none !important; }
}

/* Выпадающее меню аватара: починка позиционирования/видимости */
.header .avatar { position: relative; }
.header .avatar .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--surface-color, #2a2d3a);
  border: 1px solid var(--border-color, #3a3d4a);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  display: none;
  z-index: 50;
}
.header .avatar .dropdown-menu.open { display: block; }
.header .avatar .dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-secondary, #9ca3af);
}
.header .avatar .dropdown-item:hover {
  background: var(--surface-hover, #323544);
  color: var(--text-primary, #fff);
}

/* bump-анимация аватара */
@keyframes hubPop { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }
.avatar.bump { animation: hubPop .26s ease; }

/* ripple-кружок по клику */
.avatar { overflow: hidden; position: relative; }
.avatar .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  opacity: .35;
  background: #ffffff33;
  animation: hubRipple .55s ease-out forwards;
  pointer-events: none;
}
@keyframes hubRipple { to { transform: scale(2.2); opacity: 0; } }
/* Унификация поведения дропдауна аватара */
.header .avatar { position: relative; }

.header .avatar .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  z-index: 1100;               /* выше карточек/хедера */
  display: none;
  opacity: 0;
  pointer-events: none;         /* по умолчанию выключено */
  transition: opacity .12s ease;
}

.header .avatar .dropdown-menu.open,
.header .avatar .dropdown-menu.active {  /* поддержка обеих схем */
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Dropdown: показываем и при .open, и при .active */
.header .avatar .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  z-index: 1100;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.header .avatar .dropdown-menu.open,
.header .avatar .dropdown-menu.active {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}