/* ==========================================================================
   AI BOT — Modern Lightweight CSS (Kept original design + capsule quick-actions)
   - Header with avatar + title (kept)
   - Rounded pill message bubbles (kept)
   - Desktop width ~380px
   - Capsule quick-action buttons
   ========================================================================== */

/* ------ Theme variables ------ */
:root{
  --ai-primary: #8b5cf6;
  --ai-secondary: #ec4899;
  --ai-accent: #06d6a0;
  --ai-dark: #1a1a2e;
  --ai-surface: rgba(26,26,46,0.95);
  --ai-surface-2: rgba(26,26,46,0.85);
  --ai-ghost: rgba(255,255,255,0.08);
  --ai-border: rgba(255,255,255,0.12);
  --ai-text: #ffffff;
  --ai-radius-lg: 20px;
  --ai-radius-sm: 12px;
  --ai-z: 9999;
}

/* ------------------------------
   Container & Toggle (floating)
   ------------------------------ */
.ai-bot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--ai-z);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
}

/* Toggle must be clickable */
.ai-bot-toggle {
  pointer-events: auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-secondary));
  border: 3px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-text);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(139,92,246,0.25), 0 0 0 0 rgba(139,92,246,0.06);
  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
  margin-left: 12px;
}
.ai-bot-toggle:focus { outline: 2px solid rgba(255,255,255,0.14); outline-offset: 2px; }
.ai-bot-toggle:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 44px rgba(139,92,246,0.28); }

.ai-bot-toggle i { font-size: 1.8rem; transition: transform .25s ease; }
.ai-bot-toggle:hover i { transform: scale(1.08); }

/* Notification dot (keeps your animation) */
.ai-bot-toggle .notification-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(45deg,#ff6b6b,#ffa500);
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  pointer-events: none;
  animation: pulse-glow 2s infinite, bounce-subtle 3s infinite;
}
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(255,107,107,0.6); transform: scale(1); }
  50%{ box-shadow: 0 0 0 8px rgba(255,107,107,0); transform: scale(1.08); }
}
@keyframes bounce-subtle{
  0%,20%,50%,80%,100%{ transform: translateY(0); }
  40%{ transform: translateY(-3px); }
  60%{ transform: translateY(-1px); }
}

/* ------------------------------
   Bot Window (desktop default)
   ------------------------------ */
.ai-bot-window{
  position: absolute;
  bottom: 85px;
  right: 0;
  width: 380px;
  height: 520px;
  display: none;
  flex-direction: column;
  background: var(--ai-surface);
  color: var(--ai-text);
  border-radius: var(--ai-radius-lg);
  border: 1px solid var(--ai-border);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(120%);
  transform: translateY(20px) scale(.98);
  opacity: 0;
  transition: transform .48s cubic-bezier(.2,.9,.2,1), opacity .38s;
  pointer-events: auto;
  z-index: calc(var(--ai-z) + 1);
}

/* When open */
.ai-bot-window.active{
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* small appearance micro-animation for opening content */
.ai-bot-window.active .ai-bot-header,
.ai-bot-window.active .ai-bot-messages,
.ai-bot-window.active .ai-bot-input {
  animation: windowAppear .5s ease both;
}
@keyframes windowAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------
   Header (avatar + title)
   ------------------------------ */
.ai-bot-header{
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 3;
}

.ai-bot-title{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ai-text);
}

/* avatar */
.female-avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,#4f46e5,#9333ea);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  flex-shrink: 0;
}
.female-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* close button */
.ai-bot-close{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .28s, background .28s;
}
.ai-bot-close:hover{ transform: rotate(90deg); background: rgba(236,72,153,0.16); }

/* ------------------------------
   Messages area
   ------------------------------ */
.ai-bot-messages{
  flex: 1 1 auto;
  padding: 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 78%, rgba(139,92,246,0.04), transparent 40%),
    radial-gradient(circle at 82% 22%, rgba(236,72,153,0.04), transparent 40%);
}

/* message base */
.message{
  max-width: 85%;
  padding: .9rem 1.05rem;
  border-radius: 16px;
  line-height: 1.45;
  font-size: .95rem;
  position: relative;
  backdrop-filter: blur(6px);
  word-break: break-word;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  animation: messageSlide .36s cubic-bezier(.2,.9,.2,1);
}

/* bot bubble - rounded pill */
.message.bot{
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(139,92,246,0.06));
  border: 1px solid rgba(139,92,246,0.16);
  border-bottom-left-radius: 6px;
}

/* user bubble */
.message.user{
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(6,214,160,0.14), rgba(6,214,160,0.06));
  border: 1px solid rgba(6,214,160,0.14);
  border-bottom-right-radius: 6px;
  color: white;
}

/* message slide-in */
@keyframes messageSlide {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* typing indicator */
.message-typing{
  display:none;
  align-self:flex-start;
  padding:.9rem 1.05rem;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(139,92,246,0.06));
  border: 1px solid rgba(139,92,246,0.14);
}
.message-typing.active{ display:block; animation: typingPulse 2s infinite; }
@keyframes typingPulse{ 0%,100%{opacity:1} 50%{opacity:.85} }

/* typing dots */
.typing-dots{ display:flex; gap:6px; align-items:center; }
.typing-dots span{
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg,var(--ai-primary),var(--ai-secondary));
  animation: typingBounce 1.4s infinite;
}
.typing-dots span:nth-child(1){ animation-delay:-0.32s; }
.typing-dots span:nth-child(2){ animation-delay:-0.16s; }
@keyframes typingBounce { 0%,80%,100%{ transform:scale(.8); opacity:.5 } 40%{ transform:scale(1.18); opacity:1 } }

/* message formatting helpers (bullets/numbering) */
.message .bullet { display:block; margin:6px 0; padding-left:8px; position:relative; }
.message .bullet:before{ content:"•"; position:absolute; left:-10px; color:var(--ai-primary); font-weight:700; }
.message .number { font-weight:700; color:var(--ai-primary); margin-right:6px; }

/* ------------------------------
   Quick actions (capsule)
   ------------------------------ */
.quick-actions{
  padding: 1rem 1.25rem;
  display:flex;
  flex-wrap:wrap;
  gap: .75rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  background: var(--ai-surface-2);
  z-index:2;
}

.quick-action{
  flex: 1 1 calc(50% - 0.75rem);
  min-width: calc(50% - 0.75rem);
  padding: .72rem .95rem;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  font-size: .92rem;
  text-align: center;
  transition: transform .22s ease, background .22s;
}
.quick-action:hover{ transform: translateY(-4px); background: linear-gradient(180deg, rgba(139,92,246,0.12), rgba(139,92,246,0.06)); color:#fff; }

/* ------------------------------
   Input area
   ------------------------------ */
.ai-bot-input{
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  gap:.75rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
}

.ai-bot-input input{
  flex:1;
  padding:.82rem 1rem;
  border-radius: 14px;
  border: 1.4px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--ai-text);
  font-size:.95rem;
  outline:none;
  transition: box-shadow .22s, border-color .22s;
}
.ai-bot-input input::placeholder{ color: rgba(255,255,255,0.5); }
.ai-bot-input input:focus{ box-shadow: 0 6px 22px rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.3); transform: translateY(-1px); }

.ai-bot-send{
  width:48px; height:48px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--ai-primary),var(--ai-secondary));
  border:none; color:#fff; cursor:pointer; transition: transform .18s;
}
.ai-bot-send:hover{ transform: translateY(-3px) scale(1.03); }

/* ------------------------------
   Hello bubble (small top)
   ------------------------------ */
.hello-animation{
  position:absolute;
  top: -44px;
  left:50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ai-dark);
  padding: 8px 14px;
  border-radius: 20px;
  font-weight:600;
  font-size:.92rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display:none;
  z-index: 1000;
}

/* ------------------------------
   Background texture (subtle)
   ------------------------------ */
.texture-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background:
    radial-gradient(circle at 20% 80%, rgba(59,130,246,0.06), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(16,185,129,0.06), transparent 35%);
}

/* ------------------------------
   Scrollbars (light touch)
   ------------------------------ */
.ai-bot-messages::-webkit-scrollbar{ width:8px; }
.ai-bot-messages::-webkit-scrollbar-track{ background: transparent; }
.ai-bot-messages::-webkit-scrollbar-thumb{
  border-radius: 6px;
  background: linear-gradient(135deg,var(--ai-primary),var(--ai-secondary));
  opacity:.95;
}

/* ------------------------------
   Mobile Responsive - FIXED
   ------------------------------ */
@media (max-width: 768px){
  .ai-bot-container{ 
    bottom: 8px; 
    right: 8px; 
  }

  .ai-bot-toggle{ 
    width:60px; 
    height:60px; 
  }

  /* Full-screen chat */
  .ai-bot-window{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    transform: translateY(100%);
    transition: transform .36s cubic-bezier(.22,.9,.3,1);
    background: rgba(26,26,46,0.98);
    display: flex;
    flex-direction: column;
  }
  .ai-bot-window.active{ 
    transform: translateY(0); 
  }

  /* Header */
  .ai-bot-header{
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: env(safe-area-inset-top);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    flex-shrink: 0;
  }

  /* Messages area - FIXED for quick actions visibility */
  .ai-bot-messages{
    padding: 1rem;
    padding-bottom: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  /* Quick actions - FIXED to be visible */
  .quick-actions{ 
    padding: .85rem; 
    gap:.6rem; 
    background: var(--ai-surface-2);
    flex-shrink: 0;
    position: relative;
    z-index: 25;
  }

  /* Input area - FIXED position */
  .ai-bot-input{
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(26,26,46,0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .ai-bot-input input {
    margin-bottom: 0;
    padding: 12px 16px;
    font-size: 16px;
  }

  .hello-animation{ 
    top: calc(12px + env(safe-area-inset-top)); 
    left: 12px; 
    display:none; 
  }

  /* Adjust message padding to account for fixed elements */
  .ai-bot-messages {
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------
   Desktop tweaks (>=769px)
   ------------------------------ */
@media (min-width: 769px){
  .ai-bot-window{ right: 0; bottom: 85px; width: 380px; height: 520px; }
  .ai-bot-input{ position: static; }
}

/* ------------------------------
   Accessibility helpers
   ------------------------------ */
.ai-bot-toggle:focus, .ai-bot-close:focus, .ai-bot-send:focus, .quick-action:focus {
  outline: 2px solid rgba(139,92,246,0.22);
  outline-offset: 2px;
  box-shadow: 0 6px 18px rgba(139,92,246,0.08);
}

/* ------------------------------
   Small fixes for overlap & scroll behavior
   ------------------------------ */
.ai-bot-header + .ai-bot-messages { margin-top: 0; }
.ai-bot-container, .ai-bot-window, .ai-bot-toggle { pointer-events: auto; }
.ai-bot-window, .ai-bot-toggle { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }