/* Self-hosted via @fontsource-variable/inter — no render-blocking Google Fonts request */
@import "@fontsource-variable/inter";

@import "tailwindcss";
@import "@agent-native/core/styles/agent-native.css";
@import "@agent-native/toolkit/styles.css";

@source "./**/*.{ts,tsx}";

:root {
  /* Base */
  --background: 0 0% 13%;
  --foreground: 0 0% 98%;

  --card: 0 0% 15%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 98%;

  /* Primary - White/Off-white for high contrast */
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 10%;

  /* Secondary - Muted grays */
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 98%;

  /* Muted - Subtle text */
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 64.9%;

  /* Accent - Subtle interactive elements */
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 98%;

  /* Destructive - bright enough for text on dark surfaces */
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;

  /* Borders - Subtle and thin */
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 83.9%;

  /* Charts */
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  /* Brand colors — bright stops from the agent-native gradient, suited to dark backgrounds */
  --brand-blue: #00b5ff;
  --brand-green: #22c55e;
  --brand-orange: #f59e0b;
  --brand-purple: #a78bfa;
  --brand-red: #ef4444;
  --brand-teal: #48ffe4;

  --radius: 0.5rem;

  /* Table header - solid card color for sticky headers */
  --table-header: 0 0% 15%;

  /* Sidebar */
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 95.9%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.light {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 95.9%;
  --secondary-foreground: 0 0% 10%;
  --muted: 0 0% 95.9%;
  --muted-foreground: 0 0% 46.1%;
  --accent: 0 0% 95.9%;
  --accent-foreground: 0 0% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --table-header: 0 0% 100%; /* Same as card for light mode */
  --input: 0 0% 90%;
  --ring: 0 0% 10%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;

  /* Brand colors — darker variants for readability on white */
  --brand-blue: #0284c7;
  --brand-green: #16a34a;
  --brand-orange: #d97706;
  --brand-purple: #7c3aed;
  --brand-red: #dc2626;
  --brand-teal: #0d9488;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 26.1%;
  --sidebar-primary: 0 0% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 0 0% 95.9%;
  --sidebar-accent-foreground: 0 0% 10%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

@layer base {
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }

  /* Glass effect utility */
  .glass {
    @apply bg-background/80 backdrop-blur-sm border-b border-border;
  }

  /* Lighten Recharts grid lines in light mode */
  .light .recharts-cartesian-grid line {
    stroke: #d4d4d8 !important;
  }
}

.dashboard-panel-skeleton {
  background-color: hsl(var(--muted-foreground) / 0.14);
  background-image: linear-gradient(
    105deg,
    transparent 28%,
    hsl(var(--foreground) / 0.025) 44%,
    hsl(var(--foreground) / 0.06) 50%,
    hsl(var(--foreground) / 0.025) 56%,
    transparent 72%
  );
  background-size: 220% 100%;
  animation: dashboard-panel-skeleton-shimmer 2.4s ease-in-out infinite;
}

@keyframes dashboard-panel-skeleton-shimmer {
  0%,
  100% {
    background-position: 120% 0;
  }

  50% {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-panel-skeleton {
    animation: none;
  }
}

.analytics-mobile-nav {
  height: 2.75rem;
  min-height: 2.75rem;
  background-color: hsl(var(--background)) !important;
}

.analytics-chat-panel
  [data-agent-page-chat-scrolled]
  [data-agent-page-chat-fade] {
  opacity: 1;
}

@media (max-width: 767px) {
  .analytics-chat-panel [data-agent-page-new-chat] {
    display: none;
  }
}

.analytics-chat-intro {
  display: none;
}

.dark .analytics-ask-page .analytics-chat-panel {
  background: transparent;
}

.dark .agent-sidebar-panel[data-agent-sidebar-layout="desktop"],
.dark .agent-sidebar-panel[data-agent-sidebar-layout="mobile"] {
  background: var(
    --agent-native-lower-surface,
    hsl(var(--sidebar-background))
  ) !important;
}

.analytics-chat-panel
  [data-agent-empty-state="centered"]
  .analytics-chat-intro {
  display: grid;
  width: 100%;
  max-width: min(684px, 90%);
  gap: 0.5rem;
  margin: 0 auto 1rem;
  text-align: center;
}

.analytics-chat-intro h1 {
  margin: 0;
  color: hsl(var(--foreground));
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.12;
}

.analytics-chat-intro p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.9375rem;
  line-height: 1.5;
}

.analytics-chat-panel [data-agent-empty-state="centered"] .agent-chat-scroll {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.analytics-chat-panel .agent-composer-area--hero {
  padding-inline: 1rem;
}

.analytics-chat-panel [data-agent-empty-state="centered"] .agent-composer-area,
.analytics-chat-panel
  [data-agent-empty-state="centered"]
  .agent-plan-mode-callout {
  width: 100%;
  max-width: min(684px, 90%);
  padding: 0;
}

.analytics-chat-panel [data-agent-empty-state="centered"] .agent-composer-root {
  min-height: 7.875rem;
  border-color: hsl(var(--border));
  border-radius: 1rem;
  background: hsl(var(--card));
  box-shadow: none;
}

.an-replay-stage-root iframe {
  display: block;
  border: 0;
}

.an-replay-stage-root .replayer-wrapper {
  position: relative;
  transform-origin: top left;
}

/* INTENTIONAL — DO NOT REMOVE OR REPLACE WITH rrweb's STOCK CURSOR.
   The recorded visitor cursor is a core session-replay affordance: users need
   to see the Mac-style arrow where the visitor clicked, including on dark
   recordings. rrweb's bundled cursor is a small black sprite that disappears
   against those pages. Use the normal black Mac cursor with its white outline;
   the small shadow below keeps it legible on either background. */
.an-replay-stage-root .replayer-mouse {
  position: absolute;
  z-index: 2;
  /* Render at 2x locally, then downscale to the compact 0.72rem x 0.96rem
     screen size. This keeps the small cursor's rounded outline smooth. */
  width: 1.44rem;
  height: 1.92rem;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  visibility: hidden;
  /* The stage is fit-to-container, but the recorded cursor should stay at a
     normal on-screen size. The stage supplies the inverse scale variable. */
  transform: scale(calc(var(--an-replay-cursor-scale, 1) * 0.5));
  transform-origin: top left;
  transition:
    left 80ms linear,
    top 80ms linear;
  pointer-events: none;
}

.an-replay-stage-root .replayer-mouse.has-position {
  visibility: visible;
}

.an-replay-stage-root .replayer-mouse::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/replay-cursor.svg") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px hsl(0 0% 0% / 0.4));
}

.an-replay-stage-root .replayer-mouse::after {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: -0.5rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid hsl(217 91% 60%);
  border-radius: 9999px;
  background: transparent;
  opacity: 0;
}

/* rrweb toggles `.active` on mouse interactions; pulse a click ripple. */
.an-replay-stage-root .replayer-mouse.active::after {
  animation: an-replay-mouse-click 0.4s ease-out 1;
}

@keyframes an-replay-mouse-click {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

.an-replay-stage-root .replayer-mouse-tail {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.analytics-session-snippet .plan-code-surface {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.analytics-session-snippet .plan-code-surface-scroll {
  background: hsl(225 31% 7%);
}

.analytics-session-snippet .plan-code-surface .plan-shiki,
.analytics-session-snippet .plan-code-surface pre,
.analytics-session-snippet .plan-code-surface .plan-shiki pre,
.analytics-session-snippet .plan-code-surface .plan-shiki code,
.analytics-session-snippet .plan-code-surface .plan-shiki pre span {
  background: transparent !important;
}

.light .analytics-session-snippet .plan-code-surface-scroll {
  background: hsl(0 0% 96%);
}

.an-replay-scrub {
  height: 0.25rem;
  appearance: none;
  border-radius: 9999px;
  outline: none;
  background: hsl(var(--muted));
  cursor: pointer;
}

.an-replay-scrub:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Keep the playhead visually distinct from red console-error marker dots on
   the scrubber track — those markers used to look like a second thumb. */
.an-replay-scrub::-webkit-slider-thumb {
  width: 0.875rem;
  height: 0.875rem;
  appearance: none;
  border: 2px solid hsl(var(--background));
  border-radius: 9999px;
  background: hsl(217 91% 60%);
  box-shadow:
    0 0 0 1px hsl(217 91% 60% / 0.55),
    0 1px 2px hsl(0 0% 0% / 0.35);
  position: relative;
  z-index: 40;
}

.an-replay-scrub::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid hsl(var(--background));
  border-radius: 9999px;
  background: hsl(217 91% 60%);
  box-shadow:
    0 0 0 1px hsl(217 91% 60% / 0.55),
    0 1px 2px hsl(0 0% 0% / 0.35);
  position: relative;
  z-index: 40;
}

.dark
  .analytics-ask-page
  .analytics-chat-panel
  [data-agent-empty-state="centered"]
  .agent-composer-root {
  background: hsl(var(--secondary) / 0.72);
  box-shadow: none;
}

.analytics-chat-panel
  [data-agent-empty-state="centered"]
  .agent-composer-prosemirror {
  min-height: 5.0625rem;
  font-size: 1rem;
  line-height: 1.625rem;
}

@media (max-width: 767px) {
  .analytics-chat-panel [data-agent-empty-state="centered"] {
    padding: 1rem;
    padding-bottom: 5rem;
  }

  .analytics-chat-panel
    [data-agent-empty-state="centered"]
    .analytics-chat-intro {
    width: 100%;
    max-width: min(640px, 95%);
    margin-bottom: 0.875rem;
  }

  .analytics-chat-intro h1 {
    font-size: 1.5rem;
    white-space: nowrap;
  }

  .analytics-chat-intro p {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .analytics-chat-panel
    [data-agent-empty-state="centered"]
    .agent-composer-area {
    width: 100%;
  }

  .analytics-chat-panel
    [data-agent-empty-state="centered"]
    .agent-composer-root {
    min-height: 6.75rem;
  }
}

/* The data source page responds to its pane width instead of the viewport.
   That keeps the compact/mobile layout when sidebars narrow the content area. */
.data-sources-layout {
  container: data-sources / inline-size;
}

.data-sources-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.data-source-add-trigger {
  width: 100%;
  flex-shrink: 0;
}

.data-sources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
}

.data-source-card {
  min-width: 0;
  container: data-source-card / inline-size;
}

.data-source-shared-badge {
  display: none;
}

.data-source-inline-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.data-source-inline-form-button {
  width: 100%;
}

@container data-sources (min-width: 640px) {
  .data-sources-toolbar {
    flex-direction: row;
    align-items: center;
  }

  .data-source-add-trigger {
    width: auto;
  }
}

@container data-sources (min-width: 768px) {
  .data-sources-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container data-source-card (min-width: 420px) {
  .data-source-shared-badge {
    display: inline-flex;
  }

  .data-source-inline-form {
    flex-direction: row;
  }

  .data-source-inline-form-button {
    width: auto;
    flex-shrink: 0;
  }
}

.analytics-sessions-page {
  container: analytics-sessions / inline-size;
}

.analytics-session-path {
  overflow-wrap: anywhere;
}

.analytics-sessions-filter-search {
  flex: 1 1 100%;
  order: 4;
}

@container agent-native-main (min-width: 720px) {
  .analytics-sessions-page {
    padding-inline: 1.5rem;
  }
}

@container analytics-sessions (min-width: 640px) {
  .analytics-sessions-filter-bar {
    flex-wrap: nowrap;
  }

  .analytics-sessions-filter-search {
    flex: 1 1 0;
    order: initial;
  }

  .analytics-session-row {
    grid-template-columns: 104px minmax(0, 0.9fr) minmax(0, 1.15fr);
    align-items: center;
  }

  .analytics-session-path {
    grid-column: 3;
  }

  .analytics-session-app-meta {
    grid-column: 2 / 4;
    padding-inline-start: calc(104px + 0.75rem);
  }
}

@container analytics-sessions (min-width: 760px) {
  .analytics-session-row {
    grid-template-columns:
      104px minmax(150px, 0.85fr) minmax(200px, 1.25fr)
      minmax(120px, 0.55fr);
  }

  .analytics-session-app-meta {
    grid-column: auto;
    padding-inline-start: 0;
    text-align: end;
  }

  .analytics-session-badges {
    justify-content: flex-end;
  }
}

@container analytics-sessions (min-width: 960px) {
  .analytics-sessions-empty-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.analytics-session-detail-page {
  container: analytics-session-detail / inline-size;
}

.analytics-session-detail-timeline {
  display: none;
}

@container analytics-session-detail (min-width: 760px) {
  .analytics-session-detail-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@container analytics-session-detail (min-width: 880px) {
  .analytics-session-detail-workbench {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  }

  .analytics-session-detail-timeline {
    display: flex;
  }
}

@container analytics-session-detail (min-width: 1200px) {
  .analytics-session-detail-workbench {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

/* The dashboard grid responds to the available content width — which shrinks
   when the agent sidebar is open — not the viewport. Rows are rendered
   explicitly so deleting a card only expands the remaining cards in that row. */
.dashboard-grid-container {
  --dashboard-drop-line: hsl(217 91% 60%);
  container: dashboard-grid / inline-size;
  gap: 0;
}

.dashboard-grid {
  --dashboard-grid-gap: 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.dashboard-grid-cell {
  flex: 1 1 100%;
  min-width: 0;
}

.dashboard-row-drop-slot,
.dashboard-column-drop-slot {
  position: relative;
  z-index: 30;
  flex: 0 0 1.5rem;
}

.dashboard-row-drop-slot {
  height: 1.5rem;
  margin-block: -0.25rem;
}

.dashboard-column-drop-slot {
  height: 1.5rem;
  margin-block: -0.75rem;
}

/* At compact widths, panels from the same dashboard row stack vertically.
   Give the drop targets between those panels the same 1rem footprint as the
   row drop targets so every adjacent chart has consistent spacing. */
@container dashboard-grid (max-width: 767px) {
  .dashboard-grid
    > .dashboard-column-drop-slot:not(:first-child):not(:last-child) {
    margin-block: -0.25rem;
  }
}

.dashboard-row-drop-slot::after,
.dashboard-column-drop-slot::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--dashboard-drop-line);
  box-shadow: 0 0 0 1px hsl(217 91% 60% / 0.18);
  opacity: 0;
  transition: opacity 120ms ease;
}

.dashboard-row-drop-slot::after,
.dashboard-column-drop-slot::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
}

.dashboard-row-drop-slot[data-active="true"]::after,
.dashboard-column-drop-slot[data-active="true"]::after {
  opacity: 1;
}

.dashboard-chart-card[data-dragging="true"],
.dashboard-section-card[data-dragging="true"] {
  opacity: 0.55;
}

.dashboard-grid-container[data-dashboard-dragging="true"] .dashboard-grid-cell,
.dashboard-grid-container[data-dashboard-dragging="true"]
  .dashboard-section-cell,
.dashboard-grid-container[data-dashboard-dragging="true"]
  .dashboard-chart-content {
  pointer-events: none;
}

.dashboard-grid-container[data-dashboard-dragging="true"]
  .dashboard-row-drop-slot,
.dashboard-grid-container[data-dashboard-dragging="true"]
  .dashboard-column-drop-slot {
  pointer-events: auto;
}

.explorer-dashboard-grid [data-dragging="true"] {
  opacity: 0.55;
}

.explorer-dashboard-grid[data-dashboard-dragging="true"]
  .explorer-dashboard-chart-content {
  pointer-events: none;
}

@container agent-native-main (min-width: 820px) {
  .analytics-explorer-config-grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .explorer-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explorer-dashboard-card-wide {
    grid-column: span 2 / span 2;
  }
}

@container dashboard-grid (min-width: 768px) {
  .dashboard-grid {
    flex-direction: row;
    margin-inline: calc(var(--dashboard-grid-gap) / -2);
  }

  .dashboard-grid-cell {
    flex-basis: 0;
    padding-inline: calc(var(--dashboard-grid-gap) / 2);
  }

  .dashboard-column-drop-slot {
    align-self: stretch;
    width: 1.5rem;
    height: auto;
    margin-block: 0;
    margin-inline: -0.75rem;
  }

  .dashboard-column-drop-slot::after {
    top: 0;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
  }
}