.justwa-widget {
  --justwa-bg: #25D366;
  --justwa-text: #ffffff;
  --justwa-icon-bg: #ffffff;
  --justwa-icon: #25D366;
  --justwa-shadow: rgba(37, 211, 102, .35);
  position: fixed;
  z-index: var(--justwa-z);
  bottom: var(--justwa-bottom);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.justwa-right {
  right: var(--justwa-side);
  align-items: flex-end;
}

.justwa-left {
  left: var(--justwa-side);
  align-items: flex-start;
}

.justwa-button {
  border: 0;
  cursor: pointer;
  background: var(--justwa-bg);
  color: var(--justwa-text);
  border-radius: var(--justwa-button-radius);
  padding: var(--justwa-padding-y) var(--justwa-padding-x);
  display: inline-flex;
  align-items: center;
  gap: var(--justwa-gap);
  box-shadow: 0 18px 40px var(--justwa-shadow);
  font-weight: var(--justwa-font-weight);
  font-size: var(--justwa-font-size);
  line-height: 1;
  text-decoration: none;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.justwa-button:hover,
.justwa-button:focus {
  color: var(--justwa-text);
  transform: translateY(-2px);
  filter: brightness(.98);
  box-shadow: 0 24px 52px var(--justwa-shadow);
  text-decoration: none;
}

.justwa-icon {
  width: var(--justwa-icon-size);
  height: var(--justwa-icon-size);
  min-width: var(--justwa-icon-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--justwa-icon-bg);
  color: var(--justwa-icon);
}

.justwa-icon svg {
  width: var(--justwa-icon-svg-size);
  height: var(--justwa-icon-svg-size);
  display: block;
}

.justwa-label {
  white-space: nowrap;
}

.justwa-shape-circle .justwa-button {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
}

.justwa-shape-circle .justwa-label {
  display: none;
}

.justwa-shape-circle .justwa-icon {
  width: 44px;
  height: 44px;
}

.justwa-shape-square .justwa-button {
  border-radius: 18px;
}

.justwa-panel {
  width: min(360px, calc(100vw - 44px));
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: var(--justwa-panel-radius);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
  padding: 18px;
  display: none;
}

.justwa-widget.is-open .justwa-panel {
  display: block;
}

.justwa-agent {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.justwa-avatar {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #dcfce7;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #067647;
  font-weight: 950;
  font-size: 20px;
}

.justwa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.justwa-agent strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
}

.justwa-agent p {
  margin: 2px 0;
  color: #475569;
  font-size: 13px;
}

.justwa-agent small {
  color: #64748b;
}

.justwa-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.justwa-form input {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 42px;
}

.justwa-message-preview {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
  margin: 12px 0;
}

.justwa-message-preview span {
  display: block;
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.justwa-message-preview p {
  color: #0f172a;
  margin: 6px 0 0;
  font-size: 13px;
}

.justwa-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 950;
}

.justwa-open svg {
  width: 22px;
  height: 22px;
}

.justwa-open:hover,
.justwa-open:focus {
  color: #fff;
  background: #1ebe5d;
}

@media (max-width: 480px) {
  .justwa-widget {
    bottom: 16px;
  }

  .justwa-right {
    right: 16px;
  }

  .justwa-left {
    left: 16px;
  }

  .justwa-button {
    padding: 11px 15px 11px 11px;
  }
}


.justwa-icon-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.justwa-shape-circle .justwa-button {
  padding: 0;
}

.justwa-shape-circle .justwa-icon {
  background: transparent;
  color: var(--justwa-text);
}


/* Just WhatsApp v1.3.0 modern effects - CSS only, lightweight */
.justwa-widget {
  --justwa-glow-alpha: calc(var(--justwa-glow-intensity) / 100);
}

.justwa-effect-none .justwa-button {
  box-shadow: none;
}

.justwa-effect-soft-glow .justwa-button {
  box-shadow:
    0 14px 32px rgba(15, 23, 42, .14),
    0 0 calc(var(--justwa-glow-intensity) * 1px) color-mix(in srgb, var(--justwa-bg) calc(var(--justwa-glow-intensity) * 1%), transparent);
}

.justwa-effect-halo .justwa-button {
  box-shadow:
    0 16px 36px rgba(15, 23, 42, .14),
    0 0 0 7px color-mix(in srgb, var(--justwa-bg) 14%, transparent),
    0 0 calc(var(--justwa-glow-intensity) * .85px) color-mix(in srgb, var(--justwa-bg) 45%, transparent);
}

.justwa-effect-glass .justwa-button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--justwa-bg) 35%, transparent);
}

.justwa-effect-glass .justwa-button::before {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events: none;
}

.justwa-effect-depth .justwa-button {
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--justwa-bg) 74%, #000),
    0 20px 42px rgba(15, 23, 42, .18);
}

.justwa-hover-lift .justwa-button:hover,
.justwa-hover-lift .justwa-button:focus {
  transform: translateY(-2px) scale(1.01);
}

.justwa-pulse .justwa-button {
  animation: justwaPulse var(--justwa-pulse-speed) ease-in-out infinite;
}

@keyframes justwaPulse {
  0%, 100% {
    box-shadow:
      0 14px 32px rgba(15, 23, 42, .14),
      0 0 0 0 color-mix(in srgb, var(--justwa-bg) 34%, transparent);
  }
  50% {
    box-shadow:
      0 16px 38px rgba(15, 23, 42, .16),
      0 0 0 10px color-mix(in srgb, var(--justwa-bg) 0%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .justwa-pulse .justwa-button {
    animation: none;
  }

  .justwa-button {
    transition: none;
  }
}

/* Avatar adapts to button shape */
.justwa-icon-avatar {
  padding: 0;
  overflow: hidden;
  background: var(--justwa-icon-bg);
}

.justwa-icon-avatar img {
  display: block;
}

.justwa-avatar-fit-cover .justwa-icon-avatar img {
  object-fit: cover;
}

.justwa-avatar-fit-contain .justwa-icon-avatar img {
  object-fit: contain;
  background: var(--justwa-icon-bg);
}

.justwa-avatar-sync.justwa-shape-circle .justwa-icon-avatar {
  border-radius: 50%;
}

.justwa-avatar-sync.justwa-shape-square .justwa-icon-avatar {
  border-radius: min(14px, var(--justwa-button-radius));
}

.justwa-avatar-sync.justwa-shape-pill .justwa-icon-avatar {
  border-radius: 999px;
}

.justwa-shape-circle.justwa-avatar-sync .justwa-icon-avatar {
  width: 100%;
  height: 100%;
}

.justwa-shape-circle.justwa-avatar-sync .justwa-button {
  overflow: hidden;
}

.justwa-shape-circle.justwa-avatar-sync .justwa-icon-avatar img {
  width: 100%;
  height: 100%;
}

.justwa-shape-pill.justwa-avatar-sync .justwa-icon-avatar,
.justwa-shape-square.justwa-avatar-sync .justwa-icon-avatar {
  border: 2px solid color-mix(in srgb, var(--justwa-text) 18%, transparent);
}