/* otl-ml-proxy web UI — small custom layer on top of Tailwind (CDN). */

/* Hide Alpine-controlled menus (dropdowns / mobile sheet) until Alpine hydrates,
   so there's no flash of open menus on first paint. */
[x-cloak] {
  display: none !important;
}

:root {
  --otl-navy: #0f172a;
  --otl-slate: #1e293b;
  --otl-accent: #2563eb;
}

html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Monospace key/code rendering. */
.otl-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: -0.01em;
}

/* HTMX request-in-flight affordance. */
.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Subtle fade-in for swapped fragments. */
.otl-fade-in {
  animation: otl-fade 180ms ease-out;
}
@keyframes otl-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Flash auto-dismiss helper (purely visual). */
.otl-flash {
  animation: otl-fade 180ms ease-out;
}

/* Keep long urls / model ids from breaking layout. */
.otl-break {
  word-break: break-all;
}