/* ============================================================
   themes.css — тёмная тема Fleeker
   Все [data-theme="dark"] правила собраны здесь.
   base.css содержит переменные для обеих тем.
   ============================================================ */

/* ---- Системная тема (если data-theme не задан) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:   #111827;
    --bg2:  #1f2937;
    --bg3:  #374151;
    --bg4:  #4b5563;
    --txt:  #f9fafb;
    --txt2: #9ca3af;
    --txt3: #6b7280;
    --border:  rgba(255,255,255,0.08);
    --border2: rgba(255,255,255,0.14);
    --msg-out:     #312e81;
    --msg-out-txt: #c7d2fe;
    --msg-out-check: #818cf8;
    --accent:       #818cf8;
    --accent-hover: #6366f1;
    --accent-light:  rgba(129,140,248,0.12);
    --accent-light2: rgba(129,140,248,0.22);
  }
}

/* ---- Скроллбар (Firefox) ---- */
[data-theme="dark"] {
  scrollbar-color: var(--border2) transparent;
}

/* ---- Auth-экран ---- */
[data-theme="dark"] .auth-card {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .field-input {
  background: var(--bg2);
  color: var(--txt);
  border-color: var(--border2);
}

[data-theme="dark"] .field-input::placeholder {
  color: var(--txt3);
}

[data-theme="dark"] .auth-tabs {
  background: var(--bg3);
}

[data-theme="dark"] .auth-tab.active {
  background: var(--bg2);
}

/* ---- Навигация ---- */
[data-theme="dark"] .sidebar-nav {
  background: var(--bg2);
  border-right-color: var(--border);
}

[data-theme="dark"] .user-dropdown {
  background: var(--bg2);
  border-color: var(--border2);
}

[data-theme="dark"] .dropdown-item:hover {
  background: var(--bg3);
}

/* ---- Панель контента ---- */
[data-theme="dark"] .content-panel {
  background: var(--bg2);
  border-right-color: var(--border);
}

[data-theme="dark"] .panel-head {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .search-box {
  background: var(--bg3);
}

[data-theme="dark"] .list-item:hover {
  background: var(--bg3);
}

[data-theme="dark"] .list-item.active {
  background: var(--accent-light);
}

/* ---- Шапка чата ---- */
[data-theme="dark"] .chat-header {
  background: var(--bg2);
  border-bottom-color: var(--border);
}

/* ---- Сообщения ---- */
[data-theme="dark"] .messages-container {
  background: var(--bg3);
}

[data-theme="dark"] .bubble.incoming {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--txt);
}

[data-theme="dark"] .date-separator span {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--txt3);
}

[data-theme="dark"] .reply-preview-bubble {
  background: var(--accent-light);
}

/* ---- Зона ввода ---- */
[data-theme="dark"] .input-zone {
  background: var(--bg2);
  border-top-color: var(--border);
}

[data-theme="dark"] .input-wrap {
  background: var(--bg3);
  border-color: var(--border2);
}

[data-theme="dark"] .message-input {
  color: var(--txt);
}

[data-theme="dark"] .reply-preview {
  background: var(--accent-light);
}

/* ---- Правая панель ---- */
[data-theme="dark"] .right-panel {
  background: var(--bg2);
  border-left-color: var(--border);
}

[data-theme="dark"] .rp-head {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .participant-item:hover {
  background: var(--bg3);
}

[data-theme="dark"] .rp-chat-info {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .rp-quick-btn {
  background: var(--bg3);
}

[data-theme="dark"] .rp-quick-btn:hover {
  background: var(--accent-light);
}

[data-theme="dark"] .rp-info-section {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .rp-danger-section {
  border-top-color: var(--border);
}

/* ---- Модальные окна ---- */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .modal-box {
  background: var(--bg2);
  border-color: var(--border2);
}

[data-theme="dark"] .modal-head {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .modal-foot {
  border-top-color: var(--border);
}

[data-theme="dark"] .modal-body p {
  color: var(--txt2);
}

/* ---- Context menu ---- */
[data-theme="dark"] .ctx-menu {
  background: var(--bg2);
  border-color: var(--border2);
}

[data-theme="dark"] .ctx-item:hover {
  background: var(--bg3);
}

[data-theme="dark"] .ctx-divider {
  background: var(--border);
}

/* ---- Уведомления (toast) ---- */
[data-theme="dark"] .notification {
  background: var(--bg2);
  border-color: var(--border2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ---- Уведомления в панели ---- */
[data-theme="dark"] .notif-item {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .notif-item:hover {
  background: var(--bg3);
}

[data-theme="dark"] .notif-item.unread {
  background: var(--accent-light);
}

/* ---- Настройки ---- */
[data-theme="dark"] .settings-group {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .settings-item:hover {
  background: var(--bg3);
}

/* ---- Чёрный список ---- */
[data-theme="dark"] .blacklist-item {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .blacklist-item:hover {
  background: var(--bg3);
}

[data-theme="dark"] .blacklist-search {
  border-bottom-color: var(--border);
}

[data-theme="dark"] .bl-unblock-btn {
  border-color: var(--border2);
  color: var(--txt2);
}

/* ---- Управление участником ---- */
[data-theme="dark"] .member-action-btn:hover {
  background: var(--bg3);
}

[data-theme="dark"] .mab-divider {
  background: var(--border);
}

/* ---- Поле ввода форм ---- */
[data-theme="dark"] .field-prefix {
  border-color: var(--border2);
}

[data-theme="dark"] .prefix-at {
  background: var(--bg3);
  border-right-color: var(--border2);
  color: var(--txt3);
}

/* ---- Кнопки ---- */
[data-theme="dark"] .btn-ghost {
  border-color: var(--border2);
  color: var(--txt2);
}

[data-theme="dark"] .btn-ghost:hover {
  background: var(--bg3);
  color: var(--txt);
}

[data-theme="dark"] .icon-btn:hover {
  background: var(--bg3);
}

/* ---- Typing индикатор ---- */
[data-theme="dark"] .typing-dot {
  background: var(--txt3);
}

/* ---- Групповой чат ---- */
[data-theme="dark"] .group-msg-body .bubble.incoming {
  background: var(--bg2);
}

/* ---- Пустое состояние ---- */
[data-theme="dark"] .chat-empty {
  color: var(--txt3);
}

[data-theme="dark"] .chat-empty h3 {
  color: var(--txt2);
}

/* ---- Загрузка ---- */
[data-theme="dark"] .loading-state {
  background: var(--bg3);
}