/* ═══ COMUNICADOS — a cápsula de quem recebe (19/10/2026) ═══════════════════════════════
   Montada por src/shared/comunicados.js. Mesmo desenho da ilha de alertas (.rel-ilha em
   src/styles/features/_notifications.css): cápsula escura nos dois temas, ponto azul que
   pulsa, sino azul. Diferenças de propósito: sem barra de tempo (não some sozinha) e abre
   num cartão com a mensagem inteira e o botão Ciente.

   Fica ABAIXO da barra do topo (top: 96px): a ilha de alertas do Relacionamento e a da
   Abertura moram no topo, e as duas continuam funcionando igual — sem disputa de lugar.
   z-index da ilha de alertas (100001): o conteúdo da página usa 200 (topo do Feed) e taparia
   a cápsula. Ligação em andamento, tabulação e o painel de envio não são tapados: nesses
   casos o JS põe `mb-com--oculta` e a cápsula volta sozinha quando fecham.
   Só classes próprias (mb-com-*): nada aqui toca .rel-ilha, .ab-av-*, botões ou modais. */
.mb-com-ilha {
  position: fixed; top: 96px; left: 50%; z-index: 100001;
  width: 120px; height: 36px; border-radius: 18px; overflow: hidden;
  background: #0f172a; color: #fff; font-family: inherit;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .35);
  opacity: 0; transform: translateX(-50%) scale(.6);
  transition: width .45s cubic-bezier(.2, .9, .25, 1.1), height .45s cubic-bezier(.2, .9, .25, 1.1),
    border-radius .45s, transform .3s cubic-bezier(.2, .9, .25, 1.2), opacity .2s;
}
.mb-com--on { opacity: 1; transform: translateX(-50%) scale(1); }
.mb-com--oculta { visibility: hidden; }
.mb-com--aberta { width: min(480px, calc(100vw - 32px)); height: 64px; border-radius: 22px; }
.mb-com--aberta.mb-com--expandida { width: min(520px, calc(100vw - 32px)); height: auto; border-radius: 18px; }

.mb-com-ponto {
  position: absolute; left: 50%; top: 18px; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #2563eb; animation: mbComPulso 1.2s infinite;
}
.mb-com--aberta .mb-com-ponto { opacity: 0; animation: none; }
@keyframes mbComPulso {
  0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, .7); }
  100% { box-shadow: 0 0 0 12px rgba(96, 165, 250, 0); }
}

.mb-com-in {
  position: absolute; inset: 0; padding: 12px 12px 12px 14px;
  display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity .2s;
}
.mb-com--aberta .mb-com-in { opacity: 1; transition-delay: .2s; }
/* Aberto em cartão, o topo deixa de ser sobreposto e o cartão cresce com o texto. */
.mb-com--expandida .mb-com-in { position: static; transition-delay: 0s; }

.mb-com-ico {
  width: 36px; height: 36px; border-radius: 10px; background: #2563eb;
  display: grid; place-items: center; flex-shrink: 0;
}
.mb-com-ico svg { width: 20px; height: 20px; transform-origin: 50% 10%; }
.mb-com--aberta .mb-com-ico svg { animation: mbComSino .5s ease .25s; }
@keyframes mbComSino {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg); }
  40% { transform: rotate(14deg); }
  60% { transform: rotate(-9deg); }
  80% { transform: rotate(5deg); }
}

.mb-com-corpo { min-width: 0; flex: 1; cursor: pointer; line-height: 1.35; }
.mb-com-titulo { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-com-linha { font-size: 12.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-com--expandida .mb-com-titulo, .mb-com--expandida .mb-com-linha { white-space: normal; overflow-wrap: anywhere; }
.mb-com-mais {
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 2px 7px;
}
.mb-com-mais:empty { display: none; }
.mb-com-ver {
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
  background: #fff; color: #0f172a; border: 0; border-radius: 8px; padding: 6px 11px; cursor: pointer;
}
.mb-com--expandida .mb-com-ver { display: none; }

.mb-com-msg, .mb-com-rodape { display: none; }
.mb-com--expandida .mb-com-msg {
  display: block; padding: 0 18px 4px 62px; font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: min(50vh, 360px); overflow-y: auto;
}
.mb-com--expandida .mb-com-rodape {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 14px 14px;
}
.mb-com-erro { font-size: 12px; color: #fca5a5; }
.mb-com-ciente {
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: #2563eb; color: #fff; border: 0; border-radius: 8px; padding: 8px 20px; cursor: pointer;
}
.mb-com-ciente:hover:not(:disabled) { background: #1d4ed8; }
.mb-com-ciente:disabled { opacity: .7; cursor: default; }
.mb-com-ver:focus-visible, .mb-com-ciente:focus-visible, .mb-com-ir:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Botão do destino ("Ir para Atividade"): secundário ao lado do Ciente. Na presença pendente é
   o principal ("Preencher presença agora") e o Ciente some. */
.mb-com-ir {
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; padding: 7px 14px;
}
.mb-com-ir:hover { background: rgba(255, 255, 255, .1); }
.mb-com-ir--principal { background: #2563eb; border-color: #2563eb; font-weight: 700; padding: 8px 20px; }
.mb-com-ir--principal:hover { background: #1d4ed8; }
.mb-com-ir[hidden], .mb-com-ciente[hidden] { display: none; }
.mb-com-nota { display: none; }
.mb-com--expandida .mb-com-nota:not(:empty) {
  display: block; padding: 4px 18px 0 62px; font-size: 12px; color: #fbbf24;
}

/* Enquete (21/10/2026): as opções no cartão aberto, no lugar do Ciente. Sem detalhe escrito, a
   linha da mensagem some. */
.mb-com-enq { display: none; }
.mb-com--expandida .mb-com-enq { display: block; padding: 6px 18px 0 62px; }
.mb-com--expandida .mb-com-msg:empty { display: none; }

/* Opções da enquete — claras por padrão (aba Recebidos do painel); dentro da cápsula, escuras. */
.mb-enq-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-enq-op {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 999px; padding: 6px 14px;
  background: transparent; color: var(--text-primary, #0f172a); border: 1px solid var(--border, #cbd5e1);
}
.mb-enq-op:hover { border-color: #2563eb; }
.mb-enq-op--on, .mb-enq-op--on:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.mb-enq-op:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.mb-enq-outra {
  display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 56px; resize: vertical;
  font: inherit; font-size: 13px; line-height: 1.45; border-radius: 8px; padding: 8px 10px;
  background: var(--bg-input, #fff); color: var(--text-primary, #0f172a); border: 1px solid var(--border, #cbd5e1);
}
.mb-enq-outra:focus { outline: none; border-color: #2563eb; }
.mb-enq-outra[hidden] { display: none; }
.mb-com-ilha .mb-enq-op { color: #fff; border-color: rgba(255, 255, 255, .35); }
.mb-com-ilha .mb-enq-op:hover { background: rgba(255, 255, 255, .1); }
.mb-com-ilha .mb-enq-op--on, .mb-com-ilha .mb-enq-op--on:hover { background: #2563eb; border-color: #2563eb; }
.mb-com-ilha .mb-enq-op:focus-visible { outline-color: #fff; }
.mb-com-ilha .mb-enq-outra { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); }
.mb-com-ilha .mb-enq-outra::placeholder { color: rgba(255, 255, 255, .55); }

/* Seção COMUNICADOS do sino (notificacoes.js → MBComunicados.secaoSino). Usa as classes do sino
   (bell-item, bell-item-body…) e só acrescenta a mensagem e os botões. */
.mb-com-sino-cab {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text-muted, #8696a0);
  padding: 6px 4px 4px; text-transform: uppercase;
}
.mb-com-sino-msg {
  font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 2px; white-space: pre-wrap;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-com-sino-resp { font-size: 12px; font-weight: 600; color: #2563eb; margin-top: 2px; overflow-wrap: anywhere; }
.mb-com-sino-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.mb-com-sino-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 4px 10px;
  background: transparent; color: var(--text-primary, #0f172a); border: 1px solid var(--border, #e2e8f0);
}
.mb-com-sino-btn--principal { background: #2563eb; color: #fff; border-color: #2563eb; }
.mb-com-sino-btn:disabled { opacity: .6; cursor: default; }
.mb-com-sino-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

@media (max-width: 560px) {
  .mb-com-ilha { top: 72px; }
  .mb-com--expandida .mb-com-msg, .mb-com--expandida .mb-com-enq { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-com-ilha { transition: opacity .2s; }
  .mb-com-ponto, .mb-com--aberta .mb-com-ico svg { animation: none; }
}