:root {
      --whatsapp-primary: #25D366;
      --whatsapp-secondary: #128C7E;
      --whatsapp-dark: #075E54;
      --whatsapp-light: #ECF8EE;
      --notification-color: #FF3B30;
      --shadow-glow: 0 0 12px rgba(37, 211, 102, 0.5);
    }

    .whatsapp-container {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 10000;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .whatsapp-button {
      position: relative;
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--whatsapp-primary), var(--whatsapp-secondary));
      border-radius: 50%;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), var(--shadow-glow);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      z-index: 10;
    }

    .whatsapp-button:hover {
      transform: translateY(-4px) scale(1.05);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), var(--shadow-glow);
    }

    .whatsapp-button:active {
      transform: translateY(0) scale(0.98);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .whatsapp-button img {
      width: 36px;
      height: 36px;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
      transition: transform 0.2s ease;
    }

    .whatsapp-button:hover img {
      transform: scale(1.1);
    }

    .notification-dot {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      background-color: var(--notification-color);
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      animation: pulse 2s ease-in-out infinite;
      z-index: 20;
      display: none;
    }

    .message-bubble {
      position: absolute;
      bottom: 80px;
      right: 0;
      background: var(--whatsapp-light);
      color: var(--whatsapp-dark);
      padding: 12px 20px;
      border-radius: 16px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      font-size: 14px;
      font-weight: 500;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      max-width: 220px;
      line-height: 1.5;
      text-align: left;
      display: none;
      z-index: 15;
    }

    .message-bubble.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    .message-bubble::after {
      content: "";
      position: absolute;
      bottom: -8px;
      right: 16px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 8px 0 8px;
      border-color: var(--whatsapp-light) transparent transparent transparent;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
      }
      50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
      }
    }

    @media (max-width: 768px) {
      .whatsapp-container {
        bottom: 16px;
        right: 16px;
      }

      .whatsapp-button {
        width: 56px;
        height: 56px;
      }

      .whatsapp-button img {
        width: 32px;
        height: 32px;
      }

      .message-bubble {
        font-size: 13px;
        padding: 10px 16px;
        max-width: 180px;
      }

      .message-bubble::after {
        right: 12px;
      }
    }

    @media (prefers-color-scheme: dark) {
      .whatsapp-button {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), var(--shadow-glow);
      }

      .message-bubble {
        background: var(--whatsapp-dark);
        color: var(--whatsapp-light);
      }

      .message-bubble::after {
        border-color: var(--whatsapp-dark) transparent transparent transparent;
      }
    }