/* ========== MAIN ========== */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg-base); height: 100%; overflow: hidden; position: relative; }

.header {
  display: flex; justify-content: space-between; align-items: center;
  height: 60px; padding: 0 16px; background: var(--bg-base); flex-shrink: 0; box-sizing: border-box;
  position: relative;
}
.header-left, .header-right { display: flex; align-items: center; gap: 8px; min-width: 0; }

.btn-header {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  padding: 6px; border-radius: var(--radius-sm); width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-duration-fast) var(--ease-in-out); flex-shrink: 0;
}
.btn-header:hover { background: var(--bg-hover); color: var(--text-primary); }

.chat-title { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 400px; display: flex; align-items: baseline; gap: 6px; }
.chat-subtitle { font-size: 12px; font-weight: 400; color: var(--text-tertiary); }

/* ========== СЧЁТЧИК ЗАПРОСОВ ========== */
.requests-counter {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  padding: 0;
  border: none;
  margin-right: 4px;
}

.requests-counter .counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.requests-counter .counter-label {
  font-size: 10px;
  color: #98989d;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.requests-counter .counter-value {
  font-size: 12px;
  font-weight: 700;
  color: #409cff;
  text-align: right;
}

.requests-counter .dot {
  display: none;
}

.requests-counter-bar {
  width: 100px;
  height: 5px;
  background: rgba(128,128,128,0.08);
  border-radius: 3px;
  overflow: hidden;
  direction: rtl;
}

.requests-counter-fill {
  height: 100%;
  background: linear-gradient(90deg, #0071e3, #409cff, #0af);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Art AI — жёлтый */
.requests-counter.art .counter-value { color: #f3d779; }
.requests-counter.art .requests-counter-fill { background: linear-gradient(90deg, #f3d779, #f5a623, #f3d779); }

/* Vio AI — фиолетовый */
.requests-counter.video .counter-value { color: #a78bfa; }
.requests-counter.video .requests-counter-fill { background: linear-gradient(90deg, #7c3aed, #a78bfa, #7c3aed); }

/* Предупреждение */
.requests-counter.low .counter-value { color: #ff9500; }
.requests-counter.low .requests-counter-fill { background: linear-gradient(90deg, #ff9500, #ff6b00, #ff9500); }

/* Исчерпан / Безлимит — фиолетовый */
.requests-counter.empty .counter-value { color: #af52de; }
.requests-counter.empty .requests-counter-fill { background: linear-gradient(90deg, #af52de, #d190ff, #af52de); }

.btn-login-header {
  text-decoration: none; color: #fff; font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-round);
  background: linear-gradient(135deg, #0071e3, #0a84ff, #409cff, #0071e3);
  background-size: 300% 300%; white-space: nowrap; margin-right: 4px;
  box-shadow: 0 2px 8px rgba(0,113,227,0.3);
  transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-login-header:hover { background-position: 100% 50%; box-shadow: 0 8px 24px rgba(0,113,227,0.5); transform: translateY(-1px); }
.btn-login-header:active { transform: scale(0.97); }

/* ========== КНОПКИ ХЕДЕРА ========== */
#btnTheme { width: 32px !important; height: 32px !important; border-radius: 8px !important; font-size: 14px !important; color: #0071e3 !important; background: rgba(0,113,227,0.06) !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
#btnTheme:hover { background: rgba(0,113,227,0.12) !important; }
#btnOpenLang { padding: 5px 9px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 700 !important; color: #0071e3 !important; background: rgba(0,113,227,0.06) !important; letter-spacing: 0.02em !important; width: auto !important; height: auto !important; min-width: auto !important; }
#btnOpenLang:hover { background: rgba(0,113,227,0.12) !important; }
#tariffBadge { display: inline-flex !important; align-items: center !important; gap: 5px !important; padding: 5px 12px !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 700 !important; background: rgba(0,113,227,0.06); color: #0071e3; border: 0.5px solid rgba(0,113,227,0.1); cursor: pointer !important; transition: all 0.3s !important; background-image: none !important; line-height: 1.3 !important; animation: tariffPulse 2.5s ease-in-out infinite !important; }
#tariffBadge:hover { background: rgba(0,113,227,0.12); transform: translateY(-1px) !important; }

@keyframes tariffPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(0, 113, 227, 0); }
}

@keyframes heartBeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.25)} 30%{transform:scale(1)} 45%{transform:scale(1.15)} 60%{transform:scale(1)} }

/* ========== ПЕРЕКЛЮЧАТЕЛЬ PRO/ART/VIDEO ========== */
.mode-switch {
  display: flex; background: var(--bg-input); border-radius: 30px; padding: 3px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 0;
}
.mode-btn { padding: 6px 16px; border-radius: 26px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all 0.25s; background: transparent; color: var(--text-secondary); white-space: nowrap; }
.mode-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(0,113,227,0.3); }
.mode-btn[data-mode="art"].active { background: #f3d779; color: #000; box-shadow: 0 2px 8px rgba(243,215,121,0.3); }
.mode-btn[data-mode="video"].active { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,0.4); }
.mode-switch.hidden { display: none; }

.model-selector { padding: 0 16px 8px; width: 100%; max-width: var(--message-max-width); margin: 0 auto; }
.model-selector-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--bg-input); border: 1px solid var(--border-l1); cursor: pointer; font-size: 13px; color: var(--text-secondary); transition: all 0.15s; font-family: var(--font-family); }
.model-selector-btn.art-mode { border-color: rgba(243,215,121,0.3); background: rgba(243,215,121,0.06); color: #f3d779; }
.model-arrow { font-size: 8px; margin-left: 2px; }