/* index.css */
/* index.css – keep existing styles as your light theme defaults */
/* Dark mode backgrounds */
/* Dark mode base background and text */
#mongodb-ai-playground.dark-theme,
#mongodb-ai-playground.dark-theme .content-wrapper {
  background-color: #011e2b;
  color: #f9fafb;
}

/* Panels / cards */
#mongodb-ai-playground.dark-theme #settings-section,
#mongodb-ai-playground.dark-theme #document-view,
#mongodb-ai-playground.dark-theme #rag-answer,
#mongodb-ai-playground.dark-theme .chunk-card,
#mongodb-ai-playground.dark-theme .doc-card {
  background-color: #1C2D39;
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: rgb(232, 237, 235);
  border-radius: 12px;
  border: 1px solid #3D4F58;
  background: #1C2D38;
  /* card border */
}

/* Source document preview text: black so it pops against light highlights */
#mongodb-ai-playground.dark-theme #document-view span {
  color: #ffffff;
}

/* MongoDB document field names (keys) in white */
#mongodb-ai-playground.dark-theme .doc-key {
  color: #ffffff;
}

/* Inputs in settings panels */
#mongodb-ai-playground.dark-theme #settings-section input[type="text"],
#mongodb-ai-playground.dark-theme #settings-section input[type="range"],
#mongodb-ai-playground.dark-theme #settings-section select,
#mongodb-ai-playground.dark-theme #settings-section textarea,
/* ADDED: Include number inputs for dark theme styling */
#mongodb-ai-playground.dark-theme #settings-section input[type="number"] {
  background-color: #112733;
  /* inner field background */
  border: 1px solid #124151;
  /* field border */
  color: #f9fafb;
  margin-bottom: 0;
}

/* Placeholders */
#mongodb-ai-playground.dark-theme #settings-section input::placeholder,
#mongodb-ai-playground.dark-theme #settings-section textarea::placeholder {
  color: #9ca3af;
}

/* Focus state for fields */
#mongodb-ai-playground.dark-theme #settings-section input:focus,
#mongodb-ai-playground.dark-theme #settings-section select:focus,
#mongodb-ai-playground.dark-theme #settings-section textarea:focus {
  border-color: #00ed64;
  outline: none;
  box-shadow: 0 0 0 1px rgba(0, 237, 100, 0.35);
}

.column-content {
  display: flex;
  flex-direction: column;
  /* Reduced from 400px to ensure it fits alongside taller settings */
}

/* Ensure document view, chunks container, doc list containers, and rag answer stretch vertically */
.column-content #document-view,
.column-content #chunks-table-container,
.column-content #doc-list-container,
.column-content #rag-answer {
  flex: 1 1 auto;
  min-height: 0;
}

/* Buttons (Dark Mode) - FIX: Use flex properties for proper vertical centering */
#mongodb-ai-playground.dark-theme .action-button {
  appearance: none;
  padding: 0 12px;
  /* Standard horizontal padding */
  margin: 0px;
  display: inline-flex;
  justify-content: center;
  /* Center horizontally */
  align-items: center;
  /* Center vertically */
  transition: 150ms ease-in-out;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  z-index: 0;
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 6px;
  background-color: rgb(0, 104, 74);
  border: 1px solid rgb(0, 237, 100);
  color: rgb(255, 255, 255);
  font-size: 13px;
  font-weight: 500;
  height: 36px;
}

#mongodb-ai-playground.dark-theme .action-button:hover:not([disabled]),
#mongodb-ai-playground.dark-theme .action-button:active:not([disabled]) {
  background: #00593F;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 237, 100, 0.35);
}

/* Chunk/doc tags */
#mongodb-ai-playground.dark-theme .chunk-tag,
#mongodb-ai-playground.dark-theme .doc-tag {
  background: #112733;
  border: 1px solid #124151;
  color: #f9fafb;
}

/* Tabs and underline */
#mongodb-ai-playground.dark-theme .steps-nav {
  border-bottom-color: #ffffff;
}

#mongodb-ai-playground.dark-theme .active-step {
  border-bottom-color: #00ed64;
  color: #e5e7eb;
}

#mongodb-ai-playground {
  height: 580px; 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* For JupyterLab's "Create New View for Cell Output" */
.jp-OutputArea-standalone #mongodb-ai-playground,
.jp-OutputArea-child:only-child #mongodb-ai-playground {
  height: 100vh;
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 10px;
}

/* Error alert at the bottom */
#error-alert,
.alert.alert-danger {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  overflow-y: auto;
}

/* Ensure error box is always visible above content */
#error-alert {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #dc3545;
  border-radius: 8px;
  font-weight: bold;
  display: none;
  padding: 10px;
  min-height: 40px;
  max-height: 90px;
  overflow-y: auto;
}

#error-alert[style*="display: block"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#mongodb-ai-playground>.sub-tabs-nav,
#mongodb-ai-playground>.steps-nav {
  flex: 0 0 auto;
}

#mongodb-ai-playground>div:not(.sub-tabs-nav):not(.steps-nav) {
  flex: 1 1 auto;
  overflow: auto;
}

/* Basic container styling */
#chunking-section>div:first-child {}

/* The container that holds document preview and chunks table */
#chunking-section>div:nth-child(2),
#rag-section>.two-column-layout {
  display: flex;
  gap: 3rem;
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Optional, to be explicit */
#rag-section {
  display: block;
}

#embedding-section {
  display: flex;
  flex-direction: column;
}

#embedding-section .two-column-layout {
  flex: 1 1 auto;
}

/* Steps navigation */
.steps-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  border-bottom: 3px solid #c1c7c6;
}

.step-button {
  background: none;
  border: none;
  color: #c1c7c6;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  padding: 0.5rem 1rem;
  cursor: pointer;
  outline: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}

.step-button:hover {
  color: #464c4f;
  background-color: transparent;
}

.active-step {
  color: #464c4f;
  border-bottom-color: #006400;
}

/* Light Mode / Base .action-button */
.action-button {
  background: #F9FBFA;
  border: 1px solid #889397;
  color: #001E2B;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  line-height: 34px;
  padding: 0 12px;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 120ms ease;
  text-decoration: none;
  outline: none;
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-radius: 6px !important;
}

/* Increased specificity for light mode button to prevent JLab button override */
#mongodb-ai-playground .action-button {
  margin: initial;
  padding: 0 12px;
}

#mongodb-ai-playground .action-button:hover:not([disabled]),
#mongodb-ai-playground .action-button:active:not([disabled]) {
  color: #001E2B;
  background: #F9FBFA;
  box-shadow: 0 0 0 3px #E8EDEB;
  outline: 0;
}

/* Labels and inputs */
.control-group label {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  color: #889397;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 0;
  height: 16px;
  line-height: 16px;
}

#mongodb-ai-playground button[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea styling */
#mongodb-ai-playground textarea {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.5rem;
  /* FONT FIX: Change to use the primary font */
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
  resize: vertical;
}

#mongodb-ai-playground textarea:focus {
  outline: none;
  border-color: #0b5d3a;
}

/* Error message (legacy) */
.error-message {
  display: none;
}

/* --- STANDARDIZED SETTINGS CONTROLS --- */
#settings-section {
  display: grid;
  /* Default to 3 columns, but specific sections override */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem 1.5rem;
  /* Standardized gap */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  background: #f9fbfa;
  border-radius: 8px;
  border: 1px solid #e8edeb;
  /* Constrain height to prevent plugin from growing too tall */
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  /* Ensures control group respects grid boundaries */
}

/* Group containing buttons */
.control-group>div:has(button) {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  height: 36px;
  /* Standard height to align with inputs */
}

.range-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 36px;
  /* Standard height */
}

.range-value {
  min-width: 50px;
  text-align: right;
  font-weight: 600;
  color: #001e2b;
  font-size: 14px;
}

#settings-section select {
  border: 1px solid #e8edeb;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  padding: 0.5rem;
  width: 100%;
  background: white;
  height: 36px;
}

#settings-section input[type="range"] {
  flex: 1;
  margin: 0;
}

/* UPDATED: Target all single-line text/number inputs for standardized styling */
#settings-section input[type="text"],
#settings-section input[type="number"] {
  border: 1px solid #e8edeb;
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  padding: 0.5rem 0.75rem;
  /* Standardized padding */
  background: #fff;
  color: #001e2b;
  width: 100%;
  /* Important for standardization */
  box-sizing: border-box;
  height: 36px;
}

#settings-section textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  /* Minimum height for textarea */
  height: auto;
  font-size: 13px;
  padding: 0.5rem 0.75rem;
}

/* --- STEP-SPECIFIC GRID OVERRIDES --- */

/* Chunking & Embedding steps (4 columns) */
#chunking-section #settings-section,
#embedding-section #settings-section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* FIX: Alignment for the Destination Collection input/button group */
#embedding-section #settings-section .control-group:nth-child(3)>div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
}

#embedding-section #settings-section .control-group:nth-child(3) input[type="text"] {
  flex: 1;
  /* Allow input to take remaining space */
  min-width: 0;
}

#embedding-section #settings-section .control-group:nth-child(3) button {
  flex-shrink: 0;
  /* Keep button size fixed */
  margin: 0;
  /* Remove margin added by general button rule */
}


/* RAG section (4 columns for row alignment) */
#rag-section #settings-section {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Reduce padding and gap slightly */
  padding: 0.75rem 1rem;
  gap: 0.5rem 1.25rem;
  max-height: 150px; /* Slightly tighter than global 180px */
}

#rag-section #settings-section .query-and-button-group {
  grid-column: 1 / 2;
  /* Occupy the first column */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* NEW ALIGNMENT FIX: Nest the input and button to constrain the height */
  position: relative;
}

/* NEW ALIGNMENT FIX: Container for the Query Input and Button */
#rag-section #settings-section .query-and-button-group>div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Ensure this div is present in your JSX for this to work */
}

/* The Query Input should take the first row of space */
#rag-section #settings-section .query-and-button-group input[type="text"] {
  /* Leave default height: 36px */
  margin-bottom: 0.5rem;
  /* Separates the input from the button below it */
}

/* The Send button should align just below the Query Input */
#rag-section #settings-section .query-and-button-group>button {
  width: 100%;
  /* Make the button match the input field's width */
}

/* The Prompt Template will now occupy the fourth column, and needs extra height */
#rag-section #settings-section .prompt-template-group {
  grid-column: 4 / 5;
  /* Occupy the fourth column */
}

/* Prompt Template Textarea needs to span the height of the two rows used by the Query/Button group */
#rag-section #settings-section .prompt-template-group textarea {
  /* Reduced from 90px to allow more room for the results below */
  min-height: 70px;
  max-height: 70px;
}
/* Responsive fallback for smaller screens */
@media (max-width: 1024px) {

  #chunking-section #settings-section,
  #embedding-section #settings-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* MODIFIED: RAG section collapses to 1 column on small screens */
  #rag-section #settings-section {
    grid-template-columns: 1fr;
  }

  /* Ensure all RAG-specific control groups span the full 1 column */
  #rag-section #settings-section .query-and-button-group,
  #rag-section #settings-section .prompt-template-group,
  /* Target the new Top K and Score Threshold controls based on their position */
  #rag-section #settings-section .control-group:nth-child(2),
  #rag-section #settings-section .control-group:nth-child(3) {
    grid-column: 1 / 1;
  }

  /* Reset height for textarea in 1-column view */
  #rag-section #settings-section .prompt-template-group textarea {
    min-height: 80px;
  }
}

/* --- SCROLLBAR AUTO-HIDE STYLES (APPLIED TO ALL PANELS) --- */

/* Combined selector for all main scrollable areas */
#document-view,
#chunks-table-container,
#doc-list-container,
#rag-answer,
.chunk-card-container,
#doc-list-container .doc-card-container {
  flex: 1 1 auto;
  /* <-- Fill the rest of the vertical space */
  max-height: none;
  overflow-y: auto;

  /* Light Mode/Base Scrollbar Styles */

  /* 1. WebKit Browsers (Chrome, Safari, new Edge): Hide thumb by default */
  &::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* Invisible by default */
    border-radius: 4px;
  }

  /* 2. Firefox: Use 'thin' scrollbar and set transparent track */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

  /* 3. Reserve scrollbar space to prevent content jump */
  scrollbar-gutter: stable;

  /* 4. For older Edge/IE - Keep default 'auto' */
  -ms-overflow-style: auto;
}

/* Light Mode: Show the thumb when the element is hovered over or actively scrolling */
#document-view:hover::-webkit-scrollbar-thumb,
#document-view:active::-webkit-scrollbar-thumb,
#chunks-table-container:hover::-webkit-scrollbar-thumb,
#chunks-table-container:active::-webkit-scrollbar-thumb,
#doc-list-container:hover::-webkit-scrollbar-thumb,
#doc-list-container:active::-webkit-scrollbar-thumb,
#rag-answer:hover::-webkit-scrollbar-thumb,
#rag-answer:active::-webkit-scrollbar-thumb,
.chunk-card-container:hover::-webkit-scrollbar-thumb,
.chunk-card-container:active::-webkit-scrollbar-thumb,
#doc-list-container .doc-card-container:hover::-webkit-scrollbar-thumb,
#doc-list-container .doc-card-container:active::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}

/* Settings section scrollbar styling */
#settings-section {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  scrollbar-gutter: stable;
}

#settings-section::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

#settings-section::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 4px;
}

#settings-section:hover::-webkit-scrollbar-thumb,
#settings-section:active::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}

#settings-section input[type="text"][disabled],
#settings-section input[type="text"][readOnly],
#settings-section input[type="number"][disabled],
#settings-section input[type="number"][readOnly],
#settings-section textarea[disabled],
#settings-section textarea[readOnly] {
  background-color: #e8edeb;
  color: #889397;
  cursor: default;
  border-color: #c1c7c6;
}

#mongodb-ai-playground.dark-theme #settings-section input[type="text"],
#mongodb-ai-playground.dark-theme #settings-section input[type="number"],
#mongodb-ai-playground.dark-theme #settings-section select,
#mongodb-ai-playground.dark-theme #settings-section textarea {
  background-color: #112733;
  border: 1px solid #124151;
  color: #f9fafb;
}

#mongodb-ai-playground.dark-theme #settings-section input[type="text"][disabled],
#mongodb-ai-playground.dark-theme #settings-section input[type="text"][readOnly],
#mongodb-ai-playground.dark-theme #settings-section input[type="number"][disabled],
#mongodb-ai-playground.dark-theme #settings-section input[type="number"][readOnly],
#mongodb-ai-playground.dark-theme #settings-section textarea[disabled],
#mongodb-ai-playground.dark-theme #settings-section textarea[readOnly] {
  background-color: #0d212b;
  color: #9ca3af;
  border-color: #0b5d3a;
  opacity: 1;
  cursor: default;
}

#mongodb-ai-playground.dark-theme #loadButton:disabled {
  /* Keep your existing dark mode disabled button styling */
  opacity: 0.7;
  cursor: not-allowed;
  background-color: #004d37;
  border-color: #00ed64;
}


/* Dark Mode Scrollbar Overrides (using a lighter thumb color) */
#mongodb-ai-playground.dark-theme #document-view:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #document-view:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #chunks-table-container:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #chunks-table-container:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #doc-list-container:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #doc-list-container:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #rag-answer:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #rag-answer:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme .chunk-card-container:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme .chunk-card-container:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #doc-list-container .doc-card-container:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #doc-list-container .doc-card-container:active::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #settings-section:hover::-webkit-scrollbar-thumb,
#mongodb-ai-playground.dark-theme #settings-section:active::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Dark Mode: Firefox scrollbar color override */
#mongodb-ai-playground.dark-theme #document-view,
#mongodb-ai-playground.dark-theme #chunks-table-container,
#mongodb-ai-playground.dark-theme #doc-list-container,
#mongodb-ai-playground.dark-theme #rag-answer,
#mongodb-ai-playground.dark-theme .chunk-card-container,
#mongodb-ai-playground.dark-theme #doc-list-container .doc-card-container,
#mongodb-ai-playground.dark-theme #settings-section {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* --- END SCROLLBAR AUTO-HIDE STYLES --- */


/* Document preview box - keeping remaining original styles */
#document-view {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: pre-wrap;
}

/* RAG answer box - same styling as document-view */
#rag-answer {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-y: auto;
  min-height: 0;
}

#rag-answer pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
}

/* Chunks table container */
#chunks-table-container {
  flex: 1;
}

#doc-list-container {
  flex: 1 1 auto;
  min-height: 0;
  gap: 1rem;
  padding: 0rem;
}

/* The container for all chunk cards */
.chunk-card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0rem;
}

/* Each chunk card */
.chunk-card {
  position: relative;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 1rem;
  /* FONT FIX: Apply primary font family */
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* The tag showing page and chunk number */
.chunk-tag {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 9999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  text-transform: uppercase;
}

/* Chunk text area */
.chunk-text {
  margin-top: 1.5rem;
  white-space: pre-wrap;
}

/* Mongo doc list */
.doc-card-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0rem;
}

.doc-card {
  background: #fff;
  padding: 1rem;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  /* FONT FIX: Apply primary font family */
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.doc-key {
  font-weight: bold;
  color: #000;
}

.doc-value {
  color: #24292e;
}

.doc-value-id {
  color: #D9472B;
}

.doc-value-text {
  color: #5aa381;
}

.doc-value-embedding {
  color: #3A80EA;
  white-space: pre-wrap;
}

#chunking-section>div:nth-child(2),
#rag-section>.two-column-layout {
  display: flex;
  gap: 3rem;
  align-items: stretch;
  /* <– important */
  font-family: 'Euclid Circular A', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* RAG doc cards (retrieved documents) */
.doc-tag {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 9999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
}

/* Green text for final prompt's documents */
.green-doc-text {
  color: #0b5d3a;
}

.sub-tabs-nav {
  margin-bottom: 1rem;
}

#final-prompt-container {
  flex: 1 1 auto;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  max-height: 300px;
  width: 100% !important;
  background: #fff;
  /* FONT FIX: Apply primary font family to container/pre elements */
  font-family: "Euclid Circular A", "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: pre-wrap;
}

#final-prompt-container pre {
  /* FONT FIX: Ensure pre uses the container font and not a default monospace */
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading {
  color: #888888;
}

.section-titles {
  font-weight: 700;
  text-transform: uppercase;
  color: #889397;
  font-size: 9px;
  padding-right: 9px;
  margin-top: 0px;
  margin-bottom: 1rem;
}

/* UMAP Visualization Styles (Plotly-based) */
.umap-visualization {
  margin-bottom: 1rem;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  width: 100%;
  height: 300px;
  flex-shrink: 0;
}

.umap-visualization > div {
  width: 100%;
  height: 100%;
}

/* Ensure Plotly plot is responsive */
.umap-visualization .plotly {
  width: 100%;
  height: 100%;
}

/* Dark mode styles for UMAP visualization */
#mongodb-ai-playground.dark-theme .umap-visualization {
  background: transparent;
}

