hp_chatbot/chat-interface/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --border: 217.2 32.6% 17.5%;
  }

  body {
    @apply bg-black text-foreground;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
  }
}

/* Netflix theme colors */
.netflix-red {
  color: #E50914;
}

.netflix-bg {
  background-color: #141414;
}

/* Prevent any border from appearing */
.no-borders, .no-borders::before, .no-borders::after {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
}

/* Markdown content styling */
.markdown-content {
  @apply text-base leading-relaxed;
}

.markdown-content h1 {
  @apply text-2xl font-bold mt-4 mb-2;
}

.markdown-content h2 {
  @apply text-xl font-bold mt-3 mb-2;
}

.markdown-content h3 {
  @apply text-lg font-bold mt-3 mb-1;
}

.markdown-content p {
  @apply my-2;
}

.markdown-content ul {
  @apply list-disc pl-5 my-2;
}

.markdown-content ol {
  @apply list-decimal pl-5 my-2;
}

.markdown-content li {
  @apply my-1;
}

.markdown-content a {
  @apply text-blue-600 hover:underline;
}

.markdown-content code {
  @apply font-mono bg-gray-200 px-1 py-0.5 rounded text-sm;
}

.markdown-content pre {
  @apply bg-gray-800 text-white p-3 rounded my-3 overflow-auto;
}

.markdown-content pre code {
  @apply bg-transparent text-white text-sm;
}

.markdown-content blockquote {
  @apply border-l-4 border-gray-300 pl-4 my-3 italic text-gray-700;
}

.markdown-content table {
  @apply border-collapse border border-gray-300 my-3 w-full;
}

.markdown-content th {
  @apply border border-gray-300 bg-gray-100 p-2 font-semibold;
}

.markdown-content td {
  @apply border border-gray-300 p-2;
}

/* Different background for assistant markdown vs user text */
.bg-blue-500 .markdown-content {
  @apply text-white;
}

.bg-blue-500 .markdown-content code {
  @apply bg-blue-600 text-white;
}

.bg-blue-500 .markdown-content a {
  @apply text-white underline;
}

.bg-blue-500 .markdown-content blockquote {
  @apply border-white/50 text-white/90;
}