/* Comunidade "Bambuzal": topo com banner, chat ao vivo estilo Discord e tópicos em cartões */
body.pg-comunidade { background: #040907; }
.cm { max-width: 1440px; margin: 0 auto; padding: 18px 20px 26px; }

/* ================= Topo Bambuzal ================= */
.cm-topo { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(61, 220, 111, .3); background: #06110b; margin-bottom: 16px; }
.cm-topo-arte { position: absolute; inset: 0; background: url(../img/banner.webp?v=2) right 30% / cover no-repeat; opacity: .55; }
.cm-topo-arte::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #06110b 18%, rgba(6, 17, 11, .75) 50%, rgba(6, 17, 11, .2)), linear-gradient(0deg, #06110b 0%, transparent 60%); }
.cm-topo-in { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px 10px; }
.cm-marca { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; }
.cm-marca img { width: 60px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); }
.cm-marca small { display: block; color: var(--verde); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cm-marca b { display: block; font: 700 32px/1 'Oswald', sans-serif; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 0 18px rgba(61, 220, 111, .35); }
.cm-numeros { display: flex; gap: 8px; margin: 0 0 0 auto; flex-wrap: wrap; }
.cm-numeros span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(4, 9, 7, .7); border: 1px solid rgba(61, 220, 111, .25); font-size: 13px; color: var(--texto-2); }
.cm-numeros b { color: var(--texto); }
.cm-on i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); animation: cm-pisca 1.6s ease-in-out infinite; }
@keyframes cm-pisca { 50% { opacity: .35; } }
.cm-topo-barra { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 22px 16px; flex-wrap: wrap; }
.cm-abas { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-abas a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 99px; color: var(--texto); font-weight: 800; font-size: 14px; text-decoration: none; background: rgba(4, 9, 7, .72); border: 1px solid rgba(61, 220, 111, .22); transition: background .15s, border-color .15s; }
.cm-abas a svg { width: 16px; height: 16px; color: var(--verde); }
.cm-abas a:hover { border-color: var(--verde); }
.cm-abas a.ativo { background: var(--verde); color: #04140a; border-color: transparent; box-shadow: 0 0 16px rgba(61, 220, 111, .4); }
.cm-abas a.ativo svg { color: #04140a; }
.cm-busca { display: flex; align-items: center; gap: 8px; margin-left: auto; padding: 0 14px; height: 40px; min-width: 240px; border-radius: 99px; background: rgba(4, 9, 7, .8); border: 1px solid rgba(61, 220, 111, .22); }
.cm-busca svg { width: 16px; height: 16px; color: var(--texto-2); flex-shrink: 0; }
.cm-busca input[type=search] { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--texto); font: 600 14px var(--corpo); outline: none; }
.cm-busca:focus-within { border-color: var(--verde); }
.cm-publicar { border-radius: 99px; padding: .6em 1.1em; }
.cm-topo-barra .cm-busca + .cm-publicar, .cm-topo-barra .cm-publicar:only-of-type { flex-shrink: 0; }
.cm-pg-chat .cm-topo-barra .cm-publicar { margin-left: auto; }

/* ================= Tópicos: cartões + coluna lateral ================= */
.cm-grade { display: grid; grid-template-columns: minmax(0, 660px) 320px; justify-content: center; gap: 22px; align-items: start; }
.cm-meio { min-width: 0; }
.cm-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-cab h1 { margin: 0; font: 700 22px 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .3px; }
.cm-cab-dica { color: var(--texto-2); font-size: 13px; font-weight: 700; }
.cm-ordem { display: inline-flex; padding: 3px; gap: 3px; border-radius: 99px; background: #0a140e; border: 1px solid #1a2f23; }
.cm-ordem a { padding: 6px 14px; border-radius: 99px; color: var(--texto-2); font-weight: 800; font-size: 13px; text-decoration: none; }
.cm-ordem a.ativo { background: #1a2f23; color: var(--verde); }
.cm-filtros { margin-bottom: 10px; }
.cm-filtros summary { display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; color: var(--texto-2); }
.cm-filtros summary::-webkit-details-marker { display: none; }
.cm-filtros summary svg { width: 12px; height: 12px; transform: rotate(90deg); transition: transform .2s; }
.cm-filtros[open] summary svg { transform: rotate(-90deg); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px 0 4px; }
.cm-chips a { padding: 6px 12px; border-radius: 99px; border: 1px solid #1d3326; color: var(--texto-2); font-size: 13px; font-weight: 700; text-decoration: none; background: #08110c; }
.cm-chips a:hover { color: var(--texto); border-color: var(--cat, var(--verde)); }
.cm-chips a.ativo { background: var(--cat, var(--verde)); border-color: transparent; color: #04140a; }

.cm-compor { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; cursor: pointer; text-align: left; color: var(--texto-2); font: 600 15px var(--corpo);
  background: linear-gradient(135deg, rgba(61, 220, 111, .1), #08110c 55%); border: 1px solid rgba(61, 220, 111, .3); }
.cm-compor .cm-av { width: 40px; height: 40px; font-size: 16px; }
.cm-compor > span:not(.cm-av) { flex: 1; }
.cm-compor i { color: var(--verde); }
.cm-compor:hover { border-color: var(--verde); color: var(--texto); }
.cm-convite { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border-radius: 16px; background: #08110c; border: 1px solid #1a2f23; }
.cm-convite p { flex: 1; margin: 0; font-size: 14px; color: var(--texto-2); }
.cm-convite b { color: var(--texto); }

/* Avatar e selos */
.cm-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; flex-shrink: 0; background: var(--cor); color: #fff; font: 800 17px var(--corpo); }
.cm-selo { padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; flex-shrink: 0; }
.cm-selo-equipe { color: var(--verde); border: 1px solid rgba(61, 220, 111, .6); }
.cm-selo-vip { color: #2a1a00; background: var(--ouro); }

/* Cartão de tópico: categoria em cima, título, resumo, autor e ações embaixo */
.cm-lista { display: flex; flex-direction: column; gap: 10px; }
.cm-post { position: relative; padding: 12px 14px 4px; border-radius: 16px; background: linear-gradient(180deg, #0b1711, #07100b); border: 1px solid #172a20; transition: border-color .15s, transform .15s; }
.cm-post[data-cm-link] { cursor: pointer; }
.cm-post[data-cm-link]:hover { border-color: color-mix(in srgb, var(--cat) 60%, transparent); transform: translateY(-1px); }
.cm-fixado { border-color: rgba(255, 200, 61, .45); }
.cm-oculto { opacity: .5; border-style: dashed; }
.cm-post-topo { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--texto-2); }
.cm-post-topo .cm-av { width: 40px; height: 40px; font-size: 16px; }
.cm-post-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-post-linha1, .cm-post-linha2 { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.cm-autor-nome { color: var(--texto); font-weight: 800; font-size: 14.5px; text-decoration: none; }
.cm-autor-nome:hover { color: var(--verde); }
.cm-cat { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--cat); text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; }
.cm-cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 8px var(--cat); }
.cm-post-topo time::before { content: '·'; margin-right: 8px; }
.cm-tag-fixo, .cm-tag-oculto { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.cm-tag-fixo { color: #2a1a00; background: var(--ouro); }
.cm-tag-fixo svg { width: 11px; height: 11px; }
.cm-tag-oculto { color: #fff; background: #8a2236; }
.cm-titulo { margin: 10px 0 3px; font: 700 18px/1.25 'Oswald', sans-serif; letter-spacing: .2px; }
.cm-titulo a { color: var(--texto); text-decoration: none; }
.cm-post-cheio .cm-titulo { font-size: 24px; margin: 12px 0 8px; }
.cm-resumo { margin: 0; color: #c9d8ce; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cm-texto { color: #d6e3da; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.cm-texto a { color: var(--verde); }
.cm-img { display: block; margin: 10px -14px 0; overflow: hidden; border-block: 1px solid #172a20; background: #000; }
/* imagem inteira, sem cortar: o tamanho segue a própria imagem */
.cm-img img { display: block; width: auto; max-width: 100%; height: auto; max-height: 65vh; margin: 0 auto; }
.cm-post-cheio .cm-img img { max-height: 85vh; }
.cm-post-pe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding: 4px 0; }
.cm-autor { display: inline-flex; align-items: center; gap: 8px; color: var(--texto); text-decoration: none; font-size: 13.5px; }
.cm-autor .cm-av { width: 28px; height: 28px; font-size: 12px; }
.cm-autor:hover b { color: var(--verde); }
.cm-ultima { color: var(--texto-2); font-size: 12px; }
.cm-acoes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cm-acao { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; border: 0; background: none; cursor: pointer; color: var(--texto-2); font: 700 13px var(--corpo); text-decoration: none; list-style: none; }
.cm-acao::-webkit-details-marker { display: none; }
.cm-acao svg { width: 16px; height: 16px; }
.cm-acao:not(.cm-acao-fixa):hover { color: var(--verde); background: rgba(61, 220, 111, .08); }
.cm-acao-fixa { cursor: default; }
.cm-curtir[aria-pressed="true"] { color: var(--verde); }
.cm-curtir[aria-pressed="true"] svg { animation: cm-pulo .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cm-pulo { 50% { transform: scale(1.35); } }
.cm-salvar[aria-pressed="true"] { color: var(--ouro); }
.cm-mais { position: relative; }
.cm-mais > div { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5; min-width: 200px; padding: 6px; border-radius: 12px; background: #0c1711; border: 1px solid #1d3326; box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.cm-mais > div button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--texto); font: 700 13.5px var(--corpo); cursor: pointer; text-align: left; }
.cm-mais > div button:hover { background: #13241a; }
.cm-mais > div svg { width: 16px; height: 16px; }
.cm-perigo { color: #ff8a9a !important; }
.cm-seguir { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--verde); background: var(--verde); color: #04140a; font: 800 12.5px var(--corpo); cursor: pointer; flex-shrink: 0; }
.cm-seguir[aria-pressed="true"] { background: transparent; color: var(--verde); }
.cm-seguir-mini { padding: 3px 10px; font-size: 11.5px; }

/* Página do tópico: só o tópico da pessoa e as respostas */
.cm-sozinho { max-width: 700px; margin: 0 auto; }
.cm-voltar { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px; color: var(--texto-2); font-weight: 800; font-size: 14px; text-decoration: none; }
.cm-voltar svg { width: 15px; height: 15px; transform: rotate(180deg); }
.cm-voltar:hover { color: var(--verde); }
.cm-resp-para { margin: 0 0 8px; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.cm-resp-para b { color: var(--verde); }
/* Página do tópico */
.cm-trilha { margin: 0 0 10px; }
.cm-respostas { margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: #08110c; border: 1px solid #172a20; }
.cm-respostas h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; }
.cm-respostas h2 svg { color: var(--verde); }
.cm-respostas h2 span { padding: 1px 9px; border-radius: 99px; background: #13241a; color: var(--verde); font-size: 13px; }
.cm-responder { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.cm-responder .cm-av { width: 40px; height: 40px; font-size: 16px; }
.cm-responder textarea { flex: 1; min-height: 46px; resize: vertical; padding: 11px 13px; border-radius: 12px; border: 1px solid #1d3326; background: #050c08; color: var(--texto); font: 500 14.5px/1.45 var(--corpo); }
.cm-responder textarea:focus { outline: none; border-color: var(--verde); }
.cm-responder .btn { align-self: stretch; padding: 0 16px; border-radius: 12px; }
.cm-resps { list-style: none; margin: 0; padding: 0; }
.cm-resp { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid #13241a; scroll-margin-top: 90px; }
.cm-resp:target { animation: coment-alvo 2.4s ease-out 1; border-radius: 10px; }
.cm-resp .cm-av { width: 40px; height: 40px; font-size: 16px; }
.cm-resp-corpo { flex: 1; min-width: 0; }
.cm-post-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13.5px; }
.cm-nome { color: var(--verde); font-weight: 800; text-decoration: none; }
.cm-meta { color: var(--texto-2); }
.cm-resp .cm-texto { font-size: 14.5px; margin-top: 3px; }
.cm-resp-ops { margin-left: auto; display: inline-flex; gap: 2px; }
.cm-resp-ops button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--texto-2); cursor: pointer; }
.cm-resp-ops button:hover { background: #0c1711; color: #ff8a9a; }
.cm-resp-ops svg { width: 15px; height: 15px; }
.cm-aviso { padding: 10px 12px; border-radius: 10px; background: rgba(255, 93, 93, .08); border: 1px solid rgba(255, 93, 93, .35); color: #ffb3b3; font-size: 13.5px; }

/* Descobrir */
.cm-descobrir { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cm-cat-card { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 16px; text-decoration: none; color: var(--texto); background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 12%, #08110c), #08110c 70%); border: 1px solid color-mix(in srgb, var(--cat) 35%, #172a20); }
.cm-cat-card:hover { border-color: var(--cat); }
.cm-cat-ic { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 11px; color: #061009; background: var(--cat); }
.cm-cat-ic svg { width: 18px; height: 18px; }
.cm-cat-card b { font: 600 17px 'Oswald', sans-serif; }
.cm-cat-card small { color: var(--texto-2); font-size: 13px; }
.cm-cat-card em { margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--cat); }
.cm-sub { margin: 20px 0 10px; font: 600 18px 'Oswald', sans-serif; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.cm-sub svg { color: var(--ouro); }
.cm-membros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cm-membro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 10px 12px; border-radius: 16px; text-align: center; text-decoration: none; color: var(--texto); background: #08110c; border: 1px solid #172a20; }
.cm-membro:hover { border-color: var(--verde); }
.cm-membro .cm-av { width: 56px; height: 56px; font-size: 21px; }
.cm-membro small { color: var(--texto-2); font-size: 11.5px; }
.cm-membro-pos { position: absolute; top: 8px; left: 12px; font: 700 15px 'Oswald', sans-serif; color: var(--verde); }

.cm-vazio { padding: 40px 20px; text-align: center; border-radius: 18px; background: #08110c; border: 1px dashed #1d3326; }
.cm-vazio img { margin: 0 auto 8px; }
.cm-vazio h2 { margin: 0 0 4px; font: 700 21px 'Oswald', sans-serif; }
.cm-vazio p { color: var(--texto-2); margin: 0 0 14px; }
.cm-vazio-p { color: var(--texto-2); font-size: 13.5px; margin: 6px 0; }
.cm-paginas { display: flex; justify-content: center; gap: 10px; padding: 16px; }

/* Lateral dos tópicos: Fogueira e membros */
.cm-lado { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.cm-caixa { border-radius: 18px; background: #08110c; border: 1px solid #172a20; overflow: hidden; }
.cm-caixa h3 { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 14px 16px 10px; font: 600 17px 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .3px; }
.cm-caixa h3 small { margin-left: auto; font: 700 11px var(--corpo); color: var(--texto-2); text-transform: none; letter-spacing: 0; }
.cm-caixa > .cm-vazio-p { padding: 0 16px 14px; }
.cm-fogueira { background: radial-gradient(120% 70% at 100% 0%, rgba(255, 120, 60, .12), transparent 60%), #08110c; }
.cm-alta { list-style: none; margin: 0; padding: 0 8px 4px; }
.cm-alta a { display: flex; gap: 12px; padding: 9px 8px; border-radius: 12px; text-decoration: none; color: var(--texto); }
.cm-alta a:hover { background: #0e1b14; }
.cm-alta-n { font: 700 28px/1 'Oswald', sans-serif; color: #2a4636; min-width: 22px; text-align: center; }
.cm-alta li:nth-child(1) .cm-alta-n { color: #ff8a4c; text-shadow: 0 0 12px rgba(255, 138, 76, .5); }
.cm-alta li:nth-child(2) .cm-alta-n { color: var(--ouro); }
.cm-alta li:nth-child(3) .cm-alta-n { color: var(--verde); }
.cm-alta b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.3; }
.cm-alta small { color: var(--texto-2); font-size: 12px; }
.cm-ver { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-top: 1px solid #13241a; color: var(--verde); font-size: 13px; font-weight: 800; text-decoration: none; }
.cm-ver svg { width: 14px; height: 14px; }
.cm-pessoas { list-style: none; margin: 0; padding: 0 8px 8px; }
.cm-pessoas li { display: flex; align-items: center; gap: 10px; padding: 8px; }
.cm-pessoas .cm-av { width: 38px; height: 38px; font-size: 15px; }
.cm-pessoa-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; color: var(--texto); }
.cm-pessoa-nome b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pessoa-nome small { color: var(--texto-2); font-size: 12px; }

/* ================= Chat (estilo Discord) ================= */
.cm-pg-chat { display: flex; flex-direction: column; height: calc(100dvh - 80px); padding-bottom: 14px; }
.cm-pg-chat .cm-topo { flex-shrink: 0; margin-bottom: 12px; }
.cm-pg-chat .cm-topo-in { padding: 12px 20px 4px; }
.cm-pg-chat .cm-marca img { width: 44px; }
.cm-pg-chat .cm-marca b { font-size: 24px; }
.cm-pg-chat .cm-topo-barra { padding: 6px 20px 12px; }
body:has(.cm-pg-chat) .rodape-destaques, body:has(.cm-pg-chat) .rodape { display: none; }
body:has(.cm-pg-chat) main { min-height: 0; }

.ch { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; border-radius: 20px; overflow: hidden; border: 1px solid #172a20; background: #07100b; }
.ch-lado, .ch-membros { overflow-y: auto; background: #050c08; scrollbar-width: thin; scrollbar-color: #1d3326 transparent; }
.ch-lado { border-right: 1px solid #13241a; padding: 12px 8px; }
.ch-membros { border-left: 1px solid #13241a; padding: 12px 8px; }
.ch-grupo { margin-bottom: 16px; }
.ch-grupo > p, .ch-membros > p { margin: 0 8px 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.ch-canal { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; color: var(--texto-2); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.ch-hash { font-size: 18px; font-weight: 400; color: #4f6f5c; line-height: 1; }
.ch-emoji { margin-left: auto; font-size: 13px; opacity: .8; }
.ch-canal:hover { background: #0d1913; color: var(--texto); }
.ch-canal.ativo { background: rgba(61, 220, 111, .12); color: var(--texto); }
.ch-canal.ativo .ch-hash { color: var(--verde); }
.ch-nova-dm { display: flex; gap: 6px; margin: 0 4px 6px; }
.ch-nova-dm input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #1d3326; background: #08110c; color: var(--texto); font: 600 13px var(--corpo); }
.ch-nova-dm input:focus { outline: none; border-color: var(--verde); }
.ch-nova-dm button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 0; background: #13241a; color: var(--verde); cursor: pointer; }
.ch-nova-dm svg { width: 14px; height: 14px; }
.ch-dm, .ch-membro { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: var(--texto-2); text-decoration: none; }
.ch-dm:hover, .ch-membro:hover { background: #0d1913; color: var(--texto); }
.ch-dm.ativo { background: rgba(61, 220, 111, .12); color: var(--texto); }
.ch-dm-av { position: relative; flex-shrink: 0; }
.ch-dm-av .cm-av { width: 32px; height: 32px; font-size: 13px; }
.ch-on { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--verde); border: 2px solid #050c08; }
.ch-dm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ch-dm-txt b { font-size: 13.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dm-txt small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #ff4d6d; color: #fff; font: 800 11px/19px var(--corpo); text-align: center; }
.ch-membro b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-dica { display: block; margin: 4px 8px; font-size: 12.5px; color: var(--texto-2); line-height: 1.4; }
.ch-dica a { color: var(--verde); }

/* Sala de conversa */
.ch-sala { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ch-sala-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #13241a; background: #08110c; }
.ch-menu { display: none; width: 36px; height: 36px; place-items: center; border-radius: 10px; border: 1px solid #1d3326; background: none; color: var(--texto); cursor: pointer; }
.ch-menu svg { width: 16px; height: 16px; }
.ch-sala-nome { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; color: var(--texto); text-decoration: none; white-space: nowrap; }
.ch-sala-nome .cm-av { width: 28px; height: 28px; font-size: 12px; }
.ch-sala-desc { color: var(--texto-2); font-size: 13px; padding-left: 10px; border-left: 1px solid #1d3326; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bloquear { margin-left: auto; padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(255, 93, 120, .4); background: none; color: #ff8a9a; font: 800 12px var(--corpo); cursor: pointer; }
.ch-msgs { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 10px 0 8px; scrollbar-width: thin; scrollbar-color: #1d3326 transparent; }
.ch-dia { display: flex; align-items: center; gap: 10px; margin: 14px 16px 6px; color: var(--texto-2); font-size: 11.5px; font-weight: 800; }
.ch-dia::before, .ch-dia::after { content: ''; flex: 1; height: 1px; background: #13241a; }
.ch-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 6px 16px 4px; scroll-margin-top: 40px; }
.ch-msg:hover { background: #0a150f; }
.ch-msg.ch-chegou { animation: ch-chega .3s ease; }
@keyframes ch-chega { from { opacity: 0; transform: translateY(6px); } }
.ch-msg:target { background: rgba(61, 220, 111, .1); }
.ch-citacao { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ch-citacao svg { width: 12px; height: 12px; transform: rotate(-90deg); }
.ch-citacao b { color: var(--verde); }
.ch-av { grid-row: span 2; align-self: start; }
.ch-av .cm-av { width: 40px; height: 40px; font-size: 16px; }
.ch-corpo { min-width: 0; }
.ch-quem { display: flex; align-items: center; gap: 7px; }
.ch-quem a { color: var(--verde); font-weight: 800; font-size: 14.5px; text-decoration: none; }
.ch-quem a:hover { text-decoration: underline; }
.ch-quem time { color: var(--texto-2); font-size: 11.5px; }
.ch-minha .ch-quem a { color: #8fe8ff; }
.ch-texto { color: #dce8e0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; white-space: normal; }
.ch-texto a { color: var(--verde); }
.ch-spoiler { background: #1a2f23; color: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; transition: color .2s, background .2s; }
.ch-spoiler.visto { background: #13241a; color: inherit; }
.ch-oculta { opacity: .5; }
/* Mensagens seguidas da mesma pessoa: sem foto e sem nome de novo */
.ch-cont { padding-top: 1px; }
.ch-cont .ch-av, .ch-cont .ch-quem { display: none; }
.ch-cont .ch-corpo { grid-column: 2; }
.ch-ops { position: absolute; right: 12px; top: -12px; display: none; gap: 2px; padding: 2px; border-radius: 9px; background: #0c1711; border: 1px solid #1d3326; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.ch-msg:hover .ch-ops, .ch-msg:focus-within .ch-ops, .ch-msg.ch-ativa .ch-ops { display: flex; }
.ch-msg:hover { background: rgba(255, 255, 255, .025); }
.ch-ops button { width: 30px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--texto-2); cursor: pointer; }
.ch-ops button:hover { background: #13241a; color: var(--texto); }
.ch-ops [data-ch-apagar]:hover { color: #ff8a9a; }
.ch-ops svg { width: 15px; height: 15px; }
.ch-inicio { display: flex; flex-direction: column; gap: 6px; margin: auto 16px 10px; padding-top: 30px; }
.ch-inicio-ic { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #13241a; color: var(--verde); font-size: 34px; font-weight: 300; }
.ch-inicio b { font: 700 24px 'Oswald', sans-serif; }
.ch-inicio span:last-child { color: var(--texto-2); }
.ch-antigas { display: flex; justify-content: center; padding: 6px; }
.ch-antigas button { padding: 6px 14px; border-radius: 99px; border: 1px solid #1d3326; background: #08110c; color: var(--texto-2); font: 700 12.5px var(--corpo); cursor: pointer; }
.ch-novas { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; border: 0; background: var(--verde); color: #04140a; font: 800 12.5px var(--corpo); cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); z-index: 2; }
.ch-novas svg { width: 12px; height: 12px; transform: rotate(90deg); }

.ch-enviar { padding: 0 14px 10px; }
.ch-respondendo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 12px 12px 0 0; background: #0c1711; border: 1px solid #1d3326; border-bottom: 0; font-size: 12.5px; color: var(--texto-2); }
.ch-respondendo b { color: var(--verde); }
.ch-respondendo button { border: 0; background: none; color: var(--texto-2); cursor: pointer; display: grid; place-items: center; }
.ch-respondendo svg { width: 13px; height: 13px; }
.ch-caixa { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #0c1711; border: 1px solid #1d3326; }
.ch-respondendo:not([hidden]) + .ch-caixa { border-radius: 0 0 14px 14px; }
.ch-caixa:focus-within { border-color: var(--verde); }
.ch-caixa textarea { flex: 1; min-height: 38px; max-height: 160px; resize: none; padding: 9px 0; border: 0; background: none; color: var(--texto); font: 500 15px/1.4 var(--corpo); outline: none; }
.ch-caixa button { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 0; background: var(--verde); color: #04140a; cursor: pointer; }
.ch-caixa button svg { width: 17px; height: 17px; }
.ch-caixa .ch-pick { background: none; color: var(--texto-2); margin-left: -8px; }
.ch-caixa .ch-pick:hover, .ch-caixa .ch-pick[aria-expanded="true"] { color: var(--verde); background: rgba(61, 220, 111, .1); }
.ch-caixa .ch-pick svg { width: 22px; height: 22px; }
/* Figurinhas e GIFs nas mensagens */
/* Tamanho padrão (como no WhatsApp): toda figurinha vira o mesmo quadrado; GIF tem altura fixa */
.ch-fig { display: block; width: 180px; height: 180px; margin-top: 4px; object-fit: cover; border-radius: 14px; }
.ch-gif { display: block; width: auto; height: 180px; max-width: min(280px, 100%); margin-top: 4px; border-radius: 10px; object-fit: cover; background: #0c1711; }
@media (max-width: 900px) { .ch-fig { width: 160px; height: 160px; } .ch-gif { height: 150px; } }
.ch-fig-sumiu { color: var(--texto-2); font-size: 13px; font-style: italic; }
/* Campo de texto com botão de emoji (respostas e novo tópico) */
.cm-resp-campo { position: relative; flex: 1; display: block; }
.cm-resp-campo textarea { width: 100%; padding-right: 44px !important; margin-top: 0 !important; }
.cm-pick { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--texto-2); cursor: pointer; }
.cm-pick:hover, .cm-pick[aria-expanded="true"] { color: var(--verde); background: rgba(61, 220, 111, .1); }
.cm-pick svg { width: 20px; height: 20px; }
.cm-campo .cm-resp-campo { margin-top: 6px; }
.ch-dica-envio { display: block; margin: 5px 4px 0; color: #4f6f5c; font-size: 11px; }
.ch-dica-envio b { color: var(--texto-2); font-weight: 700; }
.ch-aviso { display: flex; align-items: center; gap: 12px; margin: 0 14px 12px; padding: 12px 14px; border-radius: 14px; background: #0c1711; border: 1px solid #1d3326; color: var(--texto-2); font-size: 14px; }
.ch-fundo-gaveta { display: none; }

/* ================= Janela de novo tópico ================= */
.cm-dlg { width: min(600px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border-radius: 20px; border: 1px solid rgba(61, 220, 111, .35); color: var(--texto); background: #08110c; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.cm-dlg::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.cm-dlg[open] { animation: cm-abre .25s ease; }
@keyframes cm-abre { from { opacity: 0; transform: translateY(12px); } }
.cm-form { display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.cm-dlg-cab { display: flex; align-items: center; gap: 12px; }
.cm-dlg-cab .cm-av { width: 40px; height: 40px; font-size: 16px; }
.cm-dlg-cab > div { flex: 1; }
.cm-dlg-cab h2 { margin: 0; font: 700 20px 'Oswald', sans-serif; text-transform: uppercase; }
.cm-dlg-cab small { color: var(--texto-2); }
.cm-dlg-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #1d3326; background: none; color: var(--texto-2); cursor: pointer; }
.cm-dlg-x svg { width: 14px; height: 14px; }
.cm-escolha { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cm-escolha legend { margin-bottom: 6px; font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.cm-escolha label { cursor: pointer; }
.cm-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.cm-escolha span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; border: 1px solid #1d3326; font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.cm-escolha span svg { width: 13px; height: 13px; color: var(--cat); }
.cm-escolha input:checked + span { background: var(--cat); border-color: transparent; color: #04140a; }
.cm-escolha input:checked + span svg { color: #04140a; }
.cm-escolha input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }
.cm-campo { display: flex; flex-direction: column; gap: 5px; }
.cm-campo > span { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 800; color: var(--texto-2); }
.cm-campo input, .cm-campo textarea { padding: 11px 13px; border-radius: 12px; border: 1px solid #1d3326; background: #050c08; color: var(--texto); font: 600 15px/1.5 var(--corpo); }
.cm-campo textarea { resize: vertical; min-height: 120px; font-weight: 500; }
.cm-campo input:focus, .cm-campo textarea:focus { outline: none; border-color: var(--verde); }
.cm-img-campo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-img-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; border: 1px dashed #2a4a37; color: var(--texto-2); font-size: 13px; font-weight: 800; cursor: pointer; max-width: 100%; }
.cm-img-btn:hover { color: var(--verde); border-color: var(--verde); }
.cm-img-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-img-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cm-img-campo img { width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; border: 1px solid #1d3326; background: #000; }
.cm-img-tirar { border: 0; background: none; color: #ff8a9a; font-weight: 800; cursor: pointer; }
.cm-erro { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 93, 93, .1); border: 1px solid rgba(255, 93, 93, .4); color: #ffb3b3; font-weight: 700; font-size: 13.5px; }
.cm-dlg-botoes { display: flex; justify-content: flex-end; gap: 8px; }
.cm-dlg-botoes .btn-borda { background: transparent; }
.cm-regras { margin: 0; color: var(--texto-2); font-size: 11.5px; text-align: center; }

/* ================= Telas menores ================= */
@media (max-width: 1180px) {
  .ch { grid-template-columns: 230px minmax(0, 1fr); }
  .ch-membros { display: none; }
  .cm-grade { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (max-width: 900px) {
  .cm { padding: 10px 10px 20px; }
  .cm-grade { grid-template-columns: minmax(0, 1fr); }
  .cm-lado { position: static; }
  .cm-topo { border-radius: 16px; }
  .cm-topo-in { padding: 12px 14px 4px; gap: 10px; }
  .cm-marca img { width: 44px; }
  .cm-marca b { font-size: 24px; }
  .cm-numeros { margin-left: 0; width: 100%; }
  .cm-numeros span { padding: 4px 10px; font-size: 12px; }
  .cm-topo-barra { padding: 6px 14px 12px; }
  .cm-abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .cm-abas::-webkit-scrollbar { display: none; }
  .cm-abas a { flex-shrink: 0; padding: 8px 13px; font-size: 13.5px; }
  .cm-busca { margin-left: 0; flex: 1; min-width: 0; }
  .cm-publicar span { display: none; }
  .cm-publicar { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .cm-post { padding: 12px 12px 4px; }
  .cm-img { margin-inline: -12px; }
  .cm-pg-post { padding-top: 6px; }
  .cm-titulo { font-size: 18px; }
  .cm-post-cheio .cm-titulo { font-size: 22px; }
  .cm-acoes { margin-left: 0; width: 100%; justify-content: space-between; }
  .cm-grade { justify-content: stretch; }
  .cm-ultima { display: none; }
  .cm-responder .btn span { display: none; }
  .cm-descobrir { grid-template-columns: 1fr 1fr; }
  .cm-membros { grid-template-columns: 1fr 1fr; }

  /* Chat no celular: só a conversa; canais e DMs numa gaveta */
  .cm-pg-chat { height: calc(100dvh - 63px); padding: 8px 8px 8px; }
  .cm-pg-chat .cm-topo { margin-bottom: 8px; }
  .cm-pg-chat .cm-topo-in { display: none; }
  .cm-pg-chat .cm-topo-barra { padding: 8px; }
  .cm-pg-chat .cm-publicar { display: none; }
  .ch { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .ch-lado { position: absolute; inset: 0 auto 0 0; z-index: 6; width: min(290px, 84%); transform: translateX(-102%); transition: transform .25s ease; box-shadow: 10px 0 30px rgba(0, 0, 0, .5); }
  .ch.gaveta-aberta .ch-lado { transform: none; }
  .ch-fundo-gaveta { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .55); }
  .ch.gaveta-aberta .ch-fundo-gaveta { display: block; }
  .ch-menu { display: grid; }
  .ch-sala-cab { padding: 8px 10px; }
  .ch-sala-desc { display: none; }
  .ch-msg { padding: 6px 10px 4px; column-gap: 10px; grid-template-columns: 36px minmax(0, 1fr); }
  .ch-av .cm-av { width: 36px; height: 36px; font-size: 14px; }
  .ch-texto { font-size: 14.5px; }
  /* Celular: os botões só aparecem quando toca na mensagem (barrinha flutuante, como no Discord) */
  .ch-ops { top: -14px; right: 8px; padding: 3px; gap: 2px; }
  .ch-msg:hover .ch-ops, .ch-msg:focus-within .ch-ops { display: none; }
  .ch-msg.ch-ativa .ch-ops { display: flex; }
  .ch-msg.ch-ativa { background: rgba(255, 255, 255, .035); }
  .ch-ops button { width: 34px; height: 30px; }
  .ch-ops svg { width: 16px; height: 16px; }
  .ch-enviar { padding: 0 8px 8px; }
  .ch-dica-envio { display: none; }
  .ch-novas { bottom: 70px; }
  body:has(.cm-pg-chat) .fab { display: none; }
}
@media (max-width: 380px) { .cm-descobrir, .cm-membros { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cm-dlg[open], .cm-curtir[aria-pressed="true"] svg, .cm-on i, .ch-msg.ch-chegou { animation: none; } }

/* ================= Cadeado: banido da Comunidade / conversa bloqueada ================= */
.cm-trancado { max-width: 560px; margin: 30px auto; padding: 34px 24px 28px; text-align: center; border-radius: 22px;
  background: radial-gradient(circle at 50% 0, rgba(255, 93, 120, .16), transparent 60%), #08110c; border: 1px solid rgba(255, 93, 120, .35); }
.cm-cadeado { width: 96px; height: 96px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 93, 120, .12); border: 2px solid rgba(255, 93, 120, .55); color: #ff5d78; animation: cm-tranca 2.6s ease-in-out infinite; }
.cm-cadeado svg { width: 46px; height: 46px; }
@keyframes cm-tranca { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 120, .35); } 50% { box-shadow: 0 0 0 14px rgba(255, 93, 120, 0); } }
.cm-trancado h1 { margin: 0 0 6px; font: 700 26px 'Oswald', sans-serif; text-transform: uppercase; }
.cm-trancado p { margin: 8px 0; color: var(--texto-2); font-size: 14.5px; line-height: 1.55; }
.cm-trancado-ate { color: #ffb3c0 !important; font-weight: 800; }
.cm-trancado-motivo { padding: 10px 14px; border-radius: 12px; background: #050c08; border: 1px solid #1d3326; color: var(--texto) !important; overflow-wrap: anywhere; }
.cm-trancado-bts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Aviso com cadeado dentro do chat (bloqueio) */
.ch-aviso-tranca { flex-direction: column; text-align: center; gap: 8px; padding: 18px 14px; }
.ch-aviso-tranca .cm-cadeado { width: 58px; height: 58px; margin: 0; }
.ch-aviso-tranca .cm-cadeado svg { width: 28px; height: 28px; }
.ch-aviso-tranca b { color: var(--texto); font-size: 15px; }

/* Pedido de conversa */
.ch-pedido { margin: 8px 12px 12px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(61, 220, 111, .12), #08110c 60%); border: 1px solid rgba(61, 220, 111, .4); text-align: center; }
.ch-pedido p { margin: 0 0 10px; color: var(--texto-2); font-size: 14px; }
.ch-pedido p b { color: var(--texto); }
.ch-pedido-bts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ch-pedido-bts .btn { border-radius: 99px; }
.ch-espera { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ch-espera svg { width: 18px; height: 18px; color: var(--ouro); flex-shrink: 0; }
.ch-grupo-pedidos > p { color: var(--ouro) !important; }
.ch-dm-status { color: var(--ouro) !important; }

/* Moderação na página */
.ch-ops button[data-mod-usuario], .cm-resp-ops button[data-mod-usuario] { color: #ff9aac; }

/* Apagar conversa */
.ch-apagar-conv { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid #1d3326; background: none; color: var(--texto-2); font: 800 12px var(--corpo); cursor: pointer; }
.ch-apagar-conv:hover { color: #ff8a9a; border-color: rgba(255, 93, 120, .4); }
.ch-apagar-conv svg { width: 14px; height: 14px; }
.ch-apagar-conv + .ch-bloquear { margin-left: 6px; }
@media (max-width: 900px) { .ch-apagar-conv span { display: none; } .ch-apagar-conv { padding: 6px 8px; } }

/* Marcações com @ */
.ch-mencionado { background: rgba(255, 200, 61, .07); box-shadow: inset 3px 0 0 var(--ouro); }
.ch-mencionado:hover { background: rgba(255, 200, 61, .11); }
.ch-piscar { animation: ch-piscar 2.2s ease-out 1; }
@keyframes ch-piscar { 0%, 30% { background: rgba(61, 220, 111, .22); } 100% { background: transparent; } }