@tailwind base;
@layer base {
  html,
  :host {
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      Segoe UI,
      Roboto,
      Helvetica Neue,
      Arial,
      Noto Sans,
      sans-serif,
      Apple Color Emoji,
      Segoe UI Emoji,
      Segoe UI Symbol,
      Noto Color Emoji;
  }
}

@tailwind components;
@tailwind utilities;

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}

a:focus {
  box-shadow: none;
}

[data-disabled='true'] {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.-daftplugLoading {
  position: relative;
  pointer-events: none !important;
  overflow: hidden !important;
}

.-daftplugLoading:before {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  z-index: 999999999999999;
  pointer-events: none !important;
}

.-daftplugLoading:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 6px solid #1447e6;
  border-left-color: #0000;
  border-radius: 50%;
  z-index: 10000000000000000;
  animation: daftplugLoadingSpinner 1s linear infinite;
}

@keyframes daftplugLoadingSpinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}

@-webkit-keyframes pageFade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes pageFade {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shine-text {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: 0 0;
  }
}

#ai [data-ai-response-content] h1 {
  @apply text-3xl font-bold [&:not(:last-child)]:mb-5;
}

#ai [data-ai-response-content] h2 {
  @apply text-2xl font-semibold [&:not(:last-child)]:mb-4;
}

#ai [data-ai-response-content] h3 {
  @apply text-xl font-medium [&:not(:last-child)]:mb-3.5;
}

#ai [data-ai-response-content] h4 {
  @apply text-lg font-medium [&:not(:last-child)]:mb-3;
}

#ai [data-ai-response-content] h5 {
  @apply text-base font-medium [&:not(:last-child)]:mb-2.5;
}

#ai [data-ai-response-content] h6 {
  @apply text-sm font-medium [&:not(:last-child)]:mb-2;
}

#ai [data-ai-response-content] p {
  @apply text-[15px] leading-relaxed [&:not(:last-child)]:mb-3;
}

#ai [data-ai-response-content] hr {
  @apply my-8 border-t border-gray-300;
}

#ai [data-ai-response-content] strong {
  @apply font-semibold;
}

#ai [data-ai-response-content] em {
  @apply italic;
}

#ai [data-ai-response-content] a {
  @apply font-medium text-blue-600 decoration-2 hover:underline focus:underline focus:outline-none;
}

#ai [data-ai-response-content] ul,
#ai [data-ai-response-content] ol {
  @apply list-outside space-y-2 ps-7 [&:not(:last-child)]:mb-4;
}

#ai [data-ai-response-content] ul {
  @apply list-disc;
}

#ai [data-ai-response-content] ol {
  @apply list-decimal;
}

#ai [data-ai-response-content] li > ul {
  @apply mt-2 list-[circle];
}

#ai [data-ai-response-content] pre {
  @apply whitespace-pre-wrap rounded-lg bg-gray-800 p-3 text-white [&:not(:last-child)]:mb-4;
}

#ai [data-ai-response-content] li > pre {
  @apply mt-2;
}

#ai [data-ai-response-content] pre code {
  @apply bg-transparent p-0 text-white;
}

#ai [data-ai-response-content] code {
  @apply whitespace-pre-wrap rounded bg-gray-200 px-1 py-0.5;
}

#ai [data-ai-response-content] details {
  @apply rounded-lg bg-gray-100 px-4 py-2 [&:not(:last-child)]:mb-4;
}

#ai [data-ai-response-content] summary {
  @apply cursor-pointer;
}

#ai [data-ai-response-content] details[open] {
  @apply p-4;
}

#ai [data-ai-response-content] details[open] summary {
  @apply mb-2;
}

#ai [data-ai-response-content] article {
  @apply rounded-lg bg-gray-200 p-4 [&:not(:last-child)]:mb-6;
}
