@import "tailwindcss";
@import "tw-animate-css";

/* iOS visual-viewport height (px), kept in sync by useViewportHeightVar. Consumed
   ONLY by the md+ chat (iPad / landscape), whose desktop layout can't use the
   mobile body-lock; the mobile shell + chat use the static --app-shell-h instead.
   Defaults to 100dvh before/without JS. */
:root {
  --app-vvh: 100dvh;
}

/* Static full-viewport height for the LOCKED mobile shell + mobile chat. NEVER
   JS-resized to the visual viewport (that mid-focus resize flung the input off the
   top); the locked page just pans under iOS to lift the composer. Uses dvh where
   supported (tracks the URL bar, not the keyboard), with a 100vh fallback for older
   iOS Safari that exposes visualViewport but not dvh — without it h-[…dvh] would be
   ignored, leaving the locked shell unbounded and clipping <main> instead of
   scrolling it. */
:root {
  --app-shell-h: 100vh;
}
@supports (height: 100dvh) {
  :root {
    --app-shell-h: 100dvh;
  }
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-soft: var(--muted-soft);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-mint: var(--mint);
  --color-mint-soft: var(--mint-soft);
  --color-cyan: var(--cyan);
  --color-cyan-soft: var(--cyan-soft);
  --color-violet: var(--violet);
  --color-violet-soft: var(--violet-soft);
  --color-gold: var(--gold);
  --color-gold-foreground: var(--gold-foreground);
  --color-pink: var(--pink);
  --color-pink-soft: var(--pink-soft);

  /* Compatibility aliases for current UI during migration. */
  --color-bg: var(--background);
  --color-panel: var(--surface);
  --color-text: var(--foreground);
  --color-success: var(--mint);
  --color-warning: var(--gold);
  --color-danger: var(--destructive);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;
  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;

  /* Card glow shadows (matches design.pen). */
  --shadow-mint-card: 0 24px 48px -12px rgba(91, 255, 160, 0.078);
  --shadow-mint-card-lg: 0 32px 64px -12px rgba(91, 255, 160, 0.078);
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --background: #080812;
  --foreground: #f5f1e8;
  --surface: #0e0e18;
  --surface-2: #11111c;
  --surface-3: #06060e;
  --card: #11111c;
  --card-foreground: #f5f1e8;
  --popover: #11111c;
  --popover-foreground: #f5f1e8;

  --primary: #5bffa0;
  --primary-foreground: #080812;
  --secondary: #11111c;
  --secondary-foreground: #f5f1e8;
  --muted: #9ba3b8;
  --muted-soft: #0e0e18;
  --accent: #3fe0e5;
  --accent-foreground: #080812;
  --destructive: #ff6b6b;
  --destructive-foreground: #080812;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --input: rgba(255, 255, 255, 0.10);
  --ring: rgba(91, 255, 160, 0.6);

  --mint: #5bffa0;
  --mint-soft: rgba(91, 255, 160, 0.16);
  --cyan: #3fe0e5;
  --cyan-soft: rgba(63, 224, 229, 0.16);
  --violet: #7c5bff;
  --violet-soft: rgba(124, 91, 255, 0.16);
  --gold: #ffc857;
  --gold-foreground: #080812;
  --pink: #ff5b8a;
  --pink-soft: rgba(255, 91, 138, 0.10);

  /* Page-family gradients (mirror design.pen 1:1). Layers ordered top-most first. */
  --gradient-console:
    radial-gradient(50% 40% at 5% 5%, rgba(91, 255, 160, 0.20), rgba(91, 255, 160, 0) 100%),
    radial-gradient(40% 50% at 95% 40%, rgba(63, 224, 229, 0.122), rgba(63, 224, 229, 0) 100%),
    radial-gradient(60% 50% at 50% 100%, rgba(124, 91, 255, 0.078), rgba(124, 91, 255, 0) 100%),
    #080812;
  --gradient-settings:
    radial-gradient(50% 40% at 5% 5%, rgba(91, 255, 160, 0.20), rgba(91, 255, 160, 0) 100%),
    radial-gradient(50% 50% at 95% 50%, rgba(124, 91, 255, 0.10), rgba(124, 91, 255, 0) 100%),
    #080812;
  --gradient-wizard-welcome:
    radial-gradient(70% 60% at 50% 30%, rgba(91, 255, 160, 0.20), rgba(91, 255, 160, 0) 100%),
    radial-gradient(50% 50% at 85% 70%, rgba(63, 224, 229, 0.122), rgba(63, 224, 229, 0) 100%),
    #080812;
  --gradient-wizard-backends:
    radial-gradient(60% 50% at 50% 20%, rgba(124, 91, 255, 0.122), rgba(124, 91, 255, 0) 100%),
    #080812;
  --gradient-wizard-platforms:
    radial-gradient(60% 50% at 50% 20%, rgba(91, 255, 160, 0.20), rgba(91, 255, 160, 0) 100%),
    radial-gradient(40% 40% at 85% 70%, rgba(63, 224, 229, 0.122), rgba(63, 224, 229, 0) 100%),
    radial-gradient(40% 40% at 15% 70%, rgba(124, 91, 255, 0.122), rgba(124, 91, 255, 0) 100%),
    #080812;
  --gradient-wizard-slack:
    radial-gradient(50% 50% at 30% 20%, rgba(224, 30, 90, 0.122), rgba(224, 30, 90, 0) 100%),
    #080812;
  --gradient-wizard-summary:
    radial-gradient(60% 50% at 50% 30%, rgba(91, 255, 160, 0.20), rgba(91, 255, 160, 0) 100%),
    #080812;

  /* Legacy alias for any page still using --bg-page directly. */
  --bg-page: var(--gradient-console);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --background: #f4f6fb;
    --foreground: #0a0a14;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --surface-3: #eef1f7;
    --card: #ffffff;
    --card-foreground: #0a0a14;
    --popover: #ffffff;
    --popover-foreground: #0a0a14;

    --primary: #10b981;
    --primary-foreground: #ffffff;
    --secondary: #eef1f7;
    --secondary-foreground: #0a0a14;
    --muted: #5c6079;
    --muted-soft: #eef1f7;
    --accent: #0891b2;
    --accent-foreground: #ffffff;
    --destructive: #e11d48;
    --destructive-foreground: #ffffff;

    --border: rgba(8, 8, 18, 0.08);
    --border-strong: rgba(8, 8, 18, 0.14);
    --input: rgba(8, 8, 18, 0.12);
    --ring: rgba(16, 185, 129, 0.5);

    --mint: #10b981;
    --mint-soft: rgba(16, 185, 129, 0.14);
    --cyan: #0891b2;
    --cyan-soft: rgba(8, 145, 178, 0.14);
    --violet: #7c3aed;
    --violet-soft: rgba(124, 58, 237, 0.14);
    --gold: #d97706;
    --gold-foreground: #ffffff;
    --pink: #dc2659;
    --pink-soft: rgba(220, 38, 89, 0.10);

    /* Light-theme page gradients (softer alphas over light base). */
    --gradient-console:
      radial-gradient(50% 40% at 5% 5%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
      radial-gradient(40% 50% at 95% 40%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
      radial-gradient(60% 50% at 50% 100%, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0) 100%),
      #f4f6fb;
    --gradient-settings:
      radial-gradient(50% 40% at 5% 5%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
      radial-gradient(50% 50% at 95% 50%, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0) 100%),
      #f4f6fb;
    --gradient-wizard-welcome:
      radial-gradient(70% 60% at 50% 30%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
      radial-gradient(50% 50% at 85% 70%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
      #f4f6fb;
    --gradient-wizard-backends:
      radial-gradient(60% 50% at 50% 20%, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0) 100%),
      #f4f6fb;
    --gradient-wizard-platforms:
      radial-gradient(60% 50% at 50% 20%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
      radial-gradient(40% 40% at 85% 70%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
      radial-gradient(40% 40% at 15% 70%, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0) 100%),
      #f4f6fb;
    --gradient-wizard-slack:
      radial-gradient(50% 50% at 30% 20%, rgba(224, 30, 90, 0.08), rgba(224, 30, 90, 0) 100%),
      #f4f6fb;
    --gradient-wizard-summary:
      radial-gradient(60% 50% at 30% 30%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
      #f4f6fb;

    --bg-page: var(--gradient-console);

    /* Light card glow — much softer than dark. */
    --shadow-mint-card: 0 12px 24px -16px rgba(16, 185, 129, 0.20);
    --shadow-mint-card-lg: 0 16px 32px -16px rgba(16, 185, 129, 0.22);
  }
}

[data-theme="light"] {
  color-scheme: light;

  --background: #f4f6fb;
  --foreground: #0a0a14;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #eef1f7;
  --card: #ffffff;
  --card-foreground: #0a0a14;
  --popover: #ffffff;
  --popover-foreground: #0a0a14;

  --primary: #10b981;
  --primary-foreground: #ffffff;
  --secondary: #eef1f7;
  --secondary-foreground: #0a0a14;
  --muted: #5c6079;
  --muted-soft: #eef1f7;
  --accent: #0891b2;
  --accent-foreground: #ffffff;
  --destructive: #e11d48;
  --destructive-foreground: #ffffff;

  --border: rgba(8, 8, 18, 0.08);
  --border-strong: rgba(8, 8, 18, 0.14);
  --input: rgba(8, 8, 18, 0.12);
  --ring: rgba(16, 185, 129, 0.5);

  --mint: #10b981;
  --mint-soft: rgba(16, 185, 129, 0.14);
  --cyan: #0891b2;
  --cyan-soft: rgba(8, 145, 178, 0.14);
  --violet: #7c3aed;
  --violet-soft: rgba(124, 58, 237, 0.14);
  --gold: #d97706;
  --gold-foreground: #ffffff;
  --pink: #dc2659;
  --pink-soft: rgba(220, 38, 89, 0.10);

  /* Light-theme page gradients (softer alphas over light base). */
  --gradient-console:
    radial-gradient(50% 40% at 5% 5%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
    radial-gradient(40% 50% at 95% 40%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
    radial-gradient(60% 50% at 50% 100%, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0) 100%),
    #f4f6fb;
  --gradient-settings:
    radial-gradient(50% 40% at 5% 5%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
    radial-gradient(50% 50% at 95% 50%, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0) 100%),
    #f4f6fb;
  --gradient-wizard-welcome:
    radial-gradient(70% 60% at 50% 30%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
    radial-gradient(50% 50% at 85% 70%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
    #f4f6fb;
  --gradient-wizard-backends:
    radial-gradient(60% 50% at 50% 20%, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0) 100%),
    #f4f6fb;
  --gradient-wizard-platforms:
    radial-gradient(60% 50% at 50% 20%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
    radial-gradient(40% 40% at 85% 70%, rgba(8, 145, 178, 0.08), rgba(8, 145, 178, 0) 100%),
    radial-gradient(40% 40% at 15% 70%, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0) 100%),
    #f4f6fb;
  --gradient-wizard-slack:
    radial-gradient(50% 50% at 30% 20%, rgba(224, 30, 90, 0.08), rgba(224, 30, 90, 0) 100%),
    #f4f6fb;
  --gradient-wizard-summary:
    radial-gradient(60% 50% at 30% 30%, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0) 100%),
    #f4f6fb;

  --bg-page: var(--gradient-console);

  /* Light card glow — much softer than dark. */
  --shadow-mint-card: 0 12px 24px -16px rgba(16, 185, 129, 0.20);
  --shadow-mint-card-lg: 0 16px 32px -16px rgba(16, 185, 129, 0.22);
}

html,
body,
#root {
  min-height: 100%;
}

html,
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  margin: 0;
}

/* Page-family glow utilities. Apply on the scrolling main container. */
.page-glow-console {
  background: var(--gradient-console);
  background-attachment: fixed;
}
.page-glow-settings {
  background: var(--gradient-settings);
  background-attachment: fixed;
}
.page-glow-wizard-welcome {
  background: var(--gradient-wizard-welcome);
  background-attachment: fixed;
}
.page-glow-wizard-backends {
  background: var(--gradient-wizard-backends);
  background-attachment: fixed;
}
.page-glow-wizard-platforms {
  background: var(--gradient-wizard-platforms);
  background-attachment: fixed;
}
.page-glow-wizard-slack {
  background: var(--gradient-wizard-slack);
  background-attachment: fixed;
}
.page-glow-wizard-summary {
  background: var(--gradient-wizard-summary);
  background-attachment: fixed;
}

body {
  min-height: 100vh;
}

/* iOS Safari keyboard fix: on mobile, lock the document so it can't scroll.
   Otherwise focusing an input makes Safari scroll the (slightly-taller-than-
   viewport) page to "reveal" it and overshoots, flinging the input off the top
   of the screen. The AppShell instead is a static h-dvh flex column whose
   <main> scrolls internally. Desktop keeps normal document scrolling. */
@media (max-width: 767px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  #root {
    height: 100%;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  button:disabled {
    cursor: not-allowed;
  }
}

code,
pre,
.font-mono {
  font-family: var(--font-mono);
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slide-in 0.2s ease-out;
}

/* Chat compose "thinking" indicator — three dots fading in sequence while we
   wait for the agent's first streamed chunk (workbench ChatPage). */
@keyframes vr-typing {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.vr-typing-dot {
  animation: vr-typing 1.2s infinite ease-in-out;
}

/* Markdown rendering for agent replies (react-markdown output). No Tailwind
   typography plugin is installed, so the raw element tree is styled against
   theme tokens. Scoped to .vr-markdown so it never leaks elsewhere. */
.vr-markdown {
  font-size: 13px;
  line-height: 1.6;
  color: var(--foreground);
  word-break: break-word;
}
.vr-markdown--inherit-size { font-size: inherit; }
.vr-markdown > :first-child { margin-top: 0; }
.vr-markdown > :last-child { margin-bottom: 0; }
.vr-markdown p { margin: 0 0 0.6em; }
.vr-markdown h1,
.vr-markdown h2,
.vr-markdown h3,
.vr-markdown h4,
.vr-markdown h5,
.vr-markdown h6 { margin: 1em 0 0.5em; font-weight: 700; line-height: 1.3; }
.vr-markdown h1 { font-size: 1.4em; }
.vr-markdown h2 { font-size: 1.25em; }
.vr-markdown h3 { font-size: 1.1em; }
.vr-markdown ul,
.vr-markdown ol { margin: 0 0 0.6em; padding-left: 1.4em; }
/* Tailwind v4 preflight resets ``list-style: none`` on every ul/ol; restore the
   marker type here (the rule above only added the indent back, not the bullets). */
.vr-markdown ul { list-style-type: disc; }
.vr-markdown ol { list-style-type: decimal; }
.vr-markdown li { margin: 0.15em 0; }
.vr-markdown li > ul,
.vr-markdown li > ol { margin: 0.15em 0; }
/* GFM task lists: remark-gfm tags the parent ``ul.contains-task-list`` but only
   the checkbox rows get ``li.task-list-item``. Drop the disc on the task ROWS
   only (not the whole ul) — the checkbox is their marker — so a list that MIXES
   task items with ordinary bullets keeps the disc on its plain ``<li>`` siblings. */
.vr-markdown li.task-list-item { list-style: none; }
.vr-markdown li.task-list-item input { margin-right: 0.4em; }
.vr-markdown a {
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vr-markdown code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.vr-markdown pre {
  margin: 0 0 0.6em;
  padding: 12px 14px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
}
.vr-markdown pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}
.vr-markdown blockquote {
  margin: 0 0 0.6em;
  padding: 0.2em 0 0.2em 0.9em;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
}
.vr-markdown hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.vr-markdown table {
  border-collapse: collapse;
  margin: 0 0 0.6em;
  display: block;
  overflow-x: auto;
}
.vr-markdown th,
.vr-markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.vr-markdown th { background: var(--surface-2); font-weight: 600; }
.vr-markdown img { max-width: 100%; border-radius: 8px; }
.vr-markdown strong { font-weight: 700; }

/* Compact inline-ish markdown for inbox previews: inherit the host row's small
   font-size + color, collapse block spacing, and tame headings / code blocks so
   a clamped 2–3 line snippet stays tidy instead of rendering full-size blocks.
   The block rules are scoped under the doubled ``.vr-markdown.vr-markdown--preview``
   class so they outrank the base ``.vr-markdown <el>`` rules on specificity,
   regardless of source order. */
.vr-markdown--preview { font-size: inherit; line-height: inherit; color: inherit; }
.vr-markdown.vr-markdown--preview :is(p, h1, h2, h3, h4, h5, h6, ul, ol, pre, blockquote, table, hr) { margin: 0; }
.vr-markdown.vr-markdown--preview :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; }
.vr-markdown.vr-markdown--preview :is(ul, ol) { padding-left: 1.1em; }
.vr-markdown.vr-markdown--preview pre { padding: 4px 8px; border-radius: 6px; }
.vr-markdown.vr-markdown--preview blockquote { padding: 0 0 0 0.7em; }

/* File preview viewer (FileViewer modal body). Renderer wrappers own their own
   padding so code / CSV can go edge-to-edge with their own scroll. */
.vr-fileview-body { color: var(--foreground); }
.vr-fileview-msg { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.vr-fileview-md { padding: 16px; }
.vr-fileview-pre {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--foreground);
}
.vr-fileview-code pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.vr-fileview-json { padding: 14px 16px; font-size: 12.5px; background: transparent; }
.vr-fileview-csv { overflow-x: auto; }
.vr-fileview-table { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.vr-fileview-table th,
.vr-fileview-table td {
  border: 1px solid var(--border);
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vr-fileview-table th { background: var(--surface-2); font-weight: 600; }
.vr-fileview-table tbody tr:nth-child(even) { background: var(--surface-3); }
.vr-fileview-note { padding: 8px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); }
