/* ==========================================================================
   PREMIUM THEME — camada de reskin visual do WifiCord
   ==========================================================================
   Este arquivo é carregado DEPOIS de style.css (ver index.html) e não
   apaga nada dele: só redefine as variáveis do :root (que o style.css
   inteiro já consome) e acrescenta tratamento visual novo (tipografia,
   cantos chanfrados, cantos-de-mira no hover, botões com preenchimento
   deslizante, holofote de cursor) nos componentes mais visíveis.
   Estrutura, IDs, classes funcionais e o JS existente não são tocados —
   isso é só a pele.
   Inspiração: identidade "premium, ink-black + ciano, tipografia
   condensada em caixa alta, quinas cortadas" do site de referência do
   usuário (GRIDO1 / Kimi Antonelli), adaptada para uma UI de chat.
   ========================================================================== */

:root {
  /* ---- paleta base: void quase-preto + ciano de sinal (substitui o
     violeta→ciano "glass" original por um ink-black mais sério, com UM
     único acento de cor) ---- */
  --bg-deepest: #050608;
  --bg-dark:    #0a0b0f;
  --bg-main:    #0e1013;
  --bg-elevated:#15171c;
  --bg-hover:   #1c1f26;

  --accent-primary-start: #02d2e3;
  --accent-primary-end:   #02d2e3;
  --accent-secondary:     #6fe9f2;
  --accent-violet-deep:   #02a3b0;
  --accent-cyan:          #02d2e3;
  --accent-signal:        #02d2e3;

  --text-primary:  #f2f4f5;
  --text-secondary:#aeb4bb;
  --text-muted:    #6b7178;

  --status-online: #2fe38a;
  --status-away:   #ffb84b;
  --status-offline:#565d66;

  --danger: #ff4d6d;

  /* cantos secos em vez de "glass" arredondado — o chanfro fica por cima,
     nos componentes de destaque, via clip-path (ver abaixo) */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --glow-violet: rgba(2, 210, 227, .18);
  --glow-cyan:   rgba(2, 210, 227, .28);
  --glass-bg:    rgba(10, 11, 15, .74);
  --glass-border:rgba(255, 255, 255, .07);

  --font-body:    "Space Grotesk", "Inter", "gg sans", "Noto Sans", Arial, sans-serif;
  --font-display: "Oswald", Impact, var(--font-body);
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --pm-ease: cubic-bezier(.22, 1, .36, 1);

  /* o app já tinha uma segunda camada de tokens ("REDESIGN — Dark glass
     premium", ver style.css ~L2742) usada no rail, no botão "Adicionar"
     e em vários hovers — redefine aqui também, senão essas partes
     continuam violeta por baixo do resto já ciano. */
  --rd-purple: #02d2e3;
  --rd-purple-2: #3adde9;
  --rd-purple-3: #6fe9f2;
  --rd-purple-deep: #02a3b0;
  --rd-panel: var(--bg-main);
  --rd-border: var(--bg-elevated);
  --rd-border-glow: rgba(2, 210, 227, .28);
  --rd-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   Tipografia — caixa alta / condensada nos títulos e marca, igual à
   referência. Só nos elementos de heading/marca (o --font-display já era
   consumido por eles antes, ver style.css linha ~2425).
   ========================================================================== */
.auth-brand h1, .loading-mark, .sidebar-header h2, #chat-title, .chat-title,
.store-header h3, .modal h3, .profile-card-body h3, .games-header h3,
.wallpaper-header h3, .server-settings-header h3, .admin-header h3 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

body, input, textarea, select, button { font-family: var(--font-body); }

.eyebrow-pm, .sidebar-header-sub, .chat-title-sub {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  color: var(--accent-cyan);
}

/* ==========================================================================
   Cursor spotlight — holofote ciano que segue o ponteiro por cima do app.
   Camada própria, sem interceptar cliques; ligada por premium-fx.js só em
   telas com mouse de verdade (hover:hover), nunca em toque.
   ========================================================================== */
#pm-glow {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity .4s var(--pm-ease);
  background: radial-gradient(560px circle at var(--pm-x, 50%) var(--pm-y, 50%), rgba(2, 210, 227, .07), transparent 60%);
  mix-blend-mode: screen;
}
#pm-glow.pm-on { opacity: 1; }
@media (hover: none), (pointer: coarse) { #pm-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { #pm-glow { display: none; } }

/* ==========================================================================
   Cantos chanfrados — utilitário aplicado via classe (premium-fx.js marca
   os componentes certos) e diretamente nos seletores de maior destaque.
   ========================================================================== */
.pm-chf, .btn, .btn-primary, .btn-ghost, .rail-btn, .auth-card, .modal,
.message-content, .friend-item, .channel-item, .game-card, .composer-box,
#chat-input, .message-form textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="search"] {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.auth-card, .modal { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.rail-btn { clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px) !important; border-radius: 0 !important; }
.rail-btn:hover { border-radius: 0 !important; }

/* ==========================================================================
   Cantos-de-mira no hover — o motivo de "instrumento de precisão" da
   referência. premium-fx.js adiciona/tira a classe .pm-brk conforme o
   ponteiro passa por cima; funciona só com mouse (a regra já cai fora em
   touch, via mesma media query do glow).
   ========================================================================== */
@media (hover: hover) {
  .pm-brk { position: relative; }
  .pm-brk::before, .pm-brk::after {
    content: ""; position: absolute; width: 10px; height: 10px;
    border: 0 solid var(--accent-cyan); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--pm-ease), transform .2s var(--pm-ease);
  }
  .pm-brk::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; transform: translate(3px, 3px); }
  .pm-brk::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; transform: translate(-3px, -3px); }
  .pm-brk.pm-brk-on::before, .pm-brk.pm-brk-on::after { opacity: 1; transform: translate(0, 0); }
}

/* ==========================================================================
   Botões — preenchimento ciano deslizante no hover (igual ao .cta/.btn da
   referência), texto em caixa alta com leve tracking.
   ========================================================================== */
.btn, .btn-primary, .btn-ghost {
  position: relative; overflow: hidden; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; font-size: 12.5px;
  border: 1px solid var(--glass-border); background: transparent;
  transition: color .28s var(--pm-ease), border-color .2s var(--pm-ease);
  z-index: 0;
}
.btn::before, .btn-primary::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; background: var(--accent-cyan);
  transform: scaleX(0); transform-origin: 0 0; transition: transform .32s var(--pm-ease); z-index: -1;
}
.btn:hover::before, .btn-primary:hover::before, .btn-ghost:hover::before { transform: scaleX(1); }
.btn:hover, .btn-primary:hover, .btn-ghost:hover { color: #031012 !important; opacity: 1; }
.btn-primary { border-color: var(--accent-cyan); color: var(--accent-cyan); background: transparent; }
.btn-accept, .btn-reject { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 11px; }

/* ícones de botão redondos viram quadrados chanfrados, mais discretos */
.btn-icon {
  border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ==========================================================================
   Rail de servidores — logo/ícones ganham o corte de canto; anel de
   destaque no ativo em vez do "pill" arredondado padrão do Discord.
   ========================================================================== */
#server-rail { background: var(--bg-dark); border-right: 1px solid var(--glass-border); }
.rail-btn { background: var(--bg-elevated); border: 1px solid transparent; color: var(--text-muted); }
.rail-btn:hover { color: var(--text-primary); border-color: var(--glass-border); background: var(--bg-hover); }
.rail-btn.active { background: rgba(2, 210, 227, .1); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.rail-logo, .rail-logo span { clip-path: polygon(28% 0, 100% 0, 100% 72%, 72% 100%, 0 100%, 0 28%) !important; border-radius: 0 !important; }

/* ==========================================================================
   Sidebar / listas — divisórias mais secas, item ativo com filete ciano
   em vez de fundo cheio.
   ========================================================================== */
.sidebar-header { border-bottom: 1px solid var(--glass-border); }
.friend-item, .channel-item, .friend-request-item { border-radius: 0 !important; }
.friend-item.active, .channel-item.active {
  background: var(--bg-elevated); box-shadow: inset 2px 0 0 var(--accent-cyan);
}

/* ==========================================================================
   Mensagens — a "bolha" vira uma placa fina com contorno, chanfro na
   ponta; mensagens do próprio usuário invertem o chanfro para a direita
   (mesmo truque de "plate" da referência).
   ========================================================================== */
.message-item { border-radius: 0; }
.message-content {
  background: var(--bg-elevated); border: 1px solid var(--glass-border);
  padding: 2px 4px;
}
.message-author { font-weight: 700; letter-spacing: .01em; }
.message-time, .message-header .message-time { text-transform: uppercase; letter-spacing: .03em; }

/* ==========================================================================
   Modais / auth / store / settings — painel escuro com contorno fino
   ciano-desligado, chanfro grande nos quatro cantos.
   ========================================================================== */
.modal-overlay { backdrop-filter: blur(8px); background: rgba(3, 4, 5, .72); }
.modal, .auth-card {
  background: var(--bg-main); border: 1px solid var(--glass-border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.auth-tabs { border-bottom: 1px solid var(--glass-border); background: var(--bg-elevated); }
/* .auth-tab.active herdava "color:#fff" de uma regra antiga do style.css
   que, nesta paleta (fundo do próprio botão = --accent-primary-start =
   ciano puro), acabava ilegível — texto claro sobre um preenchimento já
   claro. Força tinta escura sobre o preenchimento ciano, igual ao padrão
   dos outros botões cheios do reskin. */
.auth-tab.active { background: var(--accent-cyan) !important; color: #031012 !important; }

/* ==========================================================================
   Scrollbar — fina, sem "pill" ciano-violeta, condizente com o resto.
   ========================================================================== */
* { scrollbar-color: var(--bg-hover) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: var(--accent-violet-deep); }

/* ==========================================================================
   Hub de jogos — cards com chanfro e borda ciano no hover.
   ========================================================================== */
.game-card { background: var(--bg-elevated); border: 1px solid var(--glass-border); transition: border-color .2s var(--pm-ease); }
.game-card:hover { border-color: var(--accent-cyan); }

/* ==========================================================================
   Loading screen — marca em caixa alta, arcos de sinal em ciano puro.
   ========================================================================== */
.loading-screen { background: var(--bg-deepest); }
.loading-mark { font-size: 22px; }