@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind themes;

@theme {
  --color-brandy-50: #fcf8f0;
  --color-brandy-100: #f7eedd;
  --color-brandy-200: #efdbb9;
  --color-brandy-300: #e5c492;
  --color-brandy-400: #d8a05f;
  --color-brandy-500: #cf8840;
  --color-brandy-600: #c17235;
  --color-brandy-700: #a15a2d;
  --color-brandy-800: #81482b;
  --color-brandy-900: #693d25;
  --color-brandy-950: #381d12;
}

.btn {
  @apply text-center font-semibold rounded-lg bg-linear-to-b from-brandy-700 to-brandy-800 text-white border-brandy-900 py-2 px-3 inset-shadow-brandy-50/50 shadow-md shadow-brandy-800/50;
}

.btn--lg {
  @apply py-3 px-4 inset-shadow-xs;
}

@layer components {

  /* Message styles */
  .message {
    @apply p-5 font-sans rounded-[2rem] my-2 text-base/7;
    width: fit-content;
    max-width: 100%;
  }

  .message.animate-fadeInSlideUp {
    opacity: 0;
  }

  .message.received {
    @apply bg-accent-500 text-black hover:bg-accent-600;
  }

  .message.sent {
    @apply bg-black text-white hover:bg-stone-800 relative;
  }

  .message ol,
  .message ul {
    @apply my-3 ms-4 list-disc;
  }

  .message h1, h2, h3 {
    @apply font-bold;
  }

  .message h1 {
    @apply text-2xl;
  }

  .message h2 {
    @apply text-xl;
  }

  .message h3 {
    @apply text-lg;
  }
  
  
  
  

  /* Input styles */
  .input-positioner {
    @apply w-full sticky bottom-0 start-0 px-3 pb-4 pt-2;
    @apply bg-gradient-to-b from-0% to-50% from-transparent to-brandy-100;
    @apply rounded-full;
  }

  .input-positioner .input-wraper {
    @apply main-width mx-auto mb-3;
  }

  /* Loader styles */
  .loader {
    width: 30px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #ffffff 90%, #0000);
    background:
      var(--_g) 0% 50%,
      var(--_g) 50% 50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
  }

  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-gray-500;

    a:not(.gap) {
      @apply block rounded-lg px-3 py-1 bg-gray-200;

      &:hover {
        @apply bg-gray-300;
      }

      &:not([href]) {
        /* disabled links */
        @apply text-gray-300 bg-gray-100 cursor-default;
      }

      &.current {
        @apply text-white bg-gray-400;
      }
    }

    label {
      @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

      input {
        @apply bg-gray-100 border-none rounded-md;
      }
    }
  }
}

.recording {
  animation: pulse 2s infinite;
  color: var(--color-accent);
}




[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  color: #9ca3af;
  /* text-gray-400 */
  position: absolute;
  pointer-events: none;
  text-align: left;
}