.chat-toggle {
      position: fixed;
      bottom: 25px;
      right: 25px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 1000;
    }
    .chat-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      border: none;
      background: #2563eb;
      color: white;
      font-size: 22px;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    .chat-btn:hover { transform: translateY(-3px); }
    #closeChatBtn { display: none; background:rgba(28, 64, 244, 1);}

    /* ---------- Chat Wrapper ---------- */
    .chat-wrapper {
      position: fixed;
      bottom: 95px;
      right: 25px;
      width: 420px;
      max-height: 85vh;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      overflow: hidden;
      display: none;
      flex-direction: column;
      border: 1px solid #e5e7eb;
      z-index: 999;
    }

    /* ---------- Header ---------- */
    .header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 20px;
      border-bottom: 1px solid #e5e7eb;
    }
    .header img { width: 28px; height: 28px; }
    .header h1 { font-size: 16px; font-weight: 600; }

    /* ---------- Welcome Section ---------- */
    .welcome { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
    .welcome h2 { font-size: 18px; margin-bottom: 4px; font-weight: 600; }
    .welcome p { font-size: 14px; color: #444; }

    /* ---------- Quick Buttons ---------- */
    .quick-options {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 12px 20px; border-bottom: 1px solid #e5e7eb;
    }
    .quick-options button {
      border: none; background: #f3f4f6; color: #2563eb;
      font-size: 13px; padding: 6px 12px;
      border-radius: 8px; cursor: pointer;
    }
    .quick-options button:hover { background: #e0e7ff; }

    /* ---------- Auth / Controls ---------- */
    .auth-section {
      padding: 12px 20px; border-bottom: 1px solid #e5e7eb;
    }
    .auth-controls, .controls-grid {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .auth-status {
      font-size: 13px; padding: 4px 10px; border-radius: 6px;
      background: #f3f4f6; color: #444;
    }
    .auth-status.authenticated {
      background: #dcfce7; color: #166534;
    }
    .btn {
      border: none; padding: 6px 12px; border-radius: 8px;
      font-size: 13px; font-weight: 500; cursor: pointer;
    }
    .btn-primary { background: #2563eb; color: #fff; }
    .btn-secondary { background: #6b7280; color: #fff; }
    .btn-success { background: #16a34a; color: #fff; }
    .btn-warning { background: #f59e0b; color: #fff; }


    /* ---------- Chat Messages ---------- */
  .chat-container {
    height: 500px; /* panel height similar to figma */
    overflow-y: auto; /* show scrollbar when content overflows */
    display: flex;
    flex-direction: column-reverse; /* newest at bottom */
    padding: 16px 18px;
    border-radius: 16px;
    /* Glass gradient backdrop similar to screenshot */
    /* background:
      radial-gradient(120% 80% at 70% 40%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.00) 80%),
      linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.12) 100%); */
    /* border: 1px solid rgba(255,255,255,0.18); */
    /* backdrop-filter: blur(18px); */
  }

#TapButton{
  background-color:white;
  color:black;
}
#TapButton:hover{
  background-color:black;
  color:white;
}

    .message {
      margin: 10px 0; display: flex; align-items: flex-start; gap: 8px;
      justify-content: flex-start; /* bot (left) default */
      line-height: 1.5;
      font-size: 15px;
      color: #e6f0ff;
    }
    .message-avatar { display: none !important; }
    .bot-message { justify-content: flex-start; flex-direction: row; }
    .bot-message .message-avatar { background: #2563eb; color: #fff; }
    .user-message { justify-content: flex-end; flex-direction: row; }
    .user-message .message-avatar { background: rgba(255, 255, 255, 0.3); color: #fff; }
    .message-content {
      background: transparent; border: none; color: #e6f0ff; padding: 0; border-radius: 0; max-width: 78%;
    }
    .bot-message .message-content { text-align: left; }
    .user-message .message-content {
      /* Right-side pill for user messages */
      background: rgba(126, 160, 255, 0.28);
      border: 1px solid rgba(255,255,255,0.22);
      color: #f5f8ff;
      padding: 8px 12px;
      border-radius: 10px;
      max-width: 68%;
      text-align: right;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 9999px rgba(255,255,255,0.0);
    }

    /* ---------- Input Section ---------- */
    /* .input-section {
      padding: 12px 16px; border-top: 1px solid #e5e7eb; background: #fff;
    } */
    .input-container {
      display: flex; gap: 10px; align-items: center;
      padding-top: 20px;
    }
    .answer-input {
      flex: 1; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.3);
      border-radius: 16px; font-size: 14px; outline: none;
      background: rgba(255,255,255,0.95);
      color: #111827;
      box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    }
    .answer-input::placeholder { color: #9AA0A6; }
    .answer-input:focus { border-color: #7ea0ff; box-shadow: 0 0 0 2px rgba(126,160,255,0.25); }
    .btn-send {
      background: #2563eb; border: none; color: #fff;
      padding: 12px 14px; border-radius: 16px; cursor: pointer;
      box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
    }

    @media (max-width: 500px) {
      .chat-wrapper { width: 95%; right: 10px; }
    }

    .quick-options button {
        background-color: white !important;
    }