/* The bell of the Community in the top bar and its central (community-notifications.js; docs/COMMUNITY-NOTIFICATIONS.md).
   The CentralNotificacoes keeps its material and motion from ds/bundle.css. The Sino below is the Design System's component
   (Sino.css of the DS book: tecla redonda de 34 px, pílula clara, balanço pendurado no alto), which the bundle of the studio does
   not carry yet; when it does, this block goes away and only the placement stays. */

/* ── Sino (DS) ────────────────────────────────────────────────────────────────────────────────────────────────────── */
.fk-tecla.fk-sino {
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--tamanho-saldo);
  height: var(--tamanho-saldo);
  padding: 0;
  border-radius: var(--radius-circulo);
  transition: background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida), z-index 0s var(--curva-linear) var(--duracao-media);
}
.fk-tecla.fk-sino[hidden] { display: none; }
.fk-sino > svg { flex: none; transform-origin: 50% 3px; }
.fk-tecla.fk-sino[aria-expanded="true"],
.fk-tecla.fk-sino--aberto {
  z-index: var(--camada-sino-aberto);
  color: var(--branco);
  background: linear-gradient(180deg, var(--tecla-acesa-topo), var(--tecla-acesa-base));
  box-shadow: var(--shadow-tecla-acesa);
  transition: background var(--duracao-hover), color var(--duracao-hover), transform var(--duracao-pressao), box-shadow var(--duracao-rapida), z-index 0s;
}
.fk-tecla.fk-sino[aria-expanded="true"]:hover,
.fk-tecla.fk-sino--aberto:hover { background: linear-gradient(180deg, var(--tecla-acesa-hover-topo), var(--tecla-acesa-hover-base)); }
.fk-tecla.fk-sino:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
/* Chegou algo novo: balança pendurado no alto (17°, -14°, 9°, -5°, 2°). Alterne as duas classes a cada chegada. */
.fk-sino--toca > svg { animation: fk-sino-toca var(--duracao-entrada) ease-in-out; }
.fk-sino--toca-b > svg { animation: fk-sino-toca-b var(--duracao-entrada) ease-in-out; }
@keyframes fk-sino-toca {
  0%, 100% { transform: none; }
  12% { transform: rotate(17deg); }
  27% { transform: rotate(-14deg); }
  42% { transform: rotate(9deg); }
  57% { transform: rotate(-5deg); }
  72% { transform: rotate(2deg); }
}
@keyframes fk-sino-toca-b {
  0%, 100% { transform: none; }
  12% { transform: rotate(17deg); }
  27% { transform: rotate(-14deg); }
  42% { transform: rotate(9deg); }
  57% { transform: rotate(-5deg); }
  72% { transform: rotate(2deg); }
}
/* Contador: pílula clara presa ao canto de cima à direita, com um anel da cor da página; acima de 99, "99+". */
.fk-sino__contador {
  position: absolute;
  top: calc(var(--space-5) * -1);
  right: calc(var(--space-7) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pilula);
  background: var(--pilula);
  color: var(--tinta-pilula);
  font: 600 10.5px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--bg), 0 3px 8px var(--sulco-sombra);
  pointer-events: none;
  transition: transform var(--duracao-media) var(--curva-casa), opacity var(--duracao-curta) var(--curva-opacidade);
}
.fk-sino__contador--vazio { opacity: 0; transform: scale(.3); }
.fk-sino__contador--pula { animation: fk-sino-pula calc(var(--duracao-contador) * 2) var(--curva-casa); }
.fk-sino__contador--pula-b { animation: fk-sino-pula-b calc(var(--duracao-contador) * 2) var(--curva-casa); }
@keyframes fk-sino-pula {
  0% { transform: scale(.5); }
  35% { transform: scale(1.38) translateY(-1px); }
  65% { transform: scale(.9); }
  100% { transform: none; }
}
@keyframes fk-sino-pula-b {
  0% { transform: scale(.5); }
  35% { transform: scale(1.38) translateY(-1px); }
  65% { transform: scale(.9); }
  100% { transform: none; }
}
/* Celular: 32 px; a central vira folha com véu, então o sino não acende nem sobe. */
.fk-tecla.fk-sino--celular { width: var(--tamanho-alvo); height: var(--tamanho-alvo); }
.fk-sino--celular > svg { transform-origin: 50% 2px; }
.fk-tecla.fk-sino--celular[aria-expanded="true"],
.fk-tecla.fk-sino--celular.fk-sino--aberto {
  z-index: 1;
  color: var(--texto-tecla);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.fk-sino--celular .fk-sino__contador {
  right: calc(var(--space-6) * -1);
  min-width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--bg), 0 3px 8px color-mix(in srgb, var(--sulco-sombra) 92%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .fk-tecla.fk-sino { transition: z-index 0s var(--curva-linear) var(--duracao-media); }
  .fk-tecla.fk-sino[aria-expanded="true"],
  .fk-tecla.fk-sino--aberto,
  .fk-sino__contador { transition: none; }
  .fk-sino--toca > svg,
  .fk-sino--toca-b > svg,
  .fk-sino__contador--pula,
  .fk-sino__contador--pula-b { animation: none; }
}

/* ── No topo: à direita de Academy, Community e MCP, antes do Preço ───────────────────────────────────────────────── */
.workspace-account-controls > .fk-sino { flex: none; }
@media (max-width: 380px) {
  .workspace-account-controls:has(> .fk-sino:not([hidden])) { gap: var(--space-6); }
}

/* ── Central: fixa sob o topo (e sob a faixa de aviso do site, quando aparece) ────────────────────────────────────── */
.cn-central .fk-centralnotificacoes--ancorada { top: calc(var(--tamanho-topo) + var(--space-8) + var(--site-notice-height, 0px)); max-height: none; }
.cn-central .fk-centralnotificacoes--folha { top: calc(var(--tamanho-topo-celular) + var(--space-30) + var(--site-notice-height, 0px)); }
@media (max-width: 380px) {
  .cn-central .fk-centralnotificacoes--folha .fk-centralnotificacoes__titulos { flex-wrap: wrap; row-gap: var(--space-10); }
}
/* A tecla do suporte fica sob o véu enquanto a central está aberta, como o resto da página. */
body:has(> .cn-central:not([inert])) .support-launcher { z-index: calc(var(--camada-central-veu) - 1); }
/* O vazio mostra o link "Abrir a Community" como tecla, igual ao botão. */
a.fk-tecla.fk-centralnotificacoes__vazio-acao { display: inline-flex; align-items: center; text-decoration: none; }

/* Quem publicou: o rosto redondo no lugar da miniatura, com o selo do tipo (post, comentário, resposta) no canto. */
.fk-centralnotificacoes__guia .cn-rosto { width: var(--fk-centralnotificacoes-guia); height: var(--fk-centralnotificacoes-guia); border-radius: var(--radius-circulo); }
.fk-centralnotificacoes__guia .cn-rosto--iniciais { color: var(--texto-icone); font: 600 12px/1 var(--font-display); letter-spacing: .02em; }

/* ── Caixa de entrada (inbox-view.js): o bloco no alto da central, a caixa inteira e a leitura de uma mensagem ──────────────── */
/* O vazio da lista entra no fluxo, abaixo do bloco: escondido ele não ocupa lugar. */
.cn-central .fk-centralnotificacoes__lista .fk-centralnotificacoes__vazio { position: relative; top: auto; left: auto; right: auto; margin-top: var(--space-12); }
.cn-central .fk-centralnotificacoes__lista .fk-centralnotificacoes__vazio:not(.fk-centralnotificacoes__vazio--visivel) { display: none; }
.cn-caixa {
  margin: var(--space-4) 0 var(--space-10);
  padding: var(--space-12);
  border-radius: var(--radius-16);
  background: linear-gradient(180deg, var(--modulo-topo), var(--modulo-base));
  box-shadow: var(--shadow-modulo);
}
.cn-caixa__topo { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-8); }
.cn-caixa__marca { display: grid; place-items: center; color: var(--lima); }
.cn-caixa__titulo { margin: 0; color: var(--texto-titulo); font: 600 13.5px/1.2 var(--font-display); letter-spacing: -.01em; }
.cn-caixa__novas {
  padding: 2px var(--space-6);
  border-radius: var(--radius-pilula);
  color: var(--tinta-pilula);
  background: var(--pilula);
  font: 600 10.5px/1.4 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.cn-caixa__todas {
  margin-left: auto;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-radius: var(--radius-8);
  background: transparent;
  color: var(--texto-controle);
  font: 600 11.5px/1 var(--font-texto);
  cursor: pointer;
  transition: color var(--duracao-hover), background var(--duracao-hover);
}
.cn-caixa__todas:hover { color: var(--branco); background: color-mix(in srgb, var(--branco) 5%, transparent); }
.cn-caixa__lista { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.cn-caixa__vazia { margin: 0; color: var(--texto-controle); font: 500 12px/1.45 var(--font-texto); }
/* Uma mensagem: ícone, título e trecho, a hora e o ponto de não lida. O card inteiro é o botão. */
.cn-msg {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-8) var(--space-14) var(--space-8) var(--space-8);
  border: 0;
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--branco) 2%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duracao-hover);
}
.cn-msg:hover { background: color-mix(in srgb, var(--branco) 6%, transparent); }
.cn-msg:focus-visible { outline: var(--tamanho-foco) solid var(--anel-foco); outline-offset: var(--tamanho-foco-afastamento); }
.cn-msg__icone {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-9);
  color: var(--texto-icone);
  background: linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  box-shadow: var(--shadow-tecla);
}
.cn-msg--nao-lida .cn-msg__icone { color: var(--lima); }
.cn-msg__icone--sistema { color: var(--texto-icone); }
.cn-msg__textos { display: grid; gap: 2px; min-width: 0; }
.cn-msg__titulo { overflow: hidden; color: var(--texto-icone); font: 600 12.5px/1.3 var(--font-texto); white-space: nowrap; text-overflow: ellipsis; }
.cn-msg--nao-lida .cn-msg__titulo { color: var(--texto-aceso); }
.cn-msg__trecho { overflow: hidden; color: var(--texto-controle); font: 500 11.5px/1.35 var(--font-texto); white-space: nowrap; text-overflow: ellipsis; }
.cn-msg__hora { align-self: start; padding-top: 2px; color: var(--texto-controle); font: 500 10.5px/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-msg__ponto {
  position: absolute;
  top: 50%;
  right: var(--space-6);
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: var(--radius-circulo);
  background: var(--pilula);
  box-shadow: 0 0 var(--space-8) color-mix(in srgb, var(--branco) 55%, transparent);
  opacity: 0;
}
.cn-msg--nao-lida .cn-msg__ponto { opacity: 1; }
.cn-caixa__lista--toda .cn-msg { padding-block: var(--space-10); }

/* A caixa inteira e a leitura ocupam o corpo da central, com "Voltar" no alto. */
.cn-vista-lista { padding-top: var(--space-8); }
.cn-vista__topo { display: flex; align-items: center; gap: var(--space-10); margin-bottom: var(--space-12); }
.fk-tecla.cn-vista__voltar { display: inline-flex; align-items: center; gap: var(--space-6); height: var(--tamanho-tecla); padding: 0 var(--space-10) 0 var(--space-8); font: 600 11.5px/1 var(--font-texto); }
.cn-vista__titulo { margin: 0; color: var(--texto-titulo); font: 600 15px/1.2 var(--font-display); letter-spacing: -.01em; }
.cn-leitura { padding: 0 var(--space-4) var(--space-20); }
.cn-leitura__de { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-10); color: var(--texto-controle); font: 600 11.5px/1 var(--font-texto); }
.cn-leitura__titulo { margin: 0 0 var(--space-12); color: var(--texto-titulo); font: 600 19px/1.25 var(--font-display); letter-spacing: -.015em; outline: 0; }
.cn-leitura__corpo { color: var(--texto-leitura); font: 500 13.5px/1.6 var(--font-texto); overflow-wrap: anywhere; }
.cn-leitura__corpo p { margin: 0 0 var(--space-10); }
.cn-leitura__corpo strong { color: var(--texto-titulo); font-weight: 650; }
.fk-cta.cn-leitura__acao { display: inline-flex; gap: var(--space-8); width: auto; margin-top: var(--space-8); padding: 0 var(--space-16); text-decoration: none; }

/* O aviso da equipe na Community: o selo de megafone em lima, para não se perder entre os posts. */
.fk-centralnotificacoes__selo.cn-selo--aviso { color: var(--lima); }
.cn-item--aviso .fk-centralnotificacoes__item-titulo { color: var(--texto-aceso); }