/* ============================================
   FLOW VELLO — FLOATING CHATBOT WIDGET
   ============================================ */

/* Floating trigger button */
.fv-chatbot-trigger {
   position: fixed;
   bottom: 28px;
   right: 28px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #fb383b;
   color: #fff;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 6px 24px rgba(251, 56, 59, 0.45);
   z-index: 9999;
   transition: all .3s ease;
}
.fv-chatbot-trigger:hover {
   transform: scale(1.08);
   box-shadow: 0 8px 30px rgba(251, 56, 59, 0.55);
}
.fv-chatbot-trigger .icon-close { display: none; }
.fv-chatbot-trigger.active .icon-chat { display: none; }
.fv-chatbot-trigger.active .icon-close { display: inline; }

/* Chat window */
.fv-chatbot-window {
   position: fixed;
   bottom: 100px;
   right: 28px;
   width: 400px;
   max-width: calc(100vw - 40px);
   height: 560px;
   max-height: calc(100vh - 140px);
   background: rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 20px;
   box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 9998;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px) scale(.95);
   transition: all .35s cubic-bezier(0.23, 1, 0.32, 1);
}
.fv-chatbot-window.open {
   opacity: 1;
   visibility: visible;
   transform: translateY(0) scale(1);
}

/* Header */
.fv-chatbot-header {
   background: rgba(29, 30, 34, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: #fff;
   padding: 18px 20px;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fv-chatbot-header-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #fb383b;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   flex-shrink: 0;
}
.fv-chatbot-header-info h4 {
   margin: 0;
   font-family: 'Rubik', sans-serif;
   font-size: 16px;
   font-weight: 600;
   color: #fff;
}
.fv-chatbot-header-info span {
   font-family: 'Rubik', sans-serif;
   font-size: 12px;
   color: #bdbec2;
}

/* Messages area */
.fv-chatbot-messages {
   flex: 1;
   overflow-y: auto;
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 14px;
   background: rgba(247, 247, 245, 0.6);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
}
.fv-chatbot-messages::-webkit-scrollbar { width: 5px; }
.fv-chatbot-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/* Message bubbles */
.fv-chat-msg {
   max-width: 85%;
   font-family: 'Rubik', sans-serif;
   font-size: 14px;
   line-height: 1.6;
   padding: 12px 16px;
   border-radius: 14px;
   animation: fvMsgIn .3s ease;
}
@keyframes fvMsgIn {
   from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
}
.fv-chat-msg.bot {
   background: rgba(255, 255, 255, 0.55);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   color: #1d1e22;
   border: 1px solid rgba(255, 255, 255, 0.35);
   align-self: flex-start;
   border-bottom-left-radius: 4px;
}
.fv-chat-msg.user {
   background: rgba(251, 56, 59, 0.85);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   color: #fff;
   align-self: flex-end;
   border-bottom-right-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}
.fv-chat-msg a {
   color: #fb383b;
   text-decoration: underline;
}

/* Quick action buttons */
.fv-chatbot-quick-actions {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   padding: 0 20px 14px;
   background: rgba(247, 247, 245, 0.6);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   flex-shrink: 0;
}
.fv-chatbot-quick-actions.hidden { display: none; }
.fv-chat-quick-btn {
   font-family: 'Rubik', sans-serif;
   font-size: 13px;
   font-weight: 600;
   padding: 8px 16px;
   border-radius: 100px;
   border: 1px solid rgba(251, 56, 59, 0.3);
   background: rgba(251, 56, 59, 0.08);
   color: #fb383b;
   cursor: pointer;
   transition: all .25s ease;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}
.fv-chat-quick-btn:hover {
   border-color: #fb383b;
   color: #fff;
   background: rgba(251, 56, 59, 0.75);
}

/* Topic pills inside chat */
.fv-chat-topic-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 10px;
}
.fv-chat-topic-pill {
   font-family: 'Rubik', sans-serif;
   font-size: 12px;
   font-weight: 600;
   padding: 6px 14px;
   border-radius: 100px;
   border: 1px solid rgba(251, 56, 59, 0.4);
   background: rgba(251, 56, 59, 0.1);
   color: #fb383b;
   cursor: pointer;
   transition: all .25s ease;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}
.fv-chat-topic-pill:hover {
   background: rgba(251, 56, 59, 0.8);
   color: #fff;
   border-color: rgba(251, 56, 59, 0.9);
}

/* Input area */
.fv-chatbot-input {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 14px 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   flex-shrink: 0;
}
.fv-chatbot-input input {
   flex: 1;
   font-family: 'Rubik', sans-serif;
   font-size: 14px;
   border: none;
   outline: none;
   background: transparent;
   color: #1d1e22;
}
.fv-chatbot-input input::placeholder { color: rgba(0, 0, 0, 0.4); }
.fv-chatbot-send {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(251, 56, 59, 0.85);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.15);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   transition: all .25s;
   flex-shrink: 0;
}
.fv-chatbot-send:hover { background: rgba(251, 56, 59, 1); transform: scale(1.05); }

/* Typing indicator */
.fv-chat-typing {
   display: flex;
   gap: 4px;
   padding: 12px 16px;
   align-self: flex-start;
}
.fv-chat-typing span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  animation: fvTyping 1.2s infinite;
}
.fv-chat-typing span:nth-child(2) { animation-delay: .2s; }
.fv-chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes fvTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Responsive */
@media(max-width:480px) {
   .fv-chatbot-window {
      bottom: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
   }
   .fv-chatbot-trigger { bottom: 20px; right: 20px; }
}