/* =========================
   RESET & BASE
========================= */
*{margin:0;padding:0;box-sizing:border-box;}
/* body{font-family:'Segoe UI',sans-serif;background:#f0f2f5;min-height:100vh;display:flex;align-items:center;justify-content:center;} */

/* =========================
   TOGGLE BUTTON
========================= */
.chatbot-toggle{position:fixed;bottom:28px;right:28px;width:52px;height:52px;background:#1e4f87;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 18px rgba(30,79,135,0.35);transition:transform 0.2s,box-shadow 0.2s;z-index:9999;}
.chatbot-toggle:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(30,79,135,0.45);}
.chatbot-toggle i{color:#fff;font-size:22px;}
.chatbot-toggle.hidden{display:none;}

/* =========================
   CHATBOT WINDOW
========================= */
.chatbot-window{position:fixed;bottom:28px;right:28px;width:380px;height:460px;background:#fff;border-radius:20px;box-shadow:0 12px 48px rgba(0,0,0,0.14);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(18px) scale(0.96);transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1);z-index:9998;overflow:hidden;}
.chatbot-window.active{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

/* =========================
   CHAT HEADER
========================= */
.chat-header{background:#1e4f87;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.chat-header-left{display:flex;align-items:center;gap:11px;}
.bot-avatar{width:40px;height:40px;background:rgba(255,255,255,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.bot-avatar i{color:#fff;font-size:20px;}
.bot-info h3{color:#fff;font-size:15px;font-weight:600;margin-bottom:2px;}
.bot-status{font-size:11px;color:rgba(255,255,255,0.75);display:flex;align-items:center;gap:5px;}
.bot-status::before{content:'';width:7px;height:7px;background:#4ade80;border-radius:50%;display:inline-block;}
.close-btn{background:rgba(255,255,255,0.18);border:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s;}
.close-btn:hover{background:rgba(255,255,255,0.28);}
.close-btn i{color:#fff;font-size:13px;}

/* =========================
   MESSAGES AREA
========================= */
.chat-messages{flex:1;padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;background:#f7f9fb;scroll-behavior:smooth;}
.chat-messages::-webkit-scrollbar{width:5px;}
.chat-messages::-webkit-scrollbar-track{background:transparent;}
.chat-messages::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px;}
.chat-messages::-webkit-scrollbar-thumb:hover{background:#9ca3af;}

/* =========================
   MESSAGE BUBBLES
========================= */
.message{display:flex;gap:10px;animation:msgIn 0.28s ease;}
.bot-message{align-items:flex-start;}
.msg-avatar{width:32px;height:32px;background:#1e4f87;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
.msg-avatar i{color:#fff;font-size:15px;}
.msg-content{display:flex;flex-direction:column;gap:4px;max-width:290px;}
.msg-header{display:flex;align-items:center;gap:8px;}
.msg-sender{font-size:12px;font-weight:600;color:#374151;}
.msg-time{font-size:11px;color:#9ca3af;}
.msg-bubble{background:#fff;padding:11px 14px;border-radius:0 12px 12px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.07);font-size:13.5px;color:#1f2937;line-height:1.6;}
.user-message{justify-content:flex-end;}
.user-message .msg-content{align-items:flex-end;}
.user-message .msg-bubble{background:#1e4f87;color:#fff;border-radius:12px 12px 0 12px;padding:11px 14px;font-size:13.5px;line-height:1.6;max-width:260px;box-shadow:0 2px 8px rgba(30,79,135,0.25);}
.user-message .msg-time{font-size:11px;color:#9ca3af;text-align:right;}

/* =========================
   TYPING BUBBLE
========================= */
.typing-bubble{background:#fff;padding:13px 16px;border-radius:0 12px 12px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.07);display:flex;gap:4px;align-items:center;}
.typing-bubble span{width:7px;height:7px;background:#9ca3af;border-radius:50%;animation:dotBounce 1.3s infinite;}
.typing-bubble span:nth-child(2){animation-delay:0.18s;}
.typing-bubble span:nth-child(3){animation-delay:0.36s;}

/* =========================
   OPTIONS CARD
========================= */
.options-card{background:#fff;border-radius:0 12px 12px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.07);padding:14px;max-width:290px;}
.options-card p{font-size:13.5px;color:#1f2937;line-height:1.6;margin-bottom:12px;}
.option-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:color 0.15s;}
.option-item:last-of-type{border-bottom:none;}
.option-item:hover .option-label{color:#1e4f87;}
.option-checkbox{width:17px;height:17px;border:1.5px solid #d1d5db;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 0.2s;flex-shrink:0;background:#fff;}
.option-checkbox.checked{background:#1e4f87;border-color:#1e4f87;}
.option-checkbox.checked::after{content:'';width:4px;height:8px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(42deg) translateY(-1px);display:block;}
.option-label{font-size:13px;color:#374151;font-weight:500;}
.options-submit{margin-top:12px;width:100%;background:#1e4f87;color:#fff;border:none;padding:9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.2s,transform 0.15s;}
.options-submit:hover{background:#2460a0;transform:translateY(-1px);}
.options-submit:active{transform:translateY(0);}
.options-submit:disabled{background:#9ca3af;cursor:not-allowed;transform:none;}

/* =========================
   CHAT INPUT AREA
========================= */
.chat-input-area{padding:14px 16px;background:#fff;border-top:1px solid #f0f1f3;flex-shrink:0;}
.input-wrapper{display:flex;gap:10px;align-items:center;}
.input-wrapper input{flex:1;padding:10px 15px;border:1.5px solid #e5e7eb;border-radius:24px;font-size:13.5px;outline:none;background:#f9fafb;transition:border-color 0.2s,box-shadow 0.2s;color:#1f2937;}
.input-wrapper input::placeholder{color:#9ca3af;}
.input-wrapper input:focus{border-color:#1e4f87;background:#fff;box-shadow:0 0 0 3px rgba(30,79,135,0.09);}
.input-wrapper input:disabled{opacity:0.5;cursor:not-allowed;}
.send-btn{background:#1e4f87;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.2s,transform 0.15s;flex-shrink:0;}
.send-btn:hover{background:#2460a0;transform:scale(1.06);}
.send-btn:active{transform:scale(0.95);}
.send-btn i{color:#fff;font-size:15px;}
.send-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;}

/* =========================
   ANIMATIONS
========================= */
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:480px){.chatbot-window{width:calc(100vw - 24px);right:12px;bottom:12px;}.chatbot-toggle{right:12px;bottom:12px;}}