@import 'tailwindcss';
@plugin '@tailwindcss/typography';
@import 'tw-shimmer';
@import 'katex/dist/katex.min.css';
@custom-variant dark (&:is(.dark *));

@font-face {
  font-family: 'Collapse';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../../node_modules/@nous-research/ui/dist/fonts/Collapse-Bold.woff2') format('woff2');
}

@theme inline {
  --color-background: var(--dt-background);
  --color-foreground: var(--dt-foreground);
  --color-card: var(--dt-card);
  --color-card-foreground: var(--dt-card-foreground);
  --color-muted: var(--dt-muted);
  --color-muted-foreground: var(--dt-muted-foreground);
  --color-popover: var(--dt-popover);
  --color-popover-foreground: var(--dt-popover-foreground);
  --color-primary: var(--dt-primary);
  --color-primary-foreground: var(--dt-primary-foreground);
  --color-secondary: var(--dt-secondary);
  --color-secondary-foreground: var(--dt-secondary-foreground);
  --color-accent: var(--dt-accent);
  --color-accent-foreground: var(--dt-accent-foreground);
  --color-border: var(--dt-border);
  --color-input: var(--dt-input);
  --color-ring: var(--dt-ring);
  --color-destructive: var(--dt-destructive);
  --color-destructive-foreground: var(--dt-destructive-foreground);

  --color-midground: var(--dt-midground);
  --color-midground-foreground: var(--dt-midground-foreground);

  --font-sans: var(--dt-font-sans);
  --font-mono: var(--dt-font-mono);

  --spacing-mul: var(--dt-spacing-mul, 1);

  --radius-xs: calc(var(--radius-scalar) * 0.125rem);
  --radius-sm: calc(var(--radius-scalar) * 0.5rem);
  --radius-md: calc(var(--radius-scalar) * 0.625rem);
  --radius-lg: calc(var(--radius-scalar) * 0.75rem);
  --radius-xl: calc(var(--radius-scalar) * 1rem);
  --radius-2xl: calc(var(--radius-scalar) * 1.5rem);
  --radius-3xl: calc(var(--radius-scalar) * 2rem);
  --radius-4xl: calc(var(--radius-scalar) * 2.5rem);

  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);

  --shadow-ink: var(--dt-foreground);
  --shadow-header:
    0 0.5rem 0.875rem -0.375rem color-mix(in srgb, var(--dt-background) 96%, transparent),
    0 1.25rem 2rem -0.875rem color-mix(in srgb, var(--dt-background) 82%, transparent),
    0 2rem 3rem -1.5rem color-mix(in srgb, var(--dt-background) 55%, transparent);
  --shadow-composer:
    0 0 0 0.0625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent),
    0 0.0625rem 0.25rem color-mix(in srgb, var(--shadow-ink) 3%, transparent);
  --shadow-composer-focus:
    0 0 0 0.125rem color-mix(in srgb, var(--dt-composer-ring) calc(14% * var(--composer-ring-strength)), transparent),
    0 0 0 0.0625rem color-mix(in srgb, var(--dt-composer-ring) calc(26% * var(--composer-ring-strength)), transparent),
    0 0.1875rem 0.625rem color-mix(in srgb, var(--shadow-ink) 4%, transparent);
}

@layer base {
  :root {
    color-scheme: dark;

    --dt-background: #f7f7f7;
    --dt-foreground: #242424;
    --dt-card: #ffffff;
    --dt-card-foreground: #242424;
    --dt-muted: #f0f0ef;
    --dt-muted-foreground: #737373;
    --dt-popover: #ffffff;
    --dt-popover-foreground: #242424;
    --dt-primary: #cf806d;
    --dt-primary-foreground: #ffffff;
    --dt-secondary: #f1f1f0;
    --dt-secondary-foreground: #2d2d2d;
    --dt-accent: #eeeeed;
    --dt-accent-foreground: #242424;
    --dt-border: #dfdfdc;
    --dt-input: #ddddda;
    --dt-ring: #b97969;
    --dt-destructive: #b94a3a;
    --dt-destructive-foreground: #ffffff;
    --dt-sidebar-bg: #fafafa;
    --dt-sidebar-border: #e2e2df;
    --dt-user-bubble: #f2f2f1;
    --dt-user-bubble-border: #dededb;

    --dt-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --dt-font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    --dt-base-size: 0.875rem;
    --dt-line-height: 1.55;
    --dt-letter-spacing: 0;
    --dt-spacing-mul: 1;

    --radius: 0.75rem;
    --radius-scalar: 0.2;

    /* Space under last message vs overlay composer — driven by the measured composer height (see composer/index.tsx). */
    --thread-last-message-clearance: calc(var(--composer-measured-height) + 1.25rem);

    --composer-shell-pad-block-end: 2.5rem;
    --message-text-indent: 1.5rem;

    --composer-width: 88%;
    --composer-control-size: 2rem;
    --composer-control-primary-size: 2.125rem;
    --composer-control-gap: 0.375rem;
    --composer-row-gap: 0.375rem;
    --composer-ring-strength: 1;
    --composer-surface-pad-x: 0.625rem;
    --composer-surface-pad-y: 0.5rem;
    --composer-input-min-height: 2rem;
    --composer-input-max-height: 9.375rem;
    --composer-input-inline-min-width: 8rem;
    --composer-fallback-height: 2.75rem;
    --composer-measured-height: calc(0.5rem + var(--composer-shell-pad-block-end) + var(--composer-fallback-height));
    --composer-surface-measured-height: var(--composer-fallback-height);
    --thread-viewport-height: max(
      0px,
      calc(100% - var(--composer-measured-height) + var(--composer-surface-measured-height))
    );
    --vsq: min(0.5vh, 0.5vw);
    --image-preview-max-width: 34rem;
    --image-preview-height: clamp(16.25rem, calc(var(--vsq) * 100), 26.25rem);

    --sidebar-width: 14rem;
    --chat-min-width: 24rem;
    --titlebar-control-size: 1.25rem;
    --titlebar-control-height: 1.375rem;
    --sidebar-content-inline-padding: 1rem;

    --sidebar: var(--dt-sidebar-bg);
    --sidebar-foreground: var(--dt-foreground);
    --sidebar-primary: var(--dt-primary);
    --sidebar-primary-foreground: var(--dt-primary-foreground);
    --sidebar-accent: var(--dt-accent);
    --sidebar-accent-foreground: var(--dt-accent-foreground);
    --sidebar-border: var(--dt-sidebar-border);
    --sidebar-ring: var(--dt-ring);
    --sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 42%, transparent);
    --chrome-action-hover: color-mix(in srgb, var(--dt-accent) 72%, transparent);

    --midground: var(--dt-midground);
    --background: var(--dt-background);
    --foreground: var(--dt-foreground);

    --warm-glow: color-mix(in srgb, var(--dt-midground) 35%, transparent);
    /* `--noise-opacity-mul` is set per-mode by `applyTheme()`. */
    --noise-opacity-mul: 1;
    --backdrop-invert-mul: 1;
  }

  :root.dark {
    --sidebar-edge-border: color-mix(in srgb, var(--dt-sidebar-border) 78%, transparent);
    --composer-ring-strength: 1.65;
    --backdrop-invert-mul: 0;
  }

  * {
    box-sizing: border-box;
    border-color: var(--dt-border);
  }

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

  html {
    font-size: var(--dt-base-size, 0.875rem);
  }

  body {
    margin: 0;
    background: var(--dt-background);
    color: var(--dt-foreground);
    font-family: var(--dt-font-sans);
    line-height: var(--dt-line-height, 1.55);
    letter-spacing: var(--dt-letter-spacing, 0);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
  }

  button,
  textarea {
    font: inherit;
  }

  *::selection {
    background: var(--dt-midground);
    color: var(--dt-midground-foreground);
  }
}

.dither {
  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
}

:root:not([style*='--theme-asset-bg:']) .theme-default-filler {
  display: block;
}

:root[style*='--theme-asset-bg:'] .theme-default-filler {
  display: none;
}

@layer utilities {
  [class*='rounded-full'],
  [class*=':rounded-full'] {
    border-radius: calc(var(--radius-scalar) * 9999px);
  }
}

@keyframes arc-border {
  0% {
    background-position: 15% 15%;
  }
  100% {
    background-position: 75% 75%;
  }
}

.arc-border {
  --arc-c0: color-mix(in srgb, var(--dt-foreground) 0%, transparent);
  --arc-c1: var(--dt-midground);
  --arc-c2: var(--dt-background);
  --arc-angle: 160deg;
  --arc-width: 1.25px;
  --arc-inset: -2px;
  --arc-duration: 2.23s;

  pointer-events: none;
  position: absolute;
  overflow: hidden;
  border-radius: inherit;
  inset: var(--arc-inset);
  padding: var(--arc-width);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

:root.dark .arc-border {
  --arc-c1: var(--dt-foreground);
}

.arc-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--arc-angle),
    transparent 0%,
    var(--arc-c0) 15%,
    var(--arc-c1) 20%,
    var(--arc-c2) 25%,
    transparent 35%,
    transparent 40%,
    var(--arc-c0) 55%,
    var(--arc-c1) 60%,
    var(--arc-c2) 65%,
    transparent 75%,
    transparent 80%,
    var(--arc-c0) 95%,
    var(--arc-c1) 100%
  );
  background-size: 300% 300%;
  animation: arc-border var(--arc-duration) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .arc-border::before {
    animation: none;
  }
}

button {
  -webkit-app-region: no-drag;
}

input,
textarea,
[contenteditable]:not([contenteditable='false']),
[data-slot='aui_user-message-root'],
[data-slot='aui_assistant-message-content'],
[data-selectable-text='true'],
[data-selectable-text='true'] * {
  -webkit-user-select: text;
  user-select: text;
}

button,
[role='button'] {
  -webkit-user-select: none;
  user-select: none;
}

img,
picture,
video,
canvas,
svg {
  -webkit-user-select: none;
  user-select: none;
}

img,
video,
canvas {
  -webkit-user-drag: none;
}

/* Shared input chrome — mirrors composer hover/focus FX. Unlayered to beat Tailwind utilities. */
.desktop-input-chrome {
  --ring-pct: 18%;
  --ring-fall: var(--dt-input);
  background: color-mix(in srgb, var(--dt-card) 68%, transparent);
  border-color: color-mix(
    in srgb,
    var(--dt-composer-ring) calc(var(--ring-pct) * var(--composer-ring-strength)),
    var(--ring-fall)
  );
  box-shadow: var(--shadow-composer);
  transition:
    background-color 200ms ease-out,
    border-color 200ms ease-out,
    box-shadow 200ms ease-out;
}

.desktop-input-chrome:hover {
  --ring-pct: 30%;
  background: color-mix(in srgb, var(--dt-card) 86%, transparent);
}

.desktop-input-chrome:focus {
  --ring-pct: 45%;
  --ring-fall: transparent;
  background: var(--dt-card);
  box-shadow: var(--shadow-composer-focus);
  outline: none;
}

.desktop-input-chrome[aria-invalid='true'] {
  border-color: var(--dt-destructive);
}

.desktop-input-chrome[aria-invalid='true']:focus {
  box-shadow:
    0 0 0 0.125rem color-mix(in srgb, var(--dt-destructive) 18%, transparent),
    0 0 0 0.0625rem color-mix(in srgb, var(--dt-destructive) 34%, transparent),
    0 0.1875rem 0.625rem color-mix(in srgb, var(--dt-destructive) 12%, transparent);
}

@layer components {
  .scrollbar-dt,
  .scrollbar-dt * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--dt-midground) 18%, transparent) transparent;
  }

  .scrollbar-dt::-webkit-scrollbar,
  .scrollbar-dt *::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  .scrollbar-dt::-webkit-scrollbar-track,
  .scrollbar-dt::-webkit-scrollbar-corner,
  .scrollbar-dt *::-webkit-scrollbar-track,
  .scrollbar-dt *::-webkit-scrollbar-corner {
    background: transparent;
  }

  .scrollbar-dt::-webkit-scrollbar-thumb,
  .scrollbar-dt *::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dt-midground) 18%, transparent);
    border-radius: 9999px;
    border: 0.125rem solid transparent;
    background-clip: padding-box;
  }

  .scrollbar-dt::-webkit-scrollbar-thumb:hover,
  .scrollbar-dt *::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--dt-midground) 40%, transparent);
    background-clip: padding-box;
  }

  .scrollbar-dt::-webkit-scrollbar-button,
  .scrollbar-dt *::-webkit-scrollbar-button {
    display: none;
  }
}

/* Last thread row with a message root — avoids composer overlap (Chromium/Electron). */
[data-slot='aui_thread-content']
  > :nth-last-child(
    1
      of
      :is(
        [data-slot='aui_assistant-message-root'],
        [data-slot='aui_user-message-root'],
        [data-slot='aui_system-message-root'],
        [data-slot='aui_edit-composer-root'],
        [data-slot='aui_response-loading']
      )
  ) {
  margin-bottom: var(--thread-last-message-clearance);
}

[data-slot='aui_assistant-message-content'] {
  padding-left: var(--message-text-indent);
}

/* Tool/thinking blocks now live at message-text alignment (no leading
   chevron column to escape into), so their headers and bodies share a
   common left edge with the model's text. */
[data-slot='aui_assistant-message-content'] > [data-slot='tool-block'],
[data-slot='aui_assistant-message-content'] > [data-slot='aui_thinking-disclosure'] {
  width: 100%;
  max-width: 100%;
}

[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] code {
  max-width: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  overflow-x: visible;
  overflow-wrap: inherit;
  vertical-align: baseline;
  word-break: inherit;
  white-space: inherit;
}

[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] {
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 1rem 0 !important;
}

[data-slot='aui_assistant-message-content'] .aui-md [data-streamdown='code-block'] > * {
  margin: 0 !important;
}

[data-slot='tool-block'] + [data-slot='tool-block'] {
  margin-top: 0.25rem;
}

[data-slot='tool-block']:has(> :nth-child(2)) + [data-slot='tool-block'] {
  margin-top: 0.625rem;
}

[data-slot='aui_assistant-message-content'] [data-slot='tool-block'] + .aui-md,
[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='tool-block'] {
  margin-top: 0.875rem;
}

/* Reasoning “Thinking” row — same column as message body, not full-bleed like tools */
[data-slot='aui_assistant-message-content'] .aui-md + [data-slot='aui_thinking-disclosure'],
[data-slot='aui_assistant-message-content'] [data-slot='aui_thinking-disclosure'] + .aui-md {
  margin-top: 0.375rem;
}

[data-slot='aui_assistant-message-content'] > [data-slot='tool-block']:first-child {
  margin-top: 0;
}

/* Message action bars — flat icon hits with default dim; only the hovered/focused control is full-strength. */
[data-slot='aui_msg-actions'] button {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 0;
  height: auto;
  width: auto;
  min-height: 0;
  min-width: 0;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
  opacity: 0.5;
}

[data-slot='aui_msg-actions'] button:hover {
  background: transparent;
  color: var(--color-foreground);
  opacity: 1;
}

[data-slot='aui_msg-actions'] button:active {
  background: transparent;
}

[data-slot='aui_msg-actions'] button:focus-visible {
  opacity: 1;
}

[data-slot='aui_msg-actions'] button svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Streaming caret + comet tail. Anchored to the cursor (not the block's
   right edge) so it reads on short last lines. Spread inflates the bg-color
   veil so it overlays text instead of haloing the tiny dither block. */
[data-slot='aui_assistant-message-content']
  [data-status='running']
  > div
  > *:last-child::after {
  content: '' !important;
  display: inline-block;
  position: relative;
  z-index: 2;
  width: 0.6em;
  height: 1em;
  margin-left: 0.18em;
  vertical-align: middle;
  border-radius: 1.5px;
  background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
  color: color-mix(in srgb, var(--dt-foreground) 72%, transparent);
  box-shadow:
    -0.8ch 0 1.4ch 0.55em color-mix(in srgb, var(--dt-background) 80%, transparent),
    -3ch 0 2.4ch 0.55em color-mix(in srgb, var(--dt-background) 64%, transparent),
    -6.5ch 0 3.6ch 0.5em color-mix(in srgb, var(--dt-background) 44%, transparent),
    -11ch 0 5ch 0.45em color-mix(in srgb, var(--dt-background) 28%, transparent),
    -16ch 0 6.4ch 0.4em color-mix(in srgb, var(--dt-background) 16%, transparent),
    -22ch 0 7.6ch 0.35em color-mix(in srgb, var(--dt-background) 8%, transparent),
    0 0 0.4ch color-mix(in srgb, var(--dt-foreground) 28%, transparent);
  animation: hermes-stream-caret 1.1s ease-in-out infinite;
}

@keyframes hermes-stream-caret {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot='aui_assistant-message-content']
    [data-status='running']
    > div
    > *:last-child::after {
    animation: none;
    opacity: 0.8;
  }
}

/* Live thinking preview window. Pairs with the ResizeObserver in
   ThinkingDisclosure that pins scrollTop to the bottom — older lines fade
   into the top mask while the latest tokens settle in below. */
.thinking-preview {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 28%, black 100%);
}