

    /* ── Launcher Button ── */
    #chat-launcher {
      position: fixed;
      bottom: 32px;
      right: 32px;
      width: 60px;
      height: 60px;
      background: #fff;
      border-radius: 50%;
      border: 2.5px solid #1a3a5c;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 24px rgba(26,58,92,0.35);
      transition: transform 0.2s, box-shadow 0.2s;
      z-index: 1000;
    }
    #chat-launcher:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(26,58,92,0.45); }
    #chat-launcher svg { width: 28px; height: 28px; fill: #1a3a5c; transition: opacity 0.2s; }
    #chat-launcher img.icon-chat { width: 36px; height: 36px; object-fit: contain; }
    #chat-launcher.open img.icon-chat { display: none; }
    #chat-launcher svg.icon-close { display: none; }
    #chat-launcher.open svg.icon-close { display: block; }

    /* Pulse ring */
    #chat-launcher::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid #1a3a5c;
      animation: pulse 2.5s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(1); opacity: 0.6; }
      70% { transform: scale(1.6); opacity: 0; }
      100% { transform: scale(1.6); opacity: 0; }
    }

    /* ── Chat Window ── */
    #chat-window {
      position: fixed;
      top: 16px;
      bottom: 108px;
      right: 32px;
      width: 380px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 999;
      transform: scale(0.85) translateY(20px);
      opacity: 0;
      pointer-events: none;
      transform-origin: bottom right;
      transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
    }
    #chat-window.open {
      transform: scale(1) translateY(0);
      opacity: 1;
      pointer-events: all;
    }

    /* Header */
    .chat-header {
      background: linear-gradient(135deg, #1a3a5c 0%, #0f2440 100%);
      padding: 18px 20px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .chat-header-avatar {
      width: 42px; height: 42px;
      background: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .chat-header-avatar img { width: 28px; height: 28px; object-fit: contain; }
    .chat-header-info h3 {
      font-family: 'Playfair Display', serif;
      font-size: 15px; color: #fff;
      letter-spacing: 0.3px;
    }
    .chat-header-info p {
      font-size: 12px; color: rgba(255,255,255,0.6);
      margin-top: 1px;
      display: flex; align-items: center; gap: 5px;
    }
    .status-dot {
      width: 7px; height: 7px;
      background: #4cdb7c; border-radius: 50%;
      display: inline-block;
    }

    /* Messages */
    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #fafaf8;
    }
    #chat-messages::-webkit-scrollbar { width: 4px; }
    #chat-messages::-webkit-scrollbar-track { background: transparent; }
    #chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

    /* Bubbles */
    .msg { display: flex; align-items: flex-end; gap: 8px; animation: fadeUp 0.3s ease; }
    .msg.bot { flex-direction: row; }
    .msg.user { flex-direction: row-reverse; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .bot-icon {
      width: 28px; height: 28px;
      background: #fff;
      border: 1.5px solid #d0ccc4;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .bot-icon img { width: 18px; height: 18px; object-fit: contain; }

    .bubble {
      max-width: 82%;
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 13.5px;
      line-height: 1.55;
    }
    .msg.bot .bubble {
      background: #fff;
      color: #1e2d40;
      border: 1px solid #e8e4dc;
      border-bottom-left-radius: 4px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    .msg.user .bubble {
      background: #1a3a5c;
      color: #fff;
      border-bottom-right-radius: 4px;
    }
    .bubble a {
      color: #c9a84c;
      text-decoration: underline;
    }

    /* Quick Replies */
    .quick-replies {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 4px;
      padding-left: 36px;
      animation: fadeUp 0.35s ease 0.1s both;
    }
    .qr-btn {
      background: #fff;
      border: 1.5px solid #1a3a5c;
      color: #1a3a5c;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 13px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, transform 0.1s;
      white-space: nowrap;
    }
    .qr-btn:hover { background: #1a3a5c; color: #fff; transform: translateY(-1px); }

    /* Lead form */
    .lead-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .lead-form input,
    .lead-form select,
    .lead-form textarea {
      border: 1.5px solid #ddd;
      border-radius: 8px;
      padding: 9px 12px;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 13px;
      color: #222;
      outline: none;
      transition: border-color 0.15s;
      width: 100%;
      box-sizing: border-box;
    }
    .lead-form input:focus,
    .lead-form select:focus,
    .lead-form textarea:focus { border-color: #1a3a5c; }
    .lead-form select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231a3a5c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 32px;
      cursor: pointer;
    }
    .lead-form select option[value=""][disabled] { color: #b0aba2; }
    .lead-form textarea {
      resize: none;
      min-height: 80px;
    }
    .char-counter {
      font-family: 'Source Sans 3', sans-serif;
      font-size: 11px;
      color: #b0aba2;
      text-align: right;
      margin-top: -4px;
    }
    .lead-form button {
      background: #1a3a5c;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .lead-form button:hover { background: #0f2440; }

    /* Typing indicator */
    .typing-indicator { display: flex; align-items: center; gap: 5px; padding: 10px 14px; }
    .typing-indicator span {
      width: 7px; height: 7px;
      background: #bbb; border-radius: 50%;
      animation: bounce 1.1s infinite;
    }
    .typing-indicator span:nth-child(2) { animation-delay: 0.18s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.36s; }
    @keyframes bounce {
      0%,80%,100% { transform: translateY(0); }
      40% { transform: translateY(-6px); }
    }

    /* Divider */
    .chat-divider {
      text-align: center;
      font-size: 11px;
      color: #aaa;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 0 2px;
      position: relative;
    }
    .chat-divider::before, .chat-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30%;
      height: 1px;
      background: #e5e5e5;
    }
    .chat-divider::before { left: 0; }
    .chat-divider::after { right: 0; }

    /* Input bar */
    .chat-input-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid #ebebeb;
      background: #fff;
      flex-shrink: 0;
    }
    #user-input {
      flex: 1;
      border: 1.5px solid #e0ddd6;
      border-radius: 24px;
      padding: 9px 16px;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 13.5px;
      color: #222;
      outline: none;
      transition: border-color 0.15s;
      background: #fafaf8;
    }
    #user-input:focus { border-color: #1a3a5c; background: #fff; }
    #user-input::placeholder { color: #b0aba2; }

    #send-btn {
      width: 38px; height: 38px;
      background: #1a3a5c;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, transform 0.1s;
    }
    #send-btn:hover { background: #0f2440; transform: scale(1.05); }
    #send-btn svg { width: 16px; height: 16px; fill: #fff; }

    /* Branding */
    .chat-brand {
      text-align: center;
      font-size: 10.5px;
      color: #c0bbb3;
      padding: 6px 0 8px;
      background: #fff;
      letter-spacing: 0.3px;
    }
    .chat-brand span { color: #1a3a5c; font-weight: 600; }

    /* Demo label */
    .demo-label {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #1a3a5c;
      color: #fff;
      font-family: 'Source Sans 3', sans-serif;
      font-size: 13px;
      padding: 8px 20px;
      border-radius: 20px;
      letter-spacing: 0.3px;
      opacity: 0.85;
    }

    @media (max-width: 480px) {
      #chat-window { width: calc(100vw - 32px); right: 16px; top: 8px; bottom: 96px; }
      #chat-launcher { right: 16px; bottom: 20px; }
    }
        
        