.mg-fab {
  position: fixed;
  bottom: var(--mg-space-5);
  right: var(--mg-space-5);
  z-index: var(--mg-z-fab);
  font-family: var(--mg-font-body);
}

.mg-fab__button {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--mg-radius-pill);
  background: var(--mg-color-whatsapp);
  color: var(--mg-color-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mg-shadow-lg);
  transition: transform var(--mg-transition);
}
.mg-fab__button:hover { transform: scale(1.05); }

.mg-fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mg-color-whatsapp);
  z-index: -1;
  animation: mg-fab-pulse 8s var(--mg-ease) infinite;
}
@keyframes mg-fab-pulse {
  0%, 80%, 100% { transform: scale(1);   opacity: 0; }
  85%           { transform: scale(1);   opacity: 0.6; }
  95%           { transform: scale(1.6); opacity: 0; }
}

.mg-fab__panel {
  position: absolute;
  bottom: calc(60px + var(--mg-space-3));
  right: 0;
  width: min(340px, calc(100vw - var(--mg-space-5) * 2));
  background: var(--mg-bg);
  border-radius: var(--mg-radius-lg);
  box-shadow: var(--mg-shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  animation: mg-fab-in 200ms var(--mg-ease);
}
@keyframes mg-fab-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.mg-fab__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mg-space-3);
  padding: var(--mg-space-4) var(--mg-space-5);
  background: var(--mg-color-whatsapp);
  color: var(--mg-color-on-dark);
}
.mg-fab__title {
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-semibold);
  font-size: var(--mg-text-md);
  margin: 0;
  color: var(--mg-color-on-dark);
}
.mg-fab__subtitle {
  font-size: var(--mg-text-xs);
  color: var(--mg-on-dark-strong);
  margin: 0;
}
.mg-fab__close {
  width: 28px;
  height: 28px;
  border-radius: var(--mg-radius-pill);
  color: var(--mg-color-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--mg-transition);
}
.mg-fab__close:hover { background: var(--mg-on-dark-faint); }

.mg-fab__body {
  padding: var(--mg-space-5);
  background: color-mix(in srgb, var(--mg-color-whatsapp) 5%, var(--mg-bg));
}

.mg-fab__bubble {
  position: relative;
  background: var(--mg-bg);
  border-radius: var(--mg-radius-md);
  padding: var(--mg-space-3) var(--mg-space-4);
  font-size: var(--mg-text-sm);
  color: var(--mg-fg);
  margin-bottom: var(--mg-space-4);
  max-width: 80%;
  box-shadow: var(--mg-shadow-sm);
}
.mg-fab__bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--mg-bg);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.mg-fab__form {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-3);
}
.mg-fab__textarea {
  width: 100%;
  padding: var(--mg-space-3);
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-md);
  background: var(--mg-bg);
  font-family: var(--mg-font-body);
  font-size: var(--mg-text-sm);
  color: var(--mg-fg);
  resize: vertical;
  min-height: 80px;
}
.mg-fab__textarea:focus-visible {
  outline: 2px solid var(--mg-color-whatsapp);
  outline-offset: 1px;
  border-color: transparent;
}

.mg-fab__send {
  background: var(--mg-color-whatsapp);
  color: var(--mg-color-on-dark);
}
.mg-fab__send:hover {
  background: color-mix(in srgb, var(--mg-color-whatsapp) 85%, black);
  color: var(--mg-color-on-dark);
}

@media (max-width: 540px) {
  .mg-fab        { bottom: var(--mg-space-4); right: var(--mg-space-4); }
  .mg-fab__panel { width: calc(100vw - var(--mg-space-4) * 2); }
}