/*
 * Chat do site — "Falar com a recepção" (partials/atendimento_widget.php).
 * Autossuficiente: nao depende de .panel-shell nem dos estilos do site/login. Prefixo .aw-.
 * Cores da marca Clinica Hayim (mesmas dos tokens --color-* de app.css).
 */
.aw { --aw-primary: #1F7F74; --aw-primary-hover: #186A61; --aw-soft: #E6F3F1; --aw-accent: #E76F51; --aw-text: #1E2A32; --aw-muted: #6B7880; --aw-border: #E2E7E8; --aw-bg: #F5F7F7; --aw-danger: #B83A22;
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.4; color: var(--aw-text); }
.aw *, .aw *::before, .aw *::after { box-sizing: border-box; }
.aw [hidden] { display: none !important; }
.aw svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.aw-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.aw-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--aw-primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px -8px rgba(20, 38, 63, .45); transition: background .18s ease, transform .18s ease; }
.aw-fab:hover { background: var(--aw-primary-hover); transform: translateY(-2px); }
.aw-fab:focus-visible, .aw-painel :focus-visible { outline: 2px solid var(--aw-primary); outline-offset: 2px; }
.aw-fab:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px var(--aw-primary); }
.aw-badge { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--aw-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.aw.is-aberto .aw-fab { display: none; }

.aw-painel { position: fixed; right: 20px; bottom: 20px; z-index: 61; display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 24px); height: min(600px, calc(100vh - 40px)); background: #fff; border: 1px solid var(--aw-border); border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(20, 38, 63, .35); overflow: hidden; }
.aw-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; background: #14263F; color: #fff; }
.aw-topo strong { display: block; font-size: 15px; }
.aw-topo span { display: block; margin-top: 2px; font-size: 12px; color: #B9C6D6; }
.aw-fechar { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.aw-fechar:hover { background: rgba(255, 255, 255, .12); }
.aw-offline { margin: 0; padding: 8px 16px; background: #FBF1DC; color: #8A5A10; font-size: 13px; }

.aw-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--aw-bg); }
.aw-carregando { margin: auto; color: var(--aw-muted); font-size: 14px; }
.aw-inicio, .aw-identificacao { padding: 16px; }
.aw-saudacao { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.aw-boasvindas { padding: 14px 16px; border: 1px solid var(--aw-border); border-radius: 14px 14px 14px 4px; background: #fff; }
.aw-boasvindas p { margin: 0; font-size: 14px; line-height: 1.45; }
.aw-boasvindas .aw-saudacao { margin-bottom: 6px; font-size: 15px; }
.aw-zap { margin: 12px 2px 0; font-size: 13px; color: var(--aw-muted); }
.aw-zap a { color: var(--aw-primary-hover); font-weight: 600; }
.aw-primeira { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--aw-soft); font-size: 13px; overflow-wrap: anywhere; }
/* Boas-vindas: so o texto; anexo e a nota do anexo aparecem com a conversa aberta */
.aw-form.is-inicio .aw-clip, .aw-form.is-inicio > .aw-nota { display: none; }

.aw-identificacao label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.aw-identificacao input[type="text"], .aw-identificacao input[type="tel"], .aw-identificacao input[type="email"] { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #CBD3D5; border-radius: 8px; background: #fff; color: var(--aw-text); font: inherit; }
.aw-identificacao input:focus { outline: none; border-color: var(--aw-primary); box-shadow: 0 0 0 3px rgba(31, 127, 116, .18); }
.aw-opcional { font-weight: 400; color: var(--aw-muted); }
.aw-identificacao .aw-aceite { margin: 14px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; opacity: .85; }
.aw-erro { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #FBE8E3; color: var(--aw-danger); font-size: 13px; }
.aw-linha { display: flex; align-items: flex-end; gap: 8px; }
.aw-identificacao .aw-linha { margin-top: 14px; justify-content: flex-end; }
.aw-botao { min-height: 42px; padding: 0 16px; border: 1px solid var(--aw-primary); border-radius: 8px; background: var(--aw-primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.aw-botao:hover { background: var(--aw-primary-hover); }
.aw-botao:disabled { opacity: .6; cursor: not-allowed; }
.aw-botao-claro { background: #fff; color: var(--aw-text); border-color: #CBD3D5; }
.aw-botao-claro:hover { background: var(--aw-bg); }
.aw-nota { margin: 8px 0 0; font-size: 12px; color: var(--aw-muted); }
.aw-nota a, .aw-dica a { color: var(--aw-primary); font-weight: 600; }

.aw-mensagens { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.aw-dia { align-self: center; margin: 4px 0; padding: 2px 12px; border-radius: 999px; background: #E9EDEE; color: var(--aw-muted); font-size: 12px; }
.aw-msg { max-width: 84%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--aw-border); align-self: flex-start; }
.aw-msg.is-minha { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: #DFF3F0; border-color: #C4E6E0; }
.aw-msg.is-sistema, .aw-dica { align-self: center; max-width: 94%; padding: 4px 10px; border: 0; background: transparent; color: var(--aw-muted); font-size: 12px; text-align: center; }
.aw-dica { padding: 8px 12px; border-radius: 10px; background: var(--aw-soft); color: var(--aw-text); font-size: 13px; }
.aw-msg.is-pendente { opacity: .7; }
.aw-msg.is-falhou { border-color: var(--aw-danger); background: #FBE8E3; opacity: 1; }
.aw-msg-de { margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--aw-primary-hover); }
.aw-msg-texto { white-space: pre-wrap; word-break: break-word; }
.aw-msg-rodape { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--aw-muted); }
.aw-msg-rodape button { padding: 0; border: 0; background: none; color: var(--aw-danger); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.aw-msg-anexo { display: block; margin-bottom: 4px; color: var(--aw-primary); font-weight: 600; word-break: break-word; }
.aw-msg-anexo img { display: block; max-width: 200px; max-height: 200px; border-radius: 8px; }
.aw-msg-anexo audio { max-width: 100%; }

.aw-form { padding: 10px 12px; border-top: 1px solid var(--aw-border); background: #fff; }
/* Respostas rapidas ("Sim", "Outros assuntos", nomes dos profissionais): clicar envia o texto. */
.aw-respostas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aw-respostas[hidden] { display: none; }
.aw-resposta { min-height: 36px; padding: 6px 14px; border: 1px solid var(--aw-primary); border-radius: 999px; background: #fff; color: var(--aw-primary); font: inherit; font-weight: 600; cursor: pointer; }
.aw-resposta:hover { background: var(--aw-soft); }
.aw-form textarea { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid #CBD3D5; border-radius: 10px; background: #fff; color: var(--aw-text); font: inherit; resize: none; }
.aw-form textarea:focus { outline: none; border-color: var(--aw-primary); box-shadow: 0 0 0 3px rgba(31, 127, 116, .18); }
.aw-clip, .aw-enviar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; cursor: pointer; }
.aw-clip { border: 1px solid #CBD3D5; color: var(--aw-muted); }
.aw-clip:hover { background: var(--aw-bg); }
.aw-enviar { border: 0; background: var(--aw-primary); color: #fff; }
.aw-enviar:hover { background: var(--aw-primary-hover); }
.aw-enviar:disabled { opacity: .6; cursor: not-allowed; }
.aw-anexo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--aw-muted); word-break: break-all; }
.aw-anexo button { padding: 0; border: 0; background: none; color: var(--aw-danger); font: inherit; font-weight: 600; cursor: pointer; flex-shrink: 0; }
.aw-rodape { padding: 12px; border-top: 1px solid var(--aw-border); background: #fff; text-align: center; }

/* Celular e PWA: tela cheia, botao so com o icone (acima da barra inferior do painel, se houver). */
@media (max-width: 600px) {
    /* O botao mantem o texto "Falar com a recepção" tambem no celular (pedido da clinica). */
    .aw-fab { right: 14px; bottom: 14px; }
    .aw-painel { right: 0; bottom: 0; left: 0; top: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .aw-form textarea, .aw-identificacao input { font-size: 16px; } /* evita zoom automatico no iOS */
}
@media (prefers-reduced-motion: reduce) { .aw-fab { transition: none; } .aw-fab:hover { transform: none; } }
@media print { .aw { display: none; } }