extension/ui/css/custom.css
html {
  container-type: inline-size;
  touch-action: manipulation;
  font-feature-settings:
    "rlig" 1,
    "calt" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

@supports (font-synthesis-weight: none) {
  html {
    font-synthesis: initial;
    font-synthesis-weight: none;
  }
}

#InputBarContainer {
  font-size: 14px;
}

.animate-\[bgblink_200ms_3\] {
  animation: bgblink 200ms 3;
}

@keyframes bgblink {
  0%,
  100% {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

  50% {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity));
  }
}

.loading-text {
  background: linear-gradient(90deg, #999999 0%, #000000 50%, #999999 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    initialFade 0.3s ease-out forwards,
    rainbowLoop 3s linear infinite;
}

@keyframes initialFade {
  from {
    color: currentColor;
  }

  to {
    color: transparent;
  }
}

@keyframes rainbowLoop {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: -200% center;
  }
}
