@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import 'tailwindcss';

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

@layer base {
  body {
    font-family: 'Inter', sans-serif;
    background-color: hsl(60, 100%, 96%);
    color: hsl(0, 0%, 0%);

    h1 {
      @apply text-5xl md:text-6xl xl:text-7xl font-bold leading-tight;
    }

    h2 {
      @apply text-5xl lg:text-6xl font-bold leading-snug;
    }

    button {
      @apply cursor-pointer;
    }

    input:focus,
    textarea:focus,
    select:focus {
      @apply outline outline-blue-600;
    }

    /* light mode */
    .text-primary {
      color: hsl(0, 0%, 0%);
    }

    .text-secondary {
      color: hsl(132, 29%, 97%);
    }

    .text-muted {
      color: hsl(0, 0%, 25%);
    }

    .text-brand {
      color: hsl(221, 81%, 49%);
    }

    a {
      @apply text-blue-600;
    }

    code {
      @apply bg-gray-100 p-1 rounded;
    }

    .bg-navbar,
    .bg-sidebar {
      background-color: hsl(60, 100%, 96%);
    }

    .service-layout {
      background-color: hsl(60, 100%, 98%);
    }

    .chat-container {
     
    }

      .chat-container::-webkit-scrollbar {
    width: 1px;
  }

  .chat-container::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 8px;
  }

  .chat-container::-webkit-scrollbar-track {
    background: transparent; /* or hsl(var(--background)) */
  }

    .chat-list {
      @apply rounded-md cursor-pointer;
    }

    .chat {
      background-color: hsl(52, 28%, 84%);
    }

    .chat-list:hover {
      background-color: hsl(52, 28%, 84%);
    }

    .bg-secondary {
      background-color: hsl(60, 0%, 98%);
    }

    .bg-footer {
      background-color: hsl(60, 76%, 96%);
    }

    .bg-blackNWhite {
      background-color: hsl(0, 0%, 100%);
    }

    .bg-card {
      background-color: hsl(0, 0%, 100%);
    }

    .bg-card:hover {
      background-color: hsl(0, 0%, 98%);
    }

    .bg-card-secondary {
      color: hsl(0, 0%, 100%);
      background-color: hsl(0, 0%, 0%);
    }

    .bg-service {
      background-color: hsl(211, 100%, 78%);
    }

    .bg-service-card {
      background-color: hsl(0, 0%, 35%);
    }

    .service-outlet {
      background-color: hsl(60, 100%, 98%);
      @apply w-full max-w-5xl mx-auto space-y-8 p-6 lg:p-12 xl:rounded-2xl xl:shadow;
    }
    .blob-gradient {
      @apply bg-gradient-to-t from-blue-300 via-blue-400 to-blue-500 rounded-full blur-[180px] opacity-30;
    }

    .grid-line-color {
      background: linear-gradient(
          to right,
          rgba(107, 114, 128, 0.2) 1px,
          transparent 1px
        ),
        linear-gradient(
          to bottom,
          rgba(107, 114, 128, 0.2) 1px,
          transparent 1px
        );
      background-size: 50px 56px;
      mask-image: radial-gradient(
        ellipse 80% 50% at 50% 0%,
        #000 70%,
        transparent 120%
      );
    }
  }

  /* prose */
  .prose p {
    margin-bottom: 1.05em;
  }

  .prose h1 {
    font-size: 2rem;
    margin-top: 1.25em;
    margin-bottom: 1em;
  }

  .prose h2 {
    font-size: 1.8rem;
    margin-top: 1.25em;
    margin-bottom: 0.75em;
  }

  .prose h3 {
    font-size: 1.2rem;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
  }

  .prose ul,
  .prose ol {
    margin-bottom: 1em;
  }

  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;
    font-size: 0.95rem;
  }

  .prose thead {
    background-color: hsl(60, 53%, 82%);
  }

  .prose th {
    font-weight: 800;
    font-size: 1.1rem;
  }

  .prose th,
  .prose td {
    border: 1px solid hsl(0, 0%, 85%);
    padding: 0.5rem 0.75rem;
    text-align: left;
  }

  .prose th {
    font-weight: 600;
  }

  .prose tbody tr:nth-child(even) {
    background-color: hsl(63, 69%, 95%);
  }

  .prose code {
    margin-bottom: 1.15rem;
  }

  .prose p {
    margin-bottom: 2.15rem;
  }

  /* Dark mode */
  .dark {
    body {
      background-color: hsl(0, 0%, 15%);
      color: hsl(0, 0%, 100%);
    }
    code {
      @apply bg-gray-800 text-gray-200;
    }

    .text-primary {
      color: hsl(0, 0%, 100%);
    }

    .text-secondary {
      color: hsl(220, 11%, 17%);
    }
    .text-muted {
      color: hsl(0, 0%, 75%);
    }

    .text-brand {
      color: hsl(221, 100%, 65%);
    }

    a {
      @apply text-blue-400;
    }

    .bg-navbar,
    .bg-secondary,
    .bg-sidebar {
      background-color: hsl(0, 0%, 10%);
    }

    .service-layout {
      background-color: hsl(0, 0%, 13%);
    }


 .chat-container::-webkit-scrollbar-thumb {
    background-color: white;
  }
    .chat {
      background-color: hsl(0, 0%, 1%);
    }

    .chat-list:hover {
      background-color: hsl(0, 0%, 1%);
    }

    .bg-footer {
      background-color: hsl(0, 0%, 17%);
    }

    .bg-blackNWhite {
      background-color: hsl(0, 0%, 0%);
    }

    .bg-card {
      background-color: hsl(0 0% 10%);
    }

    .bg-card:hover {
      background-color: hsl(0, 0%, 8%);
    }

    .bg-card-secondary {
      color: hsl(0, 0%, 0%);
      background-color: hsl(60, 100%, 98%);
    }

    .bg-service {
      background-color: hsl(198, 98%, 53%);
    }

    .bg-service-card {
      background-color: hsl(0, 0%, 59%);
    }

    .service-outlet {
      background-color: hsl(0, 0%, 13%);
      @apply xl:bg-[#1a1a1a];
      select option {
        background-color: hsl(0, 0%, 19%);
      }
    }

    .blob-gradient {
      @apply bg-gradient-to-t from-blue-500 via-blue-600 to-blue-700 rounded-full blur-[180px] opacity-10;
    }

    .prose thead {
      background-color: hsl(60, 2%, 9%);
    }

    .prose tbody tr:nth-child(even) {
      background-color: hsl(0, 0%, 16%);
    }

    /* dark end */
  }
}

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }
  .flex-between {
    @apply flex items-center justify-between;
  }
  .flex-col-center {
    @apply flex flex-col items-center justify-center;
  }

  .boundary {
    @apply container mx-auto px-2 md:px-4 lg:px-8;
  }

  .wall {
    @apply max-w-6xl mx-auto;
  }

  .bg-primary {
    background-color: hsl(221, 97%, 54%);
  }

  .primary-outline {
    border-color: hsl(215, 50%, 40%);
  }

  .text-accent {
    color: #10b981;
  }

  .bg-faded-pearl {
    background: hsl(60, 100%, 96%);
  }

  .border-primary {
    border-color: hsl(215, 52%, 40%);
  }

  .text-area,
  .text-area-short {
    @apply border rounded-lg w-full p-3 font-mono text-sm bg-transparent min-h-[250px] placeholder:text-gray-400 placeholder:text-base;
  }
  .text-area-short {
    @apply min-h-28;
  }

  .primary-gradient {
    @apply bg-gradient-to-tr from-blue-600 via-blue-500 to-blue-400;
  }

  .description {
    @apply max-w-xl xl:max-w-2xl md:text-lg xl:text-xl mt-6 xl:mt-8;
  }

  .sidebar {
    @apply h-screen overflow-y-auto;
  }

  .sidebar-content {
    @apply flex items-center gap-2 px-4 py-2 whitespace-nowrap;
  }

  .sidebar-content-animation {
    @apply truncate transition-[opacity,width,margin] duration-300 overflow-hidden whitespace-nowrap;
  }

  .popover-button {
    @apply flex items-center justify-baseline gap-2 mx-auto p-1 w-full min-w-20;
  }
}
