style.css

/* Left sidebar vertical navigation - more compact */

/* Reduce font size for sidebar like before */
#sidebar * {
  font-size: 12px !important;
}

/* Reduce vertical padding for sidebar navigation items */
#sidebar .sidebar-title,
#sidebar a,
#sidebar-content a,
.sidebar-title {
  padding-top: 0.125rem !important;
  padding-bottom: 0.125rem !important;
}

/* Reduce spacing for sidebar group sections */
#sidebar .sidebar-group-header,
.sidebar-group-header {
  padding-top: 0.3rem !important;
  padding-bottom: 0.1rem !important; /* Reduce bottom padding for tighter hierarchy */
}

/* Target the margin below headers to tighten hierarchy */
#sidebar .mb-3\.5 {
  margin-bottom: 0.15rem !important; /* Much smaller gap between header and first item */
}

#sidebar [class*="mb-2.5"] {
  margin-bottom: 0.1rem !important; /* Even tighter on large screens */
}

/* Eliminate ALL top padding/margin */
#sidebar,
#sidebar-content {
  line-height: 1.3 !important;
  padding-top: 0 !important; /* Complete elimination */
  margin-top: 0 !important;
}

/* Target the section containers directly - reduce spacing between sections */
#sidebar .mt-6 {
  margin-top: 0.75rem !important; /* Reduce from 1.5rem to 0.75rem */
}

#sidebar .lg\\:mt-8 {
  margin-top: 1rem !important; /* Reduce from 2rem to 1rem on large screens */
}

/* Alternative approach - target div containers within sidebar */
#sidebar > div > div.mt-6,
#sidebar-content > div > div.mt-6 {
  margin-top: 0.75rem !important;
}

@media (min-width: 1024px) {
  #sidebar .lg\\:mt-8 {
    margin-top: 1rem !important; /* Even more compact on large screens */
  }
}

/* Nuclear approach - eliminate ALL top spacing */
#sidebar > *:first-child,
#sidebar-content > *:first-child,
#sidebar *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Target any potential containers */
#sidebar nav,
#sidebar div,
#sidebar ul,
#sidebar li:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#sidebar * {
  line-height: 1.3 !important;
}

/* Fix vertical centering of navigation items and hover states */
#sidebar ul li a.group {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important; /* Override line-height for perfect centering */
  padding-top: 0.125rem !important; /* Half the original padding */
  padding-bottom: 0.125rem !important;
}

/* Specifically target the inner content div for alignment */
#sidebar a.group > div.flex-1 {
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Ensure selected/hover state background is perfectly centered */
#sidebar [class*="bg-primary"] {
  align-items: center !important;
  line-height: 1 !important;
}

/* Fix method pill spacing and text centering */
#sidebar .method-nav-pill {
  margin-right: 0.5rem !important; /* Add space between pill and text */
  min-width: 2.5rem !important; /* Ensure wider pills don't overlap */
}

/* Fix vertical centering of text inside pills - use height and line-height trick */
#sidebar .method-nav-pill span[class*="px-1"] {
  height: 1.25rem !important; /* Set explicit height */
  line-height: 1.25rem !important; /* Match line-height to height for perfect centering */
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Fix expandable items - equal top and bottom spacing */
#sidebar div.group.flex.items-center {
  padding-top: 0.125rem !important; /* Match reduced padding of other nav items */
  padding-bottom: 0.125rem !important; /* Equal top and bottom */
}

/* Fix centering of robot icon SVG within its container */
div.mr-4.p-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Alternative selector for the robot icon container */
a[href*="llms-full.txt"] div.rounded-md.p-1 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Adjust the SVG mask position to center it properly */
a[href*="llms-full.txt"] svg[style*="robot.svg"] {
  -webkit-mask-position: center center !important;
  mask-position: center center !important;
  transform: translateY(1px) !important; /* Fine-tune vertical position */
}

/* Fix agent card image spacing */
[data-component-part="card-title"] [data-rmiz] {
  margin-right: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}

/* Ensure images maintain exact size */
[data-component-part="card-title"] [data-rmiz] img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
}

/* Keep agent card titles on one line */
[data-component-part="card-title"] > span[style*="display: flex"] {
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Reduce text sizes for better fit */
[data-component-part="card-title"] {
  font-size: 14px !important;
}

[data-component-part="card-content"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Agent card plugin pill styling */
.agent-plugin-pill {
  display: inline-block;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 14px;
  font-size: 11px;
  color: #6b7280;
  margin-left: 8px;
  vertical-align: middle;
  height: 24px;
  line-height: 18px;
  white-space: nowrap;
  width: auto;
  min-width: fit-content;
}

/* Stacked circles for plugin count */
.agent-plugin-stack {
  display: inline-block;
  position: relative;
  margin-left: 12px;
  width: 43px;
  height: 24px;
  vertical-align: middle;
}

.agent-plugin-circle {
  position: absolute;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-weight: 500;
}

.agent-plugin-circle:nth-child(1) {
  z-index: 3;
  left: -4px;
}

.agent-plugin-circle:nth-child(2),
.agent-plugin-circle:nth-child(3) {
  display: none;
}

/* SVG background for stacked circles outline */
.agent-plugin-stack::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 24px;
  left: -7px;
  top: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='24' viewBox='0 0 50 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='clip'%3E%3Crect x='0' y='0' width='50' height='24'/%3E%3C/clipPath%3E%3Cmask id='mask'%3E%3Crect x='0' y='0' width='50' height='24' fill='white'/%3E%3Ccircle cx='15' cy='12' r='10.5' fill='black'/%3E%3Ccircle cx='18.5' cy='12' r='10.5' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Cg fill='none' stroke='%239CA3AF' stroke-width='1' opacity='0.5'%3E%3Ccircle cx='15' cy='12' r='11'/%3E%3Ccircle cx='18.5' cy='12' r='11' mask='url(%23mask)'/%3E%3Ccircle cx='22' cy='12' r='11' mask='url(%23mask)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* Navbar "Join Community" button hover - match GitHub button blue text */
a[href*="discord.gg"]:hover {
  color: #0B35F1 !important;
}

/* Make Discord icon turn blue on hover (Mintlify uses mask-based icons) */
a[href*="discord.gg"]:hover * {
  color: #0B35F1 !important;
  background-color: currentColor !important;
}