/* 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 {
  --background: 0 0% 100%;
  --foreground: 0 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 10%;
  --primary: 0 0% 15%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 95%;
  --secondary-foreground: 0 0% 15%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 95%;
  --accent-foreground: 0 0% 15%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 40%;
  --radius: 0.5rem;
  --forms-radius-control: 0.625rem;
  --forms-radius-surface: 0.75rem;
  --forms-radius-floating: 1rem;
  --forms-shadow-surface:
    0 0 0 1px hsl(var(--foreground) / 0.04),
    0 1px 2px -1px hsl(var(--foreground) / 0.08);
  --forms-shadow-surface-hover:
    0 0 0 1px hsl(var(--foreground) / 0.08),
    0 2px 6px -3px hsl(var(--foreground) / 0.1);
  --forms-shadow-control: 0 0 0 1px hsl(var(--foreground) / 0.035);
  --forms-shadow-floating:
    0 0 0 1px hsl(var(--foreground) / 0.06),
    0 6px 16px -10px hsl(var(--foreground) / 0.12);
  --forms-shadow-focus:
    0 0 0 3px hsl(var(--ring) / 0.18), 0 0 0 1px hsl(var(--ring) / 0.55);

  --sidebar-background: 0 0% 97%;
  --sidebar-foreground: 0 0% 45%;
  --sidebar-primary: 0 0% 15%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 15%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 40%;
}

.dark {
  --background: 0 0% 13%;
  --foreground: 0 0% 90%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 90%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 90%;
  --primary: 0 0% 75%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 90%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 90%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 60%;
  --forms-shadow-surface: 0 0 0 1px hsl(var(--foreground) / 0.08);
  --forms-shadow-surface-hover: 0 0 0 1px hsl(var(--foreground) / 0.14);
  --forms-shadow-control: 0 0 0 1px hsl(var(--foreground) / 0.07);
  --forms-shadow-floating: 0 0 0 1px hsl(var(--foreground) / 0.1);
  --forms-shadow-focus:
    0 0 0 3px hsl(var(--ring) / 0.2), 0 0 0 1px hsl(var(--ring) / 0.65);

  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-primary: 0 0% 75%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 60%;
}

@layer base {
  body {
    @apply bg-background text-foreground;
    font-family: "Inter Variable", "Inter", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.forms-list-shell,
.forms-selection-toolbar,
.forms-settings-card {
  border-radius: var(--forms-radius-surface);
  box-shadow: var(--forms-shadow-surface);
}

.forms-settings-card {
  border: 0;
}

.forms-list-shell {
  transition-property: box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.forms-list-shell:hover,
.forms-settings-card:hover {
  box-shadow: var(--forms-shadow-surface-hover);
}

.forms-selection-toolbar {
  transition-property: box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.forms-list-row {
  transition-property: background-color, box-shadow, opacity;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.forms-list-row:hover {
  box-shadow: var(--forms-shadow-control);
}

.forms-list-row:focus-visible {
  outline: none;
  box-shadow: var(--forms-shadow-focus);
}

.forms-empty-state {
  box-shadow: var(--forms-shadow-control);
}

.forms-sidebar-nav-item {
  border-radius: var(--forms-radius-control);
}

.forms-sidebar-nav-item:hover {
  box-shadow: var(--forms-shadow-control);
}

.forms-new-form-popover {
  border: 0;
  box-shadow: var(--forms-shadow-floating);
}

.forms-ask-chat-panel {
  width: 100%;
}

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

.forms-ask-chat-panel .agent-composer-area--hero {
  padding-inline: 0;
  filter: none;
}

@container agent-native-main (min-width: 640px) {
  .forms-response-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container agent-native-main (min-width: 720px) {
  .forms-list-skeleton-row {
    grid-template-columns: minmax(0, 1fr) 100px 110px 140px 88px 40px;
    align-items: center;
  }

  .forms-list-row {
    grid-template-columns: minmax(0, 1fr) 100px 110px 140px 88px 40px;
    align-items: center;
  }
}

@container agent-native-main (min-width: 960px) {
  .forms-response-insights-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  }
}

@container agent-native-main (min-width: 1180px) {
  .forms-response-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

.forms-ask-chat-panel .agent-composer-root--hero {
  border-radius: var(--forms-radius-floating);
  background: hsl(var(--background));
  box-shadow: var(--forms-shadow-floating);
  transition-property: border-color, box-shadow, transform;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.forms-ask-chat-panel .agent-composer-root--hero:hover {
  box-shadow: var(--forms-shadow-surface-hover);
  transform: translateY(-1px);
}

.forms-ask-chat-panel .agent-composer-root--hero:focus-within {
  border-color: hsl(var(--ring) / 0.9);
  box-shadow: var(--forms-shadow-focus), var(--forms-shadow-floating);
}

@media (prefers-reduced-motion: reduce) {
  .forms-list-shell,
  .forms-selection-toolbar,
  .forms-list-row,
  .forms-sidebar-nav-item,
  .forms-ask-chat-panel .agent-composer-root--hero {
    transition: none;
  }

  .forms-ask-chat-panel .agent-composer-root--hero:hover {
    transform: none;
  }
}

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

.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro {
  display: contents;
}

.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro h1,
.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro p {
  width: 100%;
  text-align: center;
  order: 1;
}

.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro h1 {
  margin: 0 0 0.5rem;
}

.forms-ask-chat-panel [data-agent-empty-state="centered"] .forms-chat-intro p {
  margin: 0 auto 1rem;
}

.forms-ask-chat-panel
  [data-agent-empty-state="centered"]
  .agent-composer-stack {
  order: 2;
}

.forms-chat-intro h1 {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 650;
  line-height: 1.08;
}

.forms-chat-intro p {
  margin: 0;
  max-width: 38rem;
  color: hsl(var(--muted-foreground));
  font-size: 1rem;
  line-height: 1.55;
}

.forms-chat-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  order: 3;
  margin: 0.75rem auto 0;
}

.forms-chat-pill-row button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--background) / 0.78);
  box-shadow: var(--forms-shadow-control);
  padding: 0.375rem 0.625rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  transition-property: background-color, border-color, color, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.forms-chat-pill-row button:hover {
  border-color: hsl(var(--foreground) / 0.2);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.forms-chat-pill-row button:focus-visible {
  outline: none;
  box-shadow: var(--forms-shadow-focus);
}

.forms-chat-pill-row button:active {
  scale: 0.96;
}

@media (prefers-reduced-motion: reduce) {
  .forms-chat-pill-row button {
    transition: none;
  }

  .forms-chat-pill-row button:active {
    scale: 1;
  }
}

@media (min-width: 640px) {
  .forms-chat-intro h1 {
    font-size: 2.75rem;
  }
}