.dz-float {
  position: fixed;
  z-index: 9999;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font-family: var(--font, Arial, Helvetica, sans-serif);
  pointer-events: none;
  color: #f4f3f1;
}
.dz-float-bottom-left {
  right: auto;
  left: max(18px, env(safe-area-inset-left));
  align-items: flex-start;
}
.dz-float-menu[hidden],
.dz-float-panel[hidden] { display: none !important; }
.dz-float-btn,
.dz-float-menu,
.dz-float-panel,
.dz-float-action,
.dz-float-icon-btn,
.dz-float-send {
  pointer-events: auto;
  cursor: pointer;
}
.dz-float-btn {
  width: 60px;
  height: 60px;
  border: 1px solid #ec123b66;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ff4d6d44, transparent 42%),
    linear-gradient(180deg, #1c1014 0%, #0c0a0d 100%);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px #000a, 0 0 28px #ec123b40;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.dz-float-btn:hover,
.dz-float-btn[aria-expanded="true"] {
  transform: translateY(-2px);
  border-color: #ec123b99;
  box-shadow: 0 14px 32px #000b, 0 0 22px #ec123b40;
}
.dz-float button,
.dz-float a,
.dz-float textarea {
  outline: none;
}
.dz-float button:focus-visible,
.dz-float a:focus-visible,
.dz-float textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #0a0a0b, 0 0 0 3px #ec123b99;
}
.dz-float-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 248px;
  animation: dz-float-in .22s ease;
}
.dz-float-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #161318, #100e12);
  border: 1px solid #2c262b;
  color: #f4f3f1;
  text-align: left;
  box-shadow: 0 14px 30px #0008;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.dz-float-action-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-float-action strong { font-size: 13px; font-weight: 700; }
.dz-float-action small { color: #8e8d93; font-size: 11px; }
.dz-float-action:hover {
  border-color: #3a3238;
  transform: translateY(-1px);
}
.dz-float-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ec123b;
  color: #fff;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.dz-float-action-wa { background: #128c7e; color: #fff; }
.dz-float-panel {
  width: min(390px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 104px));
  display: flex;
  flex-direction: column;
  background: #0c0b0f;
  border: 1px solid #32262c;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 64px #000d, 0 0 0 1px #ec123b18;
  animation: dz-float-in .24s ease;
}
.dz-float-wa { height: min(420px, calc(100dvh - 120px)); }
.dz-float-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 13px;
  background:
    radial-gradient(circle at 0 0, #ec123b22, transparent 55%),
    linear-gradient(180deg, #191116, #110d11);
  border-bottom: 1px solid #2c2328;
}
.dz-float-head-wa {
  background:
    radial-gradient(circle at 0 0, #25d36622, transparent 55%),
    linear-gradient(180deg, #121814, #0e120f);
  border-bottom-color: #1f3328;
}
.dz-float-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dz-float-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, #ff5a76, #ec123b 58%, #9c0d2a);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 0 0 2px #ec123b33, 0 6px 16px #ec123b33;
}
.dz-float-avatar-wa {
  background: radial-gradient(circle at 30% 25%, #4ae082, #128c7e);
  box-shadow: 0 0 0 2px #25d36633;
}
.dz-float-head h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.3px;
}
.dz-float-head p {
  margin: 3px 0 0;
  color: #9a9196;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dz-float-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  display: inline-block;
}
.dz-float-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #ffffff18;
  background: #ffffff08;
  color: #ddd;
  font-size: 22px;
  line-height: 1;
}
.dz-float-messages {
  flex: 1;
  overflow: auto;
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at top, #ec123b0d, transparent 48%),
    linear-gradient(180deg, #0e0c10, #0a090c);
}
.dz-float-wa .dz-float-messages {
  background:
    radial-gradient(ellipse at top, #25d36610, transparent 50%),
    linear-gradient(180deg, #0e120f, #0a0d0b);
}
.dz-float-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}
.dz-float-row.user { align-self: flex-end; flex-direction: row-reverse; }
.dz-float-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ec123b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex: 0 0 auto;
}
.dz-float-bubble {
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.dz-float-bubble.user {
  background: linear-gradient(180deg, #f01b44, #c10f32);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.dz-float-bubble.ai,
.dz-float-bubble.wa {
  background: #17141a;
  border: 1px solid #2b262c;
  color: #ece8ec;
  border-bottom-left-radius: 5px;
}
.dz-float-wa .dz-float-bubble.wa {
  background: #14201a;
  border-color: #1e3a2c;
}
.dz-float-typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  align-self: flex-start;
  background: #17141a;
  border: 1px solid #2b262c;
  border-radius: 16px;
}
.dz-float-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ec123b;
  animation: dz-float-dot 1s infinite;
}
.dz-float-typing i:nth-child(2) { animation-delay: .15s; }
.dz-float-typing i:nth-child(3) { animation-delay: .3s; }
.dz-float-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #2a2328;
  background: #0b0a0d;
}
.dz-float-wa .dz-float-form { border-top-color: #1e3328; background: #0b100d; }
.dz-float-form textarea {
  flex: 1;
  min-height: 44px;
  max-height: 110px;
  resize: none;
  border-radius: 16px;
  border: 1px solid #ffffff16;
  background: #141217;
  color: #f4f3f1;
  padding: 11px 13px;
  font-size: 14px;
}
.dz-float-form textarea:focus {
  outline: 0;
  border-color: #ec123b88;
  box-shadow: 0 0 0 3px #ec123b18;
}
.dz-float-wa .dz-float-form textarea:focus {
  border-color: #25d36688;
  box-shadow: 0 0 0 3px #25d36618;
}
.dz-float-send {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #f3224a, #c10f32);
  color: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px #ec123b44;
}
.dz-float-send-wa { background: linear-gradient(180deg, #2ee472, #128c7e); box-shadow: 0 8px 18px #128c7e44; }
.dz-float-send:disabled { opacity: .55; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@keyframes dz-float-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes dz-float-dot {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
@media (max-width: 700px) {
  .dz-float {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .dz-float-panel {
    width: min(100vw - 24px, 390px);
    height: min(70dvh, calc(100dvh - 96px));
  }
  .dz-float-wa { height: min(58dvh, calc(100dvh - 110px)); }
  .dz-float-btn { width: 56px; height: 56px; }
}
@supports (height: 100svh) {
  .dz-float-panel { height: min(560px, calc(100svh - 104px)); }
  .dz-float-wa { height: min(420px, calc(100svh - 120px)); }
}