/* A casca de Discord das páginas de dentro (passos, recursos, painel,
   termos, privacidade): a mesma barra de servidores, a mesma lateral de
   canais e o mesmo topo da página inicial, montados pelo casca.js em volta
   do conteúdo de cada página.

   As cores das páginas antigas são remapeadas aqui para as do Discord
   escuro. `html.casca` vence o `:root` de cada página (mais específico),
   então nenhuma delas precisou ter o CSS reescrito. */
html.casca{
  --fundo:#313338; --fundo-2:#2B2D31; --fundo-3:#383A40;
  --painel:#2B2D31; --painel-2:#383A40; --painel-3:#404249;
  --borda:#3F4147; --borda-viva:#4E5058;
  --texto:#DBDEE1; --texto-fraco:#949BA4; --fraco:#949BA4; --fraquinho:#80848E;
  --ambar:#5865F2; --ambar-claro:#00A8FC; --azul:#5865F2; --verde:#23A55A;
  --c-lateral:#2B2D31; --c-servidores:#1E1F22; --c-linha:#26272B; --c-hover:rgba(78,80,88,.3);
  --c-forte:#F2F3F5; --c-blurple:#5865F2;
}
html.casca body{background:var(--fundo); margin:0}
/* Até o casca.js montar a casca, o topo antigo não aparece: sem ele, a
   página piscaria com o menu velho antes do novo. */
html.casca header.barra{display:none}

.casca .app{display:grid; grid-template-columns:72px 240px minmax(0,1fr); min-height:100vh}
.casca .servidores{background:var(--c-servidores); padding:12px 0; display:flex; flex-direction:column; align-items:center; gap:8px; position:sticky; top:0; height:100vh}
.casca .servidores a{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-weight:700; color:#fff; font-size:15px; text-decoration:none; overflow:hidden}
.casca .servidores a:hover{border-radius:14px}
.casca .servidores img{width:48px; height:48px; display:block}
.casca .servidores .meu{background:var(--fundo); color:var(--texto); font-size:14px}
.casca .servidores .meu.ativo{border-radius:14px; box-shadow:0 0 0 2px var(--c-forte)}
.casca .servidores .outro{background:var(--fundo); color:var(--verde); font-size:24px; font-weight:400; border-radius:50%}
.casca .servidores .outro:hover{background:var(--verde); color:#fff; border-radius:16px}
.casca .servidores hr{width:32px; border:0; border-top:2px solid var(--fundo); margin:0}

.casca .lateral{background:var(--c-lateral); position:sticky; top:0; height:100vh; display:flex; flex-direction:column}
.casca .lateral .banner{display:block; width:100%; height:auto; aspect-ratio:17/6; object-fit:cover}
.casca .lateral header{height:48px; padding:0 16px; display:flex; align-items:center; font-weight:700; color:var(--c-forte); border-bottom:1px solid var(--c-linha)}
.casca .canais{padding:12px 8px; overflow-y:auto; flex:1}
.casca .categoria{font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fraco); padding:16px 8px 4px}
.casca .categoria:first-child{padding-top:4px}
.casca .canal{display:flex; align-items:center; gap:6px; padding:6px 8px; margin:1px 0; border-radius:4px; color:var(--fraquinho); font-weight:500; font-size:15.5px; text-decoration:none}
.casca .canal::before{content:"#"; font-size:20px; line-height:1; font-weight:400; color:var(--fraquinho); width:20px; text-align:center}
.casca .canal.fora::before{content:"↗"; font-size:15px}
.casca .canal:hover{background:var(--c-hover); color:var(--texto); text-decoration:none}
.casca .canal.ativo{background:rgba(78,80,88,.6); color:var(--c-forte)}
.casca .voce{background:#232428; padding:8px 12px; display:flex; align-items:center; gap:8px; min-height:52px}
.casca .voce .quem{display:flex; align-items:center; gap:6px; min-width:0; color:var(--texto); font-size:13px; font-weight:600; text-decoration:none}
.casca .voce .quem img{width:24px; height:24px; border-radius:50%}
.casca .voce .quem span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.casca .voce small{font-size:12px; color:var(--fraco)}

.casca .conversa{min-width:0}
.casca .topo-canal{position:sticky; top:0; z-index:30; height:48px; display:flex; align-items:center; gap:10px; padding:0 16px; background:var(--fundo);
  border-bottom:1px solid var(--c-linha); box-shadow:0 1px 0 rgba(0,0,0,.15); color:var(--c-forte); font-weight:700}
.casca .topo-canal .hash{color:var(--fraquinho); font-size:18px; font-weight:400}
.casca .topo-canal .titulo{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.casca .topo-canal .idioma{display:flex; margin:0 0 0 auto !important; position:static !important; background:var(--c-servidores); border:0; border-radius:4px; overflow:hidden; flex:0 0 auto; padding:0; gap:0}
.casca .topo-canal .idioma button{background:none; border:0; border-radius:0; color:var(--fraco); font:700 12px/1 inherit; padding:7px 9px; cursor:pointer}
.casca .topo-canal .idioma button[aria-pressed="true"]{background:var(--c-blurple); color:#fff}
.casca .topo-canal .entrar{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; border-radius:3px; font-size:14px; font-weight:500; color:#fff; background:var(--c-blurple); white-space:nowrap; text-decoration:none}
.casca .topo-canal .entrar:hover{background:#4752C4}
.casca .topo-canal .entrar img{width:20px; height:20px; border-radius:50%}
.casca .topo-canal .entrar span{max-width:110px; overflow:hidden; text-overflow:ellipsis}
.casca .topo-canal .idioma + .entrar,.casca .topo-canal .idioma + #eu{margin-left:8px}
.casca .topo-canal > .entrar:only-of-type{margin-left:auto}
/* O usuário que o painel mostra no próprio topo antigo vem para cá. */
.casca .topo-canal #eu{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--texto); margin-left:auto}
.casca .topo-canal #eu[hidden]{display:none}
.casca .topo-canal #eu img{width:22px; height:22px; border-radius:50%}

/* Conteúdo que grudava embaixo do topo antigo (60px) gruda embaixo do novo. */
.casca .filtros{top:48px}

.casca .menu-bt{display:none; background:none; border:0; color:var(--texto); font-size:22px; line-height:1; padding:6px 8px 6px 0; cursor:pointer}
.casca .veu{display:none}

@media (max-width:900px){
  .casca .app{grid-template-columns:minmax(0,1fr)}
  .casca .menu-bt{display:block}
  .casca .servidores,.casca .lateral{position:fixed; top:0; height:100%; z-index:41; transition:transform .2s ease}
  .casca .servidores{left:0; width:72px; transform:translateX(-100%); overflow-y:auto}
  .casca .lateral{left:72px; width:min(280px, calc(100vw - 72px)); transform:translateX(calc(-100% - 72px))}
  .casca.gaveta .servidores,.casca.gaveta .lateral{transform:none}
  .casca.gaveta .veu{display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:40}
  .casca .topo-canal{padding:0 12px}
}