/* ==========================================================================
   Flynn Gateway — Minimal Base Styles
   Tailwind handles layout/spacing/color. This file covers only what
   Tailwind utility classes cannot express: scrollbars, keyframes,
   stateful component classes, and code-block overrides.
   ========================================================================== */

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(24 24 27); /* zinc-900 */
}

::-webkit-scrollbar-thumb {
  background: rgb(63 63 70); /* zinc-700 */
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(113 113 122); /* zinc-500 */
}

/* ---------- Keyframes ---------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Spinner ---------- */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(63 63 70); /* zinc-700 */
  border-top-color: rgb(59 130 246); /* blue-500 */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- Streaming cursor ---------- */
.streaming-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: rgb(59 130 246); /* blue-500 */
}

/* ---------- Tool event collapse ---------- */
.tool-event-body {
  display: none;
}

.tool-event-body.open {
  display: block;
}

/* ---------- Sidebar nav active state ---------- */
.nav-link.active {
  color: rgb(59 130 246); /* blue-500 */
  background: rgba(59 130 246, 0.1);
  border-left-color: rgb(59 130 246);
}

/* ---------- Mobile pill active state ---------- */
.page-pill.active {
  background: rgb(59 130 246); /* blue-500 */
  color: white;
}

/* ---------- Hidden utility ---------- */
.hidden {
  display: none !important;
}

/* ---------- Links ---------- */
a {
  color: rgb(59 130 246); /* blue-500 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- Chat action button active state ---------- */
.btn-action.active {
  background: rgba(59 130 246 / 0.15); /* blue-500/15 */
  color: rgb(59 130 246); /* blue-500 */
  border-color: rgba(59 130 246 / 0.3); /* blue-500/30 */
}

/* ---------- Code blocks in assistant messages ---------- */
[data-role="assistant"] pre {
  background-color: rgb(24 24 27); /* zinc-900 */
  border: 1px solid rgb(39 39 42); /* zinc-800 */
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}

[data-role="assistant"] code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
}

[data-role="assistant"] p code {
  background-color: rgb(24 24 27); /* zinc-900 */
  padding: 2px 6px;
  border-radius: 3px;
}