/* Custom styling for Panthyon Chainlit app - Compact tool calls with darker text */

/* Reduce spacing between step elements */
.step {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

/* Reduce spacing in step container */
.step-container {
  gap: 0.35rem !important;
}

/* TARGET THE ACTUAL TOOL CALL TEXT - text-muted-foreground */
/* This makes "Used list_files", "Used read_file", etc. darker */
.text-muted-foreground {
  color: rgb(100, 100, 100) !important;
  font-weight: 500 !important;
}

/* Make sure buttons with this class are also darker */
button.text-muted-foreground {
  color: rgb(100, 100, 100) !important;
}

/* On hover, slightly lighter for better UX */
button.text-muted-foreground:hover {
  color: rgb(120, 120, 120) !important;
}

/* ============================================================================
   USER MESSAGE BUBBLE TEXT COLOR OVERRIDE
   ============================================================================

   Problem: Chainlit uses --accent for user message bubble backgrounds but
   uses the global --foreground color for text inside bubbles, rather than
   --accent-foreground. This causes text to be invisible when using inverted
   accent colors.

   Solution: Force text inside .bg-accent (user bubbles) to use contrasting
   colors, but exclude the #message-composer input area which also uses
   .bg-accent.

   Color values used:
   - rgb(17, 17, 23)     = Dark background color (#0B1017 from theme.json)
   - rgb(245, 247, 250)  = Light background color (#F5F7FA from theme.json)

   To change these colors:
   1. Convert your HEX colors to RGB (many online tools available)
   2. Update the rgb() values below to match your desired text colors
   3. Ensure good contrast: dark text on light bubbles, light text on dark bubbles
   ============================================================================ */

/* Dark mode: light bubble background needs dark text */
.dark .bg-accent,
.dark .bg-accent *,
.dark .bg-accent p,
.dark .bg-accent span {
  color: rgb(17, 17, 23) !important;  /* Dark text color */
}

/* Exclude message composer input area from dark mode override */
.dark #message-composer,
.dark #message-composer *,
.dark #message-composer textarea,
.dark #message-composer input,
.dark #message-composer button {
  color: hsl(var(--foreground)) !important;  /* Use theme's default text color */
}

/* Light mode: dark bubble background needs light text */
.light .bg-accent,
.light .bg-accent *,
.light .bg-accent p,
.light .bg-accent span {
  color: rgb(245, 247, 250) !important;  /* Light text color */
}

/* Exclude message composer input area from light mode override */
.light #message-composer,
.light #message-composer *,
.light #message-composer textarea,
.light #message-composer input,
.light #message-composer button {
  color: hsl(var(--foreground)) !important;  /* Use theme's default text color */
}

/* ============================================================================
   FULL-SCREEN PLOTLY CHARTS IN PAGE MODE
   ============================================================================

   Problem: Chainlit limits #element-view to max-width: 48rem (768px) and doesn't
   define container heights, causing plots to render small even in page mode.

   Solution: Override parent container and set explicit viewport-based dimensions.
   ============================================================================ */

/* Fix the parent container that holds the plot */
#element-view {
  /* Remove the max-width constraint completely */
  max-width: none !important;
}

/* When element-view contains a page-plotly, make it fill the viewport */
#element-view:has(.page-plotly) {
  height: calc(100vh - 100px) !important;
  max-width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Target the page-plotly container */
.page-plotly {
  /* Override inline height: 100% with viewport units */
  min-height: calc(100vh - 180px) !important;
  height: calc(100vh - 180px) !important;
  width: 100% !important;
  max-width: 100vw !important;
  flex: 1 !important;
}

/* Override Plotly's internal containers */
.page-plotly .plot-container {
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 180px) !important;
}

.page-plotly .svg-container {
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 180px) !important;
}

/* Force the SVG to fill its container */
.page-plotly svg.main-svg {
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 180px) !important;
}

/* ============================================================================
   ELEMENT LINK STYLING - GREEN/TEAL COLOR
   ============================================================================

   Problem: Element links (like file references) use muted gray colors by default,
   making them blend in with the rest of the text.

   Solution: Override with secondary (green/teal) color from theme for better
   visibility and visual distinction.
   ============================================================================ */

/* Element links - use secondary (green/teal) color from theme */
.element-link {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

/* Hover state - use primary (yellow) color from theme */
.element-link:hover {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}