.wa-root {
  --wa-line:var(--line, var(--border));
  --wa-line-soft:var(--line-soft, var(--border));
  --wa-surface:var(--surface, #f8fbff);
  --wa-surface-soft:var(--surface-soft, #eef3f9);
  --wa-background:var(--surface-strong, #e7eef7);
  --wa-accent:var(--accent, var(--blue));
  --wa-accent-soft:var(--accent-soft, #e7f0fb);
  --wa-button:var(--primary, var(--blue));
  --wa-button-text:var(--primary-contrast, #fff);
  color:var(--text); min-width:0;
}
.wa-chat { display:grid; grid-template-columns:minmax(245px, 32%) minmax(0, 1fr); height:min(70dvh, 800px); min-height:400px; gap:0; }
.wa-chat button, .wa-chat textarea { font:inherit; color:inherit; border:1px solid var(--wa-line); border-radius:14px; background:var(--wa-surface-soft); }
.wa-chat button { cursor:pointer; min-height:44px; touch-action:manipulation; }
.wa-chat button:disabled, .wa-chat textarea:disabled { opacity:.55; cursor:default; }
.wa-chat button:focus-visible, .wa-chat textarea:focus-visible { outline:2px solid var(--blue, #1762ad); outline-offset:2px; }
.wa-chat svg { display:block; width:22px; height:22px; flex-shrink:0; }
.wa-contacts, .wa-conversation { min-width:0; min-height:0; border:0; border-radius:0; background:var(--wa-surface-soft); overflow:hidden; display:flex; flex-direction:column; }
.wa-contacts { border-right:1px solid var(--wa-line); }
.wa-conversation { position:relative; }
.wa-toolbar { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--wa-line-soft); flex-shrink:0; background:var(--wa-surface); }
.wa-toolbar strong { font-size:16px; font-weight:750; line-height:1.35; }
.wa-toolbar small { display:block; margin-top:4px; font-size:12px; color:var(--muted, #5d6e83); }
.wa-heading { min-width:0; flex:1; }
.wa-heading strong { overflow-wrap:anywhere; }
.wa-icon-button { width:44px; height:44px; flex-shrink:0; display:flex; justify-content:center; align-items:center; padding:0; }
.wa-contacts .wa-icon-button { margin-left:auto; }
.wa-connection::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--muted); vertical-align:middle; }
.wa-connection.is-connected::before { background:var(--success, #278250); }
.wa-contact-list { overflow:auto; padding:0; overscroll-behavior:contain; }
.wa-category h4 { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:10px 14px; background:var(--wa-background); color:var(--muted); font-size:12px; font-weight:700; }
.wa-category h4 span { font-variant-numeric:tabular-nums; }
.wa-category-empty { margin:0; padding:12px 14px; color:var(--muted); font-size:12px; }
.wa-contact-list .wa-contact { display:flex; align-items:center; gap:12px; text-align:left; width:100%; margin:0; padding:14px 12px; border:0; border-bottom:1px solid var(--wa-line-soft); border-radius:0; background:transparent; }
.wa-contact:hover, .wa-contact.is-selected { background:var(--wa-accent-soft); }
.wa-contact.is-selected { border-color:var(--wa-accent); }
.wa-avatar { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:42px; height:42px; border-radius:15px; color:var(--wa-accent); background:var(--wa-accent-soft); }
.wa-contact-info { flex:1; min-width:0; }
.wa-contact-info strong { display:block; font-size:14px; font-weight:700; }
.wa-unread { flex-shrink:0; min-width:22px; height:22px; box-sizing:border-box; padding:0 6px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:var(--wa-button); color:var(--wa-button-text); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.wa-preview { display:block; margin-top:6px; font-size:13px; color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.wa-chevron { font-size:24px; color:var(--muted); }
.wa-chat .wa-reactivate { margin-left:auto; padding:8px 10px; font-size:12px; font-weight:700; color:var(--wa-accent); border:0; background:var(--wa-accent-soft); flex-shrink:0; }
.wa-floating { position:absolute; z-index:1; left:12px; right:12px; bottom:12px; }
.wa-has-contact .wa-messages { padding-bottom:100px; }
.wa-chat .wa-assume { width:100%; min-height:50px; background:var(--wa-button); color:var(--wa-button-text); border:0; padding:12px 16px; font-size:14px; font-weight:700; box-shadow:var(--shadow); border-radius:var(--pill, 14px); }
.wa-messages { flex:1; min-height:0; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; }
.wa-day { align-self:center; flex-shrink:0; font-size:11px; color:var(--muted); background:var(--wa-background); border-radius:20px; padding:5px 12px; margin:5px 0 8px; }
.wa-message { align-self:flex-start; flex-shrink:0; max-width:88%; padding:10px 12px 8px; border-radius:4px 16px 16px; background:var(--wa-surface); border:1px solid var(--wa-line-soft); overflow-wrap:anywhere; box-shadow:var(--shadow-sm); }
.wa-message p { white-space:pre-wrap; margin:0 0 7px; font-size:15px; line-height:1.5; }
.wa-message footer { display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:10px; color:var(--muted); }
.wa-outgoing { align-self:flex-end; background:var(--wa-accent-soft); border-color:var(--wa-line-soft); border-radius:16px 4px 16px 16px; }
.wa-composer { display:flex; align-items:flex-end; padding:5px; gap:6px; border:1px solid var(--wa-line); border-radius:26px; background:var(--wa-surface); box-shadow:var(--shadow-md, var(--shadow)); }
.wa-composer textarea { flex:1; min-width:0; width:100%; box-sizing:border-box; resize:none; height:44px; min-height:44px; max-height:120px; padding:11px 10px; line-height:1.4; font-size:16px; background:transparent; border:0; border-radius:0; box-shadow:none; }
.wa-composer .wa-send { width:44px; height:44px; min-height:44px; border:0; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--wa-button); color:var(--wa-button-text); }
.wa-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px 20px; text-align:center; color:var(--muted); }
.wa-empty svg { width:38px; height:38px; color:var(--muted); }
.wa-empty strong { font-size:15px; color:var(--text); }
.wa-empty p { font-size:13px; line-height:1.6; max-width:270px; margin:0; }
.wa-feedback { flex-shrink:0; font-size:12px; line-height:1.5; color:var(--muted); background:var(--wa-surface-soft); border-radius:12px; padding:10px 12px; margin:8px 0 0; }
.wa-feedback:empty { display:none; }
.wa-back { display:none; }
/* The operational phone uses the available content height, including keyboard resizing. */
body[data-active-page="page-whatsapp"] .content-view { overflow:hidden; padding:var(--app-safe-top) 0 calc(var(--tabbar-height) + var(--app-safe-bottom)); }
#page-whatsapp.active, #clientWhatsAppContent { height:100%; min-height:0; }
#clientWhatsAppContent { display:flex; flex-direction:column; }
#clientWhatsAppContent .wa-chat { flex:1; min-height:0; height:auto; grid-template-columns:minmax(0,1fr); gap:0; }
#clientWhatsAppContent .wa-contacts, #clientWhatsAppContent .wa-conversation { border:0; border-radius:0; }
#clientWhatsAppContent .wa-contact-list { padding:0; }
#clientWhatsAppContent .wa-contact { border-radius:0; margin:0; padding:12px 16px; }
#clientWhatsAppContent .wa-feedback { margin:0; border-radius:0; padding:6px 12px; }
#clientWhatsAppContent .wa-chat:not(.wa-selected) .wa-conversation, #clientWhatsAppContent .wa-selected .wa-contacts { display:none; }
#clientWhatsAppContent .wa-back { display:flex; }
#clientWhatsAppContent .wa-contact-info strong { font-size:15px; }
#atendimentoWhatsappView .atendimento-panel { gap:0; padding:0; }
#atendimentoWhatsappView .panel-card__header { padding:16px; border-bottom:1px solid var(--wa-line, var(--line)); }
#atendimentoWhatsappView .wa-root { display:flex; flex-direction:column; }
#atendimentoWhatsappView .wa-chat { flex:1; min-height:0; height:100%; }
@media(max-width:1080px) {
  #atendimentoWhatsappView .wa-chat { flex:none; height:70dvh; min-height:360px; }
}
@media(max-width:650px) {
  .wa-chat { grid-template-columns:minmax(0,1fr); min-height:360px; height:65dvh; gap:0; }
  .wa-chat:not(.wa-selected) .wa-conversation, .wa-selected .wa-contacts { display:none; }
  .wa-back { display:flex; }
  .wa-toolbar { padding:10px 12px; }
  .wa-toolbar strong { font-size:15px; }
  .wa-messages { padding:12px; }
}