/* MEDBR WhatsApp Leads - styles scoped to the widget root.
   6 skins activated by classes on the root element:
   theme:      wf-light | wf-dark
   treatment:  wf-contorno | wf-texto | wf-agrupado */

:where(.ww-widget){
  --ww-width:360px;
  --ww-fab-size:60px;
  --ww-z:99998;
  --ww-accent:#16a37a;
  --ww-whatsapp:#16a37a;
  --ww-whatsapp-focus:#16a37a;
  --ww-fab-icon:#ffffff;
  --ww-avatar-bg:#0e2a45;
  --ww-avatar-icon:#ffffff;
  --ww-error:#d9534f;
  --ww-radius-modal:22px;
  --ww-radius-control:12px;
  --ww-radius-chip:11px;
  --ww-radius-segment:13px;
  --ww-radius-segment-chip:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
:where(.ww-widget.wf-light){
  --ww-text:#1f2933;
  --ww-text-soft:#8b97a3;
  --ww-border:#e4e8ec;
  --ww-surface:#ffffff;
  --ww-surface-input:#ffffff;
  --ww-surface-2:#f6f7f8;
  --ww-chip-selected-surface:#ffffff;
  --ww-on-whatsapp:#ffffff;
  --ww-send-weight:500;
  --ww-accent-deep:#117a5c;
  --ww-accent-soft:#e3f4ef;
  --ww-close-bg:#f0f2f4;
  --ww-close-text:#6b7682;
  --ww-overlay:rgba(15,23,32,.45);
  --ww-modal-border:transparent;
  --ww-modal-shadow:0 16px 50px rgba(15,23,32,.30);
  --ww-fab-shadow:0 6px 20px rgba(20,30,40,.22);
  --ww-foot-text:#aab4bd;
  --ww-placeholder:#aab4bd;
  --ww-outline-chip-bg:#ffffff;
  --ww-outline-chip-text:#4a5560;
  --ww-outline-chip-hover-border:#c6cdd4;
  --ww-text-chip:#7a838d;
  --ww-text-chip-hover:#3a444e;
  --ww-grouped-chip:#69727c;
  --ww-grouped-chip-hover:#3a444e;
  --ww-grouped-chip-shadow:0 1px 3px rgba(20,30,40,.10);
  --ww-grouped-chip-border-width:0;
  --ww-grouped-chip-border:transparent;
}
:where(.ww-widget.wf-dark){
  --ww-text:#e7eaee;
  --ww-text-soft:#8b95a1;
  --ww-border:#2a313b;
  --ww-surface:#161b22;
  --ww-surface-input:#1b212a;
  --ww-surface-2:#1c232c;
  --ww-chip-selected-surface:#222b35;
  --ww-on-whatsapp:#04130d;
  --ww-send-weight:600;
  --ww-accent-deep:#73c8af;
  --ww-accent-soft:rgba(22,163,122,.16);
  --ww-close-bg:#222b35;
  --ww-close-text:#8b95a1;
  --ww-overlay:rgba(4,8,12,.6);
  --ww-modal-border:#20272f;
  --ww-modal-shadow:0 16px 50px rgba(0,0,0,.55);
  --ww-fab-shadow:0 6px 22px rgba(0,0,0,.55);
  --ww-foot-text:#6b7682;
  --ww-placeholder:#6b7682;
  --ww-outline-chip-bg:#1b212a;
  --ww-outline-chip-text:#c4ccd4;
  --ww-outline-chip-hover-border:#3a434e;
  --ww-outline-chip-hover-bg:#212833;
  --ww-text-chip:#94a0ac;
  --ww-text-chip-hover:#cfd6dd;
  --ww-grouped-border:#232a33;
  --ww-grouped-chip:#9aa5b1;
  --ww-grouped-chip-hover:#cfd6dd;
  --ww-grouped-chip-shadow:0 1px 3px rgba(0,0,0,.45);
  --ww-grouped-chip-border-width:1px;
  --ww-grouped-chip-border:#303a45;
}

.ww-widget *{box-sizing:border-box;margin:0;padding:0}

/* ===== STRUCTURE (shared by all skins) ===== */
.ww-widget .wf-fab{position:fixed;right:22px;bottom:22px;z-index:var(--ww-z);width:var(--ww-fab-size);height:var(--ww-fab-size);border-radius:50%;border:none;cursor:pointer;background:var(--ww-whatsapp);color:var(--ww-fab-icon);display:flex;align-items:center;justify-content:center;box-shadow:var(--ww-fab-shadow);transition:transform .18s}
.ww-widget.wf-left .wf-fab{right:auto;left:22px}
.ww-widget .wf-fab:hover{transform:scale(1.06)}
.ww-widget .wf-fab svg{width:30px;height:30px;position:relative;z-index:2}
.ww-widget .wf-fab-pulse{position:absolute;inset:0;border-radius:50%;background:var(--ww-whatsapp);opacity:.45;animation:wf-pulse 2.4s ease-out infinite;z-index:1}
@keyframes wf-pulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

.ww-widget .wf-overlay{position:fixed;inset:0;z-index:calc(var(--ww-z) + 1);background:var(--ww-overlay);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:flex-end;padding:20px;animation:wf-fade .2s ease}
.ww-widget.wf-left .wf-overlay{justify-content:flex-start}
.ww-widget .wf-overlay[hidden]{display:none}
@keyframes wf-fade{from{opacity:0}to{opacity:1}}

.ww-widget .wf-modal{position:relative;width:var(--ww-width);max-width:100%;max-height:88vh;background:var(--ww-surface);border:1px solid var(--ww-modal-border);border-radius:var(--ww-radius-modal);overflow:hidden;box-shadow:var(--ww-modal-shadow);display:flex;flex-direction:column;animation:wf-rise .26s cubic-bezier(.4,0,.2,1);margin-bottom:80px}
@keyframes wf-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.ww-widget .wf-close{position:absolute;top:14px;right:14px;z-index:3;width:30px;height:30px;border:none;border-radius:50%;cursor:pointer;background:var(--ww-close-bg);color:var(--ww-close-text);display:flex;align-items:center;justify-content:center}
.ww-widget .wf-close svg{width:17px;height:17px}

.ww-widget .wf-head{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;flex:0 0 auto}
.ww-widget .wf-avatar{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:var(--ww-avatar-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ww-widget .wf-avatar svg{width:20px;height:20px;color:var(--ww-avatar-icon);opacity:.9}
.ww-widget .wf-name{font-size:15px;font-weight:600;color:var(--ww-text);line-height:1.2}
.ww-widget .wf-status{font-size:12px;color:var(--ww-text-soft);margin-top:2px}

.ww-widget .wf-body{flex:1 1 auto;overflow-y:auto;padding:6px 20px 8px}
.ww-widget .wf-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ww-text-soft);font-weight:500;margin:18px 0 9px}
.ww-widget .wf-label:first-child{margin-top:6px}
.ww-widget .wf-req{color:var(--ww-accent);margin-left:2px}

.ww-widget input[type=text]{width:100%;border:1px solid var(--ww-border);border-radius:var(--ww-radius-control);padding:13px 14px;font-size:16px;color:var(--ww-text);background:var(--ww-surface-input);transition:border-color .15s}
.ww-widget input[type=text]::placeholder{color:var(--ww-placeholder)}
.ww-widget input[type=text]:focus{outline:none;border-color:var(--ww-accent)}
.ww-widget .wf-err{color:var(--ww-error);font-size:12.5px;margin-top:8px;display:none}
.ww-widget .wf-err.wf-show{display:block}

.ww-widget .wf-actions{flex:0 0 auto;padding:14px 20px 4px}
.ww-widget .wf-send{width:100%;border:none;background:var(--ww-whatsapp);color:var(--ww-on-whatsapp);font-size:15px;font-weight:var(--ww-send-weight);border-radius:13px;padding:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:filter .15s}
.ww-widget .wf-send:hover{filter:brightness(.96)}
.ww-widget .wf-send svg{width:18px;height:18px}
.ww-widget .wf-foot{flex:0 0 auto;text-align:center;font-size:11.5px;color:var(--ww-foot-text);padding:8px 20px 16px}

/* ===== TREATMENT: OUTLINE ===== */
.ww-widget.wf-contorno .wf-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ww-widget.wf-contorno .wf-chip{border:1px solid var(--ww-border);background:var(--ww-outline-chip-bg);color:var(--ww-outline-chip-text);border-radius:var(--ww-radius-chip);padding:9px 15px;font-size:14px;cursor:pointer;transition:all .15s;line-height:1.3}
.ww-widget.wf-contorno .wf-chip:hover{border-color:var(--ww-outline-chip-hover-border)}
.ww-widget.wf-dark.wf-contorno .wf-chip:hover{background:var(--ww-outline-chip-hover-bg)}
.ww-widget.wf-contorno .wf-chip.wf-sel{border-color:var(--ww-accent);background:var(--ww-accent-soft);color:var(--ww-accent-deep);font-weight:500}

/* ===== TREATMENT: TEXT ===== */
.ww-widget.wf-texto .wf-opts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.ww-widget.wf-texto .wf-chip{border:none;background:none;font-size:14.5px;padding:4px 0;cursor:pointer;position:relative;transition:color .15s;color:var(--ww-text-chip)}
.ww-widget.wf-texto .wf-chip:hover{color:var(--ww-text-chip-hover)}
.ww-widget.wf-texto .wf-chip.wf-sel{color:var(--ww-accent-deep);font-weight:500}
.ww-widget.wf-light.wf-texto .wf-chip.wf-sel{color:var(--ww-accent)}
.ww-widget.wf-texto .wf-chip.wf-sel::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--ww-accent);border-radius:2px}

/* ===== TREATMENT: GROUPED ===== */
.ww-widget.wf-agrupado .wf-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ww-widget.wf-agrupado .wf-seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--ww-surface-2);border-radius:var(--ww-radius-segment);padding:4px}
.ww-widget.wf-dark.wf-agrupado .wf-seg{border:1px solid var(--ww-grouped-border)}
.ww-widget.wf-agrupado .wf-seg .wf-chip{border:none;background:none;border-radius:var(--ww-radius-segment-chip);padding:9px 14px;font-size:14px;cursor:pointer;transition:all .15s;line-height:1.3;color:var(--ww-grouped-chip)}
.ww-widget.wf-agrupado .wf-seg .wf-chip:hover{color:var(--ww-grouped-chip-hover)}
.ww-widget.wf-agrupado .wf-seg .wf-chip.wf-sel{background:var(--ww-chip-selected-surface);color:var(--ww-accent-deep);font-weight:500;box-shadow:var(--ww-grouped-chip-shadow);border:var(--ww-grouped-chip-border-width) solid var(--ww-grouped-chip-border)}

/* ===== PRIVACY NOTICE ===== */
.ww-widget .wf-consent{padding:4px 20px 0;font-size:12px;color:var(--ww-text-soft);line-height:1.5}
.ww-widget .wf-consent a{color:var(--ww-accent);text-decoration:underline}
.ww-widget .wf-consent-row{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.ww-widget .wf-consent-check{margin-top:2px;flex:0 0 auto}
.ww-widget .wf-consent .wf-err{margin-top:6px}

/* ===== KEYBOARD FOCUS (a11y) ===== */
.ww-widget .wf-close:focus-visible,
.ww-widget .wf-chip:focus-visible,
.ww-widget input:focus-visible{outline:2px solid var(--ww-accent);outline-offset:2px}
.ww-widget .wf-fab:focus-visible,
.ww-widget .wf-send:focus-visible{outline:2px solid var(--ww-whatsapp-focus);outline-offset:2px}

/* ===== RESPONSIVE + MOTION ===== */
@media (max-width:420px){
  .ww-widget .wf-overlay{padding:0;align-items:flex-end}
  .ww-widget .wf-modal{width:100%;max-height:92vh;margin-bottom:0;border-radius:22px 22px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .ww-widget .wf-overlay,.ww-widget .wf-modal{animation:none}
  .ww-widget .wf-fab-pulse{display:none}
}
