/* ============================================================
   JD Chat - Tema estilo Discord
   ============================================================ */
:root {
  --bg-primary: #36393f;
  --bg-secondary: #2f3136;
  --bg-tertiary: #202225;
  --bg-input: #40444b;
  --bg-hover: #393c43;
  --bg-active: #393c43;
  --text-normal: #dcddde;
  --text-muted: #72767d;
  --text-link: #00aff4;
  --blurple: #5865f2;
  --blurple-hover: #4752c4;
  --green: #23a55a;
  --green-bright: #57f287;
  --red: #ed4245;
  --yellow: #faa61a;
  --orange: #f0b232;
  --radius: 8px;
  /* ESCALAS (Configurações → Interface):
       --ui-scale   → ícones, avatares e largura dos painéis (interface)
       --font-scale → tamanho das LETRAS (fontes)
     Definidas em settings.js (80%..150%, padrão 100%). */
  --ui-scale: 1;
  --font-scale: 1;
  --rail-width: calc(72px * var(--ui-scale));
  --sidebar-width: calc(240px * var(--ui-scale));
  --member-width: calc(240px * var(--ui-scale));
  /* Superfícies adicionais (temas podem sobrescrever) */
  --bg-elevated: #2b2d31;      /* popups/menus elevados */
  --bg-dark: #18191c;          /* menus dropdown escuros */
  --bg-soft: #232428;          /* superfícies suaves */
  --bg-rail: #35363c;          /* divisor do trilho de servidores */
  --bg-input2: #1e1f22;        /* inputs/bordas escuras */
  --bg-panel: #292b2f;         /* painel inferior do usuário */
  --border-color: #26282c;     /* bordas finas */
  --btn-secondary-bg: #4e5058; /* botão secundário */
  --danger: #da373c;           /* ações perigosas (borda/acento) */
  --text-on-accent: #fff;      /* texto sobre cor de destaque */
  /* Animações sutis da interface (Config. de Acessibilidade).
     full = 0.3s · reduced (half) = 0.15s só fade · none = sem animação */
  --anim-dur: 0.3s;
  --anim-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   ANIMAÇÕES SUTIS
   Padrão (full): 0.3s com movimento direcional + fade.
   Reduzidas (html.reduce-motion): 0.15s, só FADE (sem movimento).
   Desativadas (html.no-motion): sem animação/transição (instantâneo).
   ============================================================ */
@keyframes jdFadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes jdSlideUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes jdSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes jdSlideRight{ from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes jdSlideLeft { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes jdPopIn     { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes jdSpin      { from { opacity: 0; transform: rotate(0deg); } to { opacity: 1; transform: rotate(360deg); } }
@keyframes jdShimmer   { from { opacity: 0.4; transform: translateX(-100%); } to { opacity: 1; transform: translateX(100%); } }
@keyframes jdShake     { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(10px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } }
/* Chacoalha o modal (aviso de informações não salvas) */
.modal.shake { animation: jdShake 0.4s var(--anim-ease); }
html.reduce-motion .modal.shake { animation-duration: 0.15s; }

/* ----- Mensagens: sobem com fade ----- */
#messages-container .message { animation: jdSlideUp var(--anim-dur) var(--anim-ease); }

/* ----- Modal: sobe de BAIXO p/ cima + fade · Backdrop: fade ----- */
.modal-backdrop { animation: jdFadeIn var(--anim-dur) ease; }
.modal { animation: jdSlideUp var(--anim-dur) var(--anim-ease); }

/* ----- Dropdown: desce de CIMA p/ baixo + fade ----- */
.channel-menu,
.dropdown,
.popover,
.tooltip { animation: jdSlideDown var(--anim-dur) var(--anim-ease); }

/* ----- Menu: sobe de BAIXO p/ cima + fade ----- */
.emoji-menu,
.menu { animation: jdSlideUp var(--anim-dur) var(--anim-ease); }

/* ----- Popover / Tooltip reais do app: sobem de baixo p/ cima ----- */
#reaction-picker,
#call-users,
.mention-autocomplete { animation: jdSlideUp var(--anim-dur) var(--anim-ease); }

/* ----- Toast: entra da DIREITA p/ esquerda + fade (keyframes em responsive.css) ----- */

/* ----- Tabs: troca com fade ----- */
.emoji-tab,
.asset-source-tab,
.settings-nav-btn { transition: background 0.15s, color 0.15s, opacity 0.15s; }
.emoji-tab.active,
.asset-source-tab.active,
.settings-nav-btn.active { animation: jdFadeIn 0.15s ease; }

/* ----- Accordion / Carousel (genéricos) ----- */
.accordion, .carousel { animation: jdFadeIn var(--anim-dur) ease; }

/* ----- Progressbar / Skeleton ----- */
.mic-meter-bar, .progress { transition: width 0.3s var(--anim-ease), opacity 0.2s; }
.skeleton { animation: jdShimmer 1.2s linear infinite; }

/* ----- Spinner: gira com fade ----- */
.spinner, .loading { animation: jdSpin 0.9s linear infinite; }

/* ----- Switch / Checkbox / Radio ----- */
.switch { transition: background 0.2s var(--anim-ease), transform 0.2s var(--anim-ease); }
input[type="checkbox"], input[type="radio"] { transition: transform 0.15s ease, opacity 0.15s ease; }
input[type="checkbox"]:checked, input[type="radio"]:checked { animation: jdPopIn 0.15s var(--anim-ease); }

/* ----- Sidebars no mobile: deslizam ao abrir ----- */
@media (max-width: 700px) {
  #server-rail,
  #channel-sidebar { animation: jdSlideRight var(--anim-dur) var(--anim-ease); }
  #member-sidebar { animation: jdSlideLeft var(--anim-dur) var(--anim-ease); }
}

/* ----- Reduzidas (half): 0.15s e SÓ as animações básicas (fade) ----- */
html.reduce-motion { --anim-dur: 0.15s; }
@media (prefers-reduced-motion: reduce) { :root { --anim-dur: 0.15s; } }

html.reduce-motion .modal,
html.reduce-motion .modal-backdrop,
html.reduce-motion .channel-menu,
html.reduce-motion .emoji-menu,
html.reduce-motion .menu,
html.reduce-motion #reaction-picker,
html.reduce-motion #call-users,
html.reduce-motion .mention-autocomplete,
html.reduce-motion .dropdown,
html.reduce-motion .popover,
html.reduce-motion .tooltip,
html.reduce-motion .video-tile,
html.reduce-motion #messages-container .message,
html.reduce-motion #server-rail,
html.reduce-motion #channel-sidebar,
html.reduce-motion #member-sidebar,
html.reduce-motion .toast,
html.reduce-motion .spinner,
html.reduce-motion .loading {
  animation-name: jdFadeIn; /* só fade, sem movimento/giro */
}

/* ----- Desativadas: sem animação/transição (tudo instantâneo) ----- */
html.no-motion *,
html.no-motion *::before,
html.no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Elementos clicáveis que abrem o perfil (foto/nome) */
.clickable { cursor: pointer; }
.avatar.clickable:hover,
.bans-avatar.clickable:hover,
.dm-avatar.clickable:hover,
.msg-avatar.clickable:hover { opacity: 0.85; }
.audit-actor.clickable:hover,
.channel-name.clickable:hover,
.member-name.clickable:hover,
.msg-author.clickable:hover { color: var(--text-normal); opacity: 0.85; }

html, body {
  height: 100%;
  font-family: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg-tertiary);
  color: var(--text-normal);
  overflow: hidden;
}

/* Tamanho base das LETRAS: o que não declara `font-size` próprio (herdado) acompanha a
   escala dos textos. As declarações em px já usam `calc(Npx * var(--font-scale))`. */
html { font-size: calc(16px * var(--font-scale)); }

/* ---------- Google Material Symbols (ícones profissionais) ---------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: calc(20px * var(--ui-scale));
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

/* Ícones coloridos: preenchidos (FILL) + cores por contexto */
.material-symbols-outlined.mi { color: inherit; }
#message-send .material-symbols-outlined.mi,
.call-btn .material-symbols-outlined.mi,
.call-btn.active .material-symbols-outlined.mi,
.call-btn.muted .material-symbols-outlined.mi,
.call-btn.leave .material-symbols-outlined.mi { color: #fff; }
.chat-toggle-btn .material-symbols-outlined.mi,
.channel-add .material-symbols-outlined.mi,
.attach-btn .material-symbols-outlined.mi,
.msg-action .material-symbols-outlined.mi,
.compose-cancel .material-symbols-outlined.mi,
.attach-preview-remove .material-symbols-outlined.mi { color: var(--text-muted); }
.server-home .material-symbols-outlined.mi,
.server-add .material-symbols-outlined.mi,
#dm-call-btn .material-symbols-outlined.mi,
#toggle-members .material-symbols-outlined.mi { color: var(--text-normal); }
#btn-mute .material-symbols-outlined.mi,
#btn-deafen .material-symbols-outlined.mi,
#call-cam .material-symbols-outlined.mi { color: var(--green); }
/* Microfone da call: cinza quando desmutado, vermelho quando mutado */
#call-mic .material-symbols-outlined.mi { color: var(--text-normal); }
#call-mic.muted .material-symbols-outlined.mi,
#call-cam.muted .material-symbols-outlined.mi,
#btn-mute.muted .material-symbols-outlined.mi,
#btn-deafen.muted .material-symbols-outlined.mi { color: #fff; }
.member-badge .material-symbols-outlined.mi,
.role-badge .material-symbols-outlined.mi,
.msg-temp .material-symbols-outlined.mi { color: inherit; }

/* Tamanho em contexto de botões compactos */
button .material-symbols-outlined.mi { font-size: calc(20px * var(--ui-scale)); }
.chat-toggle-btn .material-symbols-outlined.mi,
.call-btn .material-symbols-outlined.mi,
.ctrl-btn .material-symbols-outlined.mi,
.server-home .material-symbols-outlined.mi,
.server-add .material-symbols-outlined.mi,
.channel-add .material-symbols-outlined.mi,
.attach-btn .material-symbols-outlined.mi,
#message-send .material-symbols-outlined.mi { font-size: calc(20px * var(--ui-scale)); }
.member-badge .material-symbols-outlined.mi,
.msg-action .material-symbols-outlined.mi,
.msg-temp .material-symbols-outlined.mi,
.role-badge .material-symbols-outlined.mi { font-size: calc(13px * var(--ui-scale)); }
.compose-cancel .material-symbols-outlined.mi,
.attach-preview-remove .material-symbols-outlined.mi { font-size: calc(16px * var(--ui-scale)); }

/* Contador (ex.: solicitações de amizade) junto ao ícone */
.channel-add .badge-count {
  font-size: calc(9px * var(--font-scale));
  font-weight: 700;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 2px;
  line-height: 14px;
  vertical-align: top;
  font-family: inherit;
}

.hidden { display: none !important; }

/* Trava o scroll do app enquanto o seletor de reação está aberto (só o painel rola) */
body.reaction-picker-open #messages-container,
body.reaction-picker-open #channel-scroll,
body.reaction-picker-open #member-list,
body.reaction-picker-open #server-rail { overflow: hidden; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }


/* ===== Impersonação (admin vendo a conta do usuário — SOMENTE LEITURA) ===== */
#impersonate-banner {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(88, 101, 242, 0.95);
  color: #fff;
  font-size: calc(13px * var(--font-scale));
  border-radius: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  max-width: 90vw;
}
#impersonate-banner .impersonate-banner-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#impersonate-banner .impersonate-banner-text b { font-weight: 700; }
#impersonate-banner.hidden { display: none; }

/* Modo somente-leitura: ESCONDE as ações de hover da mensagem (responder/editar/apagar/
   reagir/denunciar) — antes ficavam sempre visíveis esmaecidas. Desabilita também a
   caixa de mensagem e as ações dos cards de denúncia. */
#app.impersonating .msg-actions,
#app.impersonating .reaction-add {
  display: none !important;
}
#app.impersonating #message-input-wrap,
#app.impersonating .report-card-actions {
  pointer-events: none !important;
  opacity: 0.6;
}

/* ---------- Tela de perda de conexão com o servidor (offline) ---------- */
.conn-lost-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, var(--bg-secondary, #2b2d31), var(--bg-tertiary, #1e1f22));
  color: var(--text-normal, #e3e5e8);
  text-align: center;
  padding: 24px;
}
.conn-lost-screen.hidden { display: none; }
.conn-lost-inner { max-width: 400px; }
.conn-lost-icon {
  display: block;
  font-size: calc(64px * var(--font-scale));
  color: var(--red, #ed4245);
  margin-bottom: 14px;
}
.conn-lost-inner h2 { margin: 0 0 8px; font-size: calc(20px * var(--font-scale)); }
.conn-lost-sub { margin: 0 0 22px; color: var(--text-muted, #949ba4); }
#conn-lost-retry {
  background: var(--blurple, #5865f2);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
}
#conn-lost-retry:hover { filter: brightness(1.1); }