/* ==========================================================================
   v3-social.css — design novo: Painel Social flutuante (social.js), mensagens privadas, voz, avisos/toasts e notificações.
   Usa os tokens de v3-base.css. Vale em todas as telas (PC e celular).

   O social.css antigo continua carregado (posição, tamanho, comportamento);
   aqui só repintamos. Os seletores começam com "html body" para vencer os
   dele (#spx-panel .x) e os tingimentos de tema (body.theme-*) sem precisar
   de !important em tudo — ele aparece só onde o CSS antigo ou um estilo
   inline (ui.js, voice.js) também usa.

   1. Variáveis antigas → paleta nova      7. Voz
   2. Barra de ícones do canto (FAB)       8. Conversa privada (DM)
   3. Painel: moldura, cabeçalho, abas     9. Avisos, convites e toasts
   4. Blocos comuns das abas              10. Equipe na partida (HUD)
   5. Equipe, Clãs, Guerras               11. Chat da partida e emojis
   6. Mensagens (lista)                   12. Painel Social do menu (≤1024 px)
                                          13. Celular: folhas de tela cheia
   ========================================================================== */

/* ---------- 1. Variáveis antigas → paleta nova ----------------------------- */

:root {
    --spx-bg: var(--pc-panel);
    --spx-surface: var(--pc-ink-2);
    --spx-border: var(--pc-line);
    --spx-text: var(--pc-text);
    --spx-sub: var(--pc-dim);
    --spx-muted: var(--pc-faint);
    --spx-accent: var(--pc-acid);
    --spx-accent-2: var(--pc-acid);
    --spx-accent-glow: var(--pc-acid-soft);
    --spx-online: var(--pc-acid);
    --spx-offline: var(--pc-faint);
    --spx-danger: var(--pc-hot);
    --spx-ok: var(--pc-ok);
    --spx-radius: 2px;
}
html body #spx-panel {
    --sx-accent: var(--pc-acid);
    --sx-accent-2: var(--pc-acid);
    --sx-accent-soft: var(--pc-acid-soft);
    --sx-accent-line: rgba(212, 255, 58, .45);
    --sx-ink: var(--pc-acid-ink);
    --sx-bg: var(--pc-panel);
    --sx-surface: var(--pc-ink);
    --sx-surface-2: var(--pc-panel-2);
    --sx-line: var(--pc-line);
    --sx-line-2: var(--pc-line-2);
    --sx-text: var(--pc-text);
    --sx-sub: var(--pc-dim);
}

/* ---------- 2. Barra de ícones do canto ------------------------------------ */

/* Botão da barra fica SEMPRE na fila: um `position:fixed/absolute` perdido
   (o selo de pedido de música fazia isso com o botão admin) o tirava do
   fluxo e ele cobria o ícone do Menu Social. */
html body #spx-corner-bar > button { position: relative !important; inset: auto !important; }

html body #spx-corner-bar button,
html body #spx-corner-bar .spx-corner-btn,
html body #spx-corner-bar button#spx-fab {
    border-radius: 2px !important;
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    color: var(--pc-dim) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body #spx-corner-bar button#spx-fab { color: var(--pc-text) !important; }
html body #spx-corner-bar button:hover,
html body #spx-corner-bar button.is-open,
html body #spx-corner-bar button#spx-fab:hover {
    color: var(--pc-acid) !important;
    border-color: var(--pc-acid) !important;
    background: var(--pc-panel-2) !important;
}
html body #spx-corner-bar button#spx-fab.is-open {
    color: var(--pc-acid-ink) !important;
    background: var(--pc-acid) !important;
    border-color: var(--pc-acid) !important;
}
html body #spx-corner-bar .spx-admin-btn:hover { color: var(--pc-acid) !important; border-color: var(--pc-acid) !important; background: var(--pc-panel-2) !important; }
html body #spx-corner-bar button[data-tip]::after {
    border-radius: 2px;
    background: var(--pc-ink);
    border-color: var(--pc-line-2);
    font: 500 10px var(--pc-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
}
html body #spx-fab-badge,
html body #spx-ticket-badge {
    top: -6px; right: -6px;
    min-width: 17px; height: 17px; line-height: 15px;
    padding: 0 4px;
    border-radius: 2px;
    border: 1px solid var(--pc-ink);
    background: var(--pc-hot);
    color: #fff;
    font: 700 9.5px/15px var(--pc-mono);
}
@keyframes spxV3Ping {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .55); }
    50% { box-shadow: 0 0 0 6px rgba(212, 255, 58, 0); }
}
html body #spx-corner-bar button#spx-fab.has-notif,
html body #spx-corner-bar #spx-ticket-btn.has-notif { animation: spxV3Ping 1.8s infinite; border-color: var(--pc-acid) !important; }

/* ---------- 3. Painel: moldura, cabeçalho, abas --------------------------- */

html body #spx-panel {
    background: var(--pc-corners), var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-radius: 2px;
    box-shadow: var(--pc-shadow) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--pc-text);
    font-family: var(--pc-body);
}
@media (min-width: 769px) {
    html body #spx-panel { width: 380px; }
}

html body #spx-panel #spx-header {
    padding: 14px 12px 12px 16px;
    background: transparent !important;
    border-bottom: 1px solid var(--pc-line);
    box-shadow: none;
}
html body #spx-panel #spx-user-bar { gap: 10px; }
html body #spx-panel #spx-user-bar .spx-avatar {
    width: 36px; height: 36px;
    border: 1px solid var(--pc-line-2);
    box-shadow: none;
}
html body #spx-panel .spx-user-txt {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
html body #spx-panel .spx-user-kicker {
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-acid);
    white-space: nowrap;
}
html body #spx-panel .spx-user-kicker b { font-weight: 500; color: var(--pc-faint); letter-spacing: .1em; }
html body #spx-panel .spx-user-nick {
    font: 700 15px/1.15 var(--pc-body);
    letter-spacing: 0;
    color: var(--pc-text);
}
html body #spx-panel #spx-header .spx-lang-btn,
html body #spx-panel #spx-close,
html body #spx-panel .spx-clan-chip {
    width: 32px; height: 32px;
    border-radius: 2px;
    border: 1px solid var(--pc-line-2);
    background: transparent;
    color: var(--pc-dim);
    box-shadow: none;
}
html body #spx-panel .spx-clan-chip { width: auto; min-width: 32px; padding: 0 8px; gap: 6px; font: 600 10.5px var(--pc-mono); letter-spacing: .08em; }
html body #spx-panel .spx-clan-chip.is-none { width: 32px; padding: 0; }
html body #spx-panel .spx-clan-chip .pxch-crest { border-radius: 2px; }
html body #spx-panel #spx-header .spx-lang-btn:hover,
html body #spx-panel .spx-clan-chip:hover { border-color: var(--pc-acid); background: transparent; color: var(--pc-acid); }
html body #spx-panel #spx-close:hover { border-color: var(--pc-hot); background: var(--pc-hot-soft); color: var(--pc-hot); }

/* Abas: ícone + nome em mono, sublinhado ácido na ativa (como no menu) */
html body #spx-panel #spx-tabs {
    gap: 0;
    padding: 0 6px;
    background: transparent;
    border-bottom: 1px solid var(--pc-line);
}
html body #spx-panel .spx-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 2px 9px;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pc-faint);
    animation: none;
}
html body #spx-panel .spx-tab .spx-tab-icon { width: 18px; height: 18px; color: currentColor; opacity: 1; filter: none; }
html body #spx-panel .spx-tab-label {
    font: 500 9px/1 var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body #spx-panel .spx-tab:hover { background: rgba(233, 239, 228, .03); color: var(--pc-text); }
html body #spx-panel .spx-tab.active { background: transparent; color: var(--pc-acid); border: 0; }
html body #spx-panel .spx-tab.active .spx-tab-icon { color: var(--pc-acid); filter: none; }
html body #spx-panel .spx-tab::after {
    content: '';
    position: absolute; left: 14%; right: 14%; bottom: -1px;
    height: 2px;
    background: transparent;
}
html body #spx-panel .spx-tab.active::after { background: var(--pc-acid); }
/* Novidade na aba: ponto ácido piscando (sem fundo vermelho pulsando) */
html body #spx-panel .spx-tab.spx-tab-blink:not(.active) { color: var(--pc-text); }
html body #spx-panel .spx-tab.spx-tab-blink:not(.active) .spx-tab-label { color: var(--pc-text); }
html body #spx-panel .spx-tab.spx-tab-blink .spx-tab-icon-wrap::after { background: var(--pc-acid); box-shadow: none; border-radius: 0; }
html body #spx-panel .spx-tab-badge {
    top: -6px; right: -10px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    border-radius: 2px;
    background: var(--pc-hot);
    color: #fff;
    font: 700 9px/15px var(--pc-mono);
    box-shadow: 0 0 0 2px var(--pc-panel);
}
html body #spx-panel .spx-tab[data-spx-tip]::after,
html body #spx-panel .spx-tab[data-spx-tip]::before { display: none; }

/* ---------- 4. Blocos comuns das abas -------------------------------------- */

html body #spx-panel #spx-body { padding: 14px 14px 16px; gap: 6px; }
html body #spx-panel #spx-body::-webkit-scrollbar { width: 6px; }
html body #spx-panel #spx-body::-webkit-scrollbar-thumb { background: var(--pc-line-2); border-radius: 0; }

/* Cabeçalho de estado da aba */
html body #spx-panel .spx-hero {
    gap: 12px;
    padding: 12px 12px 12px 14px;
    margin: 0 0 6px;
    border-radius: 2px;
    background: var(--pc-ink-2);
    border: 1px solid var(--pc-line);
    border-left: 2px solid var(--pc-line-2);
}
html body #spx-panel .spx-hero-ic {
    flex: 0 0 32px; height: 32px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-acid);
    font-size: 13px;
}
html body #spx-panel .spx-hero-txt strong {
    font: 800 13px/1.15 var(--pc-display);
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--pc-text);
}
html body #spx-panel .spx-hero-txt span { margin-top: 4px; font: 400 12.5px/1.4 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-hero-txt b { color: var(--pc-text); font-weight: 700; }
html body #spx-panel .spx-hero-alert { border-left-color: var(--pc-acid); background: var(--pc-ink-2); }
html body #spx-panel .spx-hero-alert .spx-hero-ic,
html body #spx-panel .spx-hero-wait .spx-hero-ic { background: var(--pc-acid-soft); border-color: rgba(212, 255, 58, .45); color: var(--pc-acid); }
html body #spx-panel .spx-hero-wait { border-left-color: var(--pc-gold); }
html body #spx-panel .spx-hero-wait .spx-hero-ic { background: var(--pc-gold-soft); border-color: rgba(255, 201, 74, .45); color: var(--pc-gold); }

/* Títulos de seção: rótulo mono + contador + linha */
html body #spx-panel .spx-section-title {
    padding: 14px 0 6px;
    gap: 8px;
    font: 500 10px/1 var(--pc-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-faint);
}
html body #spx-panel .spx-section-title::after { background: var(--pc-line); }
html body #spx-panel .spx-section-title em {
    margin: 0;
    padding: 2px 5px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: 0;
}

/* Linhas (amigos, membros, pedidos) */
html body #spx-panel .spx-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 2px;
    background: var(--pc-ink);
    border: 1px solid var(--pc-line);
    transform: none;
}
html body #spx-panel .spx-row:hover { background: #0f1210; border-color: var(--pc-line-2); transform: none; }
html body #spx-panel .spx-row.is-off { opacity: .7; }
html body #spx-panel .spx-row.is-off:hover { opacity: 1; }
html body #spx-panel .spx-row-left { gap: 11px; }
html body #spx-panel .spx-row-left strong {
    gap: 6px;
    font: 700 13.5px/1.2 var(--pc-body);
    color: var(--pc-text);
}
html body #spx-panel .spx-sub { margin-top: 3px; font: 500 10.5px/1.35 var(--pc-mono); letter-spacing: .02em; color: var(--pc-faint); }
html body #spx-panel .spx-sub.is-hot { color: var(--pc-hot); }
html body #spx-panel .spx-lvl {
    padding: 2px 4px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font: 500 9px/1 var(--pc-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body #spx-panel .spx-avatar { border: 1px solid var(--pc-line-2); background: var(--pc-panel-2); }
html body #spx-panel .spx-dot,
html body #spx-dm .spx-dot { width: 10px; height: 10px; border: 2px solid var(--pc-ink); box-shadow: none; }
html body #spx-panel .spx-dot.online,
html body #spx-dm .spx-dot.online { background: var(--pc-acid); }
html body #spx-panel .spx-dot.offline,
html body #spx-dm .spx-dot.offline { background: var(--pc-faint); }

/* Selo de presença */
html body #spx-panel .spx-chip {
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font: 500 9.5px/1.3 var(--pc-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body #spx-panel .spx-chip.on { color: var(--pc-acid); border-color: rgba(212, 255, 58, .35); background: transparent; }
html body #spx-panel .spx-chip.play { color: var(--pc-acid); border-color: rgba(212, 255, 58, .45); background: var(--pc-acid-soft); }
html body #spx-panel .spx-chip.spec { color: var(--pc-info); border-color: rgba(94, 224, 255, .4); background: var(--pc-info-soft); }

/* Botões de ícone da linha */
html body #spx-panel .spx-row-actions { gap: 5px; }
html body #spx-panel .spx-act-btn {
    width: 32px; height: 32px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font-size: 12.5px;
}
html body #spx-panel .spx-act-btn:hover { background: transparent; border-color: var(--pc-text); color: var(--pc-text); }
html body #spx-panel .spx-act-btn.is-on { border-color: var(--pc-acid); color: var(--pc-acid); }
html body #spx-panel .spx-act-btn.is-static { display: inline-flex; align-items: center; justify-content: center; color: var(--pc-acid); border-color: rgba(212, 255, 58, .35); cursor: default; }
html body #spx-panel .spx-dm-btn.has-unread { border-color: var(--pc-acid); color: var(--pc-acid); }
html body #spx-panel .spx-ghost-danger { color: var(--pc-dim); }
html body #spx-panel .spx-ghost-danger:hover,
html body #spx-panel .spx-ghost-danger.is-on { color: var(--pc-hot) !important; border-color: var(--pc-hot) !important; background: var(--pc-hot-soft) !important; }
html body #spx-panel .spx-danger-btn { color: var(--pc-hot); border-color: rgba(255, 84, 112, .5); }
html body #spx-panel .spx-danger-btn:hover { background: var(--pc-hot-soft); border-color: var(--pc-hot); color: var(--pc-hot); }
html body #spx-panel .spx-ok-btn { color: var(--pc-acid); border-color: rgba(212, 255, 58, .45); }
html body #spx-panel .spx-ok-btn:hover { background: var(--pc-acid-soft); border-color: var(--pc-acid); }
html body .spx-dm-badge {
    top: -6px; right: -6px;
    min-width: 16px; height: 16px; line-height: 16px;
    border-radius: 2px;
    background: var(--pc-hot);
    color: #fff;
    font: 700 9.5px/16px var(--pc-mono);
}
html body .spx-dm-badge.is-inline { position: static; flex: 0 0 auto; padding: 0 4px; }

/* Faixa "mais ações" do amigo */
html body #spx-panel .spx-friend.is-open { border-color: var(--pc-line-2); }
html body #spx-panel .spx-row-more {
    flex: 1 0 100%;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 9px;
    border-top: 1px dashed var(--pc-line-2);
}

/* Botão primário (ação) e botões com texto */
html body #spx-panel .spx-btn,
html body #spx-dm .spx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 2px;
    background: var(--pc-acid);
    border: 1px solid var(--pc-acid);
    color: var(--pc-acid-ink);
    box-shadow: none;
    filter: none;
    font: 600 10.5px var(--pc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body #spx-panel .spx-btn:hover,
html body #spx-dm .spx-btn:hover { color: var(--pc-acid-ink); filter: none; box-shadow: 0 0 0 4px var(--pc-acid-soft); }
html body #spx-panel .spx-btn i { margin: 0; }
html body #spx-panel .spx-btn-wide { width: 100%; margin-top: 6px; }
html body #spx-panel .spx-btn-outline-danger {
    margin-top: 14px;
    background: transparent !important;
    border: 1px solid rgba(255, 84, 112, .5) !important;
    color: var(--pc-hot) !important;
    box-shadow: none !important;
}
html body #spx-panel .spx-btn-outline-danger:hover { background: var(--pc-hot-soft) !important; border-color: var(--pc-hot) !important; color: var(--pc-hot) !important; }
html body #spx-panel .spx-pill-btn,
html body #spx-panel .spx-ask .spx-pill-btn {
    height: 32px;
    padding: 0 11px;
    gap: 6px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    font: 600 10px/1 var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body #spx-panel .spx-pill-btn:hover { background: transparent; border-color: var(--pc-text); color: var(--pc-text); }
html body #spx-panel .spx-pill-btn.ok { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); }
html body #spx-panel .spx-pill-btn.ok:hover { color: var(--pc-acid-ink); box-shadow: 0 0 0 3px var(--pc-acid-soft); }
html body #spx-panel .spx-pill-btn.danger { background: transparent; border-color: rgba(255, 84, 112, .5); color: var(--pc-hot); }
html body #spx-panel .spx-pill-btn.danger:hover { background: var(--pc-hot-soft); border-color: var(--pc-hot); color: var(--pc-hot); }
html body #spx-panel .spx-pill-btn.is-done { color: var(--pc-acid); border-color: rgba(212, 255, 58, .35); cursor: default; }

/* Campos */
html body #spx-panel .spx-input,
html body #spx-dm .spx-input {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 2px;
    background: var(--pc-ink);
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    font: 500 13.5px var(--pc-body);
    box-shadow: none;
}
html body #spx-panel .spx-input::placeholder,
html body #spx-dm .spx-input::placeholder { color: var(--pc-faint); }
html body #spx-panel .spx-input:focus,
html body #spx-dm .spx-input:focus { border-color: var(--pc-acid); box-shadow: inset 3px 0 0 var(--pc-acid); }
html body #spx-panel select.spx-input option { background: var(--pc-panel); color: var(--pc-text); }
html body #spx-panel .spx-add-row { gap: 8px; margin-bottom: 4px; }
html body #spx-panel .spx-code-input { font-family: var(--pc-mono); letter-spacing: .2em; }
html body #spx-panel .spx-search-row > i { color: var(--pc-faint); }
html body #spx-panel .spx-search-row .spx-input { padding-left: 34px; font-size: 13px; }
html body #spx-panel .spx-search-row .spx-input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }

/* Vazio e carregando: caixa tracejada pontilhada */
html body #spx-panel .spx-empty2,
html body #spx-dm .spx-empty2 {
    gap: 7px;
    padding: 24px 18px;
    margin-top: 4px;
    border-radius: 0;
    border: 1px dashed var(--pc-line-2);
    background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
html body #spx-panel .spx-empty2 > i,
html body #spx-dm .spx-empty2 > i { font-size: 20px; color: var(--pc-acid); opacity: 1; }
html body #spx-panel .spx-empty2 strong,
html body #spx-dm .spx-empty2 strong { font: 500 11px/1.3 var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-text); }
html body #spx-panel .spx-empty2 span,
html body #spx-dm .spx-empty2 span { font: 400 12.5px/1.5 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-empty {
    border-radius: 0;
    border: 1px dashed var(--pc-line-2);
    background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px;
    color: var(--pc-dim);
    font: 500 10.5px/1.5 var(--pc-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
}
html body #spx-panel .spx-empty.spx-empty-line { padding: 10px; }

/* Confirmação dentro do painel */
html body #spx-panel .spx-ask-back {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: flex-end;
    padding: 12px;
    background: var(--pc-backdrop);
    animation: spxV3Fade .14s ease-out;
}
@keyframes spxV3Fade { from { opacity: 0; } }
html body #spx-panel .spx-ask {
    width: 100%;
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px;
    background: var(--pc-corners), var(--pc-panel-2);
    border: 1px solid var(--pc-line-2);
    border-radius: 2px;
    box-shadow: var(--pc-shadow);
    animation: spxV3Up .16s ease-out;
}
@keyframes spxV3Up { from { opacity: 0; transform: translateY(10px); } }
html body #spx-panel .spx-ask-kicker { font: 500 9.5px/1 var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid); }
html body #spx-panel .spx-ask strong { font: 800 15px/1.2 var(--pc-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--pc-text); word-break: break-word; }
html body #spx-panel .spx-ask > span:not(.spx-ask-kicker) { font: 400 13px/1.45 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
html body #spx-panel .spx-ask-actions .spx-pill-btn { height: 38px; justify-content: center; }

/* Não logado */
html body #spx-panel .spx-gate { gap: 10px; }
html body #spx-panel .spx-gate-icon {
    border-radius: 50%;
    background: transparent;
    border: 1px dashed var(--pc-line-2);
    color: var(--pc-acid);
    box-shadow: none;
}
html body #spx-panel .spx-gate-svg { color: var(--pc-acid); }
html body #spx-panel .spx-gate-title { font: 800 15px/1.2 var(--pc-display); text-transform: uppercase; color: var(--pc-text); }
html body #spx-panel .spx-gate-text { font: 400 13px/1.5 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-gate-actions .spx-btn:last-child { background: transparent; color: var(--pc-text); border-color: var(--pc-line-2); }
html body #spx-panel .spx-gate-actions .spx-btn:last-child:hover { border-color: var(--pc-text); box-shadow: none; }
html body #spx-panel .spx-gate-discord {
    border-radius: 2px;
    background: #5865f2;
    border: 0;
    color: #fff;
    box-shadow: none;
    font: 600 10.5px var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- 5. Equipe, Clãs, Guerras --------------------------------------- */

html body #spx-panel .spx-choice-card {
    gap: 8px;
    padding: 14px;
    border-radius: 2px;
    background: var(--pc-ink-2);
    border: 1px solid var(--pc-line);
}
html body #spx-panel .spx-choice-hint { font: 400 12px/1.45 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-or { margin: 14px 0 8px; font: 500 9.5px var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-faint); }
html body #spx-panel .spx-or::before,
html body #spx-panel .spx-or::after { background: var(--pc-line); }
html body #spx-panel .spx-code-chip {
    padding: 7px 9px;
    border-radius: 2px;
    background: transparent;
    border: 1px dashed rgba(212, 255, 58, .5);
    color: var(--pc-acid);
    font: 600 12px/1 var(--pc-mono);
    letter-spacing: .16em;
}
html body #spx-panel .spx-code-chip:hover { background: var(--pc-acid-soft); }
html body #spx-panel .spx-member-icon {
    flex: 0 0 32px; height: 32px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
}
html body #spx-panel .spx-member-icon.owner { color: var(--pc-gold); border-color: rgba(255, 201, 74, .45); background: var(--pc-gold-soft); }
html body #spx-panel .spx-talk-ic { color: var(--pc-acid); }
html body #spx-panel .spx-team-opt {
    display: flex; align-items: center; gap: 10px;
    margin-top: 2px;
    padding: 8px 10px;
    border: 1px dashed var(--pc-line-2);
    font: 400 12.5px/1.3 var(--pc-body);
    color: var(--pc-dim);
}
html body #spx-panel .spx-team-opt > i { color: var(--pc-faint); }
html body #spx-panel .spx-team-opt > span { flex: 1 1 auto; min-width: 0; }
html body #spx-panel .spx-team-opt > b { font: 600 10px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-text); }
html body #spx-panel .spx-team-opt .spx-pill-btn { flex: 0 0 auto; height: 28px; }

html body #spx-panel .spx-clan-card {
    padding: 14px;
    margin-bottom: 4px;
    border-radius: 2px;
    background: var(--pc-ink-2);
    border: 1px solid var(--pc-line);
    border-left: 2px solid var(--pc-acid);
}
html body #spx-panel .spx-clan-header { gap: 9px; }
html body #spx-panel .spx-clan-badge {
    padding: 4px 7px;
    border-radius: 2px;
    background: var(--pc-acid);
    color: var(--pc-acid-ink);
    font: 700 11px/1 var(--pc-mono);
    letter-spacing: .1em;
}
html body #spx-panel .spx-clan-name { flex: 1 1 auto; min-width: 0; font: 800 14px/1.2 var(--pc-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--pc-text); }
html body #spx-panel .spx-clan-desc { margin-top: 8px; font: 400 12.5px/1.45 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-clan-stats { gap: 6px 14px; margin-top: 10px; font: 500 10.5px var(--pc-mono); letter-spacing: .04em; color: var(--pc-dim); text-transform: uppercase; }
html body #spx-panel .spx-clan-stats i { color: var(--pc-faint); }
html body #spx-panel .spx-clan-stats .spx-on-dot { color: var(--pc-acid); }
html body #spx-panel .spx-clan-tip { margin-top: 10px; font: 400 12px/1.45 var(--pc-body); color: var(--pc-faint); letter-spacing: 0; text-transform: none; }
html body #spx-panel .spx-clan-tip i { color: var(--pc-acid); }
html body #spx-panel .spx-hub-btn { flex: 0 0 auto; height: 28px; padding: 0 9px; }
html body #spx-panel .spx-clan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
html body #spx-panel .spx-clan-actions .spx-btn { flex: 1 1 auto; min-width: 0; }
html body #spx-panel .spx-clan-actions .spx-hub-btn { height: 38px; }
html body #spx-panel .spx-clan-tagbox {
    min-width: 42px; height: 30px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid rgba(212, 255, 58, .45);
    color: var(--pc-acid);
    font: 700 10.5px var(--pc-mono);
    letter-spacing: .08em;
}
html body #spx-panel .spx-clan-icon {
    flex: 0 0 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font-size: 13px;
}
html body #spx-panel .spx-clan-icon.is-hot { color: var(--pc-hot); border-color: rgba(255, 84, 112, .5); }
html body #spx-panel .spx-role-ic { color: var(--pc-faint); }
html body #spx-panel .spx-role-ic.is-leader { color: var(--pc-gold); }
html body #spx-panel .spx-role-ic.is-colider { color: var(--pc-gold); opacity: .75; }
html body #spx-panel .spx-role-ic.is-mod { color: var(--pc-acid); }
html body #spx-panel .spx-role-sel { height: 32px; min-height: 32px; padding: 2px 6px; font: 500 10px var(--pc-mono); text-transform: uppercase; }
html body #spx-panel .spx-war-toggle { margin-top: 8px; }
html body #spx-panel .spx-war-search { margin-top: 6px; }
html body #spx-panel .spx-item-blink { animation: none; border-color: var(--pc-hot); box-shadow: inset 2px 0 0 var(--pc-hot); }
html body #spx-panel .px-clantag-preview { border-radius: 2px; background: var(--pc-ink); border: 1px dashed var(--pc-line-2); }

/* ---------- 6. Mensagens (lista) ------------------------------------------- */

html body #spx-panel .spx-dm-row { flex-wrap: nowrap; }
html body #spx-panel .spx-dm-row.is-unread { background: var(--pc-ink); border-color: rgba(212, 255, 58, .45); box-shadow: inset 2px 0 0 var(--pc-acid); }
html body #spx-panel .spx-dm-convo-info strong { justify-content: space-between; }
html body #spx-panel .spx-dm-peer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body #spx-panel .spx-dm-time { flex: 0 0 auto; font: 500 9.5px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-faint); }
html body #spx-panel .spx-dm-convo-info .spx-sub { font: 400 12px/1.35 var(--pc-body); letter-spacing: 0; color: var(--pc-dim); }
html body #spx-panel .spx-dm-unread-preview { color: var(--pc-text) !important; font-weight: 600; }
html body #spx-panel .spx-dm-row .spx-dm-badge { position: static; flex: 0 0 auto; padding: 0 4px; }
html body #spx-panel .spx-dm-go { color: var(--pc-faint); }
html body #spx-panel .spx-dm-row:hover .spx-dm-go { color: var(--pc-acid); }

/* ---------- 7. Voz --------------------------------------------------------- */

html body #spx-panel .spx-vstatus,
html body #spx-panel .spx-mic {
    border-radius: 2px;
    background: var(--pc-ink-2);
    border: 1px solid var(--pc-line);
    border-left: 2px solid var(--pc-line-2);
}
html body #spx-panel .spx-vstatus strong,
html body #spx-panel .spx-mic-top strong { font: 800 13px/1.2 var(--pc-display); text-transform: uppercase; letter-spacing: -.01em; color: var(--pc-text); }
html body #spx-panel .spx-vstatus > div > span,
html body #spx-panel .spx-mic-top > div > span { margin-top: 4px; font: 400 12.5px/1.4 var(--pc-body); color: var(--pc-dim); }
html body #spx-panel .spx-vstatus-ic,
html body #spx-panel .spx-mic-ic {
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
}
html body #spx-panel .spx-vstatus.wait { border-color: var(--pc-line); border-left-color: var(--pc-gold); }
html body #spx-panel .spx-vstatus.wait .spx-vstatus-ic { color: var(--pc-gold); background: transparent; border-color: rgba(255, 201, 74, .45); }
html body #spx-panel .spx-vstatus.live { border-color: var(--pc-line); border-left-color: var(--pc-acid); background: var(--pc-ink-2); }
html body #spx-panel .spx-live-dot { border-radius: 50%; background: var(--pc-acid); animation: spxV3Ping 1.6s infinite; }
html body #spx-panel .spx-vchan { gap: 6px; }
html body #spx-panel .spx-vchan-btn {
    padding: 12px 6px 11px;
    border-radius: 2px;
    background: var(--pc-ink);
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
}
html body #spx-panel .spx-vchan-btn b { font: 600 10.5px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-text); }
html body #spx-panel .spx-vchan-btn small { font: 400 11px/1.3 var(--pc-body); color: var(--pc-faint); }
html body #spx-panel .spx-vchan-btn:hover { background: var(--pc-ink); border-color: var(--pc-text); }
html body #spx-panel .spx-vchan-btn.active {
    background: var(--pc-acid-soft);
    border-color: var(--pc-acid);
    color: var(--pc-acid);
    box-shadow: none;
}
html body #spx-panel .spx-vchan-btn.active b { color: var(--pc-acid); }
html body #spx-panel .spx-vchan-btn.active small { color: var(--pc-dim); }
html body #spx-panel .spx-vchan-tag {
    top: -8px;
    padding: 2px 5px;
    border-radius: 2px;
    background: var(--pc-acid);
    color: var(--pc-acid-ink);
    font: 700 8.5px/1 var(--pc-mono);
    letter-spacing: .14em;
}
html body #spx-panel .spx-mic.live { border-color: var(--pc-line); border-left-color: var(--pc-acid); }
html body #spx-panel .spx-mic.live .spx-mic-ic { color: var(--pc-acid); border-color: rgba(212, 255, 58, .45); background: var(--pc-acid-soft); }
html body #spx-panel .spx-mic.muted { border-color: var(--pc-line); border-left-color: var(--pc-hot); }
html body #spx-panel .spx-mic.muted .spx-mic-ic { color: var(--pc-hot); border-color: rgba(255, 84, 112, .5); background: var(--pc-hot-soft); }
html body #spx-panel .spx-mic.ptt { border-color: var(--pc-line); border-left-color: var(--pc-gold); }
html body #spx-panel .spx-mic.ptt .spx-mic-ic { color: var(--pc-gold); border-color: rgba(255, 201, 74, .45); background: var(--pc-gold-soft); }
html body #spx-panel .spx-meter { height: 4px; border-radius: 0; background: var(--pc-line); }
html body #spx-panel .spx-meter span { border-radius: 0; background: var(--pc-acid); }
html body #spx-panel .spx-seg { gap: 0; padding: 0; border-radius: 2px; background: transparent; border: 1px solid var(--pc-line-2); }
html body #spx-panel .spx-seg button {
    height: 34px;
    border-radius: 0;
    color: var(--pc-dim);
    font: 600 9.5px/1 var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body #spx-panel .spx-seg button + button { border-left: 1px solid var(--pc-line-2); }
html body #spx-panel .spx-seg button.on { background: var(--pc-acid); color: var(--pc-acid-ink); box-shadow: none; }
html body #spx-panel .spx-vol { font: 500 10px var(--pc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pc-faint); }
html body #spx-panel .spx-vol b { font: 600 11px var(--pc-mono); color: var(--pc-text); }
html body #spx-panel .spx-voice-slider { accent-color: var(--pc-acid); }
html body #spx-panel input[type="range"].spx-voice-slider {
    -webkit-appearance: none; appearance: none;
    height: 4px;
    border-radius: 0;
    background: var(--pc-line-2);
}
html body #spx-panel input[type="range"].spx-voice-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 16px;
    border-radius: 0;
    border: 0;
    background: var(--pc-acid);
    box-shadow: none;
}
html body #spx-panel input[type="range"].spx-voice-slider::-moz-range-thumb { width: 12px; height: 16px; border: 0; border-radius: 0; background: var(--pc-acid); }
html body #spx-panel .spx-vpeer {
    border-radius: 2px;
    background: var(--pc-ink);
    border: 1px solid var(--pc-line);
}
html body #spx-panel .spx-vpeer-av {
    border-radius: 50%;
    background: var(--pc-panel-2);
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    font: 600 10.5px var(--pc-mono);
}
html body #spx-panel .spx-vpeer.talking { border-color: rgba(212, 255, 58, .5); background: var(--pc-ink); }
html body #spx-panel .spx-vpeer.talking .spx-vpeer-av { box-shadow: 0 0 0 2px var(--pc-acid); color: var(--pc-acid); }
html body #spx-panel .spx-vpeer-main strong { font: 700 13px var(--pc-body); color: var(--pc-text); }
html body #spx-panel .spx-vpeer-st { font: 500 9.5px var(--pc-mono); letter-spacing: .06em; text-transform: uppercase; }
html body #spx-panel .spx-vpeer-st.ok { color: var(--pc-acid); }
html body #spx-panel .spx-vpeer-st.wait { color: var(--pc-gold); }
html body #spx-panel .spx-vpeer-st.bad { color: var(--pc-hot); }
html body #spx-panel .spx-vnote {
    border-radius: 0;
    background: transparent;
    border-top: 1px dashed var(--pc-line-2);
    padding: 12px 2px 0;
    font: 400 12px/1.5 var(--pc-body);
    color: var(--pc-dim);
}
html body #spx-panel .spx-vnote > i { color: var(--pc-acid); }
html body #spx-panel .spx-vnote b { color: var(--pc-text); }
html body #spx-panel kbd {
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    border-bottom-width: 2px;
    color: var(--pc-text);
    font: 600 10px/16px var(--pc-mono);
}

/* ---------- 8. Conversa privada (DM) --------------------------------------- */

html body #spx-dm {
    width: 330px;
    height: 440px;
    max-height: calc(100vh - 100px);
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    border-radius: 2px;
    box-shadow: var(--pc-shadow);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--pc-text);
    font-family: var(--pc-body);
}
html body #spx-dm #spx-dm-header {
    gap: 10px;
    padding: 11px 10px 11px 12px;
    background: transparent;
    border-bottom: 1px solid var(--pc-line);
}
html body #spx-dm .spx-avatar-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
html body #spx-dm .spx-dm-hdr-avatar { width: 32px !important; height: 32px !important; border: 1px solid var(--pc-line-2); }
html body #spx-dm .spx-dot { position: absolute; right: -1px; bottom: 0; border-radius: 50%; }
html body #spx-dm .spx-dm-hdr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html body #spx-dm .spx-dm-hdr-nick { font: 700 14px/1.15 var(--pc-body); color: var(--pc-text); }
html body #spx-dm .spx-dm-hdr-st {
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pc-faint);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #spx-dm .spx-dm-hdr-st.on,
html body #spx-dm .spx-dm-hdr-st.play { color: var(--pc-acid); }
html body #spx-dm .spx-dm-hdr-actions { gap: 4px; }
html body #spx-dm .spx-dm-act,
html body #spx-dm .spx-dm-mini-btn,
html body #spx-dm .spx-dm-close-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font-size: 12px;
    cursor: pointer;
}
html body #spx-dm .spx-dm-act:hover,
html body #spx-dm .spx-dm-mini-btn:hover { color: var(--pc-acid); border-color: var(--pc-acid); }
html body #spx-dm .spx-dm-close-btn:hover { color: var(--pc-hot); border-color: var(--pc-hot); background: var(--pc-hot-soft); }

html body #spx-dm #spx-dm-msgs { padding: 12px; gap: 6px; }
html body #spx-dm #spx-dm-msgs::-webkit-scrollbar { width: 6px; }
html body #spx-dm #spx-dm-msgs::-webkit-scrollbar-thumb { background: var(--pc-line-2); border-radius: 0; }
html body #spx-dm .spx-dm-day {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 2px;
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pc-faint);
}
html body #spx-dm .spx-dm-day::before,
html body #spx-dm .spx-dm-day::after { content: ''; flex: 1; height: 1px; background: var(--pc-line); }
html body #spx-dm .spx-dm-bubble {
    max-width: 82%;
    padding: 8px 10px 6px;
    border-radius: 2px;
    font: 400 13.5px/1.4 var(--pc-body);
    color: var(--pc-text);
}
html body #spx-dm .spx-dm-bubble.theirs { background: var(--pc-ink-2); border: 1px solid var(--pc-line); border-left: 2px solid var(--pc-line-2); }
html body #spx-dm .spx-dm-bubble.mine { background: var(--pc-panel-2); border: 1px solid var(--pc-line-2); border-right: 2px solid var(--pc-acid); }
html body #spx-dm .spx-dm-bubble.is-pending { opacity: .7; }
html body #spx-dm .spx-dm-bubble.is-failed { border-color: rgba(255, 84, 112, .5); border-right-color: var(--pc-hot); }
html body #spx-dm .spx-dm-ts {
    display: flex; align-items: center; justify-content: flex-end; gap: 5px;
    margin-top: 3px;
    font: 500 9.5px/1 var(--pc-mono);
    letter-spacing: .04em;
    color: var(--pc-faint);
}
html body #spx-dm .spx-dm-bubble.mine .spx-dm-ts .fa-check { color: var(--pc-acid); }
html body #spx-dm .spx-dm-bubble.is-failed .spx-dm-ts i { color: var(--pc-hot); }
html body #spx-dm .spx-dm-retry {
    display: block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pc-hot);
    font: 600 9.5px var(--pc-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
html body #spx-dm .spx-dm-retry:hover { text-decoration: underline; }
html body #spx-dm .spx-dm-empty,
html body #spx-dm #spx-dm-msgs > .spx-empty2 { margin: auto 0; }
html body #spx-dm #spx-dm-input-row {
    position: relative;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--pc-line);
}
html body #spx-dm .spx-dm-send { flex: 0 0 auto; width: 42px; min-height: 38px; padding: 0; font-size: 13px; }
html body #spx-dm .spx-dm-count {
    position: absolute; right: 64px; top: -9px;
    padding: 2px 5px;
    background: var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    font: 600 9.5px/1 var(--pc-mono);
    color: var(--pc-dim);
}
html body #spx-dm .spx-dm-count:empty { display: none; }
html body #spx-dm .spx-dm-count.is-low { color: var(--pc-hot); border-color: rgba(255, 84, 112, .5); }

/* Minimizada */
html body #spx-dm.spx-dm-minimized { width: 240px; height: auto; }
html body #spx-dm .spx-dm-mini-bar { gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 0; }
html body #spx-dm .spx-dm-mini-avatar { width: 26px !important; height: 26px !important; border: 1px solid var(--pc-line-2); }
html body #spx-dm .spx-dm-mini-nick { font: 700 13px var(--pc-body); color: var(--pc-text); }
html body #spx-dm .spx-dm-mini-bar .spx-dm-mini-btn,
html body #spx-dm .spx-dm-mini-bar .spx-dm-close-btn { width: 26px; height: 26px; }

/* ---------- 9. Avisos, convites e toasts ------------------------------------
   Uma coluna só no canto: os avisos do ui.js (showNotification, filhos com
   estilo inline e cor pelo tipo) e os daqui (social.js põe no mesmo
   contêiner). O z-index (acima de tudo, inclusive das janelas .v3-modal)
   vem do v3-base.css. */

html body #notification-container {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    width: min(340px, calc(100vw - 24px));
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    pointer-events: none !important;
}
html body #notification-container > div:not(.spx-invite-toast),
html body #notification-container > .spx-dm-toast {
    position: relative !important;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 14px 11px 40px !important;
    border-radius: 2px !important;
    background: var(--pc-panel) !important;
    border: 1px solid var(--pc-line-2) !important;
    border-left: 3px solid var(--pc-info) !important;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--pc-text) !important;
    font: 500 13.5px/1.4 var(--pc-body) !important;
    text-shadow: none !important;
    word-break: break-word;
    /* Aviso só de leitura: o toque passa para o que está embaixo (ex.: o X do painel) */
    pointer-events: none;
}
html body #notification-container > div:not(.spx-invite-toast)::before {
    content: '\f05a';
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%);
    font: 900 14px/1 'Font Awesome 6 Free';
    color: var(--pc-info);
}
/* Tipo do aviso pela cor inline que o ui.js põe (sucesso / erro / info) */
html body #notification-container > div[style*="16, 185, 129"],
html body #notification-container > .spx-toast.success,
html body #notification-container > .spx-toast.team { border-left-color: var(--pc-acid) !important; }
html body #notification-container > div[style*="16, 185, 129"]::before,
html body #notification-container > .spx-toast.success::before,
html body #notification-container > .spx-toast.team::before { content: '\f00c'; color: var(--pc-acid); }
html body #notification-container > div[style*="239, 68, 68"],
html body #notification-container > .spx-toast.error,
html body #notification-container > .spx-toast.warning { border-left-color: var(--pc-hot) !important; }
html body #notification-container > div[style*="239, 68, 68"]::before,
html body #notification-container > .spx-toast.error::before,
html body #notification-container > .spx-toast.warning::before { content: '\f071'; color: var(--pc-hot); }
/* O .spx-toast antigo era fixo no canto (social.css): aqui ele entra na coluna */
html body #notification-container > .spx-toast { top: auto; right: auto; max-width: none; animation: spxV3In .22s ease-out both; }
html body #notification-container > .is-leaving { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }

/* Mensagem privada chegando (clicável) */
html body #notification-container > .spx-dm-toast {
    width: 100%;
    pointer-events: auto;
    padding: 10px 14px 10px 12px !important;
    border-left-color: var(--pc-acid) !important;
    text-align: left;
    cursor: pointer;
}
html body #notification-container > .spx-dm-toast:hover { border-color: var(--pc-acid) !important; }
html body .spx-dm-toast .spx-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pc-line-2); object-fit: cover; }
html body .spx-dm-toast .spx-dmt-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body .spx-dm-toast .spx-dmt-kicker { font: 500 9px/1 var(--pc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pc-acid); }
html body .spx-dm-toast strong { font: 700 13.5px/1.2 var(--pc-body); color: var(--pc-text); }
html body .spx-dm-toast .spx-dmt-msg { font: 400 12.5px/1.35 var(--pc-body); color: var(--pc-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .spx-dm-toast > i { flex: 0 0 auto; color: var(--pc-faint); font-size: 12px; }
html body .spx-dm-toast:hover > i { color: var(--pc-acid); }

/* Convite / pedido com Aceitar e Recusar */
html body .spx-invite-toast {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: auto;
    max-width: none;
    padding: 14px;
    border-radius: 2px;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
    color: var(--pc-text);
    font-family: var(--pc-body);
    overflow: hidden;
    pointer-events: auto;
    animation: spxV3In .22s ease-out both;
}
@keyframes spxV3In { from { opacity: 0; transform: translateX(18px); } }
html body .spx-invite-toast .spx-it-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
html body .spx-invite-toast .spx-it-av { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pc-line-2); background: var(--pc-panel-2); }
html body .spx-invite-toast .spx-it-info { display: flex; flex-direction: column; gap: 3px; }
html body .spx-invite-toast .spx-it-kicker { font: 500 9.5px/1 var(--pc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-acid); white-space: nowrap; }
html body .spx-invite-toast .spx-it-kicker i { margin-right: 3px; }
html body .spx-invite-toast .spx-it-info strong { font: 700 15px/1.2 var(--pc-body); color: var(--pc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .spx-invite-toast .spx-it-info > span:last-child { font: 400 12.5px/1.35 var(--pc-body); color: var(--pc-dim); white-space: normal; }
html body .spx-invite-toast .spx-it-info b { color: var(--pc-acid); font: 600 12px var(--pc-mono); letter-spacing: .14em; }
html body .spx-invite-toast .spx-it-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html body .spx-invite-toast .spx-it-ok,
html body .spx-invite-toast .spx-it-no {
    width: auto; height: 36px;
    gap: 7px;
    border-radius: 2px;
    font: 600 10.5px var(--pc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .spx-invite-toast .spx-it-ok { background: var(--pc-acid); border: 1px solid var(--pc-acid); color: var(--pc-acid-ink); }
html body .spx-invite-toast .spx-it-ok:hover { background: var(--pc-acid); box-shadow: 0 0 0 4px var(--pc-acid-soft); }
html body .spx-invite-toast .spx-it-no { background: transparent; border: 1px solid var(--pc-line-2); color: var(--pc-dim); }
html body .spx-invite-toast .spx-it-no:hover { background: var(--pc-hot-soft); border-color: var(--pc-hot); color: var(--pc-hot); }
/* Barrinha do tempo que falta (22 s, o INVITE_MS do social.js) */
html body .spx-invite-toast .spx-it-timer {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--pc-acid);
    transform-origin: left center;
    animation: spxV3Timer 22s linear forwards;
}
@keyframes spxV3Timer { to { transform: scaleX(0); } }

/* Cartão do ui.js (showTeamInvite / showFriendRequestToast), quando aparece */
html body .team-invite-toast {
    right: 16px;
    bottom: 70px;
    width: 300px;
    padding: 14px;
    border-radius: 2px !important;
    background: var(--pc-corners), var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9) !important;
    color: var(--pc-text);
    font-family: var(--pc-body);
}
html body .team-invite-toast strong { display: block; font: 700 15px/1.2 var(--pc-body); }
html body .team-invite-toast span { margin: 4px 0 12px; font: 400 12.5px/1.35 var(--pc-body); color: var(--pc-dim); }
html body .team-invite-toast button {
    height: 36px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-dim);
    font: 600 10.5px var(--pc-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
html body .team-invite-toast button:first-child { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); }
html body .team-invite-toast button:last-child:hover { border-color: var(--pc-hot); color: var(--pc-hot); }

/* ---------- 10. Equipe na partida (HUD da esquerda) ------------------------ */

html body .team-hud-panel {
    background: rgba(13, 16, 14, .82) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--pc-text);
    font-family: var(--pc-body);
}
html body .team-hud-header {
    align-items: center;
    gap: 6px;
    border-bottom-color: var(--pc-line) !important;
    color: var(--pc-dim);
    font: 500 9.5px/1.2 var(--pc-mono) !important;
    letter-spacing: .14em;
    text-transform: uppercase;
}
html body .team-code {
    border-radius: 2px;
    background: transparent !important;
    border: 1px dashed rgba(212, 255, 58, .5);
    color: var(--pc-acid);
    font: 600 10px var(--pc-mono) !important;
    letter-spacing: .12em;
}
html body .team-member { color: var(--pc-text); font-family: var(--pc-body); }
html body .team-btn {
    border-radius: 2px !important;
    background: transparent;
    border: 1px solid var(--pc-line-2);
    color: var(--pc-text);
    font: 600 9px var(--pc-mono) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html body .team-btn:hover { background: transparent; border-color: var(--pc-acid); color: var(--pc-acid); }
html body .team-btn-leave { border-color: rgba(255, 84, 112, .5); color: var(--pc-hot); }
html body .team-btn-leave:hover { background: var(--pc-hot-soft); border-color: var(--pc-hot); color: var(--pc-hot); }
html body.game-bg-light .team-hud-panel { background: var(--pc-panel) !important; }

/* ---------- 11. Chat da partida e emojis ----------------------------------- */

/* Seletor de emojis (todas as telas; o chat.js injeta o próprio <style>) */
html body #px-chat .pxc-emoji {
    border-radius: 2px;
    background: var(--pc-ink);
    border-color: var(--pc-line-2);
}
html body #px-chat .pxc-emoji:hover,
html body #px-chat .pxc-emoji[aria-expanded="true"] { background: var(--pc-ink); border-color: var(--pc-acid); }
html body #px-chat .pxc-emoji-box {
    gap: 2px;
    padding: 8px;
    border-radius: 2px;
    background: var(--pc-panel);
    border: 1px solid var(--pc-line-2);
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9);
}
html body #px-chat .pxc-emoji-box button { border-radius: 2px; }
html body #px-chat .pxc-emoji-box button:hover,
html body #px-chat .pxc-emoji-box button:focus-visible { background: var(--pc-panel-2); box-shadow: inset 0 0 0 1px var(--pc-line-2); }
html body #px-chat .pxc-eb-label { font: 500 9.5px/1 var(--pc-mono); letter-spacing: .16em; color: var(--pc-faint); }

/* Celular e tablet: o tema do chat do PC (pc-redesign.css) só vale ≥1025 px */
@media (max-width: 1024px) {
    html body #px-chat {
        background: rgba(13, 16, 14, .82) !important;
        border: 1px solid var(--pc-line) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        font-family: var(--pc-body);
    }
    html body #px-chat .pxc-tabs { gap: 4px; border-bottom: 1px solid var(--pc-line); padding-bottom: 6px; }
    html body #px-chat .pxc-tab {
        border: 1px solid transparent;
        border-radius: 2px;
        background: transparent;
        color: var(--pc-dim);
        font: 500 10px var(--pc-mono);
        letter-spacing: .1em;
        text-transform: uppercase;
        box-shadow: none;
    }
    html body #px-chat .pxc-tab.active { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); }
    html body #px-chat .pxc-tab.pxc-unseen { border-color: var(--pc-hot); animation: none; }
    html body #px-chat .pxc-count { border-radius: 2px; background: var(--pc-hot); box-shadow: none; font-family: var(--pc-mono); }
    html body #px-chat .pxc-min,
    html body #px-chat .pxc-clear { border-radius: 2px; background: transparent; border: 1px solid var(--pc-line); color: var(--pc-dim); }
    html body #px-chat .pxc-messages { background: transparent; border-radius: 0; }
    html body #px-chat .pxc-messages::-webkit-scrollbar-thumb { background: var(--pc-line-2); border-radius: 0; }
    html body #px-chat .pxc-msg { font-family: var(--pc-body); }
    html body #px-chat .pxc-text { color: var(--pc-text); }
    html body #px-chat .pxc-mention { color: var(--pc-acid); }
    html body #px-chat .pxc-mention-me { color: var(--pc-gold); background: var(--pc-gold-soft); border-radius: 2px; }
    html body #px-chat #pxc-input {
        border-radius: 2px;
        background: var(--pc-ink);
        border: 1px solid var(--pc-line-2);
        color: var(--pc-text);
        font-family: var(--pc-body);
    }
    html body #px-chat #pxc-input:focus { border-color: var(--pc-acid); }
    html body #px-chat .pxc-counter { font-family: var(--pc-mono); color: var(--pc-faint); }
    html body #px-chat .pxc-send { border-radius: 2px; border: 0; background: var(--pc-acid); color: var(--pc-acid-ink); box-shadow: none; }
    html body #px-chat .pxc-newpill,
    html body #px-chat .pxc-minbadge { border-radius: 2px; background: var(--pc-acid); color: var(--pc-acid-ink); font-family: var(--pc-mono); box-shadow: none; }
    html body #px-chat .pxc-mention-box { border-radius: 2px; background: var(--pc-panel); border: 1px solid var(--pc-line-2); }
    html body #px-chat .pxc-mb-item { border-radius: 2px; }
}

/* Botão de falar na voz (celular, voice.js) */
html body #vc-ptt {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 1px solid var(--pc-line-2);
    background: rgba(13, 16, 14, .82);
    color: var(--pc-text);
    font-size: 19px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .1s, color .1s, box-shadow .1s;
}
html body #vc-ptt.is-on { background: var(--pc-acid); border-color: var(--pc-acid); color: var(--pc-acid-ink); box-shadow: 0 0 0 6px var(--pc-acid-soft); }

/* ---------- 12. Painel Social do menu (celular e telas ≤1024 px) ------------
   No PC (≥1025 px) o menu-v3.css já pinta o #social-sidebar; aqui as mesmas
   regras valem nas telas menores, onde ele aparece na aba "Social" do menu. */

@media (max-width: 1024px) {
    html body #social-sidebar,
    html body.px-mmv2.menu-single-column #social-sidebar {
        background: var(--pc-corners), var(--pc-panel) !important;
        border: 1px solid var(--pc-line) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        color: var(--pc-text) !important;
        font-family: var(--pc-body);
    }
    html body #social-sidebar::before { display: none !important; }
    html body #social-sidebar .social-panel-title {
        font: 500 11px/1 var(--pc-mono) !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
        color: var(--pc-dim) !important;
        border-bottom: 1px solid var(--pc-line) !important;
        padding-bottom: 12px !important;
    }
    html body #social-sidebar .social-panel-title span::before,
    html body #social-sidebar.px-social-v2 .px-panel-title-text::before { content: none !important; display: none !important; }
    html body #social-sidebar.px-social-v2 .px-panel-title-text { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; background: none !important; -webkit-text-fill-color: currentColor !important; }

    /* Deslogado */
    html body #social-sidebar .social-gate-icon { background: transparent !important; border: 1px dashed var(--pc-line-2) !important; border-radius: 50% !important; color: var(--pc-acid) !important; box-shadow: none !important; }
    html body #social-sidebar .social-gate-title { font: 700 17px var(--pc-body) !important; color: var(--pc-text) !important; }
    html body #social-sidebar .social-gate-text { font: 400 13px/1.5 var(--pc-body) !important; color: var(--pc-dim) !important; }
    html body #social-sidebar .social-auth-actions button { border-radius: 2px !important; font: 600 11px var(--pc-mono) !important; letter-spacing: .08em !important; text-transform: uppercase !important; box-shadow: none !important; }
    html body #social-sidebar .social-auth-actions .auth-text-action { background: transparent !important; border: 1px solid var(--pc-line-2) !important; color: var(--pc-text) !important; }
    html body #social-sidebar .social-auth-actions .auth-text-action:first-child { background: var(--pc-text) !important; border-color: var(--pc-text) !important; color: var(--pc-ink) !important; }
    html body #social-sidebar .social-auth-actions .discord { background: #5865f2 !important; border: 0 !important; }

    /* Cabeçalho: sino e contador */
    html body #social-sidebar.px-social-v2 .social-panel-top-actions { gap: 6px !important; }
    html body #social-sidebar.px-social-v2 .social-notification-bell,
    html body #social-sidebar.px-social-v2 .social-panel-count {
        height: 26px !important;
        border-radius: 2px !important;
        background: transparent !important;
        border: 1px solid var(--pc-line-2) !important;
        color: var(--pc-dim) !important;
        box-shadow: none !important;
        font: 500 10px var(--pc-mono) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }
    html body #social-sidebar.px-social-v2 .social-notification-bell.has-notifications { border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
    html body #social-sidebar .notif-badge,
    html body #social-sidebar .tab-badge,
    html body #social-sidebar .social-tab-badge { border-radius: 2px !important; background: var(--pc-hot) !important; color: #fff !important; box-shadow: none !important; font-family: var(--pc-mono) !important; }

    /* Cartão do perfil */
    html body #social-sidebar.px-social-v2 .social-login-card {
        background: var(--pc-ink) !important;
        border: 1px solid var(--pc-line) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    html body #social-sidebar.px-social-v2 .social-login-card::before,
    html body #social-sidebar.px-social-v2 .social-login-card::after { display: none !important; }
    html body #social-sidebar.px-social-v2 .px-avatar-wrap { padding: 1px !important; background: var(--pc-line-2) !important; box-shadow: none !important; }
    html body #social-sidebar.px-social-v2 .px-avatar-wrap .social-avatar { border: 1px solid var(--pc-line-2) !important; box-shadow: none !important; }
    html body #social-sidebar.px-social-v2 .px-avatar-lvl {
        border-radius: 2px !important;
        background: var(--pc-acid) !important;
        border: 0 !important;
        color: var(--pc-acid-ink) !important;
        font: 700 9px var(--pc-mono) !important;
        letter-spacing: .04em !important;
        box-shadow: none !important;
    }
    html body #social-sidebar.px-social-v2 .social-login-name span { font: 700 16px var(--pc-body) !important; color: var(--pc-text) !important; }
    html body #social-sidebar.px-social-v2 .px-head-actions .language-flag-btn,
    html body #social-sidebar.px-social-v2 .px-head-actions .social-logout-icon,
    html body #social-sidebar.px-social-v2 .px-head-actions .px-account-gear {
        border-radius: 2px !important;
        background: transparent !important;
        border: 1px solid var(--pc-line-2) !important;
        color: var(--pc-dim) !important;
        box-shadow: none !important;
    }
    html body #social-sidebar.px-social-v2 .px-meta-chip,
    html body #social-sidebar.px-social-v2 .social-clan-chip {
        border-radius: 2px !important;
        background: transparent !important;
        border: 1px solid var(--pc-line-2) !important;
        color: var(--pc-dim) !important;
        box-shadow: none !important;
        font: 500 11px var(--pc-mono) !important;
    }
    html body #social-sidebar.px-social-v2 .px-meta-chip b { color: var(--pc-text) !important; font-weight: 600 !important; }
    html body #social-sidebar.px-social-v2 .px-meta-chip.is-coins i { color: var(--pc-gold) !important; }
    html body #social-sidebar.px-social-v2 .px-meta-chip.is-level i { color: var(--pc-acid) !important; }
    html body #social-sidebar.px-social-v2 .px-xp-info,
    html body #social-sidebar.px-social-v2 .px-xp-info > span,
    html body #social-sidebar.px-social-v2 .px-xp-info b {
        font: 500 10px var(--pc-mono) !important;
        letter-spacing: .08em !important;
        color: var(--pc-dim) !important;
        text-transform: uppercase;
    }
    html body #social-sidebar.px-social-v2 .px-xp-info b { color: var(--pc-text) !important; letter-spacing: 0 !important; }
    html body #social-sidebar.px-social-v2 .social-level-bar {
        height: 8px !important;
        border-radius: 0 !important;
        background: var(--pc-panel-2) !important;
        border: 1px solid var(--pc-line) !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }
    html body #social-sidebar.px-social-v2 .social-level-fill { border-radius: 0 !important; background: var(--pc-acid) !important; box-shadow: none !important; }
    html body #social-sidebar.px-social-v2 .social-level-fill::after { display: none !important; }
    html body #social-sidebar.px-social-v2 .social-level-bar > span { display: none !important; }

    /* Abas: ícone + nome, sublinhado ácido na ativa */
    html body #social-sidebar .social-tabs {
        gap: 0 !important;
        margin-top: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--pc-line) !important;
        border-radius: 0 !important;
    }
    html body #social-sidebar .social-tabs button {
        position: relative;
        height: auto !important;
        min-height: 52px !important;
        padding: 7px 2px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--pc-faint) !important;
        box-shadow: none !important;
        transform: none !important;
    }
    html body #social-sidebar .social-tabs button::after {
        content: '' !important;
        position: absolute; left: 12% !important; right: 12% !important; bottom: -1px !important; top: auto !important;
        width: auto !important;
        height: 2px !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }
    html body #social-sidebar .social-tabs button.active { color: var(--pc-acid) !important; }
    html body #social-sidebar .social-tabs button.active::after { background: var(--pc-acid) !important; }
    html body #social-sidebar .social-tabs .social-tab-icon { width: 19px !important; height: 19px !important; color: inherit !important; filter: none !important; opacity: 1 !important; }
    html body #social-sidebar .social-tabs .px-tab-lbl {
        font: 500 9.5px/1 var(--pc-mono) !important;
        letter-spacing: .1em !important;
        text-transform: uppercase !important;
        color: inherit !important;
    }
    html body #social-sidebar .social-tabs .tab-badge,
    html body #social-sidebar .social-tabs .notif-badge { position: absolute; top: 4px; right: 18%; }

    /* Lista */
    html body #social-sidebar .social-list { padding-top: 10px !important; gap: 6px !important; }
    html body #social-sidebar .social-empty {
        font: 500 10.5px var(--pc-mono) !important;
        letter-spacing: .06em !important;
        color: var(--pc-faint) !important;
        text-transform: uppercase;
        padding: 2px 2px 4px !important;
        background: none !important;
        border: 0 !important;
    }
    html body #social-sidebar .social-list > .social-empty:last-child {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        margin-top: 2px;
        padding: 18px !important;
        border: 1px dashed var(--pc-line-2) !important;
        background: radial-gradient(rgba(233, 239, 228, .05) 1px, transparent 1.2px) 0 0 / 14px 14px !important;
        text-align: center;
        color: var(--pc-dim) !important;
    }
    html body #social-sidebar .social-row {
        border-radius: 2px !important;
        background: var(--pc-ink) !important;
        border: 1px solid var(--pc-line) !important;
        box-shadow: none !important;
    }
    html body #social-sidebar .social-row-main { background: transparent !important; border: 0 !important; box-shadow: none !important; }
    html body #social-sidebar .social-row-main strong { font: 700 14px var(--pc-body) !important; color: var(--pc-text) !important; }
    html body #social-sidebar .social-row-main strong.offline { color: var(--pc-dim) !important; }
    html body #social-sidebar .social-row-main span:not(.presence-dot):not(.social-tab-badge) { font: 500 10.5px var(--pc-mono) !important; color: var(--pc-faint) !important; letter-spacing: .02em; }
    html body #social-sidebar .social-row-avatar { border-radius: 50% !important; border: 1px solid var(--pc-line-2) !important; }
    html body #social-sidebar .presence-dot.online { background: var(--pc-acid) !important; box-shadow: 0 0 0 3px var(--pc-acid-soft) !important; }
    html body #social-sidebar .presence-dot.offline { background: var(--pc-faint) !important; box-shadow: none !important; }
    html body #social-sidebar .social-row > button:not(.social-row-main),
    html body #social-sidebar .social-team-actions button {
        border-radius: 2px !important;
        background: transparent !important;
        border: 1px solid var(--pc-line-2) !important;
        color: var(--pc-text) !important;
        box-shadow: none !important;
        font: 500 10px var(--pc-mono) !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }
    html body #social-sidebar .social-row > button:not(.social-row-main) { min-height: 34px !important; min-width: 0 !important; padding: 0 10px !important; }
    html body #social-sidebar .social-row > button:disabled { opacity: .35; }
    html body #social-sidebar .social-team-actions button { width: 100%; min-height: 40px !important; border-color: var(--pc-acid) !important; color: var(--pc-acid) !important; }
    html body #social-sidebar input { border-radius: 2px !important; background: var(--pc-ink) !important; border: 1px solid var(--pc-line-2) !important; color: var(--pc-text) !important; box-shadow: none !important; font-family: var(--pc-body) !important; }
    html body #social-sidebar input:focus { border-color: var(--pc-acid) !important; outline: none !important; }
}

/* ---------- 13. Celular: folhas de tela cheia ------------------------------ */

@media (max-width: 640px), (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    /* Painel e conversa ocupam a tela (o arrastar do PC deixa left/top inline) */
    html body #spx-panel,
    html body #spx-dm:not(.spx-dm-minimized) {
        left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important; height: 100dvh !important;
        max-height: none !important; min-width: 0; min-height: 0;
        padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        box-sizing: border-box;
        border: 0 !important;
        resize: none;
    }
    html body #spx-panel #spx-header { padding: 12px 12px 12px 14px; }
    html body #spx-panel #spx-close,
    html body #spx-panel #spx-header .spx-lang-btn { width: 38px; height: 38px; }
    html body #spx-panel .spx-clan-chip { width: auto; min-width: 38px; height: 38px; }
    html body #spx-panel .spx-clan-chip.is-none { width: 38px; }
    html body #spx-panel #spx-tabs { overflow-x: auto; padding: 0 2px; }
    html body #spx-panel .spx-tab { min-width: 56px; padding: 10px 2px 9px; }
    html body #spx-panel .spx-tab-label { font-size: 8.5px; letter-spacing: .06em; }
    html body #spx-panel #spx-body { padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px)); }
    html body #spx-panel .spx-act-btn { width: 36px; height: 36px; }
    html body #spx-panel .spx-pill-btn { height: 36px; }
    html body #spx-panel .spx-input,
    html body #spx-dm .spx-input { font-size: 16px; }   /* sem zoom automático no iOS */
    html body #spx-dm #spx-dm-header { padding: 12px 10px 12px 14px; }
    html body #spx-dm .spx-dm-act,
    html body #spx-dm .spx-dm-mini-btn,
    html body #spx-dm .spx-dm-close-btn { width: 38px; height: 38px; }
    html body #spx-dm .spx-dm-mini-btn:not(.spx-dm-mini-bar *) { display: none; }
    html body #spx-dm .spx-dm-send { width: 48px; min-height: 42px; }
    html body #spx-dm.spx-dm-minimized { left: 8px !important; right: auto !important; top: auto !important; bottom: 56px !important; }

    /* Avisos: faixa no topo, largura da tela */
    html body #notification-container {
        top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto;
    }
    html body #notification-container > div:not(.spx-invite-toast) { min-height: 40px; font-size: 13px !important; }
    /* Com o painel ou a conversa em tela cheia, os avisos descem para não cobrir o cabeçalho */
    html body:has(#spx-panel[style*="flex"]) #notification-container,
    html body:has(#spx-dm:not(.spx-dm-minimized)[style*="flex"]) #notification-container { top: calc(66px + env(safe-area-inset-top, 0px)) !important; }
    html body .team-invite-toast { left: 8px; right: 8px; width: auto; bottom: 64px; }
}
/* Celular deitado (em jogo): a coluna de avisos fica estreita, no canto */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
    html body #notification-container { left: auto !important; width: min(340px, 46vw); }
    html body #notification-container > div:not(.spx-invite-toast),
    html body #notification-container > .spx-dm-toast { min-height: 0; padding-top: 8px !important; padding-bottom: 8px !important; }
    /* Equipe na partida: sem a fileira de botões, o painel não invade o chat
       (sair, código e voz continuam na aba Equipe do Social) */
    html body #team-hud-panel .team-actions { display: none !important; }
    html body #team-hud-panel .team-members { margin-bottom: 0 !important; }
}