:root {
      --green: #25D366;
      --green-dark: #1ebe59;
      --green-glow: rgba(37, 211, 102, 0.25);
      --bg: #0e1117;
      --surface: #161b22;
      --surface2: #1c2330;
      --border: rgba(255,255,255,0.07);
      --text: #e6edf3;
      --text-muted: #7d8590;
      --radius: 14px;
      --font: 'DM Sans', sans-serif;
    }

  

    .demo-bg {
      font-family: var(--font);
      color: #999;
      font-size: 14px;
      text-align: center;
    }

    /* ── Toggle Button ── */
    #open-chat {
     Position: static;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--green);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px var(--green-glow), 0 2px 8px rgba(0,0,0,0.3);
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
      z-index: 999;
    }
    #open-chat:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 28px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.3);
    }
    #open-chat svg { transition: transform 0.3s ease; }
    #open-chat.open svg { transform: rotate(90deg); }

    /* Pulse ring */
    #open-chat::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 2px solid var(--green);
      opacity: 0;
      animation: pulse-ring 2.5s ease-out infinite;
    }
    @keyframes pulse-ring {
      0%   { transform: scale(0.9); opacity: 0.6; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    /* ── Chat Box ── */
    #chat-box {
      position: fixed;
      bottom: 92px;
      right: 24px;
      width: 340px;
      max-height: 520px;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
      z-index: 998;
      transform-origin: bottom right;
      transform: scale(0.85) translateY(10px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
    }
    #chat-box.visible {
      transform: scale(1) translateY(0);
      opacity: 1;
      pointer-events: all;
    }

    /* ── Header ── */
    #chat-header {
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--green), #128c7e);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      position: relative;
    }
    .avatar::after {
      content: '';
      position: absolute;
      bottom: 1px;
      right: 1px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      border: 2px solid var(--surface);
    }
    .header-info { flex: 1; }
    .header-name { font-size: 14px; font-weight: 600; color: var(--text); }
    .header-status { font-size: 11px; color: var(--green); margin-top: 1px; }
    .header-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      padding: 4px;
      border-radius: 6px;
      transition: color 0.15s, background 0.15s;
      display: flex;
    }
    .header-close:hover { color: var(--text); background: var(--border); }

    /* ── Messages ── */
    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }

    .message {
      max-width: 82%;
      padding: 9px 13px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.5;
      animation: msg-in 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    @keyframes msg-in {
      from { transform: translateY(8px) scale(0.95); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }
    .message.bot {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
      border-bottom-left-radius: 4px;
      align-self: flex-start;
    }
    .message.user {
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      color: #fff;
      border-bottom-right-radius: 4px;
      align-self: flex-end;
      box-shadow: 0 2px 10px var(--green-glow);
    }

    /* Typing indicator */
    .typing {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 12px 13px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      border-bottom-left-radius: 4px;
      align-self: flex-start;
      animation: msg-in 0.25s ease;
    }
    .dot {
      width: 7px;
      height: 7px;
      background: var(--text-muted);
      border-radius: 50%;
      animation: bounce 1.2s ease-in-out infinite;
    }
    .dot:nth-child(2) { animation-delay: 0.18s; }
    .dot:nth-child(3) { animation-delay: 0.36s; }
    @keyframes bounce {
      0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
      40%            { transform: scale(1.2); opacity: 1; }
    }

    /* Quick replies */
    .quick-replies {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
      animation: msg-in 0.3s ease 0.1s both;
    }
    .quick-btn {
      background: none;
      border: 1px solid var(--green);
      color: var(--green);
      padding: 5px 11px;
      border-radius: 20px;
      font-size: 12px;
      font-family: var(--font);
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .quick-btn:hover {
      background: var(--green);
      color: #fff;
    }

    /* WhatsApp CTA */
    .wa-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 7px 13px;
      background: var(--green);
      color: #fff;
      text-decoration: none;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 500;
      align-self: flex-start;
      transition: opacity 0.15s, transform 0.15s;
      animation: msg-in 0.25s ease;
    }
    .wa-link:hover { opacity: 0.9; transform: translateY(-1px); }

    /* ── Input ── */
    #chat-footer {
      border-top: 1px solid var(--border);
      padding: 12px;
      background: var(--bg);
      display: flex;
      gap: 8px;
      align-items: center;
    }
    #userInput {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 9px 13px;
      border-radius: 20px;
      font-family: var(--font);
      font-size: 13.5px;
      outline: none;
      transition: border-color 0.2s;
    }
    #userInput::placeholder { color: var(--text-muted); }
    #userInput:focus { border-color: rgba(37,211,102,0.4); }
    #send-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--green);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s, opacity 0.15s;
      flex-shrink: 0;
    }
    #send-btn:hover { transform: scale(1.1); }
    #send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }