html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Optimized Chat Bubbles --- */
.chat-bubble {
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-bubble.user {
  margin-left: auto;
  background: linear-gradient(135deg, #2acba0, #2acba0);
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.chat-bubble.bot {
  background-color: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
}

/* MARKDOWN UI/UX CHANGE: Dedicated markdown styling for bot bubbles only.
   This keeps functionality unchanged while making parsed markdown easier to read. */
.chat-bubble.bot .markdown-content {
  line-height: 1.55;
  color: #0f172a;
}

/* MARKDOWN UI/UX CHANGE: Remove awkward first/last spacing that caused large gaps in chat bubbles. */
.chat-bubble.bot .markdown-content > :first-child {
  margin-top: 0;
}

.chat-bubble.bot .markdown-content > :last-child {
  margin-bottom: 0;
}

/* MARKDOWN UI/UX CHANGE: Improve paragraph rhythm for multi-question assistant responses. */
.chat-bubble.bot .markdown-content p {
  margin: 0 0 0.65rem;
}

/* MARKDOWN UI/UX CHANGE: Make generated section titles look intentional without becoming oversized. */
.chat-bubble.bot .markdown-content h1,
.chat-bubble.bot .markdown-content h2,
.chat-bubble.bot .markdown-content h3,
.chat-bubble.bot .markdown-content h4 {
  margin: 0.9rem 0 0.45rem;
  /* MARKDOWN UI/UX CHANGE: Reduced heading weight from 800 to 700 so markdown titles are readable without feeling overly heavy. */
  font-weight: 700;
  line-height: 1.25;
  color: #020617;
}

.chat-bubble.bot .markdown-content h1 {
  font-size: 1.35rem;
}

.chat-bubble.bot .markdown-content h2 {
  font-size: 1.18rem;
}

.chat-bubble.bot .markdown-content h3,
.chat-bubble.bot .markdown-content h4 {
  font-size: 1rem;
}

/* MARKDOWN UI/UX CHANGE: Better spacing and indentation for UOM/category option lists. */
.chat-bubble.bot .markdown-content ul,
.chat-bubble.bot .markdown-content ol {
  margin: 0.45rem 0 0.75rem;
  padding-left: 1.15rem;
}

.chat-bubble.bot .markdown-content li {
  margin: 0.28rem 0;
  padding-left: 0.15rem;
}

.chat-bubble.bot .markdown-content li > p {
  margin: 0.2rem 0;
}

/* MARKDOWN UI/UX CHANGE: Use clean bullets that match the existing Cureate green visual language. */
.chat-bubble.bot .markdown-content ul > li::marker {
  color: #2acba0;
  font-size: 0.85em;
}

.chat-bubble.bot .markdown-content ol > li::marker {
  color: #64748b;
  font-weight: 700;
}

/* MARKDOWN UI/UX CHANGE: Make important labels like UOM codes and category names stand out clearly. */
.chat-bubble.bot .markdown-content strong {
  color: #047857;
  /* MARKDOWN UI/UX CHANGE: Reduced bold markdown weight from 800 to 600 to avoid overly heavy emphasis. */
  font-weight: 600;
}

/* MARKDOWN UI/UX CHANGE: Improve readable inline code for IDs, codes, filenames, and examples. */
.chat-bubble.bot .markdown-content code {
  background: #f1f5f9;
  color: #0f766e;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.08rem 0.32rem;
  font-size: 0.88em;
  font-weight: 700;
}

/* MARKDOWN UI/UX CHANGE: Prevent Tailwind Typography pseudo backticks around inline code. */
.chat-bubble.bot .markdown-content code::before,
.chat-bubble.bot .markdown-content code::after {
  content: "";
}

/* MARKDOWN UI/UX CHANGE: Style code/pre blocks for readable extracted examples without overflow issues. */
.chat-bubble.bot .markdown-content pre {
  margin: 0.65rem 0;
  padding: 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  overflow-x: auto;
}

.chat-bubble.bot .markdown-content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: #334155;
  font-weight: 500;
}

/* MARKDOWN UI/UX CHANGE: Improve blockquotes for assistant clarifications and warnings. */
.chat-bubble.bot .markdown-content blockquote {
  margin: 0.7rem 0;
  padding: 0.65rem 0.8rem;
  border-left: 4px solid #2acba0;
  background: #f0fdfa;
  color: #334155;
  border-radius: 0 0.75rem 0.75rem 0;
  font-style: normal;
}

/* MARKDOWN UI/UX CHANGE: Make markdown tables usable inside chat bubbles on small screens. */
.chat-bubble.bot .markdown-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0.75rem 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9em;
}

.chat-bubble.bot .markdown-content th,
.chat-bubble.bot .markdown-content td {
  padding: 0.5rem 0.65rem;
  border: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.chat-bubble.bot .markdown-content th {
  background: #f8fafc;
  color: #334155;
  /* MARKDOWN UI/UX CHANGE: Reduced table header weight from 800 to 700 for a softer markdown UI. */
  font-weight: 700;
}

/* MARKDOWN UI/UX CHANGE: Improve links in markdown output without impacting user bubbles. */
.chat-bubble.bot .markdown-content a {
  color: #047857;
  /* MARKDOWN UI/UX CHANGE: Reduced link weight from 700 to 600 so links do not compete with headings. */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.chat-bubble.bot .markdown-content a:hover {
  color: #065f46;
}

/* MARKDOWN UI/UX CHANGE: Make dividers subtle if the assistant returns --- in markdown. */
.chat-bubble.bot .markdown-content hr {
  margin: 0.9rem 0;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

/* --- Premium Mobile Drawer --- */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 290px;
  z-index: 100;
  transform: translateX(-110%);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  background: white;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
}

.sidebar-drawer.open {
  transform: translateX(0);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.6);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  backdrop-filter: blur(4px);
}

.drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .sidebar-drawer {
    position: static;
    transform: none;
    box-shadow: none;
    z-index: auto;
  }
}

/* --- Modern Typing Indicator --- */
.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #94a3b8;
  animation: typing-bounce 1.4s ease-in-out infinite both;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typing-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.6;
  }

  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* --- Custom Scrollbar for Chat Area --- */
.chat-container::-webkit-scrollbar {
  width: 4px;
}

.chat-container::-webkit-scrollbar-track {
  background: transparent;
}

.chat-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --- Glass Effects --- */
.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- Collapsible Extracted Text --- */
.extracted-text-container {
  border-top: 1px solid #e2e8f0;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.extracted-text-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: #64748b;
  padding: 0;
  transition: color 0.2s ease;
}

.extracted-text-toggle:hover {
  color: #059669;
}

.extracted-text-toggle svg {
  transition: transform 0.2s ease;
}

.extracted-text-content {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background-color: #f8fafc;
  border-radius: 0.75rem;
  font-size: 0.75rem;
  color: #475569;
  white-space: pre-wrap;
  overflow-x: auto;
}