/* ==========================================================================
   CYBERPUNK NEURAL RAG COPILOT — FLOATING DRONE & CHAT TERMINAL
   ========================================================================== */

/* Floating Drone Container with Zig-Zag Flight Entrance */
.cyber-drone-wrap {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  font-family: 'Rajdhani', -apple-system, sans-serif;
  user-select: none;
  animation: droneZigZagFlight 2.6s cubic-bezier(0.2, 0.88, 0.25, 1) forwards;
}

/* Cinematic Zig-Zag Entrance Flight when website is opened */
@keyframes droneZigZagFlight {
  0% {
    opacity: 0;
    transform: translate3d(-78vw, -85vh, 0) rotate(-32deg) scale(0.35);
  }
  22% {
    opacity: 1;
    transform: translate3d(-28vw, -65vh, 0) rotate(24deg) scale(0.68);
  }
  48% {
    transform: translate3d(-58vw, -42vh, 0) rotate(-20deg) scale(0.85);
  }
  72% {
    transform: translate3d(-14vw, -20vh, 0) rotate(15deg) scale(1.06);
  }
  88% {
    transform: translate3d(-3vw, -4vh, 0) rotate(-6deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

/* Floating Robot Trigger */
.cyber-drone-btn {
  pointer-events: auto;
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(20, 38, 58, 0.95), rgba(6, 12, 20, 0.96) 80%);
  border: 2px solid rgba(0, 240, 255, 0.7);
  box-shadow: 
    0 0 24px rgba(0, 240, 255, 0.45),
    inset 0 0 16px rgba(0, 240, 255, 0.3),
    0 14px 34px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  animation: droneHover 4s ease-in-out 2.6s infinite alternate;
}

.cyber-drone-btn:hover {
  transform: translateY(-6px) scale(1.08);
  border-color: #00f0ff;
  box-shadow: 
    0 0 38px rgba(0, 240, 255, 0.75),
    inset 0 0 22px rgba(0, 240, 255, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.9);
}

.cyber-drone-btn:active {
  transform: translateY(0px) scale(0.98);
}

/* Floating Animation */
@keyframes droneHover {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(2deg);
  }
  100% {
    transform: translateY(-2px) rotate(-1.5deg);
  }
}

/* Glowing Orbital Ring */
.drone-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.5);
  animation: droneRingSpin 12s linear infinite;
  pointer-events: none;
}

@keyframes droneRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Robot Drone Avatar Image */
.drone-img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.9)) drop-shadow(0 4px 10px rgba(0,0,0,0.6));
  transition: transform 0.3s ease;
  pointer-events: none;
  position: relative;
  z-index: 4;
}

.cyber-drone-btn:hover .drone-img {
  transform: scale(1.1) translateY(-2px);
}

/* Volumetric Blue Rays radiating behind the robot */
.drone-blue-rays {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 240, 255, 0.45) 0deg 12deg,
    transparent 12deg 36deg,
    rgba(0, 160, 255, 0.35) 36deg 48deg,
    transparent 48deg 72deg,
    rgba(0, 240, 255, 0.45) 72deg 84deg,
    transparent 84deg 108deg,
    rgba(0, 180, 255, 0.4) 108deg 120deg,
    transparent 120deg 144deg,
    rgba(0, 240, 255, 0.45) 144deg 156deg,
    transparent 156deg 180deg,
    rgba(0, 160, 255, 0.35) 180deg 192deg,
    transparent 192deg 216deg,
    rgba(0, 240, 255, 0.45) 216deg 228deg,
    transparent 228deg 252deg,
    rgba(0, 180, 255, 0.4) 252deg 264deg,
    transparent 264deg 288deg,
    rgba(0, 240, 255, 0.45) 288deg 300deg,
    transparent 300deg 324deg,
    rgba(0, 160, 255, 0.35) 324deg 336deg,
    transparent 336deg 360deg
  );
  filter: blur(8px);
  pointer-events: none;
  animation: blueRaysSpin 10s linear infinite;
  opacity: 0.8;
  transition: opacity 0.3s ease, filter 0.3s ease;
  z-index: 1;
}

.cyber-drone-btn:hover .drone-blue-rays {
  opacity: 1;
  filter: blur(6px);
  inset: -26px;
}

@keyframes blueRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shimmering Silver Stars hovering around robot */
.drone-silver-star {
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 
    0 0 6px #ffffff,
    0 0 12px #d2e8fa,
    0 0 18px rgba(0, 240, 255, 0.85);
  animation: silverStarTwinkle 2.4s ease-in-out infinite alternate;
  z-index: 5;
}

.drone-star--1 {
  top: -8px;
  left: 12px;
  font-size: 14px;
  animation-delay: 0s;
}

.drone-star--2 {
  bottom: 6px;
  right: -8px;
  font-size: 16px;
  animation-delay: 0.8s;
}

.drone-star--3 {
  top: 16px;
  right: -10px;
  font-size: 11px;
  animation-delay: 1.5s;
}

@keyframes silverStarTwinkle {
  0% {
    opacity: 0.35;
    transform: scale(0.7) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.3) rotate(45deg);
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 28px #00f0ff;
  }
  100% {
    opacity: 0.4;
    transform: scale(0.8) rotate(90deg);
  }
}

/* Thruster flame glow underneath */
.drone-thruster {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 8px;
  background: radial-gradient(ellipse at top, rgba(0, 240, 255, 0.9), transparent 70%);
  filter: blur(3px);
  animation: thrusterPulse 1.2s ease-in-out infinite alternate;
  z-index: 2;
}

@keyframes thrusterPulse {
  0% { opacity: 0.5; width: 18px; height: 6px; }
  100% { opacity: 1; width: 30px; height: 10px; }
}

/* Status beacon badge */
.drone-status-pill {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #06111a;
  border: 1px solid #00ff88;
  border-radius: 10px;
  padding: 2px 7px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: #00ff88;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.drone-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  animation: beaconBlink 1.4s ease-in-out infinite;
}

@keyframes beaconBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* Floating callout label badge */
.drone-callout {
  pointer-events: auto;
  margin-bottom: 10px;
  background: rgba(7, 16, 26, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.5);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #00f0ff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
  animation: calloutBob 3.5s ease-in-out infinite alternate;
}

.drone-callout:hover {
  border-color: #00ff88;
  color: #00ff88;
  transform: scale(1.03);
}

@keyframes calloutBob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* ==========================================================================
   CHAT MODAL WINDOW
   ========================================================================== */

.cyber-chat-window {
  pointer-events: auto;
  position: fixed;
  bottom: 120px;
  right: 32px;
  width: 440px;
  max-width: calc(100vw - 48px);
  height: 620px;
  max-height: calc(100vh - 160px);
  background: rgba(6, 12, 20, 0.94);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 240, 255, 0.45);
  border-radius: 12px;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(0, 240, 255, 0.15),
    inset 0 0 30px rgba(0, 240, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10000;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}

.cyber-chat-window.is-hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  pointer-events: none;
}

/* Cyber corner bracket accents */
.cyber-chat-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-top: 2px solid #00f0ff;
  border-left: 2px solid #00f0ff;
  pointer-events: none;
}

.cyber-chat-window::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border-bottom: 2px solid #00f0ff;
  border-right: 2px solid #00f0ff;
  pointer-events: none;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(10, 20, 32, 0.9);
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid rgba(0, 240, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
  overflow: hidden;
}

.chat-header-robot-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.chat-title-wrap {
  display: flex;
  flex-direction: column;
}

.chat-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #e2f5ff;
  text-transform: uppercase;
}

.chat-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #00ff88;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-sub-dot {
  width: 5px;
  height: 5px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 6px #00ff88;
}

.chat-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #9ab4cc;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.chat-close-btn:hover {
  border-color: #ff3366;
  color: #ff3366;
  background: rgba(255, 51, 102, 0.1);
}

/* Chat Messages Stream */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.chat-messages::-webkit-scrollbar {
  width: 5px;
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 240, 255, 0.3);
  border-radius: 4px;
}

/* Individual Message Bubble */
.chat-msg {
  max-width: 88%;
  display: flex;
  flex-direction: column;
  animation: msgFadeIn 0.3s ease-out;
}

@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg--bot {
  align-self: flex-start;
}

.chat-msg--user {
  align-self: flex-end;
}

.chat-msg-meta {
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.chat-msg--bot .chat-msg-meta {
  color: #00f0ff;
}

.chat-msg--user .chat-msg-meta {
  color: #ffaa00;
  text-align: right;
}

.chat-bubble {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
}

.chat-msg--bot .chat-bubble {
  background: rgba(14, 28, 44, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #d8ecfa;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.chat-msg--user .chat-bubble {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.22), rgba(255, 100, 0, 0.15));
  border: 1px solid rgba(255, 170, 0, 0.45);
  color: #fff4e0;
}

/* Markdown formatting inside bot bubble */
.chat-bubble h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #00f0ff;
  margin: 0 0 6px 0;
  text-transform: uppercase;
}

.chat-bubble p {
  margin: 0 0 8px 0;
}

.chat-bubble p:last-child {
  margin-bottom: 0;
}

.chat-bubble ul, .chat-bubble ol {
  margin: 4px 0 8px 18px;
  padding: 0;
}

.chat-bubble li {
  margin-bottom: 4px;
}

.chat-bubble strong {
  color: #ffffff;
  font-weight: 600;
}

.chat-bubble a {
  color: #00f0ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.chat-bubble a:hover {
  color: #00ff88;
}

.chat-bubble hr {
  border: none;
  border-top: 1px dashed rgba(0, 240, 255, 0.25);
  margin: 10px 0;
}

/* Grounded citation badge */
.chat-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.citation-tag {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9.5px;
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  color: #79e3ff;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

/* Clickable Quick Prompts Grid inside Greeting */
.chat-prompt-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}

.chat-prompt-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: rgba(10, 22, 38, 0.85);
  border: 1px solid rgba(0, 240, 255, 0.28);
  border-radius: 7px;
  color: #d8eeff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  outline: none;
}

.chat-prompt-card:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #ffffff;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 240, 255, 0.28);
}

.chat-prompt-card .prompt-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.chat-prompt-card .prompt-text {
  flex: 1;
}

.chat-prompt-card--resume {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.16), rgba(0, 198, 255, 0.16));
  border-color: rgba(0, 255, 136, 0.55);
  color: #00ff88;
}

.chat-prompt-card--resume:hover {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.28), rgba(0, 198, 255, 0.28));
  border-color: #00ff88;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 255, 136, 0.35);
}

/* In-Chat Resume Download Action Banner */
.chat-resume-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(4, 18, 28, 0.95);
  border: 1px solid #00ff88;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(0, 255, 136, 0.25);
}

.chat-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #00ff88, #00c6ff);
  color: #040d16 !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-resume-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(0, 255, 136, 0.6);
}

/* Quick Suggestion Chips */
.chat-chips {
  display: flex;
  gap: 8px;
  padding: 6px 18px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-chips::-webkit-scrollbar {
  display: none;
}

.chat-chip {
  white-space: nowrap;
  background: rgba(14, 25, 38, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 14px;
  padding: 5px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #9edafc;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-chip:hover {
  background: rgba(0, 240, 255, 0.18);
  border-color: #00f0ff;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Chat Input Bar */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(8, 16, 26, 0.95);
  border-top: 1px solid rgba(0, 240, 255, 0.25);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.chat-input {
  flex: 1;
  background: rgba(4, 8, 14, 0.8);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-input::placeholder {
  color: #53718a;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}

.chat-input:focus {
  border-color: #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

.chat-send-btn {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 12px rgba(0, 198, 255, 0.4);
}

.chat-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(0, 198, 255, 0.7);
}

.chat-send-btn:active {
  transform: scale(0.96);
}

.chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Typing indicator */
.typing-bubble {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: #00f0ff;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Media Queries */
@media (max-width: 640px) {
  .cyber-drone-wrap {
    bottom: 14px;
    right: 12px;
  }
  .cyber-drone-btn {
    width: 54px;
    height: 54px;
  }
  .drone-img {
    width: 44px;
    height: 44px;
  }
  .drone-callout {
    font-size: 9.5px;
    padding: 4px 8px;
    margin-bottom: 6px;
    letter-spacing: 0.08em;
  }
  .drone-svg {
    width: 32px;
    height: 32px;
  }
  .cyber-chat-window {
    bottom: 80px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: 100%;
    height: min(500px, calc(100svh - 96px));
  }
}

@media (max-width: 440px) {
  .drone-callout {
    display: none;
  }
}