:root {
        --wa-green: #25D366;
        --wa-dark: #075E54;
        --wa-teal: #128C7E;
        --wa-light-bg: #ECE5DD;
        --wa-chat-bg: #DCF8C6;
        --wa-white: #ffffff;
        --wa-shadow: 0 12px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
      }
      #wa-chat-panel {
        display: none;
        position: fixed;
        bottom: 90px;
        right: 20px;
        width: 370px;
        max-height: 520px;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: var(--wa-shadow);
        flex-direction: column;
        background: var(--wa-white);
        z-index: 10000;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        animation: waFloatIn 0.35s cubic-bezier(0.16,1,0.3,1);
      }
      #wa-chat-panel.wa-open { display: flex; }
      @keyframes waFloatIn {
        from { opacity: 0; transform: translateY(20px) scale(0.92); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes waMsgIn {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .wa-header {
        background: linear-gradient(135deg, var(--wa-dark) 0%, var(--wa-teal) 50%, var(--wa-green) 100%);
        padding: 20px;
        color: #fff;
        position: relative;
        overflow: hidden;
      }
      .wa-header::before {
        content: '';
        position: absolute;
        top: -30px; right: -30px;
        width: 100px; height: 100px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
      }
      .wa-header-content { display: flex; align-items: center; gap: 12px; position: relative; }
      .wa-header-icon {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex; align-items: center; justify-content: center;
        font-size: 22px;
      }
      .wa-header-title { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
      .wa-header-subtitle {
        font-size: 12px; opacity: 0.85; margin-top: 2px;
        display: flex; align-items: center; gap: 5px;
      }
      .wa-online-dot {
        width: 7px; height: 7px;
        border-radius: 50%; background: #4ADE80; display: inline-block;
      }
      .wa-close-btn {
        position: absolute; top: 16px; right: 16px;
        background: rgba(255,255,255,0.2); border: none; border-radius: 50%;
        width: 32px; height: 32px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 18px; transition: background 0.2s;
        z-index: 20; line-height: 1; padding: 0;
      }
      .wa-close-btn:hover { background: rgba(255,255,255,0.35); }
      .wa-header::before { pointer-events: none; }
      .wa-header-content { position: relative; z-index: 1; }
      .wa-body {
        flex: 1; overflow-y: auto; padding: 20px;
        background-color: var(--wa-light-bg);
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23c8c0b6' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        min-height: 200px;
      }
      .wa-form-card {
        background: #fff; border-radius: 10px; padding: 20px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06); animation: waMsgIn 0.4s ease;
      }
      .wa-form-card h4 { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0 0 4px 0; }
      .wa-form-card p { font-size: 13.5px; color: #555; line-height: 1.5; margin: 0 0 18px 0; }
      .wa-form-card label {
        font-size: 12px; font-weight: 600; color: #666;
        text-transform: uppercase; letter-spacing: 0.8px; display: block;
      }
      .wa-form-card input {
        width: 100%; padding: 10px 14px; border: 1.5px solid #ddd;
        border-radius: 10px; font-size: 14px; margin-top: 6px; margin-bottom: 14px;
        box-sizing: border-box; transition: all 0.2s; background: #fafafa; font-family: inherit;
      }
      .wa-form-card input:focus {
        outline: none; border-color: var(--wa-green);
        box-shadow: 0 0 0 3px rgba(37,211,102,0.15);
      }
      .wa-start-btn {
        width: 100%; padding: 12px 0; background: var(--wa-green); color: #fff;
        border: none; border-radius: 12px; font-size: 15px; font-weight: 700;
        cursor: pointer; display: flex; align-items: center; justify-content: center;
        gap: 8px; letter-spacing: 0.3px; transition: all 0.2s; font-family: inherit;
      }
      .wa-start-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,211,102,0.4); }
      .wa-start-btn:disabled { background: #a8d8b9; cursor: not-allowed; transform: none; box-shadow: none; }
      .wa-msg-row { display: flex; margin-bottom: 10px; animation: waMsgIn 0.3s ease; }
      .wa-msg-row.wa-user { justify-content: flex-end; }
      .wa-msg-row.wa-bot  { justify-content: flex-start; }
      .wa-msg-bubble {
        max-width: 80%; padding: 10px 14px; font-size: 13.5px;
        line-height: 1.45; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      }
      .wa-user .wa-msg-bubble { background: var(--wa-chat-bg); border-radius: 14px 14px 4px 14px; }
      .wa-bot  .wa-msg-bubble { background: #fff; border-radius: 14px 14px 14px 4px; }
      .wa-msg-time { font-size: 10px; color: #999; text-align: right; margin-top: 4px; }
      .wa-input-bar {
        display: none; padding: 12px 16px; background: #F0F0F0;
        gap: 8px; align-items: center; border-top: 1px solid #e0e0e0;
      }
      .wa-input-bar.wa-active { display: flex; }
      .wa-input-bar input {
        flex: 1; padding: 10px 16px; border: none; border-radius: 8px;
        font-size: 14px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); font-family: inherit;
      }
      .wa-input-bar input:focus { outline: none; box-shadow: 0 0 0 2px rgba(37,211,102,0.2); }
      .wa-send-btn {
        width: 42px; height: 42px; border-radius: 50%; border: none;
        background: var(--wa-green); cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; transition: all 0.2s;
      }
      .wa-send-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,211,102,0.4); }
      @media (max-width: 420px) {
        #wa-chat-panel { width: calc(100vw - 20px); right: 10px; bottom: 80px; max-height: 70vh; }
      }