/* ==========================================================================
   WhatsApp Chat Widget — self-contained stylesheet
   Every rule is scoped under .wcw-root so this file cannot leak into, or be
   overridden by, the host site's CSS (and vice versa). Do not add any
   selector to this file that isn't prefixed with "wcw-".
   ========================================================================== */

.wcw-root, .wcw-root * , .wcw-root *::before, .wcw-root *::after {
  box-sizing: border-box;
}

.wcw-root {
  /* Local design tokens — overridden inline per-install from the JS config,
     these are just sane fallbacks if a value is ever missing. */
  --wcw-button-color: #25d366;
  --wcw-button-color-dark: #1da851;
  --wcw-header-color: #101012;
  --wcw-accent-color: #ff7a1f;
  --wcw-badge-color: #ff3b30;
  --wcw-radius: 16px;
  --wcw-offset-desktop: 24px;
  --wcw-offset-mobile: 24px;
  --wcw-z: 999999;

  all: initial;
  font-family: inherit;
  color: #1b1b1d;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wcw-root, .wcw-root :where(button, input, textarea) {
  font-family: var(--wcw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* :where() keeps this reset at zero extra specificity, so every specific
   component rule below (.wcw-launcher, .wcw-send, .wcw-quick-reply, ...)
   can override it without a specificity fight — a plain "button" reset
   like this one used to silently beat those single-class rules. */
.wcw-root :where(button) {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
}

.wcw-root ::selection { background: var(--wcw-accent-color); color: #fff; }

/* -------------------------------------------------------------------- */
/* Launcher button                                                       */
/* -------------------------------------------------------------------- */
.wcw-launcher {
  position: fixed;
  right: 20px;
  bottom: var(--wcw-offset-desktop);
  z-index: var(--wcw-z);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wcw-button-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, background 0.2s ease;
}
.wcw-root[data-wcw-position="left"] .wcw-launcher { right: auto; left: 20px; }

.wcw-launcher:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 3px 8px rgba(0, 0, 0, 0.2);
  background: var(--wcw-button-color-dark);
}
.wcw-launcher:active { transform: translateY(-1px) scale(0.98); }

.wcw-launcher:focus-visible {
  outline: 2px solid var(--wcw-accent-color);
  outline-offset: 3px;
}

.wcw-launcher svg { width: 30px; height: 30px; display: block; }
.wcw-launcher .wcw-icon-close { display: none; }
.wcw-root.wcw-is-open .wcw-launcher .wcw-icon-chat { display: none; }
.wcw-root.wcw-is-open .wcw-launcher .wcw-icon-close { display: block; }

.wcw-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--wcw-badge-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  animation: wcw-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}
.wcw-root[data-wcw-position="left"] .wcw-badge { right: auto; left: -2px; }
.wcw-root.wcw-badge-hidden .wcw-badge { display: none; }

@keyframes wcw-badge-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Gentle pulse ring to draw the eye without being obnoxious — runs once. */
.wcw-launcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--wcw-button-color);
  opacity: 0;
}
.wcw-root:not(.wcw-was-opened) .wcw-launcher::after {
  animation: wcw-pulse 2.2s ease-out 1.2s 2;
}
@keyframes wcw-pulse {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .wcw-launcher, .wcw-panel, .wcw-launcher::after, .wcw-badge { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------------- */
/* Panel                                                                  */
/* -------------------------------------------------------------------- */
.wcw-panel {
  position: fixed;
  right: 20px;
  bottom: calc(var(--wcw-offset-desktop) + 76px);
  z-index: var(--wcw-z);
  width: 368px;
  max-width: calc(100vw - 32px);
  max-height: min(600px, calc(100vh - var(--wcw-offset-desktop) - 76px - 16px));
  background: #fff;
  border-radius: var(--wcw-radius);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s linear 0.32s;
}
.wcw-root[data-wcw-position="left"] .wcw-panel { right: auto; left: 20px; transform-origin: bottom left; }

.wcw-root.wcw-is-open .wcw-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

/* Header */
.wcw-header {
  background: var(--wcw-header-color);
  background-image: linear-gradient(135deg, var(--wcw-header-color), color-mix(in srgb, var(--wcw-header-color) 80%, black));
  color: #fff;
  padding: 16px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 2px solid var(--wcw-accent-color);
}
.wcw-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.wcw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcw-avatar svg { width: 24px; height: 24px; }

.wcw-header-text { flex: 1; min-width: 0; padding-top: 1px; }
.wcw-header-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wcw-header-status {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  gap: 5px;
}
.wcw-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d566;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(52, 213, 102, 0.25);
}

.wcw-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, color 0.2s ease;
}
.wcw-close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.wcw-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wcw-close svg { width: 16px; height: 16px; }

/* Body / conversation area */
.wcw-body {
  background: #ece5dd;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.4) 0, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.3) 0, transparent 40%);
  padding: 16px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wcw-bubble {
  max-width: 86%;
  background: #fff;
  color: #1b1b1d;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 2px;
  font-size: 13.5px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  align-self: flex-start;
  animation: wcw-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.wcw-bubble-time {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  color: #8b8b8b;
  text-align: right;
}

@keyframes wcw-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wcw-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
  animation: wcw-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}
.wcw-quick-reply {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--wcw-header-color);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.wcw-quick-reply:hover { border-color: var(--wcw-button-color); background: #f4fbf6; transform: translateY(-1px); }
.wcw-quick-reply:focus-visible { outline: 2px solid var(--wcw-accent-color); outline-offset: 2px; }

/* Footer / input */
.wcw-footer {
  flex-shrink: 0;
  padding: 10px;
  background: #f7f5f1;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wcw-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 6px 6px 6px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wcw-input-row:focus-within {
  border-color: var(--wcw-button-color);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}
.wcw-input {
  flex: 1;
  border: none;
  resize: none;
  background: transparent;
  /* 16px is deliberate — iOS Safari auto-zooms the page on focus for any
     input with a smaller computed font-size, which is what was pushing the
     send button off-screen. */
  font-size: 16px;
  line-height: 1.4;
  color: #1b1b1d;
  padding: 6px 0;
  max-height: 90px;
  min-height: 22px;
}
.wcw-input:focus { outline: none; }
.wcw-input::placeholder { color: #9a9a9a; }

.wcw-send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--wcw-button-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease;
}
.wcw-send:hover { background: var(--wcw-button-color-dark); transform: scale(1.05); }
.wcw-send:active { transform: scale(0.95); }
.wcw-send:focus-visible { outline: 2px solid var(--wcw-accent-color); outline-offset: 2px; }
.wcw-send svg { width: 18px; height: 18px; margin-left: 2px; }

.wcw-disclaimer {
  margin: 8px 2px 0;
  font-size: 10.5px;
  color: #9a9a9a;
  text-align: center;
}

/* Visually-hidden helper for accessible labels */
.wcw-vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------- */
/* Mobile                                                                 */
/* -------------------------------------------------------------------- */
@media (max-width: 640px) {
  .wcw-launcher {
    right: 16px;
    bottom: var(--wcw-offset-mobile);
    width: 56px;
    height: 56px;
  }
  .wcw-root[data-wcw-position="left"] .wcw-launcher { right: auto; left: 16px; }

  .wcw-panel {
    right: 12px;
    left: 12px;
    bottom: calc(var(--wcw-offset-mobile) + 68px);
    width: auto;
    max-width: none;
    max-height: min(72vh, calc(100vh - var(--wcw-offset-mobile) - 68px - env(safe-area-inset-top, 0px) - 16px));
  }
  .wcw-root[data-wcw-position="left"] .wcw-panel { left: 12px; }
}

@media (max-width: 380px) {
  .wcw-header-status { display: none; }
}