/* ================================================================
   RED-BOT.CSS — Sagar Patel Portfolio v2
   All styles via inline JS except these global helpers
   ================================================================ */

/* Ensure bot is always on top — above boot screen, overlays, everything */
#red-bot-toggle,
#red-bot-window {
  z-index: 100000 !important;
}

/* Star rating hover */
.rbt-star:hover,
.rbt-star.lit {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.2) !important;
}

/* Quick reply chip hover */
.rbt-chip:hover {
  background: rgba(230,57,70,0.22) !important;
  border-color: #e63946 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

/* Close button hover */
#rbt-close:hover {
  color: #e63946 !important;
  background: rgba(230,57,70,0.1) !important;
}

/* Send button hover */
#rbt-send:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(230,57,70,0.5) !important;
}

/* Input focus */
#rbt-input:focus {
  border-color: rgba(230,57,70,0.5) !important;
  box-shadow: 0 0 0 3px rgba(230,57,70,0.08) !important;
}

/* Scrollbar */
#rbt-msgs::-webkit-scrollbar { width: 4px; }
#rbt-msgs::-webkit-scrollbar-track { background: transparent; }
#rbt-msgs::-webkit-scrollbar-thumb { background: rgba(230,57,70,0.3); border-radius: 2px; }

/* Mobile responsive */
@media (max-width: 420px) {
  #red-bot-window {
    width: calc(100vw - 2rem) !important;
    right: 1rem !important;
    bottom: 5rem !important;
    max-height: 75vh !important;
  }
  #red-bot-toggle {
    bottom: 1rem !important;
    right: 1rem !important;
  }
}

/* Boot screen should NOT cover the bot */
#boot-screen {
  z-index: 9999 !important;  /* less than bot's 100000 */
}

/* ── MOBILE SPECIFIC ─────────────────────────────────────── */
@media (max-width: 768px) {
  #red-bot-window {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: 80vh !important;
    border-radius: 16px 16px 0 0 !important;
    transform-origin: bottom center !important;
  }
  /* When open — slide up from bottom */
  #red-bot-window[style*="scale(1)"] {
    transform: translateY(0) !important;
  }
  #red-bot-toggle {
    bottom: 1.2rem !important;
    right: 1.2rem !important;
    width: 52px !important;
    height: 52px !important;
  }
  /* Ensure messages area scrolls properly on iOS */
  #rbt-msgs {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
  /* Input area stays above mobile keyboard */
  #red-bot-window .bot-input-area,
  #red-bot-window > div:last-child {
    position: sticky;
    bottom: 0;
    background: #0a0e1a;
    z-index: 2;
  }
  /* Quick replies wrap nicely */
  #rbt-qr {
    padding: 0 0.75rem 0.5rem !important;
  }
  .rbt-chip {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.7rem !important;
  }
  /* Swipe hint bar at top of window */
  #red-bot-window::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }
}

@media (max-width: 420px) {
  #rbt-msgs {
    padding: 0.75rem !important;
  }
}