/* From Uiverse.io by Lakshay-art */

.ai-chat-form {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

#poda {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 60px;
}

.white,
.border,
.darkBorderBg,
.glow {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  /* Border Radius */
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out; /* Smooth transition for fade in/out */
}

.white {
  filter: blur(1px);
}
.border {
  filter: blur(0.25px);
}
.darkBorderBg {
  filter: blur(1.5px);
}
.glow {
  filter: blur(15px);
}

.input {
  background-color: #1b1b1f;
  border: none;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  color: white;
  padding-inline: 59px;
  font-size: 18px;
  box-sizing: border-box;
}

[data-theme="light"] .input {
  background-color: #f3f4f6;
  color: #1f2b40;
}

.input::placeholder {
  color: #c0b9c0;
  opacity: 1; /* Explicitly set opacity: 1 to ensure 100% opacity in all browsers */
}

[data-theme="light"] .input::placeholder {
  color: #718096;
  opacity: 1;
}

.input:focus {
  outline: none;
}

#main {
  position: relative;
  width: calc(100% - 4px);
  height: 56px;
  display: flex;
  align-items: center;
}

#pink-mask {
  pointer-events: none;
  width: 30px;
  height: 20px;
  position: absolute;
  background: #cf30aa;
  top: 10px;
  left: 5px;
  filter: blur(20px);
  opacity: 0.8;
  transition: all 2s;
}

#main:hover > #pink-mask {
  opacity: 0;
}

.white::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    #a099d8,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    #dfa2da,
    rgba(0, 0, 0, 0) 58%
  );
  animation: rotate-white 4s linear infinite; /* Permanent smooth rotation */
}

.border::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #1c191c,
    #402fb5 5%,
    #1c191c 14%,
    #1c191c 50%,
    #cf30aa 60%,
    #1c191c 64%
  );
  animation: rotate-border 4s linear infinite; /* Permanent smooth rotation */
}

.darkBorderBg::before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #18116a,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    #6e1b60,
    rgba(0, 0, 0, 0) 60%
  );
  animation: rotate-dark 4s linear infinite; /* Permanent smooth rotation */
}

.glow:before {
  content: "";
  z-index: -2;
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    #000,
    #402fb5 5%,
    #000 38%,
    #000 50%,
    #cf30aa 60%,
    #000 87%
  );
  animation: rotate-glow 4s linear infinite; /* Permanent smooth rotation */
}

/* Show glow and borders on focus only via smooth opacity fade-in */
#poda:focus-within > .white,
#poda:focus-within > .border,
#poda:focus-within > .darkBorderBg {
  opacity: 1;
}

#poda:focus-within > .glow {
  opacity: 0.4;
}

@keyframes rotate-white {
  0% {
    transform: translate(-50%, -50%) rotate(83deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(443deg);
  }
}

@keyframes rotate-border {
  0% {
    transform: translate(-50%, -50%) rotate(70deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(430deg);
  }
}

@keyframes rotate-dark {
  0% {
    transform: translate(-50%, -50%) rotate(82deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(442deg);
  }
}

@keyframes rotate-glow {
  0% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(420deg);
  }
}

#filter-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: 40px;
  width: 38px;
  isolation: isolate;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(180deg, #161329, black, #1d1b4b);
  border: 1px solid transparent;
  cursor: pointer;
}

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

.filterBorder::before {
  content: "";
  text-align: center;
  top: 50%;
  left: 50%;
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.35);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    #3d3a4f,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 50%,
    #3d3a4f,
    rgba(0, 0, 0, 0) 100%
  );
  animation: rotate-filter-border 4s linear infinite;
}

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

#search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0b9c0;
  z-index: 2;
}

[data-theme="light"] #search-icon {
  color: #718096;
}

/* Chatbox Panel Border Opacity Fix */
.ai-chat-panel {
  border: 1px solid #3f3f46 !important; /* Force solid 100% opacity border */
}

[data-theme="light"] .ai-chat-panel {
  border: 1px solid #cbd5e1 !important;
}