/* Make the Chainlit "Readme" control render as an icon-only "Info" button */
.tips-readme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tips-readme-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---- Vehicle Card (inline in chat) ---- */
.vehicle-card-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.5);
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.vehicle-card-inline .vc-icon {
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
}

.vehicle-card-inline .vc-title {
  font-weight: 500;
}

.vehicle-card-inline .vc-sep {
  width: 1px;
  align-self: stretch;
  background: hsl(var(--border));
  flex-shrink: 0;
}

.vehicle-card-inline .vc-chips {
  color: hsl(var(--muted-foreground));
}

.vehicle-card-inline.vc-expandable {
  cursor: pointer;
  user-select: none;
}

.vehicle-card-inline .vc-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}

.vehicle-card-inline .vc-details {
  width: 100%;
  padding-left: 1.375rem;
}
/* ============================================================
   Tailwind utility classes for custom elements (SmartResultList etc.)

   Chainlit ships a pre-built frontend with its own Tailwind CSS bundle.
   That bundle only contains utility classes used by Chainlit's own source
   code. Custom elements in public/elements/*.jsx are compiled at runtime
   by the browser — Tailwind's JIT compiler never scans them, so any
   Tailwind class used in our JSX that Chainlit itself doesn't use will
   simply be missing from the stylesheet and have no effect.

   This file fills that gap by manually defining every Tailwind utility
   that our custom elements rely on but Chainlit's bundle lacks.

   If you add a new Tailwind class to a custom element and it doesn't
   render in Chainlit (but works in the standalone preview), add its
   CSS definition here.

   A proper long-term fix would be to set up our own Tailwind build
   that outputs to this file automatically.
   ============================================================ */

/* --- space-y (vertical spacing between children) --- */
.space-y-0\.5 > * + * { margin-top: 0.125rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* --- gap --- */
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }

/* --- leading (line-height) --- */
.leading-relaxed { line-height: 1.625; }

/* --- divide --- */
.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }
.divide-border\/40 > * + * { border-color: hsl(var(--border) / 0.4); }

/* --- padding --- */
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-\[5px\] { padding-left: 5px; padding-right: 5px; }
.pb-1\.5 { padding-bottom: 0.375rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }

/* --- margin --- */
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-5 { margin-top: 1.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-1\.5 { margin-left: -0.375rem; margin-right: -0.375rem; }
.ml-1\.5 { margin-left: 0.375rem; }

/* --- width / height --- */
.w-1 { width: 0.25rem; }
.w-8 { width: 2rem; }
.h-3\.5 { height: 0.875rem; }
.h-8 { height: 2rem; }

/* --- border --- */
.border-border\/30 { border-color: hsl(var(--border) / 0.3); }
.border-border\/40 { border-color: hsl(var(--border) / 0.4); }
.border-border\/50 { border-color: hsl(var(--border) / 0.5); }
.border-border\/60 { border-color: hsl(var(--border) / 0.6); }

/* --- amber colors --- */
.text-amber-600\/80 { color: rgb(217 119 6 / 0.8); }
.text-amber-700 { color: rgb(180 83 9); }
.text-amber-300 { color: rgb(252 211 77); }
.bg-amber-500\/70 { background-color: rgb(245 158 11 / 0.7); }
.bg-amber-100 { background-color: rgb(254 243 199); }

/* --- blue colors --- */
.bg-blue-500\/60 { background-color: rgb(59 130 246 / 0.6); }
.bg-blue-100 { background-color: rgb(219 234 254); }
.text-blue-300 { color: rgb(147 197 253); }

/* --- emerald colors --- */
.bg-emerald-500\/60 { background-color: rgb(16 185 129 / 0.6); }

/* --- purple colors --- */
.bg-purple-500\/60 { background-color: rgb(168 85 247 / 0.6); }

/* --- red colors --- */
.bg-red-500\/60 { background-color: rgb(239 68 68 / 0.6); }

/* --- gradient --- */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-amber-50 { --tw-gradient-from: rgb(255 251 235); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 251 235 / 0)); }
.to-orange-50 { --tw-gradient-to: rgb(255 247 237); }

/* --- dark mode variants --- */
.dark .dark\:text-amber-400\/70 { color: rgb(251 191 36 / 0.7); }
.dark .dark\:text-amber-300 { color: rgb(252 211 77); }
.dark .dark\:text-blue-300 { color: rgb(147 197 253); }
.dark .dark\:bg-amber-400\/50 { background-color: rgb(251 191 36 / 0.5); }
.dark .dark\:bg-amber-900\/30 { background-color: rgb(120 53 15 / 0.3); }
.dark .dark\:bg-blue-400\/40 { background-color: rgb(96 165 250 / 0.4); }
.dark .dark\:bg-blue-900\/30 { background-color: rgb(30 58 138 / 0.3); }
.dark .dark\:bg-emerald-400\/40 { background-color: rgb(52 211 153 / 0.4); }
.dark .dark\:bg-purple-400\/40 { background-color: rgb(192 132 252 / 0.4); }
.dark .dark\:bg-red-400\/40 { background-color: rgb(248 113 113 / 0.4); }
.dark .dark\:bg-muted\/20 { background-color: hsl(var(--muted) / 0.2); }
.dark .dark\:from-amber-950\/30 { --tw-gradient-from: rgb(69 26 3 / 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(69 26 3 / 0)); }
.dark .dark\:to-orange-950\/20 { --tw-gradient-to: rgb(67 20 7 / 0.2); }

/* --- opacity variants --- */
.text-foreground\/70 { color: hsl(var(--foreground) / 0.7); }
.text-foreground\/80 { color: hsl(var(--foreground) / 0.8); }
.text-foreground\/90 { color: hsl(var(--foreground) / 0.9); }
.text-muted-foreground\/50 { color: hsl(var(--muted-foreground) / 0.5); }
.text-muted-foreground\/60 { color: hsl(var(--muted-foreground) / 0.6); }
.text-muted-foreground\/70 { color: hsl(var(--muted-foreground) / 0.7); }
.bg-muted\/10 { background-color: hsl(var(--muted) / 0.1); }
.bg-muted\/20 { background-color: hsl(var(--muted) / 0.2); }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3); }
.bg-muted\/60 { background-color: hsl(var(--muted) / 0.6); }

/* --- hover states --- */
.hover\:bg-muted:hover { background-color: hsl(var(--muted)); }
.hover\:bg-muted\/10:hover { background-color: hsl(var(--muted) / 0.1); }
.hover\:bg-muted\/20:hover { background-color: hsl(var(--muted) / 0.2); }
.hover\:bg-muted\/30:hover { background-color: hsl(var(--muted) / 0.3); }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:border-border:hover { border-color: hsl(var(--border)); }
.hover\:text-foreground:hover { color: hsl(var(--foreground)); }
.hover\:text-muted-foreground:hover { color: hsl(var(--muted-foreground)); }
.group:hover .group-hover\:text-muted-foreground { color: hsl(var(--muted-foreground)); }

/* --- text sizes for arbitrary values --- */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

/* --- transition --- */
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* --- cursor --- */
.cursor-zoom-in { cursor: zoom-in; }
.cursor-pointer { cursor: pointer; }

/* --- image lightbox --- */
.max-h-56 { max-height: 14rem; }
.max-h-\[85vh\] { max-height: 85vh; }
.max-w-4xl { max-width: 56rem; }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.bg-white { background-color: #fff; }
.bg-black\/80 { background-color: rgb(0 0 0 / 0.8); }
.bg-white\/90 { background-color: rgb(255 255 255 / 0.9); }
.select-none { user-select: none; }

/* --- bulletin cards (TSB/CASE/RECALL grouped bulletins) --- */
.bulletin-card {
  border-radius: 0.5rem;
  padding: 0.75rem;
  background-color: hsl(var(--muted) / 0.4);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}
.dark .bulletin-card {
  background-color: hsl(var(--muted) / 0.35);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.15);
}
.bulletin-codes-list {
  margin-left: 1rem;
}

/* --- prose (for HTML content rendering) --- */
.prose { max-width: 65ch; }
.prose p { margin-top: 1em; margin-bottom: 1em; }
.prose-sm { font-size: 0.875rem; line-height: 1.714; }
.prose-sm p { margin-top: 0.571em; margin-bottom: 0.571em; }
.dark .dark\:prose-invert { color: hsl(var(--foreground)); }