/* Layout no formato do Discord (medidas tiradas do Discord web, 14/10/2026), com as cores, a fonte, o nome e a logo do ASTRO.
   Só computador/tablet (≥ 701 px): o celular tem o próprio layout de app. Carrega por último: sobrescreve app.css/estrutura.css.
   Medidas de referência: barra de título 32 · trilho 72 (ícones 48) · lista de canais 240 · cabeçalhos 48 · linha de canal 32 (raio 8)
   · painel do usuário flutuante 8 px das bordas (raio 8) · mensagem com recuo 72 e avatar 40 · caixa de texto raio 8, 56 de altura · membros 264. */
.tb-title { display: none; }   /* a barra de título só existe no computador/tablet */
@media (min-width: 701px) {
  :root { --tb: 32px; --upw: calc(72px + 240px - 16px); }

  /* ---- barra de título (topo de tudo): nome do lugar no meio, busca e caixa de entrada à direita ---- */
  .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--tb); z-index: 7; display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 12px; box-sizing: border-box; background: var(--bg0); }
  .tb-title { display: flex; position: absolute; left: 50%; top: 0; height: var(--tb); max-width: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font: 600 14px 'Montserrat', sans-serif; color: rgb(var(--fg)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
  .tb-title .tbi { width: 16px; height: 16px; border-radius: 4px; flex: none; background: rgba(var(--fg), .15) center / cover; font-size: 9px; display: grid; place-items: center; }
  .topbar .dsearch { width: 28px; height: 24px; padding: 0; justify-content: center; border: 0; }
  .topbar .dsearch span { display: none; }
  .topbar .bell { width: 28px; height: 24px; border: 0; }

  /* tudo desce a barra de título */
  .rail { top: var(--tb); padding: 0 0 82px; }
  .menu { top: var(--tb); bottom: 0; padding-bottom: 82px; border-top-left-radius: 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); box-sizing: border-box; }
  .sv, .home { top: var(--tb); }
  .sv { grid-template-columns: 240px minmax(0, 1fr) 264px; }
  .sv-side { padding-bottom: 82px; border-top-left-radius: 8px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  body.dm-mode .sv { left: 312px; }

  /* trilho: ícones de 48 com 8 px entre eles */
  .rail > * { flex: none; }
  .rail { gap: 8px; }

  /* ---- painel do usuário: cartão flutuante que cobre trilho + lista (8 px das bordas) ---- */
  .upanel { left: 8px; bottom: 8px; width: var(--upw); height: 58px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); z-index: 8; }
  .calldock { left: 8px; bottom: 74px; width: var(--upw); box-sizing: border-box; border-radius: 8px; }
  body.in-call .menu { bottom: 0; padding-bottom: 170px; }
  body.in-call .sv-side { padding-bottom: 170px; }
  body.in-call .rail { padding-bottom: 170px; }

  /* ---- cabeçalho do servidor e lista de canais ---- */
  .sv-head { height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .sv-chans { padding: 8px 0; }
  .chh { padding: 16px 8px 4px 16px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .chh span { text-transform: none; }
  .chn { height: 32px; box-sizing: border-box; margin-left: 8px; width: calc(100% - 16px); padding: 4px 8px; gap: 8px; border-radius: 8px; font-size: 15px; font-weight: 500; }
  .chn i { font-size: 18px; width: 20px; text-align: center; }
  .chn svg { width: 20px; height: 20px; }
  .chn.evbtn { margin-bottom: 2px; }

  /* lista da tela inicial (Amigos, Solicitações, Plus, Loja, Missões e DMs) no mesmo ritmo */
  .menu a, .menu a.ds-item { min-height: 42px; box-sizing: border-box; margin: 0 8px; padding: 0 8px; gap: 12px; border-radius: 8px; font-size: 15px; font-weight: 500; }
  .menu svg { width: 20px; height: 20px; }

  /* ---- cabeçalho do canal ---- */
  .sv-top { height: 48px; box-sizing: border-box; padding: 8px 8px 8px 16px; padding-right: 8px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--line); }
  .sv.nomem .sv-top, body.dm-mode.dm-1 .sv-top { padding-right: 8px; }
  .sv-top .hash { font-size: 22px; }
  .sv-iconbtn { width: 32px; height: 32px; border: 0; border-radius: 8px; color: rgba(var(--fg), .7); }
  .sv-iconbtn:hover { background: rgba(var(--fg), .08); }
  .sv-iconbtn svg { width: 20px; height: 20px; }

  /* ---- mensagens: avatar de 40 à esquerda, texto com recuo de 72 ---- */
  .sv-msgs { padding: 8px 0 24px; }
  .cm { display: block; position: relative; margin: 0; padding: 2px 48px 2px 72px; min-height: 22px; border-radius: 0; }
  .cm.first { margin-top: 17px; }
  .cm > .av { position: absolute; left: 16px; top: 4px; width: 40px; height: 40px; margin: 0; }
  .cm > .gut { position: absolute; left: 0; top: 2px; width: 72px; padding: 0; text-align: center; font-size: 11px; line-height: 22px; }
  .mh { gap: 8px; line-height: 22px; }
  .mn { font-size: 16px; font-weight: 600; }
  .mu { display: none; }
  .mtime { font-size: 12px; font-weight: 500; }
  .mt { font-size: 15px; line-height: 22px; }

  /* ---- caixa de mensagem ---- */
  .sv-comp { padding: 0 8px 8px; }
  .sv-comp .box { min-height: 56px; box-sizing: border-box; align-items: center; padding: 0 12px 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
  .sv-comp textarea { padding: 17px 0; font-size: 15px; line-height: 22px; }
  .sv-comp .box button.attach { width: 40px; height: 40px; }
  .sv-comp .box button.attach svg { width: 22px; height: 22px; }

  /* ---- lista de membros (264) ---- */
  .sv-members { padding: 56px 8px 16px 0; box-shadow: inset 0 48px 0 var(--bg0), inset 0 49px 0 var(--line); }
  .sv-members .chh { padding: 20px 4px 4px 16px; font-size: 14px; }
  .sv-members .chh span { text-transform: none; }
  .sv-members .mrow { min-height: 42px; box-sizing: border-box; margin-left: 8px; padding: 1px 8px; border: 0; border-radius: 8px; display: flex; align-items: center; }
  .sv-members .mrow:hover { background: rgba(var(--fg), .06); }
  .sv-members .mrow .top { gap: 12px; }
  .sv-members .mrow .av { width: 32px; height: 32px; }
  .sv-members .mrow b, .sv-members .mrow .nm { font-size: 15px; font-weight: 500; }
}
@media (min-width: 701px) and (max-width: 1000px) { .sv { grid-template-columns: 240px minmax(0, 1fr); } }

@media (min-width: 701px) {
  /* caixa de mensagem: "+" à esquerda, texto no meio, enquete/emoji/áudio à direita, sem botão de enviar (Enter envia) */
  .sv-comp .box > #svAttach { order: 0; }
  .sv-comp .box > #svRecT, .sv-comp .box > #svInput { order: 1; }
  .sv-comp .box > #svPoll { order: 2; } .sv-comp .box > #svEmoji { order: 3; } .sv-comp .box > #svMic { order: 4; }
  .sv-comp .box > #svSend { order: 5; display: none; }
  .sv-comp .box > #svAttach svg { width: 24px; height: 24px; }
  /* dono: coroa ao lado do nome, como no Discord */
  .sv-members .crown.ic { display: inline-flex; padding: 0; margin-left: 4px; border: 0; background: none; color: #f0b232; vertical-align: -2px; }
  .sv-members .crown.ic svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
  /* categoria: nome + seta pequena depois */
  .chh .cattg { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .chh .cattg .car svg { width: 12px; height: 12px; }
}

@media (min-width: 701px) {
  .menu a, .menu a.ds-item { font-size: 14px; white-space: nowrap; }
  .menu a > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; }
  .ds-h { padding: 16px 16px 4px 18px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
  .home .fh, .home .flabel, .home h2#nowT, #nowT { letter-spacing: 0; text-transform: none; }
  #nowT { font-size: 20px; font-weight: 700; }
}
@media (min-width: 701px) {
  .home .fcount { margin: 16px 0 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
}

/* thread aberta: o chat encolhe para dar lugar a ela (antes ela cobria os botões do cabeçalho e parte das mensagens) */
@media (min-width: 1001px) { .sv:has(#svThread:not([hidden])) .sv-main { padding-right: 136px; } }   /* a thread (400 px) cobre a coluna de membros (264 px) + 136 px */
/* tablet (701–1000 px): o chat só tem ~500 px; a thread cobre a área do chat inteira, sem deixar um pedaço pela metade */
@media (min-width: 701px) and (max-width: 1000px) { body:not(.dm-mode) .sv-thread { left: 240px; width: auto; } body.dm-mode .sv-thread { left: 0; width: auto; } }
/* cartão de perfil: usa a altura da janela (antes parava em 640 px e escondia ações de moderação atrás da rolagem) */
@media (min-width: 701px) { .pcard.pfull:not(.sheet) { max-height: calc(100vh - 16px); } }