/* ═══════════════════════════════════════════════════
   Agendamento · folha cheia no celular, gaveta no desktop.
   Carregado sob demanda pelo fluxo (fora do caminho do LCP).
   Usa os tokens do site; os valores depois da vírgula valem
   quando a página não os define.
   ═══════════════════════════════════════════════════ */

.ag, .zap {
  --ag-fundo: #070E1B;
  --ag-borda: rgba(238, 243, 247, .10);
  --ag-linha: rgba(127, 216, 255, .18);
  --ag-texto: var(--pearl, #EEF3F7);
  --ag-mudo: var(--slate, #8494AB);
  --ag-acento: var(--cyan, #7FD8FF);
  --ag-coral: #FF9B8A;
  --ag-ok: #8EF0C4;
  --ag-sans: var(--sans, "Manrope", system-ui, sans-serif);
  --ag-serif: var(--serif, "Bodoni Moda", Georgia, serif);
  --ag-mono: var(--mono, "JetBrains Mono", ui-monospace, monospace);
  --ag-ease: cubic-bezier(.22, .61, .36, 1);
  --ag-nacar: linear-gradient(100deg, #7FD8FF 0%, #C9C6FF 38%, #FFE3D0 68%, #7FD8FF 100%);
  color: var(--ag-texto);
  font: 400 16px/1.5 var(--ag-sans);
}

/* sem a reserva da barra de rolagem: com ela sobrava uma faixa à direita da gaveta */
html.ag-aberto { overflow: hidden; scrollbar-gutter: auto; }

/* ─── diálogo: o display só existe com [open], senão ele nunca fecha ─── */
dialog.ag {
  margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  background: var(--ag-fundo);
  overscroll-behavior: contain;
}
dialog.ag[open] { display: flex; animation: ag-sobe .32s var(--ag-ease); }
dialog.ag::backdrop { background: rgba(0, 1, 7, .72); backdrop-filter: blur(6px); }
@keyframes ag-sobe { from { transform: translateY(24px); opacity: 0; } }

@media (min-width: 760px) {
  dialog.ag {
    margin: 0 0 0 auto; width: min(500px, 100vw);
    border-left: 1px solid var(--ag-linha);
    box-shadow: -40px 0 80px rgba(0, 0, 0, .45);
  }
  dialog.ag[open] { animation-name: ag-entra; }
  @keyframes ag-entra { from { transform: translateX(40px); opacity: 0; } }
}

.ag-casca { display: flex; flex-direction: column; width: 100%; min-height: 0; }

/* ─── topo ─── */
.ag-topo {
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 16px;
  border-bottom: 1px solid var(--ag-borda);
  background: linear-gradient(180deg, rgba(11, 20, 36, .9), rgba(7, 14, 27, .6));
}
.ag-topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ag-passo { font: 400 12px/1.4 var(--ag-mono); letter-spacing: .06em; color: var(--ag-mudo); margin: 0; }
.ag-fechar {
  flex: none; width: 44px; height: 44px; margin-right: -8px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--ag-texto); cursor: pointer;
}
.ag-fechar svg { width: 22px; height: 22px; }
.ag-fechar:hover { background: rgba(127, 216, 255, .08); }
.ag-progresso { height: 2px; margin: 8px 0 18px; background: var(--ag-borda); border-radius: 2px; overflow: hidden; }
.ag-progresso i { display: block; height: 100%; background: var(--ag-acento); box-shadow: 0 0 10px rgba(127, 216, 255, .6); transition: width .45s var(--ag-ease); }
.ag-titulo {
  margin: 4px 0 0; font: 400 clamp(26px, 6.4vw, 31px)/1.12 var(--ag-serif);
  letter-spacing: -.012em; outline: none; text-wrap: balance;
}
.ag-fichas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.ag-fichas button {
  min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ag-linha); background: rgba(127, 216, 255, .06); color: var(--ag-texto);
  font: 500 13px/1 var(--ag-sans);
  position: relative;
}
/* alvo de 44px sem engordar a ficha */
.ag-fichas button::after { content: ""; position: absolute; inset: -4px 0; }
.ag-fichas button:hover { border-color: var(--ag-acento); }

/* ─── corpo ─── */
/* gap em vez de margem entre irmãos: margin:0 dos blocos anulava a margem e colava tudo */
.ag-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 28px; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; }
.ag-corpo > * { margin-top: 0; margin-bottom: 0; flex: none; }
.ag-contexto { color: var(--ag-mudo); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.ag-conta { color: var(--ag-mudo); font-size: 14px; margin: 0; }
.ag-legenda { color: var(--ag-mudo); font-size: 13px; }
.ag-link {
  border: 0; background: none; padding: 0 2px; min-height: 44px; cursor: pointer;
  color: var(--ag-acento); font: 500 15px/1 var(--ag-sans);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(127, 216, 255, .45);
}
.ag-link-perigo { color: var(--ag-coral); text-decoration-color: rgba(255, 155, 138, .45); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ─── listas de escolha ─── */
.ag-lista { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 8px; }
.ag-opcao {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 14px 12px 44px; cursor: pointer;
  border: 1px solid var(--ag-borda); border-radius: 4px; background: rgba(0, 3, 10, .35);
  transition: border-color .25s var(--ag-ease), background .25s var(--ag-ease);
}
.ag-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-opcao::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 1.5px solid var(--ag-linha); border-radius: 50%;
  transition: background .25s var(--ag-ease), box-shadow .25s var(--ag-ease), border-color .25s var(--ag-ease);
}
.ag-opcao:hover { border-color: var(--ag-linha); background: rgba(127, 216, 255, .04); }
.ag-opcao:has(input:checked) { border-color: var(--ag-acento); background: rgba(127, 216, 255, .09); }
.ag-opcao:has(input:checked)::before { background: var(--ag-acento); border-color: var(--ag-acento); box-shadow: 0 0 12px rgba(127, 216, 255, .7), inset 0 0 0 3px var(--ag-fundo); }
.ag-opcao:has(input:focus-visible) { outline: 2px solid var(--ag-acento); outline-offset: 2px; }
.ag-opcao-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ag-opcao-corpo b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.ag-opcao-corpo small { color: var(--ag-mudo); font-size: 14px; line-height: 1.4; }
.ag-ficticio { font: 400 12px/1.4 var(--ag-mono) !important; color: var(--ag-mudo); letter-spacing: .02em; }
.ag-opcao-meta { flex: none; font: 400 12px/1.3 var(--ag-mono); color: var(--ag-mudo); text-align: right; }
.ag-opcao-pessoa { padding-left: 44px; }
.ag-rosto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; border: 1px solid var(--ag-borda); }
.ag-rostos { display: flex; flex: none; }
.ag-rostos img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--ag-fundo); }
.ag-rostos img + img { margin-left: -12px; }

/* ─── estou com dor ─── */
.ag-dor {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 64px; padding: 12px 16px; cursor: pointer; margin-top: 8px !important;
  border: 1px dashed rgba(255, 155, 138, .5); border-radius: 4px; background: rgba(255, 155, 138, .05);
  color: var(--ag-texto); font: inherit;
}
.ag-dor b { display: block; font-weight: 600; }
.ag-dor small { display: block; color: var(--ag-mudo); font-size: 14px; }
.ag-dor:hover { background: rgba(255, 155, 138, .1); border-style: solid; }
.ag-dor-pulso { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ag-coral); box-shadow: 0 0 0 0 rgba(255, 155, 138, .6); animation: ag-pulso 1.8s var(--ag-ease) infinite; }
@keyframes ag-pulso { 70% { box-shadow: 0 0 0 10px rgba(255, 155, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 155, 138, 0); } }

/* ─── calendário ─── */
.ag-atalho {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--ag-linha); border-radius: 4px; background: rgba(127, 216, 255, .06); color: var(--ag-texto); font: inherit;
}
.ag-atalho span { color: var(--ag-mudo); font-size: 14px; }
.ag-atalho b { font-weight: 600; }
.ag-atalho:hover { border-color: var(--ag-acento); }
.ag-calendario { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 20px; }
.ag-mes-nome { margin: 0 0 8px; font: 400 20px/1.2 var(--ag-serif); text-transform: capitalize; }
.ag-cal-sem, .ag-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ag-cal-sem span { text-align: center; font: 400 12px/2 var(--ag-mono); color: var(--ag-mudo); }
.ag-dia {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 4px; border: 1px solid var(--ag-borda); cursor: pointer;
  transition: border-color .2s var(--ag-ease), background .2s var(--ag-ease);
}
.ag-dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-dia > span[aria-hidden] { display: contents; }
.ag-dia b { font: 500 17px/1.1 var(--ag-sans); }
.ag-dia small { font: 400 11px/1.2 var(--ag-mono); color: var(--ag-mudo); margin-top: 3px; white-space: nowrap; }
.ag-dia.is-off small { font-size: 10px; }
.ag-dia:hover { border-color: var(--ag-linha); }
.ag-dia:has(input:checked) { background: var(--ag-acento); border-color: var(--ag-acento); color: #00030A; }
.ag-dia:has(input:checked) small { color: rgba(0, 3, 10, .72); }
.ag-dia:has(input:focus-visible) { outline: 2px solid var(--ag-acento); outline-offset: 2px; }
.ag-dia.is-off { cursor: default; border-style: dashed; border-color: rgba(238, 243, 247, .06); color: rgba(238, 243, 247, .38); }
.ag-dia.is-off small { color: rgba(132, 148, 171, .8); }
.ag-dia.is-vazio { border: 0; cursor: default; }

/* ─── horários ─── */
.ag-grupo { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ag-grupo + .ag-grupo { margin-top: 20px; }
.ag-grupo legend { padding: 0; margin-bottom: 10px; font: 400 12px/1 var(--ag-mono); letter-spacing: .08em; color: var(--ag-mudo); text-transform: lowercase; }
.ag-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ag-hora { position: relative; cursor: pointer; display: block; }
.ag-hora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ag-hora span {
  display: grid; place-items: center; min-height: 48px; border-radius: 4px;
  border: 1px solid var(--ag-borda); font: 400 15px/1 var(--ag-mono); letter-spacing: .02em;
  transition: border-color .2s var(--ag-ease), color .2s var(--ag-ease), background .2s var(--ag-ease);
}
.ag-hora:hover span { border-color: var(--ag-acento); color: var(--ag-acento); }
/* o horário escolhido leva a borda de nácar: um dos dois lugares onde ela existe */
.ag-hora input:checked + span { background: var(--ag-acento); color: #00030A; border-color: transparent; font-weight: 500; isolation: isolate; position: relative; }
.ag-hora input:checked + span::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: 6px; background: var(--ag-nacar); background-size: 220% 100%; animation: ag-nacar 6s linear infinite; }
@keyframes ag-nacar { to { background-position: 220% 0; } }
.ag-hora input:focus-visible + span { outline: 2px solid var(--ag-acento); outline-offset: 3px; }

/* ─── estados ─── */
.ag-esqueleto { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.ag-esqueleto i { display: block; height: 48px; border-radius: 4px; background: linear-gradient(90deg, rgba(238, 243, 247, .04), rgba(238, 243, 247, .09), rgba(238, 243, 247, .04)); background-size: 200% 100%; animation: ag-brilho 1.2s linear infinite; }
@keyframes ag-brilho { to { background-position: -200% 0; } }
.ag-estado { display: grid; gap: 12px; justify-items: start; padding: 20px; border: 1px solid var(--ag-borda); border-radius: 4px; background: rgba(0, 3, 10, .35); }
.ag-estado b { font-size: 17px; }
.ag-estado p { margin: 0; color: var(--ag-mudo); }
.ag-estado-erro { border-color: rgba(255, 155, 138, .4); }
.ag-estado-conflito { border-color: rgba(255, 155, 138, .4); background: rgba(255, 155, 138, .05); }
.ag-estado-conflito > p:first-child { color: var(--ag-texto); }
.ag-aviso, .ag-erro-passo {
  display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 4px; font-size: 15px;
  background: rgba(255, 155, 138, .08); border: 1px solid rgba(255, 155, 138, .35); color: #FFD3CA;
}
.ag-aviso::before, .ag-erro-passo::before { content: ""; flex: none; width: 3px; border-radius: 2px; background: var(--ag-coral); }
.ag-alternativas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; width: 100%; }
.ag-alt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--ag-linha); border-radius: 4px; background: rgba(127, 216, 255, .05); color: var(--ag-texto); font: inherit;
}
.ag-alt span { font-size: 13px; color: var(--ag-mudo); }
.ag-alt b { font: 500 18px/1.2 var(--ag-mono); }
.ag-alt:hover { border-color: var(--ag-acento); }

/* ─── resumo e formulário ─── */
.ag-resumo { margin: 0; display: grid; border: 1px solid var(--ag-borda); border-radius: 4px; background: rgba(0, 3, 10, .35); }
.ag-resumo > div { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 14px; }
.ag-resumo > div + div { border-top: 1px solid var(--ag-borda); }
.ag-resumo dt { color: var(--ag-mudo); font-size: 14px; }
.ag-resumo dd { margin: 0; font-weight: 500; display: flex; flex-direction: column; }
.ag-resumo small { color: var(--ag-mudo); font-weight: 400; font-size: 13px; }
.ag-codigo { font: 500 15px/1.3 var(--ag-mono); letter-spacing: .06em; color: var(--ag-acento); }
.ag-form { display: grid; gap: 18px; margin-top: 6px !important; }
.ag-campo label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.ag-opcional { font: 400 12px/1 var(--ag-mono); color: var(--ag-mudo); border: 1px solid var(--ag-borda); padding: 3px 7px; border-radius: 3px; }
.ag-campo input, .ag-campo textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 4px;
  border: 1px solid rgba(238, 243, 247, .16); background: rgba(0, 3, 10, .6); color: var(--ag-texto);
  font: 400 16px/1.45 var(--ag-sans); transition: border-color .2s var(--ag-ease);
}
.ag-campo textarea { min-height: 88px; resize: vertical; }
.ag-campo input::placeholder, .ag-campo textarea::placeholder { color: rgba(132, 148, 171, .75); }
.ag-campo input:focus, .ag-campo textarea:focus { outline: none; border-color: var(--ag-acento); box-shadow: 0 0 0 3px rgba(127, 216, 255, .18); }
.ag-campo input[aria-invalid="true"] { border-color: var(--ag-coral); }
.ag-ajuda { margin: 6px 0 0; font-size: 13px; color: var(--ag-mudo); }
.ag-erro { margin: 6px 0 0; font-size: 14px; color: #FFB8AB; }
.ag-cuidado { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #F5D9A8; display: flex; gap: 8px; }
.ag-cuidado::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--ag-sans); color: #00030A; background: #F5D9A8; margin-top: 1px; }
.ag-privacidade { margin: 0; font-size: 13px; color: var(--ag-mudo); }
.ag-troca { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--ag-borda); border-radius: 4px; }
.ag-troca p { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.ag-troca span { color: var(--ag-mudo); font-size: 14px; }
.ag-troca s { color: var(--ag-mudo); }

/* ─── feito ─── */
.ag-feito { display: grid; gap: 18px; position: relative; }
.ag-feito-quando { margin: 0; font: 400 22px/1.2 var(--ag-serif); display: flex; flex-direction: column; }
.ag-feito-quando b { font: 400 clamp(52px, 14vw, 64px)/1 var(--ag-serif); letter-spacing: -.02em; color: var(--ag-acento); margin-top: 4px; }
.ag-status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0; padding: 8px 14px; border-radius: 999px; font-size: 14px; border: 1px solid var(--ag-borda); color: var(--ag-mudo); }
.ag-status span { width: 8px; height: 8px; border-radius: 50%; background: #F5D9A8; animation: ag-respira 1.8s ease-in-out infinite; }
.ag-status.is-ok { color: var(--ag-ok); border-color: rgba(142, 240, 196, .4); background: rgba(142, 240, 196, .06); }
.ag-status.is-ok span { background: var(--ag-ok); animation: none; box-shadow: 0 0 10px rgba(142, 240, 196, .8); }
@keyframes ag-respira { 50% { opacity: .3; } }
/* chegou agora: a mesma linha de varredura do escaneador do hero passa uma vez */
.ag-feito.is-novo::after {
  content: ""; position: absolute; left: -20px; right: -20px; top: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ag-acento) 18%, #fff 50%, var(--ag-acento) 82%, transparent);
  box-shadow: 0 0 22px 3px rgba(127, 216, 255, .5);
  animation: ag-varre 1.1s var(--ag-ease) forwards;
}
@keyframes ag-varre { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(420px); } }
.ag-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-acoes-leves { display: flex; gap: 20px; }
.ag-nota { margin: 0; font-size: 13px; color: var(--ag-mudo); }

/* ─── rodapé e botões ─── */
.ag-pe {
  display: flex; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ag-borda); background: rgba(7, 14, 27, .96);
}
.ag-pe > * { flex: 1; }
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 18px; border-radius: 4px; cursor: pointer;
  font: 600 15px/1.15 var(--ag-sans); text-align: center;
  border: 1px solid transparent; transition: background .2s var(--ag-ease), border-color .2s var(--ag-ease), color .2s var(--ag-ease);
}
.ag-btn svg { width: 20px; height: 20px; flex: none; }
.ag-btn-cheio { background: var(--ag-acento); color: #00030A; }
.ag-btn-cheio:hover { background: #A6E4FF; }
.ag-btn-linha { background: transparent; color: var(--ag-texto); border-color: var(--ag-linha); }
.ag-btn-linha:hover { border-color: var(--ag-acento); color: var(--ag-acento); }
.ag-btn-perigo { background: transparent; color: var(--ag-coral); border-color: rgba(255, 155, 138, .5); }
.ag-btn-perigo:hover { background: rgba(255, 155, 138, .08); }
/* o botão que fecha o agendamento leva o sublinhado de nácar */
.ag-btn-nacar { position: relative; overflow: hidden; }
.ag-btn-nacar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ag-nacar); background-size: 220% 100%; animation: ag-nacar 6s linear infinite; }
.ag-btn[disabled] { opacity: .75; cursor: progress; }
.ag-btn:focus-visible, .ag-link:focus-visible, .ag-fechar:focus-visible, .ag-dor:focus-visible, .ag-atalho:focus-visible, .ag-alt:focus-visible, .ag-fichas button:focus-visible {
  outline: 2px solid var(--ag-acento); outline-offset: 3px;
}
.ag-giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(0, 3, 10, .3); border-top-color: #00030A; animation: ag-gira .7s linear infinite; }
@keyframes ag-gira { to { transform: rotate(1turn); } }

@media (max-width: 380px) {
  .ag-corpo, .ag-topo { padding-left: 16px; padding-right: 16px; }
  .ag-acoes { grid-template-columns: 1fr; }
  .ag-resumo > div { grid-template-columns: 96px 1fr; }
}

/* ═══════════ prévia do WhatsApp ═══════════ */
dialog.zap {
  padding: 0; border: 1px solid var(--ag-linha); border-radius: 10px;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  background: var(--ag-fundo); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
dialog.zap[open] { display: block; animation: ag-sobe .28s var(--ag-ease); }
dialog.zap::backdrop { background: rgba(0, 1, 7, .7); }
.zap-casca { padding: 22px; display: grid; gap: 14px; }
.zap-tag { margin: 0; font: 400 12px/1 var(--ag-mono); letter-spacing: .08em; color: var(--ag-acento); text-transform: lowercase; }
.zap-titulo { margin: 0; font: 400 24px/1.15 var(--ag-serif); }
.zap-tela { border-radius: 8px; overflow: hidden; background: #0B141A; border: 1px solid rgba(255, 255, 255, .06); }
.zap-para { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #202C33; color: #E9EDEF; font-size: 15px; }
.zap-para small { display: block; color: #8696A0; font-size: 12px; }
.zap-avatar { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7FD8FF, #20405a); flex: none; }
.zap-bolha { position: relative; margin: 16px 14px 18px auto; max-width: 88%; padding: 9px 12px 22px; border-radius: 8px 0 8px 8px; background: #005C4B; color: #E9EDEF; font-size: 15px; line-height: 1.45; }
.zap-bolha p { margin: 0; white-space: pre-wrap; }
.zap-hora { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: rgba(233, 237, 239, .7); }
.zap-nota { margin: 0; font-size: 14px; color: var(--ag-mudo); }
.zap-status { margin: 0; min-height: 1em; font-size: 14px; color: var(--ag-ok); }
.zap-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  dialog.ag[open], dialog.zap[open], .ag-feito.is-novo::after, .ag-dor-pulso, .ag-status span, .ag-esqueleto i, .ag-hora input:checked + span::before, .ag-btn-nacar::after { animation: none !important; }
  .ag-feito.is-novo::after { display: none; }
  .ag-progresso i { transition: none; }
}

/* profissional sem foto: as iniciais na cor dela */
.ag-iniciais {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  background: color-mix(in srgb, var(--cor, #7FD8FF) 20%, #07101E);
  border: 1px solid color-mix(in srgb, var(--cor, #7FD8FF) 55%, transparent);
  color: var(--cor, #7FD8FF); font: 600 15px/1 var(--ag-sans); letter-spacing: .02em;
}
.ag-rostos .ag-rosto-mini { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--ag-fundo); font-size: 11px; }
.ag-rostos .ag-rosto-mini + .ag-rosto-mini { margin-left: -12px; }