/* Chat Snake: cores da Snake por cima dos tokens do Compound (design system do Element).
   Fica FORA de @layer de propósito: no Element 1.12.33 o "compound" dos custom_themes do config.json
   entra numa camada de prioridade menor que a dos padrões e não pega. Carregado pelo nginx no <head>.
   Paleta: a mesma do Portal (frontend/tailwind.config.cjs). */

.cpd-theme-light {
  --cpd-color-bg-action-primary-rest: #3C50E0;
  --cpd-color-bg-action-primary-hovered: #3445C4;
  --cpd-color-bg-action-primary-pressed: #2C3BA8;
  --cpd-color-bg-action-primary-disabled: #AEB7C0;
  --cpd-color-text-on-solid-primary: #FFFFFF;
  --cpd-color-bg-accent-rest: #3C50E0;
  --cpd-color-bg-accent-hovered: #3445C4;
  --cpd-color-bg-accent-pressed: #2C3BA8;
  --cpd-color-text-action-accent: #3C50E0;
  --cpd-color-text-link-external: #3C50E0;
  --cpd-color-icon-accent-primary: #3C50E0;
  --cpd-color-icon-accent-tertiary: #3C50E0;
  --cpd-color-border-focused: #3C50E0;
  --cpd-color-border-accent-subtle: #C5CCF6;
  --cpd-color-bg-accent-selected: #E8EBFC;
  --cpd-color-text-primary: #1C2434;
  --cpd-color-text-secondary: #64748B;
  --cpd-color-icon-primary: #1C2434;
  --cpd-color-icon-secondary: #64748B;
  --cpd-color-bg-canvas-default: #FFFFFF;
  --cpd-color-bg-subtle-primary: #E2E8F0;
  --cpd-color-bg-subtle-secondary: #F1F5F9;
  --cpd-color-border-interactive-secondary: #E2E8F0;
  --cpd-color-text-critical-primary: #D34053;
  --cpd-color-bg-critical-primary: #D34053;
}

.cpd-theme-dark {
  --cpd-color-bg-action-primary-rest: #3C50E0;
  --cpd-color-bg-action-primary-hovered: #5A6CF0;
  --cpd-color-bg-action-primary-pressed: #3445C4;
  --cpd-color-bg-action-primary-disabled: #313D4A;
  --cpd-color-text-on-solid-primary: #FFFFFF;
  --cpd-color-bg-accent-rest: #3C50E0;
  --cpd-color-bg-accent-hovered: #5A6CF0;
  --cpd-color-bg-accent-pressed: #3445C4;
  --cpd-color-text-action-accent: #8C9AF5;
  --cpd-color-text-link-external: #8C9AF5;
  --cpd-color-icon-accent-primary: #8C9AF5;
  --cpd-color-icon-accent-tertiary: #8C9AF5;
  --cpd-color-border-focused: #5A6CF0;
  --cpd-color-bg-accent-selected: #2E3A6B;
  --cpd-color-text-primary: #DEE4EE;
  --cpd-color-text-secondary: #AEB7C0;
  --cpd-color-icon-primary: #DEE4EE;
  --cpd-color-icon-secondary: #AEB7C0;
  --cpd-color-bg-canvas-default: #24303F;
  --cpd-color-bg-subtle-primary: #313D4A;
  --cpd-color-bg-subtle-secondary: #1C2434;
  --cpd-color-border-interactive-secondary: #2E3A47;
}

/* Tela de login: o rodapé do Element tem uma faixa escura pensada para foto de fundo */
.mx_AuthFooter { background: none !important; }
.mx_AuthFooter a, .mx_AuthFooter span { color: #64748B !important; text-shadow: none !important; }
.mx_AuthFooter a:hover { color: #3C50E0 !important; }

/* Logo da tela de login um pouco maior (padrão do Element é pensado para o ícone redondo) */
.mx_AuthHeaderLogo img { width: 150px; max-width: 100%; }

/* Painel estreito (Portal: 440 px): telas de login/verificação cabem na largura em vez de vazar para o lado */
@media (max-width: 680px) {
  .mx_AuthPage_modal, .mx_AuthPage_modalContent, .mx_CompleteSecurityBody, .mx_AuthPage .mx_Dialog_border { width: auto !important; max-width: calc(100vw - 16px) !important; box-sizing: border-box; }
  .mx_CompleteSecurity_header, .mx_CompleteSecurity_body, .mx_EncryptionCard { width: auto !important; max-width: 100% !important; }
}

/* Login: esconde o bloco "Servidor local / snakecorp.local". Clicar nele abre a escolha de servidor
   (matrix.org, outro servidor), que não se aplica: o Chat Snake só tem um servidor. */
.mx_ServerPicker { display: none !important; }