/* Presença da equipe: controle no topo (foto com ponto de estado), menu de 3 opções, lista da equipe e resumo do Inbox.
   Classes novas, prefixo pres-. Não mexe no CSS do topo: o controle é só mais um item da barra. */

/* Estados: Disponível verde cheio, Em pausa âmbar cheio, Fora cinza vazado. O texto do estado sempre aparece junto. */
.pres-ponto { --pres-cor: var(--texto-tenue); display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; box-sizing: border-box; background: var(--pres-cor); border: 2px solid var(--fundo); }
.pres-ponto[data-estado="disponivel"] { --pres-cor: var(--ok); }
.pres-ponto[data-estado="pausa"] { --pres-cor: #C58A12; }
.pres-ponto[data-estado="fora"] { background: var(--fundo); border-color: var(--texto-tenue); }
.pres-ponto.em-linha { width: 10px; height: 10px; border-width: 2px; }
.pres-ponto.em-linha[data-estado="disponivel"] { background: var(--ok); border-color: var(--ok); }
.pres-ponto.em-linha[data-estado="pausa"] { background: #C58A12; border-color: #C58A12; }
.pres-ponto.em-linha[data-estado="fora"] { background: transparent; border-color: var(--texto-tenue); }

/* Foto da pessoa no topo. O ponto fica por fora do círculo (o avatar corta o que passa da borda). */
.pres-wrap { position: relative; flex: none; }
.pres-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 10px 2px 2px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--texto-fraco); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pres-botao:hover, .pres-botao[aria-expanded="true"] { background: var(--superficie); border-color: var(--linha-forte); color: var(--texto); }
.pres-avatar { position: relative; display: inline-flex; width: 36px; height: 36px; flex: none; }
.pres-avatar .avatar { width: 36px; height: 36px; font-size: 13px; }
.pres-avatar .pres-ponto { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; }

.pres-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 280px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: var(--raio-md); box-shadow: 0 12px 32px rgba(27, 42, 74, 0.22); }
.pres-menu[hidden] { display: none; }
.pres-titulo { margin: 0; padding: 4px 8px 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-tenue); }
.pres-menu > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--raio-sm); background: transparent; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.pres-menu > button:hover, .pres-menu > button:focus-visible { background: var(--destaque-suave); }
.pres-menu > button[aria-checked="true"] { font-weight: 800; }
.pres-nome { flex: 1; min-width: 0; }
.pres-marca { display: none; color: var(--destaque); }
.pres-menu > button[aria-checked="true"] .pres-marca { display: inline-flex; }
.pres-sep { height: 1px; margin: 6px 0; background: var(--linha); }
.pres-equipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.pres-equipe[hidden], .pres-titulo[hidden] { display: none; }
.pres-pessoa { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 8px; font-size: 14px; }
.pres-pessoa-nome { flex: 1; min-width: 0; }
.pres-pessoa-estado { color: var(--texto-tenue); }
.pres-nota { margin: 6px 0 0; padding: 6px 8px 2px; color: var(--texto-tenue); border-top: 1px solid var(--linha); }

/* Equipe (lista de pessoas) e cabeçalho do Inbox */
.pessoa .pres-avatar { width: 40px; height: 40px; }
.pessoa .pres-avatar .avatar { width: 40px; height: 40px; font-size: 14px; }
.pessoa .pres-avatar .pres-ponto { right: -1px; bottom: -1px; border-color: var(--superficie); }
.pessoa .pres-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-tenue); white-space: nowrap; }
.pres-resumo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--texto-fraco); font-weight: 600; }
.pres-resumo[hidden] { display: none; }

/* Quem respondeu, embaixo da bolha, sem chamar atenção */
.msg .pres-quem { font-size: 11px; opacity: .8; font-weight: 600; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Celular: só a foto com o ponto; o menu abre alinhado à direita, na largura da tela. */
@media (max-width: 820px) {
  .pres-rotulo { display: none; }
  .pres-botao { padding: 2px; min-height: 44px; min-width: 44px; justify-content: center; }
  .pres-menu { width: min(340px, calc(100vw - 24px)); max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .pres-ponto { transition: background-color .2s ease, border-color .2s ease; }
}