/* QI Roxo — cartão da questão (feed, caderno e revisão). Valores conferidos contra o protótipo (QI Roxo App.dc.html).
   O protótipo não usa reset de box-sizing: divs e spans são content-box (width/height + padding + borda somam) e só botões são
   border-box (padrão do navegador). Dentro do cartão seguimos o mesmo padrão para poder transcrever as medidas do protótipo tal e qual. */
.q, .q *, .q *::before, .q *::after { box-sizing: content-box; }
.q button, .q select, .q .q-escrever-campo input, .q .q-anel, .q .q-anel-in { box-sizing: border-box; }   /* o protótipo declara border-box nos anéis */

.q { position: relative; background: var(--papel); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--borda); box-shadow: var(--sombra-card); }

/* ------------------------------------------------------------------ cabeçalho */
.q-cab { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 10px 12px 16px; }
.q-anel { flex: none; width: 48px; height: 48px; border-radius: 50%; padding: 2.5px; background: var(--anel-historia); }
.q-anel-in { width: 100%; height: 100%; border-radius: 50%; border: 2.5px solid #fff; display: grid; place-items: center; font-weight: 800; font-size: 11px; color: #fff; background: var(--roxo); }
.q-anel-in.inedita { font-size: 15px; background: oklch(0.55 0.2 var(--matiz, 304)); }
.q-quem { flex: 1 1 120px; min-width: 0; }
.q-quem-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.q-banca { font-weight: 800; font-size: 15.5px; white-space: nowrap; }
.q-selo-inedita { padding: 2px 8px; border-radius: var(--r-pilula); background: var(--roxo); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
/* "Fonte: <banca>": a questão é da prova da própria banca (o par do selo INÉDITA). Neutro de propósito, para não competir com a banca em negrito nem com as bandeiras. */
.q-selo-fonte { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: var(--r-pilula); background: var(--lilas-chip); border: 1px solid var(--borda); color: var(--texto-suave); font-size: 11px; font-weight: 700; letter-spacing: .01em; }
/* bandeiras: vermelha = anulada, amarela = desatualizada */
.q-flags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.q-flag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--r-pilula); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.q-flag svg { flex: none; }
.q-flag.anulada { background: var(--bandeira-vermelha); color: #fff; }
.q-flag.desatualizada { background: var(--bandeira-amarela); color: var(--bandeira-amarela-texto); }
.q-trilha { font-size: 13.5px; color: var(--texto-meta); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-taxa {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--texto-suave);
  padding: 5px 10px; border-radius: var(--r-pilula); background: var(--lilas-chip); margin-left: auto;
}
.q-mais { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--texto-medio); }
.q-mais:hover { background: oklch(0.95 0.025 306); }
.q-menu-fundo { position: fixed; inset: 0; z-index: 19; }
.q-menu { position: absolute; right: 12px; top: 58px; z-index: 20; min-width: 220px; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid oklch(0.92 0.02 306); box-shadow: var(--sombra-flutuante); animation: rise .18s ease; }
.q-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 15px; text-align: left; }
.q-menu button:hover { background: var(--lilas-chip); }
.q-menu .perigo { color: var(--erro-texto); }
.q-menu .perigo:hover { background: var(--erro-fundo); }

/* ------------------------------------------------------------------ corpo (painel em gradiente) */
.q-corpo {
  position: relative; padding: 16px 16px 18px; background: linear-gradient(160deg, var(--lilas-gradiente-claro), var(--lilas-gradiente-escuro));
  border-top: 1px solid oklch(0.93 0.03 306); border-bottom: 1px solid oklch(0.93 0.03 306);
}
.q-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--texto-meta); margin: 0 0 12px; }
.q-meta span { white-space: nowrap; }
.q-meta b { font-weight: 700; color: var(--texto-forte); }

.q-avisos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.q-aviso { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--ouro-fundo); color: oklch(0.4 0.1 75); font-size: 13px; font-weight: 700; line-height: 1.4; }
.q-aviso svg { flex: none; margin-top: 1px; }

.q-apoio { margin-bottom: 12px; padding: 14px 16px 12px; border-radius: 20px; background: oklch(1 0 0 / .65); border: 1px solid oklch(0.9 0.04 306); }
.q-apoio-tipo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: var(--r-pilula); background: var(--roxo-tinta); color: var(--roxo-texto); font-weight: 800; font-size: 12px; letter-spacing: .04em; margin-bottom: 10px; }
.q-apoio-texto { font-size: 15.5px; line-height: 1.65; color: var(--texto-apoio); overflow: hidden; text-wrap: pretty; }
.q-apoio-texto.recortado { max-height: 132px; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.q-apoio-texto p, .q-enunciado p, .q-alt-texto p { margin: 0 0 .6em; }
.q-apoio-texto p:last-child, .q-enunciado p:last-child, .q-alt-texto p:last-child { margin-bottom: 0; }
.q-apoio-texto img, .q-enunciado img, .q-alt-texto img { max-width: 100%; height: auto; background: #fff; border-radius: 10px; display: block; margin: 8px 0; }
.q-apoio-alternar { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 0; color: var(--roxo); font-weight: 800; font-size: 14px; }
.q-apoio-alternar:hover { color: var(--roxo-texto); }
.q-apoio-legenda { font-size: 13px; line-height: 1.4; color: var(--texto-suave); margin: 8px 0 0; font-weight: 600; }
.q-apoio-fonte { font-size: 12.5px; color: var(--texto-3); margin-top: 8px; }

.q-enunciado { background: #fff; border-radius: 18px; padding: 16px 18px; font-weight: 600; font-size: 16.5px; box-shadow: 0 6px 16px -10px oklch(0.4 0.2 304 / .35); line-height: 1.55; margin-bottom: 14px; text-wrap: pretty; }

/* ------------------------------------------------------------------ alternativas */
.q-alts { display: flex; flex-direction: column; gap: 8px; }
.q-alt-linha { display: flex; align-items: stretch; gap: 6px; }
.q-riscar { flex: none; width: 30px; border-radius: 12px; color: oklch(0.62 0.03 300); display: grid; place-items: center; transition: all var(--anim-rapida); }
.q-riscar:hover { color: oklch(0.55 0.21 18); background: var(--erro-fundo); }
.q-riscar.ligado { color: var(--erro); }
.q-alt-linha.respondida .q-riscar { opacity: 0; pointer-events: none; }
.q-alt {
  position: relative; overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: var(--r-item);
  border: 2px solid var(--lilas-borda-cartao); background: #fff; cursor: pointer; transition: all .16s; font-size: 15px; line-height: 1.5; text-align: left; font-weight: 500; color: var(--texto);
}
.q-alt:hover { border-color: var(--lilas-claro); background: oklch(0.985 0.01 306); }
.q-alt-barra { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: transparent; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.q-alt-letra { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13.5px; border: 2px solid var(--roxo); color: var(--roxo); background: #fff; transition: all .16s; }
.q-alt-texto { position: relative; flex: 1; min-width: 0; }
.q-alt-pct { position: relative; font-weight: 800; font-size: 13.5px; color: var(--texto-abas); }
.q-alt.marcada { border-color: var(--roxo); background: var(--lilas-selecionado); box-shadow: 0 0 0 4px oklch(0.57 0.25 305 / .14); }
.q-alt.marcada .q-alt-letra { background: var(--roxo); color: #fff; }
.q-alt.riscada { text-decoration: line-through; opacity: .45; pointer-events: none; }
.q-alt.fechada { pointer-events: none; cursor: default; }
.q-alt.certa { border-color: var(--acerto); background: var(--acerto-linha); opacity: 1; }
.q-alt.certa .q-alt-letra { background: var(--acerto); border-color: var(--acerto); color: #fff; }
.q-alt.certa .q-alt-barra { background: var(--acerto-barra); }
.q-alt.errada { border-color: var(--erro); background: var(--erro-linha); opacity: 1; }
.q-alt.errada .q-alt-letra { background: var(--erro); border-color: var(--erro); color: #fff; }
.q-alt.errada .q-alt-barra { background: var(--erro-barra); }
.q-alt.fechada:not(.certa):not(.errada) { opacity: .7; }
.q-alt.fechada:not(.certa):not(.errada) .q-alt-letra { border-color: oklch(0.85 0.03 306); color: oklch(0.55 0.03 300); }
.q-alt.fechada:not(.certa):not(.errada) .q-alt-barra { background: var(--neutro-barra); }

.q-responder { display: flex; justify-content: flex-end; margin-top: 14px; animation: rise .2s ease; }
.q-btn-responder { --btn-py: 13px; --btn-px: 26px; --btn-fs: 16px; box-shadow: var(--sombra-botao); }

/* ------------------------------------------------------------------ resultado e gabarito comentado */
.q-resultado { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 18px; animation: rise .3s ease both; }
.q-resultado.acerto { background: var(--acerto-fundo); color: var(--acerto-resultado-texto); }
.q-resultado.erro { background: var(--erro-fundo); color: var(--erro-resultado-texto); }
.q-resultado.neutro { background: var(--lilas-chip); color: var(--texto-forte); }
.q-resultado-icone { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--acerto); color: #fff; }
.q-resultado.erro .q-resultado-icone { background: var(--erro); }
.q-resultado.neutro .q-resultado-icone { background: var(--texto-3); }
.q-resultado-titulo { font-weight: 800; font-size: 16px; }
.q-resultado-msg { font-size: 14.5px; line-height: 1.5; margin-top: 2px; }

.q-gc { margin-top: 12px; }
.q-gc-botao { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: var(--r-pilula); border: 1.5px solid var(--lilas-borda-forte); background: #fff; color: var(--roxo); font-weight: 800; font-size: 14.5px; }
.q-gc-botao:hover { background: oklch(0.97 0.025 306); }
.q-gc-painel { margin-top: 12px; padding: 16px; border-radius: 20px; background: #fff; border: 1px solid oklch(0.9 0.04 306); animation: rise .3s ease; }
.q-gc-base { display: inline-block; padding: 4px 11px; border-radius: var(--r-pilula); background: var(--roxo-tinta); color: var(--roxo-texto); font-weight: 800; font-size: 12.5px; }
.q-gc-exp { font-size: 15px; line-height: 1.55; margin: 10px 0 14px; text-wrap: pretty; }
.q-gc-itens { display: flex; flex-direction: column; gap: 8px; }
.q-gc-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.q-gc-letra { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: oklch(0.7 0.05 300); }
.q-gc-item.certa .q-gc-letra { background: var(--acerto); }
.q-gc-item b { color: var(--erro-texto); }
.q-gc-item.certa b { color: var(--acerto-texto); }
.q-gc-vazio { font-size: 14.5px; color: var(--texto-suave); line-height: 1.5; }

.q-coracao-pop { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 9; }
.q-coracao-pop svg { filter: drop-shadow(0 8px 24px oklch(0.4 0.2 304 / .6)); animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; color: #fff; }
.q-confete { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.q-confete > span { position: absolute; left: 50%; top: 42%; }
.q-xp { position: absolute; right: 22px; top: 64px; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pilula); background: var(--ouro); color: var(--ouro-texto); font-weight: 800; font-size: 16px; box-shadow: 0 12px 24px -8px oklch(0.3 0.1 300 / .5); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }

/* ------------------------------------------------------------------ ações e legenda */
.q-acoes { display: flex; align-items: center; gap: 2px; padding: 8px 10px 0 10px; }
.q-acao { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; min-height: 44px; min-width: 44px; border-radius: var(--r-pilula); color: var(--texto-abas); font-weight: 700; font-size: 14px; transition: background var(--anim-rapida), color var(--anim-rapida); }
.q-acao:hover { background: oklch(0.95 0.025 306); color: var(--roxo); }
.q-acao.curtiu { color: var(--erro); }
.q-acao.curtiu:hover { background: var(--erro-fundo); color: var(--erro); }
.q-acao.curtiu svg { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.q-acao.ligada { color: var(--roxo); }
.q-acao.ligada.com-fundo { background: var(--roxo-tinta); }
.q-cintia { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: var(--r-pilula); background: var(--roxo-tinta); color: var(--roxo-texto); font-weight: 800; font-size: 14.5px; transition: all var(--anim-rapida); }
.q-cintia:hover { background: var(--roxo-tinta-forte); }
.q-cintia[aria-expanded="true"] { background: var(--roxo); color: #fff; box-shadow: 0 3px 0 var(--roxo-sombra-botao); }
.q-espaco { flex: 1; }
.q-legenda { padding: 4px 16px 0; }
.q-curtidas { font-weight: 800; font-size: 15px; }
.q-descricao { font-size: 14.5px; line-height: 1.45; margin-top: 3px; color: var(--texto-apoio); }
.q-descricao b { font-weight: 800; }
.q-ver-comentarios { display: block; padding: 6px 0 0; font-size: 14.5px; color: var(--texto-3); }
.q-ver-comentarios:hover { color: var(--roxo); }
.q-ver-comentarios:last-child { padding-bottom: 14px; }   /* sem a linha de tempo (só as inéditas têm), o respiro vem daqui */
.q-tempo { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--texto-mudo); margin: 6px 0 10px; text-transform: uppercase; }

/* ------------------------------------------------------------------ estatísticas da questão */
.q-stats { margin: 4px 16px 14px; padding: 16px; border-radius: 22px; background: var(--lilas-100); border: 1px solid var(--borda); animation: rise .3s ease; }
.q-stats-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.q-stats-titulo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15.5px; color: var(--texto-forte); }
.q-stats-fechar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: oklch(0.94 0.02 306); color: inherit; }
.q-stats-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-stats-bloco { padding: 14px; border-radius: 18px; background: #fff; }
.q-stats-global { display: flex; gap: 14px; align-items: center; }
.q-stats-anel { position: relative; width: 78px; height: 78px; flex: none; }
.q-stats-anel b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; }
.q-stats-rotulo { font-size: 12px; font-weight: 800; letter-spacing: .05em; color: oklch(0.5 0.1 306); }
.q-stats-forte { font-weight: 800; font-size: 15px; margin-top: 3px; }
.q-stats-sub { font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.q-stats-travado { font-size: 14px; line-height: 1.45; color: var(--texto-suave); margin-top: 6px; }
.q-stats-voce { margin-top: 6px; }
.q-stats-voce-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-stats-resultado { padding: 4px 12px; border-radius: var(--r-pilula); font-weight: 800; font-size: 13px; background: oklch(0.95 0.06 158); color: var(--acerto-texto); }
.q-stats-resultado.erro { background: var(--erro-fundo); color: var(--erro-texto); }
.q-stats-tempo { font-size: 13.5px; color: var(--texto-suave); }
.q-stats-disc { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--texto-medio); }
.q-stats-trilho { position: relative; height: 10px; border-radius: 99px; background: oklch(0.94 0.02 306); margin: 8px 0 6px; }
.q-stats-trilho > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--roxo); transition: width .6s; }
.q-stats-trilho > u { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: oklch(0.3 0.05 300); }
.q-stats-comparacao { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--texto-suave); }
.q-stats-comparacao b { font-weight: 800; color: var(--roxo-texto); }
.q-stats-dist { margin-top: 12px; padding: 14px; border-radius: 18px; background: #fff; }
.q-stats-dist .q-stats-rotulo { margin-bottom: 10px; }
.q-dist-linhas { display: flex; flex-direction: column; gap: 8px; }
.q-dist-linha { display: flex; align-items: center; gap: 10px; }
.q-dist-letra { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; background: var(--roxo-tinta); color: var(--roxo); }
.q-dist-trilho { flex: 1; height: 12px; border-radius: 99px; background: oklch(0.95 0.015 306); overflow: hidden; }
.q-dist-trilho > i { display: block; height: 100%; border-radius: 99px; background: oklch(0.78 0.12 306); transition: width .6s; }
.q-dist-pct { width: 44px; text-align: right; font-weight: 800; font-size: 13.5px; }
.q-dist-tag { width: 74px; font-size: 12px; font-weight: 700; }
.q-dist-linha.certa .q-dist-letra { background: var(--acerto); color: #fff; }
.q-dist-linha.certa .q-dist-trilho > i { background: var(--acerto); }
.q-dist-linha.certa .q-dist-tag { color: var(--acerto-texto); }
.q-dist-linha.minha .q-dist-letra { background: var(--erro); color: #fff; }
.q-dist-linha.minha .q-dist-trilho > i { background: var(--erro); }
.q-dist-linha.minha .q-dist-tag { color: var(--erro-texto); }
.q-stats-nota { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--roxo-tinta); font-size: 13.5px; font-weight: 600; color: oklch(0.35 0.1 304); }
.q-stats-nota svg { flex: none; }
@media (max-width: 559px) { .q-stats-grade { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ CintIA */
.q-ia { margin: 12px 16px 14px; padding: 16px; border-radius: 22px; background: var(--lilas-cintia); border: 1.5px solid var(--lilas-borda-ia); animation: rise .3s ease; }
.q-ia-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.q-ia-bola { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--roxo); color: #fff; display: grid; place-items: center; }
.q-ia-titulo { font-weight: 800; font-size: 15.5px; }
.q-ia-sub { font-size: 13px; color: oklch(0.45 0.05 300); }
.q-ia-fechar { width: 34px; height: 34px; border-radius: 50%; color: oklch(0.45 0.05 300); display: grid; place-items: center; }
.q-ia-fechar:hover { background: oklch(0.9 0.05 306); }
.q-ia-lendo { display: flex; flex-direction: column; gap: 10px; }
.q-ia-lendo-texto { font-size: 13.5px; color: var(--roxo-texto); font-weight: 700; }
.q-ia-lendo .esqueleto { height: 46px; border-radius: 14px; }
.q-ia-itens { display: flex; flex-direction: column; gap: 8px; }
.q-ia-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-item); background: #fff; border: 1px solid oklch(0.92 0.03 306); font-size: 14.5px; line-height: 1.5; animation: rise .35s ease both; }
.q-ia-letra { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid oklch(0.78 0.12 306); color: var(--roxo); display: grid; place-items: center; font-weight: 800; font-size: 12px; }
.q-ia-nota { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: oklch(0.45 0.05 300); line-height: 1.4; }
.q-ia-nota svg { flex: none; }
.q-ia-erro { font-size: 14.5px; line-height: 1.5; color: var(--erro-texto); font-weight: 600; }
.q-ia-erro button { margin-top: 10px; }

/* ------------------------------------------------------------------ comentários */
.q-coments { padding: 14px 16px 16px; border-top: 1px solid oklch(0.94 0.015 306); animation: rise .25s ease; }
.q-coments-lista { display: flex; flex-direction: column; gap: 16px; }
.q-coment { display: flex; gap: 10px; align-items: flex-start; }
.q-coment-corpo { flex: 1; min-width: 0; }
.q-coment-texto { font-size: 14.5px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.q-coment-texto b { font-weight: 800; }
.q-coment-meta { display: flex; gap: 14px; align-items: center; margin-top: 4px; font-size: 12.5px; color: var(--texto-3); flex-wrap: wrap; }
.q-coment-meta .tempo { font-weight: 600; }
.q-coment-meta .curtidas { font-weight: 700; }
.q-coment-meta button { padding: 4px 0; font-weight: 700; font-size: 12.5px; color: var(--texto-3); }
.q-coment-meta button:hover { color: var(--roxo); }
.q-coment-curtir { flex: none; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; color: oklch(0.55 0.03 300); transition: color var(--anim-rapida); }
.q-coment-curtir.curtiu { color: var(--erro); }
.q-coment-curtir.curtiu svg { animation: pop .4s cubic-bezier(.2, 1.4, .4, 1); }
.q-respostas { margin: 8px 0 0 46px; }
.q-respostas-alternar { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-weight: 700; font-size: 12.5px; color: var(--texto-3); }
.q-respostas-alternar:hover { color: var(--roxo); }
.q-respostas-alternar::before { content: ''; width: 24px; height: 1px; background: oklch(0.8 0.03 300); }
.q-respostas-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.q-respondendo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 8px 12px 8px 14px; border-radius: 14px; background: oklch(0.955 0.025 306); font-size: 13.5px; color: oklch(0.35 0.1 304); }
.q-respondendo button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: inherit; }
.q-respondendo button:hover { background: oklch(0.9 0.05 306); }
.q-escrever { position: relative; display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.q-escrever.respondendo { margin-top: 10px; }
.q-escrever-campo { flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 16px; height: 44px; border-radius: var(--r-pilula); background: var(--canvas); border: 1.5px solid var(--lilas-borda-cartao); transition: border-color var(--anim-rapida), box-shadow var(--anim-rapida); }
.q-escrever-campo:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-foco); }
.q-escrever-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 15px; color: inherit; }
.q-emoji-botao { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: oklch(0.5 0.04 300); }
.q-emoji-botao:hover { color: var(--roxo); }
.q-enviar { width: 34px; height: 34px; border-radius: 50%; background: var(--roxo); color: #fff; display: grid; place-items: center; flex: none; }
.q-enviar:disabled { opacity: .5; }
.q-emojis { position: absolute; left: 44px; bottom: 54px; z-index: 20; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; border-radius: 18px; background: #fff; border: 1px solid oklch(0.92 0.02 306); box-shadow: var(--sombra-flutuante); animation: rise .18s ease; }
.q-emojis button { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; line-height: 1; }
.q-emojis button:hover { background: oklch(0.95 0.025 306); }
.q-adicionar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border-top: 1px solid oklch(0.94 0.015 306); text-align: left; color: var(--texto-3); font-size: 14.5px; }
.q-adicionar:hover { background: var(--lilas-50); }
.q-coments-vazio { font-size: 14px; color: var(--texto-3); }
.q-coments-erro { font-size: 14px; color: var(--erro-texto); font-weight: 600; }

/* ------------------------------------------------------------------ esqueleto do cartão */
.q-esq { border-radius: var(--r-card); background: #fff; border: 1px solid var(--borda); overflow: hidden; }
.q-esq-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.q-esq-corpo { padding: 16px; background: oklch(0.97 0.02 306); display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------------ denúncia */
.denuncia-motivos { display: flex; flex-direction: column; gap: 8px; }
.denuncia-motivo { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r-item); font-weight: 600; font-size: 15.5px; border: 1.5px solid var(--lilas-borda-cartao); background: #fff; color: inherit; text-align: left; transition: all var(--anim-rapida); }
.denuncia-motivo.ligado { border-color: var(--roxo); background: var(--lilas-selecionado); }
.denuncia-motivo span:last-child { flex: 1; }

@media (max-width: 1023px) { .q-riscar { width: 26px; } }
@media (max-width: 519px) { .q-taxa { display: none; } }

/* ------------------------------------------------------------------ compartilhar (folha do avião de papel no cartão da questão) */
.cp-folha { width: 500px; }
.cp-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cp-titulo { flex: 1; font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; }
.cp-previa { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-item); background: var(--roxo-tinta); }
.cp-previa-anel { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--roxo); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
.cp-previa-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cp-previa-txt b { font-weight: 800; font-size: 15px; color: var(--texto-forte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-previa-txt span { font-size: 13.5px; line-height: 1.35; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-ia { margin-top: 16px; }
.cp-ia-titulo { font-weight: 800; font-size: 13px; letter-spacing: .01em; color: var(--texto-2); margin-bottom: 8px; }
.cp-ia-botoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cp-ia-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 10px; border: 2px solid var(--borda-input); border-radius: 16px; background: #fff; cursor: pointer; font: inherit; font-weight: 800; font-size: 15px; color: var(--texto-forte); text-decoration: none; transition: border-color var(--anim-rapida), transform var(--anim-rapida); }
.cp-ia-btn:hover { border-color: var(--roxo); transform: translateY(-1px); }
.cp-ia-btn:focus-visible { outline: 3px solid var(--roxo); outline-offset: 2px; }
.cp-ia-icone { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.cp-ia-btn.chatgpt .cp-ia-icone { background: #10a37f; }
.cp-ia-btn.claude .cp-ia-icone { background: #d97757; }
.cp-ia-nota { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.35; color: var(--texto-meta); }
.cp-redes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 6px; margin: 22px 0 20px; }
.cp-rede { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 2px 0 4px; border: 0; border-radius: 16px; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: var(--texto-forte); text-decoration: none; }
.cp-rede-icone { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 16px -10px oklch(0.2 0.1 300 / .55); transition: transform var(--anim-rapida), box-shadow var(--anim-rapida); }
.cp-rede:hover .cp-rede-icone { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 20px -10px oklch(0.2 0.1 300 / .6); }
.cp-rede:active .cp-rede-icone { transform: scale(.96); }
.cp-rede:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; }
.cp-rede.whatsapp .cp-rede-icone { background: #25d366; }
.cp-rede.instagram .cp-rede-icone { background: radial-gradient(circle at 30% 107%, #fdf497 0, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.cp-rede.telegram .cp-rede-icone { background: #229ed9; }
.cp-rede.facebook .cp-rede-icone { background: #1877f2; }
.cp-rede.x .cp-rede-icone { background: #000; }
.cp-rede.linkedin .cp-rede-icone { background: #0a66c2; }
.cp-rede.email .cp-rede-icone { background: var(--roxo); }
.cp-rede.mais .cp-rede-icone { background: var(--roxo-profundo); }
.cp-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border: 2px solid var(--borda-input); border-radius: var(--r-pilula); background: #fff; }
.cp-link:focus-within { border-color: var(--roxo); box-shadow: 0 0 0 4px var(--roxo-foco); }
.cp-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--texto-2); text-overflow: ellipsis; }
.cp-copiar { --btn-py: 10px; --btn-px: 18px; --btn-fs: 14.5px; flex: none; gap: 7px; border-radius: var(--r-pilula); }
.cp-copiar.copiado, .cp-copiar.copiado:hover:not(:disabled) { background: oklch(0.6 0.17 150); box-shadow: 0 3px 0 oklch(0.42 0.13 150); }

@media (max-width: 1023px) { .cp-folha { width: 100%; } }
@media (max-width: 359px) { .cp-redes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cp-rede-icone { transition: none; } }