:root{
  --wa-green:#25D366;
  --wa-green-600:#16a34a;
  --wa-red-50:#fee2e2;
  --wa-red-600:#dc2626;
  --wa-gray-50:#f8fafc;
  --wa-gray-100:#f1f5f9;
  --wa-gray-200:#e5e7eb;
  --wa-gray-300:#d1d5db;
  --wa-gray-600:#475569;
  --wa-text:#1f2937;
  --shadow-lg:0 16px 40px rgba(2,6,23,.20), 0 4px 12px rgba(2,6,23,.08);
  --radius-xl:18px;
  --radius-2xl:22px;
  --radius-full:999px;
  font-synthesis-weight: none;
}

/* FAB */
.wa-fab-wrap{position:fixed; bottom:22px; left:22px; z-index:2147483646; pointer-events:auto}
.wa-fab{position:relative; width:56px; height:56px; border:none; cursor:pointer; display:grid; place-items:center; border-radius:var(--radius-full); background:var(--wa-green); box-shadow:0 6px 16px rgba(22,163,74,.38)}
.wa-fab svg{width:26px;height:26px;fill:#fff;pointer-events:none}
.wa-fab.pulse::before,.wa-fab.pulse::after{content:""; position:absolute; inset:-8px; border-radius:var(--radius-full); background:rgba(37,211,102,.18); animation:wa-pulse 2.2s ease-out infinite}
.wa-fab.pulse::after{ inset:-16px; background:rgba(37,211,102,.10); animation-delay:.7s }
@keyframes wa-pulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.15);opacity:.15}100%{opacity:0;transform:scale(1.25)}}

/* BACKDROP + MODAL */
.wa-backdrop{position:fixed; inset:0; background:rgba(2,6,23,.48); display:none; align-items:center; justify-content:center; z-index:2147483647; backdrop-filter:saturate(120%) blur(2px)}
.wa-backdrop[aria-hidden="false"]{display:flex}
.wa-modal{width:min(640px, 92vw); background:#fff; color:var(--wa-text); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-lg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; position:relative}

/* CLOSE */
.wa-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border-radius:10px; background:#fff; border:1px solid var(--wa-gray-200);
  color:#0f172a; display:grid; place-items:center; font-size:18px; line-height:0;
  cursor:pointer; z-index:9999; box-shadow:0 2px 6px rgba(0,0,0,.08); transition:background .2s ease;
}
.wa-close:hover{ background:#f8fafc }

/* HEADER */
.wa-body{ padding:14px 18px 18px 18px }
.wa-header{
  display:flex; align-items:center; gap:12px;
  flex-wrap:wrap;                          /* saatler alt satıra insin */
  padding:18px 18px 14px 18px;
  padding-right:56px;                      /* X butonuyla çakışma olmasın */
  border-bottom:1px solid var(--wa-gray-100);
}

/* LOGO (default yuvarlak) */
.wa-logo{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:linear-gradient(180deg,#22c55e,#16a34a); position:relative; isolation:isolate; overflow:hidden
}
.wa-logo::after{content:""; position:absolute; inset:3px; border-radius:999px; background:linear-gradient(180deg,#35dc74,#20b458); filter:blur(.2px); z-index:-1}
.wa-logo svg{ width:22px; height:22px; fill:#fff }
.wa-logo img{ width:100%; height:100%; object-fit:cover; display:block }

/* LOGO + METİN BLOĞU (logo üstte, metin altta) */
.wa-logo-block{ display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.wa-title-group{ line-height:1.3 }
.wa-title{ font-weight:600; font-size:16px }
.wa-sub{ font-size:13px; color:#6b7280 }

/* Logo yüklenmişse düz göster (marka logosu) */
.wa-logo.has-img{ width:auto; height:42px; background:transparent; border-radius:0; overflow:visible }
.wa-logo.has-img::after{ display:none }
.wa-logo.has-img svg{ display:none }
.wa-logo.has-img img{ height:30px; width:auto; display:block; object-fit:contain; border-radius:0 }

/* ROZET */
.wa-badge{
  margin-left:auto; font-size:12px; font-weight:700; padding:7px 12px; border-radius:999px;
  background:var(--wa-gray-100); color:#111827; white-space:nowrap; border:1px solid var(--wa-gray-200);
}
.wa-badge.online{ background:#dcfce7; border-color:#bbf7d0; color:#065f46 }
.wa-badge.offline{ background:var(--wa-red-50); border-color:#fecaca; color:var(--wa-red-600) }

/* ÇALIŞMA SAATLERİ — tam genişlik şerit */
.wa-hours{
  order:3;                 /* header içinde alt satırda kalsın */
  width:100%; min-width:0; max-width:100%; box-sizing:border-box;
  background:#ecfdf5; border:1px solid #d1fae5; color:#064e3b;
  padding:10px 14px; border-radius:12px; margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.wa-hours>strong{ font-size:13px; font-weight:700; letter-spacing:.3px; margin:0; flex:0 0 auto }
.wa-hours .wa-hours-body{ font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* NOTE */
.wa-note{
  font-size:12px; color:#9ca3af; background:#fff; border:1px dashed var(--wa-gray-300);
  padding:8px 10px; border-radius:12px; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.wa-note::before{ content:"•"; color:#f97316; font-weight:900; display:inline-block; transform:translateY(-1px) }

/* AGENT BUBBLE */
.wa-agent{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 10px }
.wa-agent .bubble{ background:#f8fafc; border:1px solid var(--wa-gray-200); padding:12px 14px; border-radius:14px; font-size:14px; color:#374151; box-shadow:0 1px 0 rgba(15,23,42,.04) inset }

/* FORM */
.wa-label{ font-size:13px; color:#374151; margin:4px 0 6px }
.wa-input{ margin-top:4px; position:relative }
.wa-textarea{
  width:100%; min-height:104px; resize:vertical; padding:12px 48px 12px 12px; font:inherit;
  background:#fff; border:1.5px solid var(--wa-gray-200); border-radius:14px; outline:none; transition:border .15s, box-shadow .15s;
}
.wa-textarea:hover{ border-color:#cbd5e1 }
.wa-textarea:focus{ border-color:#86efac; box-shadow:0 0 0 4px rgba(34,197,94,.12) }
.wa-attach{ position:absolute; left:12px; bottom:12px; width:22px; height:22px; opacity:.55 }

/* ACTIONS */
.wa-actions{ margin-top:14px; display:flex; gap:10px; justify-content:flex-end; align-items:center }
.wa-footer-note{ font-size:12px; color:#64748b; margin-right:auto }
.wa-btn{ cursor:pointer; border:none; border-radius:12px; padding:12px 16px; font-weight:800; letter-spacing:.2px; transition:filter .15s, transform .02s }
.wa-btn:active{ transform:translateY(1px) }
.wa-btn.secondary{ background:#eef2f7; color:#0f172a; border:1px solid #e2e8f0 }
.wa-btn.secondary:hover{ filter:brightness(.98) }
.wa-btn.primary{ background:linear-gradient(180deg, var(--wa-green), var(--wa-green-600)); color:#fff; display:inline-flex; align-items:center; gap:10px; padding-inline:18px; box-shadow:0 10px 18px rgba(34,197,94,.28) }
.wa-btn.primary svg{ width:18px; height:18px; fill:#fff }
.wa-btn.primary:hover{ filter:saturate(110%) }

/* RESPONSIVE */
@media (max-width:640px){
  .wa-header{ padding-right:56px }
  .wa-hours{ border-radius:10px; font-size:12.5px }
  .wa-hours .wa-hours-body{ white-space:normal }
}