/*
 * themes.css — Система тем для nova
 * Подключать ПОСЛЕ style.css
 * Активация: document.documentElement.className = 'theme-light'
 */


/* ══════════════════════════════════════════════════════════════
   ☀️  LIGHT — Светлая тема
   ══════════════════════════════════════════════════════════════ */
.theme-light {
  /* Базовые токены */
  --color-bg:                   #F4EFF4;
  --color-surface:              #FFFBFE;
  --color-surface-container:    #F3EDF7;
  --color-surface-high:         #E6E0EC;
  --color-surface-highest:      #DBD5E2;
  --color-surface-island:       #E6E0EC;
  --color-surface-input:        #EDE8F2;
  --color-surface-card:         #EEE8F5;
  --color-surface-overlay:      #E8E3EF;
  --color-surface-toast:        #312D3F;

  --color-primary:              #6750A4;
  --color-primary-dim:          #4F378B;
  --color-primary-container:    #EADDFF;
  --color-primary-on:           #FFFFFF;

  --color-secondary-container:  #E8DEF8;
  --color-secondary-on:         #4A4458;

  --color-tertiary:             #7D5260;
  --color-tertiary-on:          #FFFFFF;

  --color-text:                 #1C1B1F;
  --color-text-muted:           #49454F;
  --color-text-bright:          #000000;
  --color-text-disabled:        #938F99;
  --color-text-hint:            #79747E;

  --color-outline:              #79747E;
  --color-outline-variant:      #CAC4D0;
  --color-divider:              rgba(0, 0, 0, 0.08);
  --color-divider-strong:       rgba(0, 0, 0, 0.14);

  --color-success:              #146B34;
  --color-success-dim:          #0F5228;
  --color-success-bg:           rgba(20, 107, 52, 0.1);
  --color-success-border:       rgba(20, 107, 52, 0.35);
  --color-success-glow:         rgba(20, 107, 52, 0.3);
  --color-warning:              #7A4F00;
  --color-warning-dim:          #5C3A00;
  --color-warning-bg:           rgba(122, 79, 0, 0.1);
  --color-warning-border:       rgba(122, 79, 0, 0.35);
  --color-error:                #B3261E;
  --color-error-solid:          #B3261E;
  --color-error-bg:             rgba(179, 38, 30, 0.1);
  --color-error-border:         rgba(179, 38, 30, 0.35);
  --color-error-on:             #FFFFFF;

  --color-youtube:              #CC0000;
  --color-danger:               #8A1538;

  --color-scrollbar-track:      #E6E0EC;
  --color-scrollbar-thumb:      #CAC4D0;
  --color-scrollbar-hover:      #79747E;
}

/* Скроллбар */
.theme-light * {
  scrollbar-color: #CAC4D0 #E6E0EC;
}
.theme-light *::-webkit-scrollbar-track  { background: #E6E0EC; }
.theme-light *::-webkit-scrollbar-thumb  { background: #CAC4D0; }
.theme-light *::-webkit-scrollbar-thumb:hover { background: #79747E; }

/* Фон */
.theme-light body { background: var(--color-bg); color: var(--color-text); }
.theme-light .background-canvas { opacity: 0.12; }

/* ──────────────────────────────────────────
   Остров в шапке (режим звонка)
   ────────────────────────────────────────── */
.theme-light body.mode-call .main-island {
  background: #E6E0EC !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.08) !important;
}
.theme-light body.mode-call .header-extras-btn {
  background: #E6E0EC !important;
  color: #1C1B1F !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14) !important;
  border: none !important;
}
.theme-light body.mode-call .header-extras-btn:hover {
  background: #DBD5E2 !important;
}
.theme-light .header-separator { background-color: #CAC4D0; }

.theme-light .header-invite-btn {
  background: #DBD5E2 !important;
  color: #1C1B1F !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
.theme-light .header-invite-btn:hover {
  background: #CAC4D0 !important;
  border-color: rgba(0,0,0,0.16) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}

/* ──────────────────────────────────────────
   Нижняя панель управления звонком
   ────────────────────────────────────────── */
.theme-light .controls-panel {
  background: #E6E0EC !important;
  background-color: #E6E0EC !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

/* Обычная кнопка (не muted) */
.theme-light .control-btn:not(.muted):not(#hangBtn):not(.camera-off):not(#shareBtn):not(#stopShareBtn) {
  background: #6750A4 !important;
  color: #FFFFFF !important;
}
.theme-light .controls-panel .control-btn:not(#hangBtn):not(.muted):not(.camera-off):hover {
  background: #4F378B !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* Кнопка muted / camera-off */
.theme-light .control-btn.muted,
.theme-light .control-btn.camera-off {
  background: #DBD5E2 !important;
  color: #49454F !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
.theme-light .control-btn.muted:hover,
.theme-light .control-btn.camera-off:hover {
  background: #CAC4D0 !important;
}

/* Share-кнопки — нейтральный серый, заметно отличающийся от панели */
.theme-light #shareBtn {
  background: var(--color-surface-highest) !important;
  color: var(--color-text-muted) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  /* Убираем белый svg-background */
  fill: none !important;
}
.theme-light #shareBtn svg {
  fill: none !important;
  stroke: var(--color-text-muted) !important;
}
.theme-light #shareBtn:hover {
  background: var(--color-surface-high) !important;
  color: var(--color-text) !important;
  border-color: rgba(0,0,0,0.18) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
}
.theme-light #stopShareBtn {
  background: var(--color-primary) !important;
  color: var(--color-primary-on) !important;
  border: none !important;
}
.theme-light #stopShareBtn svg {
  stroke: var(--color-primary-on) !important;
}

/* Mic dropdown — активный (не muted) */
.theme-light .mic-dropdown {
  background: var(--color-primary) !important;
  color: var(--color-primary-on) !important;
}
.theme-light .mic-dropdown:hover {
  filter: brightness(1.1) !important;
}
/* Разделитель между кнопкой mic и стрелкой */
.theme-light .mic-dropdown-toggle {
  background: rgba(0, 0, 0, 0.12) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: var(--color-primary-on) !important;
}
/* Mic dropdown — muted состояние */
.theme-light .mic-dropdown:has(.muted) {
  background: var(--color-surface-highest) !important;
  color: var(--color-text) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
.theme-light .mic-dropdown:has(.muted) .mic-dropdown-toggle {
  background: rgba(0, 0, 0, 0.06) !important;
  border-left: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: var(--color-text-muted) !important;
}

/* Кнопка завершения */
.theme-light #hangBtn {
  background: #B3261E !important;
  color: #FFFFFF !important;
}
.theme-light #hangBtn:hover { background: #8C1D18 !important; }

/* ──────────────────────────────────────────
   Карточки, панели
   ────────────────────────────────────────── */
.theme-light .main-card,
.theme-light .action-card,
.theme-light .card {
  background: var(--color-surface-container) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Аккаунт-панель */
.theme-light .account-panel {
  background: var(--color-surface) !important;
}
.theme-light .account-header {
  background: var(--color-surface) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.theme-light .account-profile-card {
  background: var(--color-surface-container) !important;
}
.theme-light .account-section-title { color: var(--color-text-muted) !important; }
.theme-light .account-item { border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.theme-light .account-item-label { color: var(--color-text) !important; }
.theme-light .account-item-description,
.theme-light .account-item-value { color: var(--color-text-muted) !important; }
.theme-light .account-item-icon {
  background: var(--color-surface-high) !important;
  color: var(--color-primary) !important;
}
.theme-light .account-back-btn {
  color: var(--color-text) !important;
}
.theme-light .account-title { color: var(--color-text) !important; }
.theme-light .account-profile-name { color: var(--color-text) !important; }

/* Инпуты */
.theme-light .m3-filled-field,
.theme-light .m3-filled-field-input {
  background: var(--color-surface-input) !important;
  color: var(--color-text) !important;
  border-color: rgba(0,0,0,0.12) !important;
}
.theme-light .m3-filled-field-input::placeholder { color: var(--color-text-hint) !important; }

/* Настройки */
.theme-light .settings-panel {
  background: var(--color-surface-container) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.theme-light .settings-toggle-title { color: var(--color-text) !important; }
.theme-light .settings-toggle-desc { color: var(--color-text-muted) !important; }

/* Дополнения (extras) */
.theme-light .extras-panel {
  background: var(--color-surface) !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.theme-light .extras-handle { background: rgba(0,0,0,0.15) !important; }
.theme-light .extras-header { border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
.theme-light .extras-title { color: var(--color-text) !important; }
.theme-light .extras-item { border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
.theme-light .extras-item:hover { background: var(--color-surface-container) !important; }
.theme-light .extras-item-icon {
  background: var(--color-surface-high) !important;
  color: var(--color-primary) !important;
}
.theme-light .extras-item-label { color: var(--color-text) !important; }
.theme-light .extras-item-desc { color: var(--color-text-muted) !important; }

/* Дропдауны */
.theme-light .dropdown-menu,
.theme-light .menu-popup {
  background: var(--color-surface-container) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
/* .share-dropdown — просто враппер, фон не нужен */
.theme-light .share-dropdown {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Внутреннее popup-меню качества */
.theme-light .share-quality-dropdown {
  background: var(--color-surface-container) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
.theme-light .dropdown-item { color: var(--color-text) !important; }
.theme-light .dropdown-item:hover { background: var(--color-surface-high) !important; }

/* Тосты */
.theme-light .snackbar,
.theme-light .toast {
  background: #312D3F !important;
  color: #E6E0E9 !important;
}

/* Оверлеи */
.theme-light .account-overlay,
.theme-light .extras-overlay {
  background: rgba(0,0,0,0.28) !important;
}

/* YouTube-виджет */
.theme-light .ytcw-url-bar,
.theme-light .ytcw-status-bar {
  background: var(--color-surface-container) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.theme-light .ytcw-url-field {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.12) !important;
}
.theme-light .ytcw-url-field:focus-within {
  border-color: var(--color-primary) !important;
  background: rgba(103,80,164,0.04) !important;
}
.theme-light .ytcw-url-input {
  color: var(--color-text) !important;
}
.theme-light .ytcw-url-input::placeholder { color: var(--color-text-hint) !important; }
.theme-light .ytcw-header-title { color: var(--color-text) !important; }
.theme-light .ytcw-load-btn { color: var(--color-primary) !important; }
.theme-light .ytcw-load-btn:hover {
  background: rgba(103,80,164,0.10) !important;
  color: var(--color-primary-dim) !important;
}

/* Quality info */
.theme-light .quality-info-box {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.theme-light .quality-info-box p { color: var(--color-text-muted) !important; }
.theme-light .quality-info-box strong { color: var(--color-text) !important; }

/* Кнопка выхода */
.theme-light .account-logout-btn {
  background: rgba(179,38,30,0.08) !important;
  color: #B3261E !important;
  border: 1px solid rgba(179,38,30,0.18) !important;
}
.theme-light .account-logout-btn:hover {
  background: rgba(179,38,30,0.14) !important;
}

/* Участники / плитки */
.theme-light .participant-tile {
  background: var(--color-surface-high) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
.theme-light .participant-name {
  background: rgba(0,0,0,0.06) !important;
  color: var(--color-text) !important;
}

/* ──────────────────────────────────────────
   Главный экран — кнопки режима
   ────────────────────────────────────────── */
/* Кнопка "Новая встреча": иконка-круг должна быть видна на светлом фоне */
.theme-light .mode-btn.mode-create .btn-icon-bg {
  background: rgba(103, 80, 164, 0.15) !important;
  color: var(--color-primary) !important;
}
.theme-light .mode-btn.mode-create {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}

/* Поле ввода кода комнаты (.m3-text-field) — убираем захардкоженный тёмный фон */
.theme-light .m3-text-field {
  background-color: var(--color-surface-highest) !important;
  border-bottom-color: var(--color-outline-variant) !important;
}
.theme-light .m3-text-field:hover {
  background-color: var(--color-surface-high) !important;
}
.theme-light .m3-text-field:focus-within {
  background-color: var(--color-surface-highest) !important;
  border-bottom-color: var(--color-primary) !important;
}
.theme-light .m3-text-field input {
  color: var(--color-text) !important;
}
.theme-light .m3-text-field label {
  color: var(--color-text-hint) !important;
}
.theme-light .m3-text-field:focus-within label,
.theme-light .m3-text-field input:not(:placeholder-shown) ~ label {
  color: var(--color-primary) !important;
}
.theme-light .m3-text-field .trailing-icon {
  color: var(--color-text-hint) !important;
}
.theme-light .m3-text-field:focus-within .trailing-icon {
  color: var(--color-primary) !important;
}

/* ──────────────────────────────────────────
   Панель участников (.participant-tooltip)
   ────────────────────────────────────────── */
.theme-light .participant-tooltip {
  background: var(--color-surface-container) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.10),
    0 8px 24px rgba(0,0,0,0.12) !important;
}
/* Заголовок «УЧАСТНИКИ» */
.theme-light .pt-header {
  color: var(--color-text-hint) !important;
}
.theme-light .pt-header::before,
.theme-light .pt-header::after {
  background: rgba(0,0,0,0.10) !important;
}
/* Строка участника */
.theme-light .pt-item:hover::before {
  background: rgba(103,80,164,0.06) !important;
}
/* Аватар */
.theme-light .pt-avatar {
  box-shadow:
    0 0 0 2px var(--color-surface-container),
    0 0 0 3.5px rgba(103,80,164,0.30) !important;
}
.theme-light .pt-item:hover .pt-avatar {
  box-shadow:
    0 0 0 2px var(--color-surface-container),
    0 0 0 3.5px rgba(103,80,164,0.55) !important;
}
.theme-light .pt-avatar-img {
  box-shadow:
    0 0 0 2px var(--color-surface-container),
    0 0 0 3.5px rgba(103,80,164,0.30) !important;
}
/* Имя */
.theme-light .pt-name {
  color: var(--color-text) !important;
}
/* Статус-текст */
.theme-light .pt-status-text {
  color: var(--color-text-hint) !important;
}
.theme-light .status-online {
  color: var(--color-success-dim) !important;
}
.theme-light .status-call {
  color: var(--color-success-dim) !important;
}
.theme-light .status-connecting {
  color: var(--color-text-disabled) !important;
}
/* Точка онлайн */
.theme-light .pt-status-text.status-online::before,
.theme-light .pt-status-text.status-call::before {
  background: var(--color-success) !important;
  box-shadow: 0 0 5px var(--color-success-glow) !important;
}
/* Бейдж «ВЫ» */
.theme-light .pt-you-badge {
  background: rgba(103,80,164,0.10) !important;
  color: var(--color-primary) !important;
  border: 1px solid rgba(103,80,164,0.22) !important;
}
/* Разделитель */
.theme-light .pt-divider {
  background: rgba(0,0,0,0.07) !important;
}
/* Кнопки действий */
.theme-light .pt-action-btn {
  background: rgba(0,0,0,0.04) !important;
  color: var(--color-text-disabled) !important;
}

/* ──────────────────────────────────────────
   Вкладки Кастомизации
   ────────────────────────────────────────── */
.theme-light .customization-theme-btn {
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--color-text) !important;
}
.theme-light .customization-theme-btn:hover {
  background: var(--color-surface-high) !important;
}
.theme-light .customization-theme-btn.active {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-container) !important;
}

/* ══════════════════════════════════════════════════════════════
   📱  MOBILE LIGHT — Фиксы для мобильных media queries
   ══════════════════════════════════════════════════════════════ */

/* ── Верхний островок (app-header) ── */
@media (max-width: 768px) {
  .theme-light body.mode-call .app-header {
    background: rgba(230, 224, 236, 0.95) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  }

  .theme-light body.mode-call .call-timer {
    color: #1C1B1F !important;
  }

  .theme-light body.mode-call .header-separator:not(.hidden) {
    background: rgba(0,0,0,0.18) !important;
  }

  .theme-light body.mode-call .participant-badge:not(.hidden) {
    color: #49454F !important;
  }

  .theme-light body.mode-call .header-invite-btn:not(.hidden) {
    background: rgba(103,80,164,0.12) !important;
    border: 1px solid rgba(103,80,164,0.22) !important;
  }

  /* ── Нижняя панель управления — плавный светлый градиент вместо кирпича ── */
  .theme-light .controls-panel:not(.hidden) {
    background: linear-gradient(
      to top,
      rgba(244,239,244,1.0)  0%,
      rgba(244,239,244,0.96) 45%,
      rgba(244,239,244,0.6)  72%,
      rgba(244,239,244,0.0)  100%
    ) !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Кнопка камеры на мобилке */
  .theme-light .controls-panel:not(.hidden) #cameraBtn:not(.camera-off) {
    background: transparent !important;
    color: #FFFFFF !important;
  }
  .theme-light .controls-panel:not(.hidden) #cameraBtn.camera-off {
    background: transparent !important;
    color: #49454F !important;
  }

  /* ── Camera dropdown pill — светлая тема (десктоп) ── */
  .theme-light .camera-dropdown {
    background-color: #6750A4 !important;
    color: #FFFFFF !important;
  }
  .theme-light .camera-dropdown:has(#cameraBtn.sharing-active) {
    background-color: #4F378B !important;
  }
  .theme-light .camera-dropdown:has(#cameraBtn.cam-unavailable) {
    background-color: #DBD5E2 !important;
    color: #49454F !important;
  }
  /* Стрелка выбора камеры */
  .theme-light #cameraDropdownToggle {
    background: rgba(0,0,0,0.12) !important;
    border-left: 1px solid rgba(0,0,0,0.15) !important;
    color: #FFFFFF !important;
  }
  .theme-light #cameraDropdownToggle svg {
    fill: #FFFFFF !important;
  }
  /* На мобилке pill превращается в круг — цвет от camera-dropdown */
  .theme-light .controls-panel:not(.hidden) .camera-dropdown {
    background-color: #6750A4 !important;
    color: #FFFFFF !important;
  }
  .theme-light .controls-panel:not(.hidden) .camera-dropdown:has(#cameraBtn.cam-unavailable) {
    background-color: #DBD5E2 !important;
    color: #49454F !important;
  }

  /* Mic muted — светлый стиль */
  .theme-light .controls-panel:not(.hidden) .mic-dropdown:has(.muted) {
    background-color: #DBD5E2 !important;
    color: #49454F !important;
    border: none !important;
  }
  .theme-light .controls-panel:not(.hidden) .mic-dropdown:has(.muted) .mic-dropdown-toggle {
    background: rgba(0,0,0,0.07) !important;
    border-left: 1px solid rgba(0,0,0,0.10) !important;
    color: #49454F !important;
  }

  /* ── Форма пилюли микрофона: overflow: hidden обрезает дочерние элементы по border-radius родителя ── */
  .theme-light .controls-panel:not(.hidden) .mic-dropdown {
    overflow: hidden !important;
  }
  .theme-light .controls-panel:not(.hidden) .mic-main-btn {
    border-radius: 0 !important;
  }
  .theme-light .controls-panel:not(.hidden) .mic-dropdown-toggle {
    border-radius: 0 !important;
  }
}