/* Application styles */

/* NOTE: Fix for a slightly higher form when produced by button_to */
form.button_to {
  line-height: 1;
}

/* ── Collapsible Sidebar ── */

:root {
  --sidebar-width: 18rem;
  --sidebar-collapsed-width: 4.5rem;
}

html[data-sidebar-collapsed] {
  --sidebar-width: 4.5rem;
}

/* Sidebar utility classes (only apply on lg+ screens) */
@media (min-width: 1024px) {
  .lg\:pl-sidebar {
    padding-left: var(--sidebar-width);
    transition: padding-left 200ms ease;
  }

  .lg\:left-sidebar {
    left: var(--sidebar-width);
    transition: left 200ms ease;
  }

  .lg\:w-sidebar {
    width: var(--sidebar-width);
    transition: width 200ms ease;
  }

  /* Sidebar content padding */
  .sidebar-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: padding 200ms ease;
  }

  html[data-sidebar-collapsed] .sidebar-content {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Hide text labels when collapsed */
  .sidebar-label {
    opacity: 1;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 200ms ease, width 200ms ease;
  }

  html[data-sidebar-collapsed] .sidebar-label {
    display: none;
  }

  /* Hide section titles (e.g. "Admin") when collapsed */
  .sidebar-section-title {
    opacity: 1;
    height: auto;
    overflow: hidden;
    transition: opacity 200ms ease, height 200ms ease;
  }

  html[data-sidebar-collapsed] .sidebar-section-title {
    opacity: 0;
    height: 0;
    pointer-events: none;
  }

  /* Hide user profile name when collapsed */
  html[data-sidebar-collapsed] .sidebar-user-profile .flex.flex-col {
    display: none;
  }

  html[data-sidebar-collapsed] .sidebar-user-profile {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }

  html[data-sidebar-collapsed] .sidebar-user-profile .space-x-2 > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }


  /* Center nav item links when collapsed */
  html[data-sidebar-collapsed] .sidebar-tooltip-parent a,
  html[data-sidebar-collapsed] .sidebar-tooltip-parent button {
    justify-content: center;
    gap: 0;
  }

  /* Neutralize all negative margins inside sidebar when collapsed */
  html[data-sidebar-collapsed] .sidebar-content [class*="-mx-"] {
    margin-left: 0;
    margin-right: 0;
  }

  /* Reduce spacing between nav items when collapsed, keep group gaps */
  html[data-sidebar-collapsed] .sidebar-content nav .space-y-1 > * {
    margin-top: 0;
  }

  html[data-sidebar-collapsed] .sidebar-content .gap-y-5 {
    gap: 0.25rem;
  }

  /* Tooltip on hover when collapsed */
  .sidebar-tooltip {
    display: none;
  }

  html[data-sidebar-collapsed] .sidebar-tooltip-parent {
    position: relative;
  }

  html[data-sidebar-collapsed] .sidebar-tooltip-parent:hover .sidebar-tooltip {
    display: flex;
    position: fixed;
    left: calc(var(--sidebar-width) + 0.5rem);
    padding: 0.375rem 0.75rem;
    background-color: rgb(15 23 42);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }

  /* Badge: show full in expanded, small overlay in collapsed */
  .sidebar-badge-collapsed {
    display: none;
  }

  html[data-sidebar-collapsed] .sidebar-badge-full {
    display: none;
  }

  html[data-sidebar-collapsed] .sidebar-badge-collapsed {
    display: block;
    position: absolute;
    top: -0.125rem;
    right: 0.25rem;
    z-index: 1;
  }

  /* Toggle button rotation */
  .sidebar-toggle-icon {
    transition: transform 200ms ease;
  }

  html[data-sidebar-collapsed] .sidebar-toggle-icon {
    transform: rotate(180deg);
  }

  /* Logo area collapsed state */
  html[data-sidebar-collapsed] .sidebar-logo-full {
    display: none !important;
  }

  .sidebar-logo-collapsed {
    display: none !important;
  }

  html[data-sidebar-collapsed] .sidebar-logo-collapsed {
    display: flex !important;
  }
}

/* ── Uniform prose color (all typography elements inherit parent text color) ── */

.prose-uniform {
  --tw-prose-body: currentColor;
  --tw-prose-headings: currentColor;
  --tw-prose-bold: currentColor;
  --tw-prose-counters: currentColor;
  --tw-prose-bullets: currentColor;
  --tw-prose-quotes: currentColor;
  --tw-prose-code: currentColor;
  --tw-prose-th-borders: currentColor;
}

/* ── Bouncing Dots (chat loading ellipsis) ── */

@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

.dot-bounce span:nth-child(1) { animation: bounce-dot 1.4s ease-in-out infinite; }
.dot-bounce span:nth-child(2) { animation: bounce-dot 1.4s ease-in-out 0.2s infinite; }
.dot-bounce span:nth-child(3) { animation: bounce-dot 1.4s ease-in-out 0.4s infinite; }

/* ── Code Block Styling ── */

/* Override highlight.js theme background so it doesn't create a nested box */
.prose pre code.hljs {
  background: transparent;
  padding: 0;
}

/* Code block container */
.prose pre {
  background: #1e293b; /* slate-800 */
  color: #e2e8f0; /* slate-200 */
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.625;
  scrollbar-width: thin;
  scrollbar-color: #475569 transparent; /* slate-600 thumb, transparent track */
}

/* Webkit scrollbar for code blocks */
.prose pre::-webkit-scrollbar {
  height: 6px;
}

.prose pre::-webkit-scrollbar-track {
  background: transparent;
}

.prose pre::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 */
  border-radius: 3px;
}

.prose pre::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 */
}

/* Code inside pre blocks — reset to inherit from pre */
.prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}