/* ==========================================================================
   Hub dialogs (Penpot: Fluxo_Editar_Cliente 450x912, Modal_excluir_contato and
   Modal_arquivar_conversa 450x398). The boards define the panels; the dimmed backdrop,
   placement and close-on-click are not in the design.
   ========================================================================== */
.ovl { position: fixed; inset: 0; z-index: 60; background: rgba(3, 7, 18, 0.3); display: flex; }
.ovl__bd { position: absolute; inset: 0; }
.ovl .pnl { position: relative; }
.ovl--center { justify-content: center; align-items: center; padding: 16px; box-sizing: border-box; }

/* 450 wide, 16 radius, 32/16 padding, 24 between blocks, 418 content. */
.pnl { width: 450px; max-width: 100%; box-sizing: border-box; padding: 32px 16px; border-radius: 16px; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); display: flex; flex-direction: column; align-items: stretch; gap: 24px; overflow-y: auto; }
.ovl--center .pnl { max-height: 100%; }
.pnl--edit { height: 912px; }
.pnl--modal { gap: 24px; }
/* Modal_Conectar WhatsApp Business: 636 wide, same padding; the title is regular weight. */
.pnl--wide { width: 636px; }
.pnl--wide .pnl__message h2 { font-weight: 400; }
.pnl--wide .pnl__message p.wa-text { max-width: 398px; margin: 0 auto; }
.fx-toast--info { background: #eff6ff; border-color: #bedbff; }
.fx-toast--info .fx-toast__title { color: #155dfc; }
/* The QR code replaces the 64px icon (not in the design): big enough to scan from a screen. */
.wa-qr { width: 182px; height: 182px; image-rendering: pixelated; box-sizing: border-box; background: #fff; display: block; }
.wa-qr--wait { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e5e7eb; color: var(--ink-60); }
.wa-qr--wait .material-icons { font-size: 48px; animation: wa-pulse 1.4s ease-in-out infinite; }
@keyframes wa-pulse { 50% { opacity: .35; } }
.wa-banner { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; border: 1px solid #bedbff; background: #eff6ff; color: #155dfc; font-size: 12px; font-weight: 600; line-height: 16px; cursor: pointer; font-family: var(--font-sans); text-align: left; }
.wa-banner .material-icons { font-size: 16px; }

.pnl__profile { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pnl__avatar { width: 52px; height: 52px; box-sizing: border-box; border-radius: 64px; background: var(--color-primary); color: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.pnl__who { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #202220; }
.pnl__name { font-size: 16px; font-weight: 700; line-height: 24px; }
.pnl__phone { font-size: 12px; font-weight: 600; line-height: 16px; }

/* Select with the chevron of the design (24px, 20px from the right edge). */
.auth-select { position: relative; display: flex; align-items: center; }
.auth-select select.auth-input { appearance: none; -webkit-appearance: none; padding-right: 56px; cursor: pointer; }
.auth-select .material-icons { position: absolute; right: 20px; pointer-events: none; color: #111827; }
.auth-input--static { display: flex; align-items: center; opacity: 1; }

/* Cancelar sits above the primary action, both 418 wide, 12 apart; Cancelar is 54 high. */
.pnl__actions { display: flex; flex-direction: column; gap: 12px; }
.fx-btn--cancel { height: 54px; }
.pnl__actions .fx-btn { width: 100%; }

.pnl__message { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pnl .pnl__icon { font-size: 64px; color: var(--color-primary); }
.pnl__message h2 { margin: 0; color: var(--color-ink); align-self: stretch; font-size: 32px; font-weight: 700; line-height: 48px; }
.pnl__message p { margin: 0; align-self: stretch; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--ink-60); }
a.prop__link { color: var(--color-primary); text-decoration: none; }

/* ---- Composer: tools, popovers, attachment chip, recording ----------------- */
.composer { position: relative; display: flex; flex-direction: column; gap: 8px; flex: none; }
.chatbar { position: relative; }
.chatbar__tools { position: relative; }
.chatbar__tools .tool { width: 24px; height: 24px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #111827; cursor: pointer; }
.chatbar__tools .tool:hover:not(:disabled) { background: var(--ink-15); }
.chatbar__tools .tool:disabled { opacity: 0.4; cursor: not-allowed; }
.chatbar__tools .tool .material-icons { font-size: 16px; }
.chatbar__tools .tool--rec { color: #b91c1c; }
.hidden-file { display: none; }
.chatbar__input--off { display: none; }
.rec { flex: 1; display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 14px; line-height: 20px; color: var(--color-ink); white-space: nowrap; }
.rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: 0.25; } }
.chatbar__field:has(.rec) { justify-content: flex-start; }

.pop__bd { position: fixed; inset: 0; z-index: 40; }
.pop { position: absolute; z-index: 41; right: 61px; bottom: 60px; background: var(--color-surface); border: 1px solid var(--ink-15); border-radius: 12px; box-shadow: 0 8px 24px rgba(3, 7, 18, 0.12); box-sizing: border-box; }
.pop--emoji { width: 328px; max-height: 240px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.pop__emoji { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.pop__emoji:hover { background: var(--color-primary-soft); }
.pop--menu { min-width: 200px; padding: 8px; display: flex; flex-direction: column; }
.pop__item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-family: var(--font-sans); font-size: 14px; color: var(--color-ink); text-align: left; cursor: pointer; }
.pop__item:hover { background: var(--color-primary-soft); }
.pop__item .material-icons { font-size: 20px; color: var(--color-primary); }

.attach { display: flex; align-items: center; gap: 12px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--ink-15); border-radius: 8px; background: var(--color-surface); }
.attach__thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex: none; }
.attach__audio { height: 32px; max-width: 240px; flex: none; }
.attach__icon { width: 40px; height: 40px; border-radius: 4px; background: var(--color-primary-soft); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.attach__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attach__name { font-size: 12px; font-weight: 600; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach__size { font-size: 12px; line-height: 16px; color: var(--ink-60); }
.attach .tool { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.attach .tool .material-icons { font-size: 16px; }

/* Media inside chat bubbles */
.media__img img { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; }
.media__audio { width: 240px; height: 36px; }
.media__video { max-width: 260px; max-height: 260px; border-radius: 8px; }
.media__file, .media__load { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px; color: var(--color-primary); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; overflow-wrap: anywhere; }
.media__file .material-icons, .media__load .material-icons { font-size: 20px; }

/* ---- Enviar mensagem aos convidados (Penpot: Modal_EnviarMensagemModelo 640x504 and
   Modal_EnviarMensagemCriarModelo 640x860). 12 radius, header 32 pad, form 32 side pad,
   24 between blocks, footer 24/32 with 44px pills 12 apart, right aligned. */
.msgm { width: 640px; max-width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; position: relative; border-radius: 12px; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); display: flex; flex-direction: column; }
.msgm__head { padding: 32px; display: flex; flex-direction: column; gap: 8px; }
.msgm__head h2 { margin: 0; font-size: 32px; font-weight: 700; line-height: 48px; }
.msgm__head p { margin: 0; font-size: 12px; line-height: 20px; color: var(--ink-60); }
.msgm__form { padding: 0 32px 32px; display: flex; flex-direction: column; gap: 24px; }
.msgm__field { display: flex; flex-direction: column; gap: 12px; }
.msgm__label { font-size: 12px; font-weight: 700; line-height: 20px; }
.msgm__select { position: relative; display: flex; align-items: center; }
.msgm__select select { appearance: none; -webkit-appearance: none; width: 100%; height: 60px; box-sizing: border-box; padding: 16px 56px 16px 20px; border: 2px solid var(--ink-15); border-radius: 12px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-ink); cursor: pointer; }
.msgm__select .material-icons { position: absolute; right: 20px; pointer-events: none; color: #111827; }
.msgm__select--off select { border-color: var(--ink-15); color: var(--ink-15); cursor: not-allowed; }
.msgm__select--off .material-icons { color: var(--ink-15); }
.msgm__custom { display: flex; align-items: flex-start; gap: 12px; padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 12px; line-height: 20px; color: var(--ink-60); text-align: left; cursor: pointer; }
.msgm__custom .material-icons { font-size: 20px; color: #111827; }
.msgm__compose { display: flex; flex-direction: column; gap: 8px; }
.msgm__help { display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 20px; color: var(--ink-60); }
.msgm__help p { margin: 0; }
.msgm__help b { font-weight: 700; }
.msgm__compose textarea { width: 100%; height: 160px; box-sizing: border-box; resize: none; padding: 16px 20px; border: 1px solid var(--ink-15); border-radius: 12px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-ink); }
.msgm__compose textarea::placeholder { color: var(--ink-30); }
.msgm__compose textarea:focus, .msgm__select select:focus { outline: none; border-color: var(--color-primary); }
.msgm__actions { padding: 24px 32px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.msgm__status { margin-right: auto; flex: 1; min-width: 0; font-size: 12px; line-height: 20px; color: var(--color-ink); }
.msgm__status--error { color: var(--color-error); }
.msgm__btn { height: 44px; box-sizing: border-box; padding: 8px 20px; border: 1px solid var(--ink-30); border-radius: 99px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink-60); cursor: pointer; }
.msgm__btn--primary { border-color: var(--color-primary); background: var(--color-primary); color: #f9fafb; }
.msgm__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Adicionar convite / Editar convidado (Penpot: Modal_AdicionarConvidados 712x898,
   Modal_EditarConvidado 712x560) and the Meta-approval notice of Modal_EnviarMensagemCriarModelo. */
.ovl--top { z-index: 70; }
.msgm--wide { width: 712px; }
.msgm__head--short { padding: 32px; }
.msgm__head-note--hidden { display: none; }
.msgm__input { width: 100%; height: 60px; box-sizing: border-box; padding: 16px 20px; border: 2px solid var(--ink-15); border-radius: 12px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-ink); }
.msgm__input::placeholder, .msgm__area::placeholder { color: var(--ink-30); }
.msgm__input:focus, .msgm__area:focus { outline: none; border-color: var(--color-primary); }
.msgm__area { width: 100%; height: 108px; box-sizing: border-box; resize: none; padding: 16px 20px; border: 2px solid var(--ink-15); border-radius: 12px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-ink); }
.msgm__row { display: flex; gap: 24px; }
.msgm__row > .msgm__field { flex: 1; min-width: 0; }
.msgm__row--phone > .msgm__field:first-child { flex: none; width: 116px; }
.msgm__people { margin: 0 32px; padding: 22px 0 32px; border-top: 2px solid var(--ink-15); display: flex; flex-direction: column; gap: 24px; }
.msgm__people-head { display: flex; align-items: center; justify-content: space-between; }
.msgm__people-title { font-size: 16px; font-weight: 700; line-height: 24px; }
.msgm__add { height: 42px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 11px; padding: 8px 20px; border: 1px solid var(--color-primary); border-radius: 99px; background: transparent; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-primary); cursor: pointer; }
.msgm__add .material-icons { font-size: 16px; }
.person { display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 8px 16px; border: 2px solid var(--ink-15); border-radius: 8px; }
.person__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.person__name { font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__sub { font-size: 12px; line-height: 20px; color: var(--ink-60); }
.person__btn { width: 32px; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--color-ink); border-radius: 4px; background: transparent; color: #111827; cursor: pointer; }
.person__btn .material-icons { font-size: 16px; }
.msgm__btn { border-color: var(--ink-30); }
.msgm__btn--primary { border-color: var(--color-primary); }

.msgm__toast { box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #bedbff; border-radius: 12px; background: #eff6ff; }
.msgm__toast-head { display: flex; align-items: center; justify-content: space-between; }
.msgm__toast-title { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; line-height: 24px; color: #155dfc; }
.msgm__toast-title .material-icons { font-size: 20px; }
.msgm__toast-x { width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #111827; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.msgm__toast-x .material-icons { font-size: 16px; }
.msgm__toast p { margin: 0; font-size: 12px; line-height: 20px; color: var(--ink-60); }
.msgm__toast b { color: #155dfc; font-weight: 700; }

/* Voice notes (hub): play button, seek bar, time and speed toggle */
.voice { display: flex; align-items: center; gap: 10px; width: 264px; max-width: 100%; box-sizing: border-box; }
.voice audio { display: none; }
.voice__btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.voice__btn:hover { transform: scale(1.06); }
.voice__btn:active { transform: scale(.94); }
.voice--on .voice__btn { box-shadow: 0 0 0 4px rgba(125, 82, 244, .18); }
.voice__btn .material-icons { font-size: 22px; }
.voice__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice__seek { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 0; background: transparent; cursor: pointer; }
.voice__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--color-primary) var(--p, 0%), var(--ink-15) var(--p, 0%)); }
.voice__seek::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ink-15); }
.voice__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--color-primary); }
.voice__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; border: 0; background: var(--color-primary); transform: scale(.7); transition: transform .15s ease; }
.voice__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--color-primary); }
.voice:hover .voice__seek::-webkit-slider-thumb, .voice--on .voice__seek::-webkit-slider-thumb { transform: scale(1); }
.voice__time { font-size: 11px; line-height: 14px; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.voice__rate { flex: none; min-width: 34px; height: 22px; padding: 0 6px; border-radius: 11px; border: 1px solid var(--ink-15); background: transparent; color: var(--ink-60); font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.voice__rate:hover { background: var(--ink-15); color: var(--color-ink); }
.voice--wait { gap: 8px; }
.voice__spin { font-size: 18px; color: var(--color-primary); animation: tick-spin 1s linear infinite; }
.voice__skeleton { flex: 1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--ink-15) 25%, rgba(3, 7, 18, .06) 50%, var(--ink-15) 75%); background-size: 200% 100%; animation: voice-shimmer 1.2s ease-in-out infinite; }
@keyframes voice-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.voice__retry { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 16px; color: #b91c1c; text-align: left; }
.voice__retry .material-icons { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .voice__spin, .voice__skeleton { animation: none; } .voice__btn, .voice__seek::-webkit-slider-thumb { transition: none; } }

/* Hub › Contatos (the WhatsApp address book) */
.ct-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--ink-15); }
.ct-tab { flex: 1; height: 28px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-60); transition: background-color .15s ease, color .15s ease; }
.ct-tab--on { background: #fff; color: var(--color-ink); box-shadow: 0 1px 2px rgba(3, 7, 18, .08); }
.ct-note { margin: 0; font-size: 11px; line-height: 16px; color: var(--ink-60); }
.ct-row { cursor: default; }
.ct-act { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ct-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ink-15); border-radius: 4px; background: transparent; color: var(--color-primary); cursor: pointer; transition: background-color .15s ease; }
.ct-btn:hover { background: var(--color-primary-soft); }
.ct-btn .material-icons { font-size: 16px; }
.ct-tag { padding: 1px 6px; border-radius: 99px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 10px; font-weight: 600; line-height: 14px; }
.ct-tag--biz { background: #eff6ff; color: #155dfc; }
.ct-more { margin: 8px auto; padding: 6px 14px; border: 1px solid var(--ink-15); border-radius: 99px; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--color-primary); }
.ct-spin { animation: tick-spin 1s linear infinite; }

/* Hub › Contatos: choosing what a WhatsApp group becomes (main group of an event, or a new event) */
.gp-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 28px 28px; box-sizing: border-box; }
.gp-field { display: flex; flex-direction: column; gap: 6px; }
.gp-field > span { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--ink-60); }
.gp-field select { height: 48px; box-sizing: border-box; padding: 12px 16px; border: 1px solid var(--ink-15); border-radius: 8px; background: #fff; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--color-ink); }
.gp-or { text-align: center; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--ink-60); }
.wa-spin { animation: tick-spin 1.2s linear infinite; }