/* ===== COSMIC CHATBOX STYLES - ORIGINAL TEMPLATE ONLY ===== */

/* Container pentru centrare */
.cosmic-chatbox-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  /* background: rgba(0, 0, 0, 0.8) !important; */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  animation: cosmicOverlayFadeIn 0.3s ease-out !important;
}

.cosmic-chatbox-container.closing {
  animation: cosmicOverlayFadeOut 0.3s ease-in !important;
}

@keyframes cosmicOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cosmicOverlayFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.cosmic-chatbox-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

.cosmic-chatbox-content {
  position: relative !important;
  z-index: 1 !important;
  animation: cosmicSlideIn 0.3s ease-out !important;
}

.cosmic-chatbox-container.closing .cosmic-chatbox-content {
  animation: cosmicSlideOut 0.3s ease-in !important;
}

@keyframes cosmicSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes cosmicSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
}

.galaxy {
  height: 800px !important;
  width: 800px !important;
  background-image: radial-gradient(#00d4ff 1px, transparent 1px),
    radial-gradient(#00d4ff 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  background-position:
    0 0,
    25px 25px !important;
  position: absolute !important;
  z-index: -1 !important;
  animation: twinkle 5s infinite !important;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.stardust,
.cosmic-ring,
.starfield,
.nebula {
  max-height: 70px !important;
  max-width: 314px !important;
  height: 100% !important;
  width: 100% !important;
  position: absolute !important;
  overflow: hidden !important;
  z-index: -1 !important;
  border-radius: 12px !important;
  filter: blur(3px) !important;
}

.input {
  background-color: #0a0b14 !important;
  border: none !important;
  width: 400px !important;
  height: 56px !important;
  border-radius: 10px !important;
  color: #00d4ff !important;
  padding-inline: 80px !important;
  font-size: 18px !important;
  font-family: 'Rajdhani', sans-serif !important;
}

#search-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.input::placeholder {
  color: #4fc3f7 !important;
  font-family: 'Rajdhani', sans-serif !important;
}

.input:focus {
  outline: none !important;
}

#main:focus-within > #input-mask {
  display: none !important;
}

#input-mask {
  pointer-events: none !important;
  width: 120px !important;
  height: 20px !important;
  position: absolute !important;
  background: linear-gradient(90deg, transparent, #0a0b14) !important;
  top: 18px !important;
  left: 90px !important;
}

#cosmic-glow {
  pointer-events: none !important;
  width: 30px !important;
  height: 20px !important;
  position: absolute !important;
  background: #00d4ff !important;
  top: 10px !important;
  left: 5px !important;
  filter: blur(20px) !important;
  opacity: 0.8 !important;
  transition: all 2s !important;
}

#main:hover > #cosmic-glow {
  opacity: 0 !important;
}

.stardust {
  max-height: 63px !important;
  max-width: 307px !important;
  border-radius: 10px !important;
  filter: blur(2px) !important;
}

.stardust::before {
  content: "" !important;
  z-index: -2 !important;
  text-align: center !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(83deg) !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  filter: brightness(1.4) !important;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #00d4ff,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #4fc3f7,
    rgba(0, 0, 0, 0) 58%
  ) !important;
  transition: all 2s !important;
}

.cosmic-ring {
  max-height: 59px !important;
  max-width: 303px !important;
  border-radius: 11px !important;
  filter: blur(0.5px) !important;
}

.cosmic-ring::before {
  content: "" !important;
  z-index: -2 !important;
  text-align: center !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(70deg) !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  filter: brightness(1.3) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-image: conic-gradient(
    #0a0b14,
    #00d4ff 5%,
    #0a0b14 14%,
    #0a0b14 50%,
    #4fc3f7 60%,
    #0a0b14 64%
  ) !important;
  transition: all 2s !important;
}

.starfield {
  max-height: 65px !important;
  max-width: 312px !important;
}

.starfield::before {
  content: "" !important;
  z-index: -2 !important;
  text-align: center !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(82deg) !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #0f1419,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #1e213a,
    rgba(0, 0, 0, 0) 60%
  ) !important;
  transition: all 2s !important;
}

#search-container:hover > .starfield::before {
  transform: translate(-50%, -50%) rotate(-98deg) !important;
}

#search-container:hover > .nebula::before {
  transform: translate(-50%, -50%) rotate(-120deg) !important;
}

#search-container:hover > .stardust::before {
  transform: translate(-50%, -50%) rotate(-97deg) !important;
}

#search-container:hover > .cosmic-ring::before {
  transform: translate(-50%, -50%) rotate(-110deg) !important;
}

#search-container:focus-within > .starfield::before {
  transform: translate(-50%, -50%) rotate(442deg) !important;
  transition: all 4s !important;
}

#search-container:focus-within > .nebula::before {
  transform: translate(-50%, -50%) rotate(420deg) !important;
  transition: all 4s !important;
}

#search-container:focus-within > .stardust::before {
  transform: translate(-50%, -50%) rotate(443deg) !important;
  transition: all 4s !important;
}

#search-container:focus-within > .cosmic-ring::before {
  transform: translate(-50%, -50%) rotate(430deg) !important;
  transition: all 4s !important;
}

.nebula {
  overflow: hidden !important;
  filter: blur(30px) !important;
  opacity: 0.4 !important;
  max-height: 130px !important;
  max-width: 354px !important;
}

.nebula:before {
  content: "" !important;
  z-index: -2 !important;
  text-align: center !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(60deg) !important;
  position: absolute !important;
  width: 999px !important;
  height: 999px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-image: conic-gradient(
    #000,
    #00d4ff 5%,
    #000 38%,
    #000 50%,
    #4fc3f7 60%,
    #000 87%
  ) !important;
  transition: all 2s !important;
}

#wormhole-icon {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  max-height: 40px !important;
  max-width: 38px !important;
  height: 100% !important;
  width: 100% !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #0f1419, #0a0b14, #1e213a) !important;
  border: 1px solid transparent !important;
}

.wormhole-border {
  height: 42px !important;
  width: 40px !important;
  position: absolute !important;
  overflow: hidden !important;
  top: 7px !important;
  right: 7px !important;
  border-radius: 10px !important;
}

.wormhole-border::before {
  content: "" !important;
  text-align: center !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  filter: brightness(1.35) !important;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #00d4ff,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 50%,
    #4fc3f7,
    rgba(0, 0, 0, 0) 100%
  ) !important;
  animation: rotate 4s linear infinite !important;
}

#main {
  position: relative !important;
}

#search-icon {
  position: absolute !important;
  left: 30px !important;
  top: 15px !important;
  color: #00d4ff !important;
}

#search-icon svg {
  stroke: #4fc3f7 !important;
}

@keyframes rotate {
  100% {
    transform: translate(-50%, -50%) rotate(450deg);
  }
}