/* === Navigation Buttons === */
.nav-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background-color: transparent;
  border-radius: 0.375rem;
  font-weight: 500;
  color: #ffffff; /* ← changed from #2563eb (blue) to white */
  transition: background-color 0.2s ease;
}

.nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1); /* subtle dark hover */
  color: #93c5fd; /* Tailwind blue-300 */
}

.nav-btn:active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Chevron arrow (▶) style */
.chevron {
  color: white; /* ← ensure arrows are white too */
}

/* === Split Pane Styling === */
.split-pane {
  background-color: #1f2937; /* Tailwind gray-800 */
  color: #86efac;            /* Tailwind green-300 */
  font-family: monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  border-radius: 0.5rem;
  overflow-y: auto;
  height: 100%;
  max-height: 80vh;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); /* subtle inner shadow */
  margin: 0;
  padding: 0; /* 👈 remove inner padding */
}

/* Ensure layout containers don't overflow */
body {
  overflow-x: hidden;
}

/* Normalize all pane paddings and eliminate default margins */
/* Consistent padding inside pre tags */
#prompt-pane,
#result-pane,
#single-result-pane {
  margin: 0;
  padding: 1rem; /* 👈 move padding here only */
  max-height: 85vh; /* Suggested addition */
  /* Ensure overflow is still handled, though Tailwind's overflow-auto should cover this */
  /* overflow-y: auto; */ /* This is likely already handled by Tailwind's `overflow-auto` class on the element */
}

/* Ensure input/output header rows are visually aligned */
.input-output-header {
  min-height: 2.25rem; /* Match Tailwind's h-9 for consistent header height */
}

.input-output-header,
.input-header-placeholder {
  min-height: 42px; /* matches height of control row with email input */
}

body {
  background-color: #1e293b; /* Tailwind's slate-800 */
  color: #f1f5f9; /* light gray text */
}


/* === Auth Dropdown Styling === */
#auth-dropdown {
  /* This will override Tailwind's bg-slate-700 if you want a different color */
  /* For example, a slightly darker, solid background: */
  background-color: #2d3748; /* Example: Tailwind's gray-800 */
  /* Add any other custom styles you want here */
  /* e.g., border-color, text-color for items if not handled by Tailwind, etc. */
}

/* Optional: Style for items within the dropdown if needed */
/* #auth-dropdown button,
#auth-dropdown div { */
  /* Your custom styles for items */
/* } */