next-tjwater-frontend/src/styles.css

@import "@fontsource-variable/noto-sans-sc";
@import "tailwindcss";
@import "tw-animate-css";
@source "../node_modules/streamdown/dist";
@source "../node_modules/@streamdown/*/dist";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--surface-dock);
  --color-foreground: var(--ink);
  --color-card: var(--surface-reading);
  --color-card-foreground: var(--ink);
  --color-popover: var(--surface-reading);
  --color-popover-foreground: var(--ink);
  --color-primary: var(--action-blue);
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: var(--surface-control);
  --color-secondary-foreground: var(--ink);
  --color-muted: var(--surface-control);
  --color-muted-foreground: var(--ink-muted);
  --color-accent: var(--action-selection-soft);
  --color-accent-foreground: var(--action-blue-hover);
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: var(--surface-border);
  --color-input: var(--surface-border);
  --color-ring: var(--action-blue-hover);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --shadow-glass: 0 18px 50px rgba(10, 18, 32, 0.18);
}

@theme {
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  /* Fallback only: component focus styles take precedence over this layer. */
  input:focus-visible,
  button:not([data-slot="button"]):focus-visible {
    outline: 2px solid var(--action-focus-ring);
    outline-offset: 2px;
  }

  :where(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  :where(*)::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  :where(*)::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 0;
  }

  :where(*)::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
  }

  :where(*):hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-hover);
  }

  :where(*)::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
  }

  :where(*)::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
  }

  @media (forced-colors: active) {
    :where(*) {
      scrollbar-color: auto;
    }
  }
}

:root {
  color-scheme: light;
  --palette-paper: #F5F7FA;
  --palette-frost: #E6E9F2;
  --palette-brand: #4263C7;
  --palette-sand: color-mix(in oklab, var(--palette-champagne) 40%, var(--palette-paper));
  --palette-champagne: #D6C294;
  --surface-navigation: color-mix(in oklab, var(--palette-brand) 8%, var(--palette-frost));
  --surface-panel: var(--palette-frost);
  --surface-subtle: #EBEEF5;
  background: var(--canvas-map);
  --canvas-map: var(--palette-paper);
  --canvas-map-grid: color-mix(in srgb, var(--palette-brand) 8%, transparent);
  --acrylic-navigation: color-mix(in srgb, var(--surface-navigation) 64%, transparent);
  --acrylic-panel: color-mix(in srgb, var(--surface-panel) 56%, transparent);
  --acrylic-panel-white: rgba(255, 255, 255, 0.82);
  --acrylic-control: color-mix(in srgb, var(--surface-subtle) 74%, transparent);
  --agent-floating-reading-surface: color-mix(in srgb, var(--surface-panel) 82%, transparent);
  --agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 72%, transparent);
  --agent-floating-reading-item-hover: color-mix(in srgb, var(--palette-paper) 90%, transparent);
  --agent-floating-reading-active: color-mix(in srgb, var(--action-selection-soft) 82%, transparent);
  --agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 92%, transparent);
  --agent-user-message-border: var(--action-selection-border);
  --agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 86%, transparent);
  --acrylic-panel-blur: 24px;
  --acrylic-control-blur: 18px;
  --acrylic-backdrop-saturation: 1.08;
  --agent-floating-acrylic-backdrop: blur(var(--acrylic-control-blur))
    saturate(var(--acrylic-backdrop-saturation));
  --acrylic-exclusion: rgba(255, 255, 255, 0.035);
  --acrylic-luminosity: rgba(255, 255, 255, 0.1);
  --scrollbar-size: 4px;
  --scrollbar-radius: 2px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(100, 116, 139, 0.22);
  --scrollbar-thumb-hover: rgba(100, 116, 139, 0.3);
  --scrollbar-thumb-active: rgba(71, 85, 105, 0.36);
  --acrylic-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.035'/%3E%3C/svg%3E");
  --acrylic-border: rgba(255, 255, 255, 0.52);
  --acrylic-outline: color-mix(in srgb, var(--ink) 20%, transparent);
  --acrylic-highlight: rgba(255, 255, 255, 0.68);
  --shadow-navigation: 0 1px 0 rgba(48, 65, 85, 0.14);
  --shadow-panel: 0 12px 32px rgba(15, 33, 55, 0.14);
  --shadow-agent-history-bottom: 0 12px 12px -12px rgba(15, 33, 55, 0.32);
  --shadow-control: 0 6px 18px rgba(15, 33, 55, 0.1);
  --shadow-agent-composer: 0 2px 4px rgb(15 23 42 / 0.04), 0 12px 32px -10px rgb(15 23 42 / 0.12);
  --shadow-transient: 0 14px 34px rgba(15, 33, 55, 0.18);
  --shadow-agent-floating:
    0 18px 42px rgba(15, 33, 55, 0.18), 0 4px 12px rgba(15, 33, 55, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --surface-dock: var(--surface-subtle);
  --surface-control: color-mix(in srgb, var(--surface-subtle) 92%, transparent);
  --surface-well: color-mix(in srgb, var(--surface-panel) 66%, transparent);
  --surface-reading: color-mix(in srgb, var(--palette-paper) 96%, transparent);
  --glass-transient: color-mix(in srgb, var(--surface-panel) 66%, transparent);
  --surface-border: #BEC2CD;
  --surface-divider: #D5D9E1;
  --surface-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  --radius-control: 12px;
  --radius-panel: 16px;
  --action-blue: var(--palette-brand);
  --action-blue-hover: #3653B0;
  --action-blue-pressed: #2B469C;
  --action-soft: var(--surface-subtle);
  --action-soft-pressed: var(--surface-panel);
  --action-selection-soft: #DAE5FD;
  --action-selection-soft-hover: color-mix(in oklab, var(--palette-brand) 12%, var(--palette-frost));
  --action-selection-soft-pressed: color-mix(in oklab, var(--palette-brand) 20%, var(--palette-frost));
  --action-selection-border: var(--palette-brand);
  --action-border: var(--surface-border);
  --action-border-hover: var(--palette-brand);
  --action-border-pressed: var(--action-blue);
  --action-danger: #dc2626;
  --action-danger-hover: #b91c1c;
  --action-danger-pressed: #991b1b;
  --action-focus-ring: var(--action-blue-hover);
  --field-focus-border: var(--action-blue-hover);
  --action-focus-offset: var(--surface-reading);
  --action-shadow-primary: 0 5px 12px rgba(66, 99, 199, 0.2);
  --action-shadow-secondary: 0 2px 5px rgba(15, 33, 55, 0.08);
  --action-shadow-primary-pressed: 0 1px 3px rgba(43, 70, 156, 0.18);
  --action-shadow-secondary-pressed: 0 1px 2px rgba(15, 33, 55, 0.06);
  --ink: #232935;
  --ink-muted: #4E5566;
  --status-neutral-soft: oklch(96.9% 0.005 247.9);
  --status-neutral-border: oklch(90.6% 0.013 244.3);
  --status-neutral-foreground: oklch(46.5% 0.04 253.9);
  --status-neutral-mark: oklch(66% 0.039 253.6);
  --status-info-soft: var(--surface-subtle);
  --status-info-border: var(--surface-border);
  --status-info-foreground: var(--action-blue-hover);
  --status-info-mark: var(--action-blue);
  --status-success-soft: oklch(97.2% 0.011 158.8);
  --status-success-border: oklch(90.4% 0.031 159);
  --status-success-foreground: oklch(51.2% 0.086 163.6);
  --status-success-mark: oklch(62% 0.107 162);
  --status-warning-soft: color-mix(in oklab, var(--palette-champagne) 25%, var(--palette-paper));
  --status-warning-border: color-mix(in oklab, var(--palette-champagne) 40%, var(--palette-paper));
  --status-warning-foreground: #604D1D;
  --status-warning-mark: #977D3C;
  --status-danger-soft: oklch(96.5% 0.01 17.3);
  --status-danger-border: oklch(87.8% 0.031 17.8);
  --status-danger-foreground: oklch(50.5% 0.118 22.2);
  --status-danger-mark: oklch(62.6% 0.142 22);
  --tone-agent: var(--surface-subtle);
  --primary-foreground: 210 40% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --radius: 0.5rem;
}

[data-basemap-tone="satellite"] {
  --acrylic-navigation: color-mix(in srgb, var(--surface-navigation) 80%, transparent);
  --acrylic-panel: color-mix(in srgb, var(--surface-panel) 72%, transparent);
  --acrylic-control: color-mix(in srgb, var(--surface-subtle) 86%, transparent);
  --agent-floating-reading-surface: color-mix(in srgb, var(--surface-panel) 88%, transparent);
  --glass-transient: color-mix(in srgb, var(--surface-panel) 76%, transparent);
  --acrylic-backdrop-saturation: 1.02;
  --agent-floating-acrylic-backdrop: blur(var(--acrylic-control-blur))
    saturate(var(--acrylic-backdrop-saturation));
  --shadow-panel: 0 14px 36px rgba(7, 18, 32, 0.22);
  --shadow-agent-history-bottom: 0 14px 14px -14px rgba(7, 18, 32, 0.4);
  --shadow-control: 0 7px 20px rgba(7, 18, 32, 0.16);
  --shadow-transient: 0 16px 38px rgba(7, 18, 32, 0.26);
  --shadow-agent-floating:
    0 20px 46px rgba(7, 18, 32, 0.26), 0 5px 14px rgba(7, 18, 32, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  --agent-floating-reading-item: color-mix(in srgb, var(--palette-paper) 78%, transparent);
  --agent-floating-reading-item-hover: color-mix(in srgb, var(--palette-paper) 92%, transparent);
  --agent-floating-reading-active: color-mix(in srgb, var(--action-selection-soft) 88%, transparent);
  --agent-user-message-surface: color-mix(in srgb, var(--action-selection-soft) 94%, transparent);
  --agent-white-acrylic-surface: color-mix(in srgb, var(--palette-paper) 90%, transparent);
  --surface-control: color-mix(in srgb, var(--surface-subtle) 96%, transparent);
  --surface-well: color-mix(in srgb, var(--surface-panel) 78%, transparent);
  --surface-reading: color-mix(in srgb, var(--palette-paper) 98.5%, transparent);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Noto Sans SC Variable", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* A field or its group owns one focus boundary; inner controls stay borderless. */
.form-field {
  outline: 0;
}

.form-field:is(:focus, :focus-within) {
  border-color: var(--field-focus-border);
}

.form-field-inset:focus-visible {
  outline: 1px solid var(--field-focus-border);
  outline-offset: -1px;
}

.form-field[aria-invalid="true"],
.form-field:has([aria-invalid="true"]) {
  --field-focus-border: var(--action-danger);
  border-color: var(--field-focus-border);
}

@media (forced-colors: active) {
  .form-field:is(:focus, :focus-within) {
    --field-focus-border: Highlight;
  }
}

button {
  touch-action: manipulation;
}

button:not([data-slot="button"]) {
  transition-duration: 120ms;
  transition-property: color, background-color, border-color, box-shadow, filter, outline-color;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

button:not([data-slot="button"]):not(:disabled):active {
  filter: brightness(0.97) saturate(1.02);
  outline: 1px solid var(--action-border-pressed);
  outline-offset: -1px;
}

button.action-control[aria-pressed="true"]:not(:disabled) {
  border-color: var(--action-blue);
  background-color: var(--action-blue);
  color: #ffffff;
}

@media (hover: hover) {
  button.action-control[aria-pressed="true"]:not(:disabled):hover {
    border-color: var(--action-blue-hover);
    background-color: var(--action-blue-hover);
    color: #ffffff;
  }
}

button.action-control[aria-pressed="true"]:not(:disabled):active {
  border-color: var(--action-blue-pressed);
  background-color: var(--action-blue-pressed);
  color: #ffffff;
  filter: none;
}

button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled) {
  border-color: var(--action-selection-border);
  background-color: var(--action-selection-soft);
  color: var(--action-blue-hover);
}

button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled)
  .header-control-icon {
  background-color: rgba(255, 255, 255, 0.68);
  color: var(--action-blue-hover);
}

@media (hover: hover) {
  button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover {
    border-color: var(--action-border-hover);
    background-color: var(--action-selection-soft-hover);
    color: var(--action-blue-pressed);
  }

  button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):hover
    .header-control-icon {
    background-color: rgba(255, 255, 255, 0.82);
    color: var(--action-blue-hover);
  }
}

button.action-control[data-selection-tone="soft"][aria-pressed="true"]:not(:disabled):active {
  border-color: var(--action-border-pressed);
  background-color: var(--action-selection-soft-pressed);
  color: var(--action-blue-pressed);
  box-shadow: var(--action-shadow-secondary-pressed);
  filter: none;
}

button:disabled {
  cursor: not-allowed;
}

.map-grid {
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
    linear-gradient(90deg, var(--canvas-map-grid) 1px, transparent 1px),
    linear-gradient(var(--canvas-map-grid) 1px, transparent 1px), var(--canvas-map);
  background-size:
    auto,
    68px 68px,
    68px 68px,
    auto;
}

#workspace-map .maplibregl-canvas:focus {
  outline: none;
}

#workspace-map .maplibregl-canvas:focus-visible {
  outline: 1px solid var(--action-focus-ring);
  outline-offset: -1px;
}

.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient,
.material-tone-agent {
  border-color: var(--surface-border);
  background-clip: padding-box;
}

.acrylic-navigation,
.acrylic-panel,
.acrylic-control,
.glass-transient {
  border-color: var(--acrylic-border);
  background-image:
    linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
    linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
  background-blend-mode: exclusion, luminosity, soft-light;
  box-shadow:
    inset 0 1px 0 var(--acrylic-highlight),
    0 0 0 1px var(--acrylic-outline),
    var(--shadow-panel);
}

.acrylic-navigation {
  background-color: var(--acrylic-navigation);
  box-shadow: var(--shadow-navigation);
  backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
  -webkit-backdrop-filter: blur(var(--acrylic-panel-blur))
    saturate(var(--acrylic-backdrop-saturation));
}

.workbench-top-bar {
  border-color: var(--surface-divider);
  box-shadow: none;
}

.acrylic-panel {
  background-color: var(--acrylic-panel);
  backdrop-filter: blur(var(--acrylic-panel-blur)) saturate(var(--acrylic-backdrop-saturation));
  -webkit-backdrop-filter: blur(var(--acrylic-panel-blur))
    saturate(var(--acrylic-backdrop-saturation));
}

.acrylic-panel-white {
  --surface-reading: rgb(255 255 255 / 0.74);
  --surface-control: rgb(255 255 255 / 0.52);
  --surface-divider: rgb(35 38 44 / 0.12);
  --acrylic-border: rgb(255 255 255 / 0.82);
  --acrylic-outline: rgb(35 38 44 / 0.14);
  background-color: var(--acrylic-panel-white);
}

.agent-panel-shell.acrylic-panel,
.mobile-workbench-sheet:has(.agent-panel-shell) {
  background-color: var(--agent-floating-reading-surface);
  backdrop-filter: var(--agent-floating-acrylic-backdrop);
  -webkit-backdrop-filter: var(--agent-floating-acrylic-backdrop);
}

.acrylic-control {
  background-color: var(--acrylic-control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 0 1px var(--acrylic-outline),
    var(--shadow-control);
  backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
  -webkit-backdrop-filter: blur(var(--acrylic-control-blur))
    saturate(var(--acrylic-backdrop-saturation));
}

.agent-collapsed-rail {
  --action-soft: transparent;
  --action-soft-pressed: transparent;
}

.agent-orb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.agent-orb-response,
.agent-orb-live,
.agent-orb-still,
.agent-orb-canvas {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.agent-orb-still {
  object-fit: contain;
}

.agent-orb-canvas {
  opacity: 0;
  transition: opacity 180ms linear;
}

.agent-orb-live[data-ready="true"] .agent-orb-canvas {
  opacity: 1;
  pointer-events: auto;
}

.agent-orb-live[data-ready="true"] .agent-orb-still {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms linear, visibility 0s linear 180ms;
}

.agent-orb-contrast {
  display: none;
}

@media (forced-colors: active) {
  .agent-orb-live,
  .agent-orb-still {
    visibility: hidden;
  }

  .agent-orb-contrast {
    position: absolute;
    display: block;
    inset: 10%;
    border: 2px solid ButtonText;
    border-radius: 50%;
    background: ButtonFace;
    forced-color-adjust: none;
  }
}

@layer components {
  .surface-dock,
  .surface-control,
  .surface-well,
  .surface-reading {
    border-color: var(--surface-border);
    background-clip: padding-box;
  }

  .surface-dock {
    background-color: var(--surface-dock);
  }
  .surface-control {
    background-color: var(--surface-control);
  }
  .surface-well {
    background-color: var(--surface-well);
  }
  .surface-reading {
    background-color: var(--surface-reading);
  }
}

.glass-transient {
  background-color: var(--glass-transient);
  box-shadow:
    inset 0 1px 0 var(--acrylic-highlight),
    0 0 0 1px var(--acrylic-outline),
    var(--shadow-transient);
  backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
  -webkit-backdrop-filter: blur(var(--acrylic-control-blur))
    saturate(var(--acrylic-backdrop-saturation));
}

.material-tone-agent {
  background-color: var(--tone-agent);
  box-shadow: inset 0 1px 0 var(--surface-border);
}

.status-tone-neutral {
  --status-soft: var(--status-neutral-soft);
  --status-border: var(--status-neutral-border);
  --status-foreground: var(--status-neutral-foreground);
  --status-mark: var(--status-neutral-mark);
}

.status-tone-info {
  --status-soft: var(--status-info-soft);
  --status-border: var(--status-info-border);
  --status-foreground: var(--status-info-foreground);
  --status-mark: var(--status-info-mark);
}

.status-tone-success {
  --status-soft: var(--status-success-soft);
  --status-border: var(--status-success-border);
  --status-foreground: var(--status-success-foreground);
  --status-mark: var(--status-success-mark);
}

.status-tone-warning {
  --status-soft: var(--status-warning-soft);
  --status-border: var(--status-warning-border);
  --status-foreground: var(--status-warning-foreground);
  --status-mark: var(--status-warning-mark);
}

.status-tone-danger {
  --status-soft: var(--status-danger-soft);
  --status-border: var(--status-danger-border);
  --status-foreground: var(--status-danger-foreground);
  --status-mark: var(--status-danger-mark);
}

.status-badge,
.status-icon {
  border-color: var(--status-border);
  background-color: var(--status-soft);
  color: var(--status-foreground);
}

.status-icon[data-selected="true"] {
  --status-border: var(--action-blue);
  --status-soft: var(--action-blue);
  --status-foreground: #ffffff;
}

.status-dot {
  background-color: var(--status-mark);
}

.status-dot[data-activity="live"] {
  animation: status-live 1.4s ease-in-out infinite;
}

.status-glyph[data-activity="loading"] {
  animation: status-spin 0.9s linear infinite;
}

@keyframes status-live {
  0%,
  100% {
    opacity: 0.48;
  }

  50% {
    opacity: 1;
  }
}

@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  [data-basemap-tone] {
    --surface-reading: var(--palette-paper);
    --surface-control: var(--surface-subtle);
    --surface-well: var(--surface-panel);
    --acrylic-navigation: var(--surface-navigation);
    --acrylic-panel: var(--surface-panel);
    --acrylic-panel-white: #ffffff;
    --acrylic-control: var(--surface-subtle);
    --glass-transient: var(--surface-panel);
    --agent-floating-reading-surface: var(--surface-panel);
    --agent-floating-reading-item: var(--surface-subtle);
    --agent-floating-reading-item-hover: var(--surface-reading);
    --agent-floating-reading-active: var(--action-selection-soft);
    --agent-user-message-surface: var(--action-selection-soft);
    --agent-white-acrylic-surface: var(--surface-reading);
    --agent-floating-acrylic-backdrop: none;
  }

  .acrylic-navigation,
  .acrylic-panel,
  .acrylic-control,
  .glass-transient {
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-basemap-tone] {
    --surface-reading: var(--palette-paper);
    --surface-control: var(--surface-subtle);
    --surface-well: var(--surface-panel);
    --acrylic-navigation: var(--surface-navigation);
    --acrylic-panel: var(--surface-panel);
    --acrylic-panel-white: #ffffff;
    --acrylic-control: var(--surface-subtle);
    --glass-transient: var(--surface-panel);
    --agent-floating-reading-surface: var(--surface-panel);
    --agent-floating-reading-item: var(--surface-subtle);
    --agent-floating-reading-item-hover: var(--surface-reading);
    --agent-floating-reading-active: var(--action-selection-soft);
    --agent-user-message-surface: var(--action-selection-soft);
    --agent-white-acrylic-surface: var(--surface-reading);
    --agent-floating-acrylic-backdrop: none;
  }

  .acrylic-navigation,
  .acrylic-panel,
  .acrylic-control,
  .glass-transient {
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  :root,
  [data-basemap-tone] {
    --agent-floating-reading-surface: Canvas;
    --agent-floating-reading-item: Canvas;
    --agent-floating-reading-item-hover: Canvas;
    --agent-floating-reading-active: Highlight;
    --agent-user-message-surface: Canvas;
    --agent-user-message-border: CanvasText;
    --agent-white-acrylic-surface: Canvas;
    --agent-floating-acrylic-backdrop: none;
  }

  .acrylic-navigation,
  .acrylic-panel,
  .acrylic-control,
  .glass-transient,
  .surface-dock,
  .surface-control,
  .surface-well,
  .surface-reading,
  .material-tone-agent {
    forced-color-adjust: none;
    border-color: CanvasText;
    background-color: Canvas;
    background-image: none;
    box-shadow: none;
    color: CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .status-badge,
  .status-icon {
    border-color: CanvasText;
    background-color: Canvas;
    color: CanvasText;
  }

  .status-dot {
    background-color: CanvasText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot[data-activity="live"],
  .status-glyph[data-activity="loading"] {
    animation: none;
  }
}

.agent-panel-header {
  z-index: 1;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  box-shadow: inset 0 -1px 0 var(--surface-divider);
}

.agent-panel-header-expandable {
  position: absolute;
  isolation: isolate;
}

.agent-panel-floating-acrylic {
  background-image:
    linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
    linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
  background-blend-mode: exclusion, luminosity, soft-light;
  background-clip: padding-box;
  box-shadow: var(--shadow-agent-floating);
  backdrop-filter: var(--agent-floating-acrylic-backdrop);
  -webkit-backdrop-filter: var(--agent-floating-acrylic-backdrop);
}

.agent-panel-header-expanded {
  z-index: 2;
  border-color: var(--acrylic-outline);
  border-style: solid;
  border-width: 0 0 1px;
  border-bottom-right-radius: var(--radius-panel);
  border-bottom-left-radius: var(--radius-panel);
  box-shadow: var(--shadow-agent-history-bottom);
}

.agent-panel-integrated-header {
  inset-inline: -0.25rem;
  top: -0.25rem;
}

.agent-panel-header-mobile {
  top: -2rem;
  padding-top: 2rem;
}

.agent-panel-history-extension .agent-panel-control,
.agent-panel-composer > .agent-panel-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-panel-history-extension {
  border: 0;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel);
  background-color: var(--agent-floating-reading-surface);
  box-shadow: none;
}

.agent-panel-composer,
.agent-conversation-scroll-button,
.agent-speech-selection-action {
  background-color: var(--agent-white-acrylic-surface);
}

.agent-panel-composer {
  inset-inline: calc(1rem + var(--scrollbar-size) + 1px);
}

.agent-panel-composer,
.agent-conversation-scroll-button,
.agent-speech-selection-action {
  border: 0;
}

.agent-panel-history-extension .agent-history-item,
.agent-panel-history-extension .agent-history-state {
  background-color: var(--agent-floating-reading-item);
}

@media (hover: hover) {
  .agent-panel-history-extension .agent-history-item:hover {
    background-color: var(--agent-floating-reading-item-hover);
  }
}

.agent-panel-history-extension .agent-history-item-active {
  background-color: var(--agent-floating-reading-active);
}

button.agent-history-session-trigger:not(:disabled):active {
  outline: none;
}

.agent-panel-band:not(.agent-panel-floating-acrylic) {
  background: var(--surface-control);
}

.agent-panel-conversation {
  background: transparent;
}

.agent-panel-conversation-canvas {
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
}

.agent-panel-conversation button:not([data-slot="button"]):not(:disabled):active {
  outline: none;
}

.agent-panel-conversation-content {
  padding-bottom: 10.5rem;
}

.agent-panel-conversation-content-empty {
  padding-bottom: 13.5rem;
}

.agent-panel-message {
  border: 1px solid var(--surface-divider);
  background: var(--surface-reading);
}

.agent-panel-user-message {
  border: 1px solid var(--agent-user-message-border);
  background: var(--agent-user-message-surface);
  color: var(--ink);
}

.agent-panel-message,
.agent-panel-user-message {
  box-shadow: var(--action-shadow-secondary);
}

@media (hover: hover) {
  .agent-conversation-scroll-button:hover,
  .agent-speech-selection-action:hover {
    background-color: var(--agent-white-acrylic-surface);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .agent-panel-floating-acrylic {
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .agent-panel-floating-acrylic {
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .agent-panel-header-expanded {
    border-color: CanvasText;
    box-shadow: none;
  }

  .agent-panel-floating-acrylic {
    forced-color-adjust: none;
    border-color: CanvasText;
    background-color: Canvas;
    background-image: none;
    box-shadow: none;
    color: CanvasText;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.agent-streaming-response {
  display: block;
  min-width: 0;
  font-size: 16px;
  line-height: 1.75;
  --sd-animation: agent-stream-token-in;
  --sd-duration: 260ms;
  --sd-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-streaming-response :is(p, li) { font-size: inherit; line-height: inherit; }
.agent-streaming-response :is(h1, h2, h3, h4) { margin-block: 1.3em 0.6em; line-height: 1.5; text-wrap: pretty; }
.agent-streaming-response h1 { font-size: 24px; }
.agent-streaming-response h2 { font-size: 21px; }
.agent-streaming-response h3 { font-size: 18px; }
.agent-streaming-response h4 { font-size: 16px; }
.agent-streaming-response :is(ul, ol) { padding-inline-start: 1.5em; }
.agent-streaming-response blockquote { margin-block: 1em; padding: 12px 16px; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-control); }
.agent-streaming-response pre { max-width: 100%; overflow-x: auto; font-size: 13px; line-height: 1.7; }

.markdown-reading-block { min-width: 0; margin-block: 20px; overflow: hidden; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-reading); }
.markdown-table-scroll { max-width: 100%; max-height: 384px; overflow: auto; overscroll-behavior: contain; }
.markdown-table-scroll:focus-visible { outline: 2px solid var(--action-blue); outline-offset: -2px; }
.markdown-table-scroll table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
.markdown-table-scroll :is(th, td) { min-width: 112px; max-width: 400px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--surface-divider); vertical-align: top; overflow-wrap: anywhere; }
.markdown-table-scroll th { position: sticky; top: 0; z-index: 1; background: var(--surface-control); color: var(--ink); text-align: start; font-weight: 600; }
.markdown-table-scroll td { font-variant-numeric: tabular-nums; }
.markdown-table-scroll tr:last-child td { border-bottom: 0; }
.markdown-reading-window { width: calc(100vw - 32px); max-width: 1120px; height: min(84dvh, 900px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; border-radius: 12px; background: var(--surface-reading); color: var(--ink); }
.markdown-reading-window [data-sd-animate] { animation: none; filter: none; opacity: 1; transform: none; }
.markdown-reading-window .markdown-table-scroll { max-height: none; overflow: visible; }
.markdown-reading-window .markdown-table-scroll table { font-size: 16px; }
.markdown-reading-window[data-reading-kind="table"] { height: auto; max-height: min(84dvh, 900px); }
.markdown-diagram-renderer { min-width: 0; padding: 8px; }
.markdown-diagram-renderer [data-streamdown="mermaid-block"] { margin: 0; border: 0; border-radius: 0; background: var(--surface-reading); padding: 0; }
.markdown-diagram-renderer [data-streamdown="mermaid-block"] > div:first-child { visibility: hidden; }
.markdown-diagram-renderer [data-streamdown="mermaid-block-actions"] { background: var(--surface-control); backdrop-filter: none; }
.markdown-diagram-renderer [data-streamdown="mermaid"] { height: clamp(300px, 52dvh, 480px); }
.markdown-diagram-renderer [data-streamdown="mermaid"] > div { height: 100%; }
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="application"] { justify-content: flex-start; }
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="img"] { width: max-content; min-width: 100%; flex: none; padding: 20px 48px 20px 12px; }
.markdown-diagram-renderer [data-streamdown="mermaid"] [role="img"] > svg { width: auto; max-width: none; height: auto; flex-shrink: 0; }
.markdown-reading-window .markdown-diagram-renderer [data-streamdown="mermaid"] { height: min(62dvh, 640px); }
@media (max-width: 639px) {
  .markdown-reading-window { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); height: min(88dvh, 900px); }
  .markdown-reading-window[data-reading-kind="table"] { height: auto; max-height: min(88dvh, 900px); }
  .markdown-table-scroll :is(th, td) { padding: 10px 12px; }
}

[data-streamdown="table-fullscreen"] [data-sd-animate] {
  animation: none;
  filter: none;
  opacity: 1;
  transform: none;
}

.agent-chart-line {
  animation: agent-chart-line-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
  will-change: opacity, transform;
}

.agent-chart-point,
.agent-chart-bar {
  animation: agent-chart-mark-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-box: fill-box;
  transform-origin: center bottom;
  will-change: opacity, transform;
}

.agent-panel-nested {
  border: 1px solid var(--surface-divider);
  background: var(--surface-control);
}

.agent-panel-control {
  border: 1px solid rgba(100, 116, 139, 0.16);
  background: var(--surface-reading);
}

.workbench-agent-dock .agent-panel-shell {
  border: 0;
  border-radius: 0;
  background: var(--surface-dock);
  box-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.agent-panel-icon-button,
.agent-project-trigger {
  border: 1px solid var(--surface-divider);
  background: var(--surface-control);
  box-shadow: var(--action-shadow-secondary);
}

@media (hover: hover) {
  .agent-panel-icon-button:hover,
  .agent-project-trigger:hover {
    border-color: var(--action-border-hover);
    background: var(--action-soft);
    color: var(--action-blue-hover);
  }
}

.agent-panel-primary-icon {
  border: 0;
  background: var(--action-blue);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(70, 95, 145, 0.22);
}

@media (hover: hover) {
  .agent-panel-primary-icon:hover {
    border-color: var(--action-blue-hover);
    background: var(--action-blue-hover);
    color: #ffffff;
  }
}

.agent-panel-primary-icon:disabled {
  background: var(--action-blue);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.agent-panel-shell,
.agent-panel-overlay,
[data-agent-theme="chat"] {
  --agent-palette-shell: #E8ECF3;
  --agent-palette-reading: #F8F9FC;
  --agent-palette-accent: #465F91;
  --agent-palette-accent-hover: #394E7C;
  --agent-palette-accent-pressed: #2F416B;
  --agent-palette-selection: #DDE4F1;
  --agent-input-placeholder: #8791A3;
  --surface-panel: #E0E5EF;
  --surface-subtle: var(--agent-palette-shell);
  --surface-control: color-mix(in srgb, var(--agent-palette-shell) 92%, transparent);
  --surface-reading: var(--agent-palette-reading);
  --action-blue: var(--agent-palette-accent);
  --action-blue-hover: var(--agent-palette-accent-hover);
  --action-blue-pressed: var(--agent-palette-accent-pressed);
  --action-soft: #E4E8F1;
  --action-soft-pressed: #D8DFEB;
  --action-selection-soft: var(--agent-palette-selection);
  --action-selection-soft-hover: #CFD9EA;
  --action-selection-soft-pressed: #C2CEE2;
  --action-selection-border: #7585AA;
  --action-border-hover: var(--agent-palette-accent);
  --action-border-pressed: var(--agent-palette-accent-hover);
  --action-focus-ring: var(--agent-palette-accent-hover);
  --field-focus-border: var(--agent-palette-accent);
  --action-focus-offset: var(--agent-palette-reading);
  --action-shadow-primary: 0 5px 12px rgba(70, 95, 145, 0.2);
  --action-shadow-primary-pressed: 0 1px 3px rgba(47, 65, 107, 0.18);
  --ink-muted: #4E596D;
  --acrylic-navigation: color-mix(in srgb, #E4E9F2 72%, transparent);
  --agent-floating-reading-surface: color-mix(in srgb, #E6EBF3 86%, transparent);
  --agent-floating-reading-item: color-mix(in srgb, var(--agent-palette-reading) 76%, transparent);
  --agent-floating-reading-item-hover: color-mix(in srgb, var(--agent-palette-reading) 92%, transparent);
  --agent-floating-reading-active: color-mix(in srgb, var(--agent-palette-selection) 90%, transparent);
  --agent-user-message-surface: var(--agent-palette-selection);
  --agent-user-message-border: #C7D1E3;
  --agent-white-acrylic-surface: color-mix(in srgb, #F0F3F8 88%, transparent);
}

.agent-panel-prompt-textarea::placeholder {
  color: var(--agent-input-placeholder);
  font-weight: 400;
  opacity: 1;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"],
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
  --agent-dock-surface: var(--agent-palette-shell);
  --agent-dock-reading: var(--agent-palette-reading);
  --agent-dock-band: var(--agent-white-acrylic-surface);
  --agent-dock-control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(43, 55, 87, 0.05);
  --agent-dock-overlay-surface: var(--agent-floating-reading-surface);
  --agent-dock-overlay-backdrop: var(--agent-floating-acrylic-backdrop);
  --agent-dock-overlay-shadow: 0 6px 16px rgba(43, 55, 87, 0.1);
  --agent-dock-acrylic-texture:
    linear-gradient(var(--acrylic-exclusion), var(--acrylic-exclusion)),
    linear-gradient(var(--acrylic-luminosity), var(--acrylic-luminosity)), var(--acrylic-noise);
  --agent-dock-acrylic-shadow:
    inset 0 1px 0 var(--acrylic-highlight), 0 2px 6px rgba(43, 55, 87, 0.07);
  --agent-user-message-surface: var(--action-selection-soft);
  --agent-user-message-border: transparent;
  --agent-floating-reading-item: transparent;
  --agent-floating-reading-item-hover: var(--surface-subtle);
  --agent-floating-reading-active: var(--action-selection-soft);
  --radius-panel: 12px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] {
  background: var(--agent-dock-surface);
  border-color: var(--surface-divider);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"]:where([data-agent-starting="true"]) {
  --agent-dock-surface: #EFF2F7;
  --agent-dock-reading: #FCFCFE;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] :is(.agent-panel-header, .agent-panel-band),
.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
  background-image: var(--agent-dock-acrylic-texture);
  background-blend-mode: exclusion, luminosity, soft-light;
  background-clip: padding-box;
  backdrop-filter: var(--agent-dock-overlay-backdrop);
  -webkit-backdrop-filter: var(--agent-dock-overlay-backdrop);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header {
  background-color: var(--acrylic-navigation);
  box-shadow: inset 0 -1px 0 var(--surface-divider);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header > div:first-child {
  background: transparent;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band {
  background-color: var(--agent-dock-band);
  border-color: var(--surface-divider);
  box-shadow: inset 0 1px 0 var(--acrylic-highlight);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation {
  background: var(--agent-dock-reading);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-conversation[data-agent-conversation-state="empty"] {
  background: var(--agent-dock-surface);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-control {
  border-color: var(--surface-divider);
  border-radius: 12px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-project-trigger {
  box-shadow: var(--agent-dock-control-shadow);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form > [data-slot="input-group"] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-form > [data-slot="input-group"] {
  gap: 8px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-body {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--agent-dock-reading);
  transition: background-color 180ms ease;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-tools {
  min-height: 40px;
  padding: 0 4px;
  background: transparent;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-input-tools :where(button) {
  min-height: 40px;
  min-width: 40px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-band {
  padding: 8px 12px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-form > [data-slot="input-group"] {
  gap: 4px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-form textarea {
  min-height: 96px;
  max-height: clamp(96px, 24dvh, 192px);
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"][data-agent-starting="false"] .agent-panel-input-tools {
  padding-block: 0;
}

.agent-panel-suggestion-status {
  padding: 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button) {
  border-radius: 10px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)),
.agent-panel-overlay[data-agent-presentation="desktop-dock"]:is(button):active:not(:disabled):not(:focus-visible),
.agent-panel-overlay[data-agent-presentation="desktop-dock"] :where(button:active:not(:disabled):not(:focus-visible)) {
  translate: var(--tw-translate-x, 0) 1px;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-icon-button:active,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-project-trigger:active {
  background: var(--action-soft-pressed);
  color: var(--action-blue-pressed);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-band .surface-reading {
  border-color: var(--surface-border);
  background: var(--agent-floating-reading-item);
  box-shadow: none;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-suggestions .surface-reading {
  border-color: var(--surface-divider);
  background-color: var(--agent-white-acrylic-surface);
  box-shadow: var(--agent-dock-acrylic-shadow);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message,
.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-user-message {
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-message {
  background: transparent;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-nested[data-agent-progress] {
  border-color: var(--surface-divider);
  background: var(--agent-dock-surface);
  box-shadow: none;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] [data-agent-ui-result] {
  border: 1px solid var(--surface-divider);
  background: var(--surface-reading);
}

.agent-panel-overlay[data-agent-presentation="desktop-dock"] {
  border: 0;
  border-radius: 12px;
  background-color: var(--agent-dock-overlay-surface);
  box-shadow: inset 0 1px 0 var(--acrylic-highlight), var(--agent-dock-overlay-shadow);
  backdrop-filter: var(--agent-dock-overlay-backdrop);
  -webkit-backdrop-filter: var(--agent-dock-overlay-backdrop);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-header-expanded {
  background-color: var(--agent-dock-overlay-surface);
  border-color: var(--surface-divider);
  box-shadow: var(--shadow-agent-history-bottom);
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension {
  border-radius: 0 0 12px 12px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.agent-panel-shell[data-agent-presentation="desktop-dock"] .agent-panel-history-extension .agent-panel-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .agent-panel-shell[data-agent-presentation="desktop-dock"],
  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
    --agent-dock-overlay-surface: var(--palette-paper);
    --agent-dock-overlay-backdrop: none;
    --agent-dock-acrylic-texture: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .agent-panel-shell[data-agent-presentation="desktop-dock"],
  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
    --agent-dock-overlay-surface: var(--palette-paper);
    --agent-dock-overlay-backdrop: none;
    --agent-dock-acrylic-texture: none;
  }
}

@media (forced-colors: active) {
  .agent-panel-shell[data-agent-presentation="desktop-dock"],
  .agent-panel-overlay[data-agent-presentation="desktop-dock"] {
    --agent-dock-surface: Canvas;
    --agent-dock-reading: Canvas;
    --agent-dock-band: Canvas;
    --agent-dock-control-shadow: none;
    --agent-dock-overlay-surface: Canvas;
    --agent-dock-overlay-backdrop: none;
    --agent-dock-overlay-shadow: none;
    --agent-dock-acrylic-texture: none;
    --agent-dock-acrylic-shadow: none;
    --acrylic-highlight: transparent;
    --acrylic-navigation: Canvas;
    --surface-control: Canvas;
    --surface-reading: Canvas;
    --surface-border: CanvasText;
    --surface-divider: CanvasText;
    --agent-user-message-surface: Canvas;
    --agent-user-message-border: CanvasText;
    --agent-floating-reading-item-hover: Canvas;
    --agent-floating-reading-active: Highlight;
    forced-color-adjust: auto;
  }
}

.scheduled-feed-scroll,
.agent-conversation-scroll {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.agent-conversation-scroll {
  scrollbar-gutter: stable both-edges;
}

.scheduled-feed-panel-shell {
  --scheduled-feed-timeline-width: calc(var(--workbench-condition-width) - 1.5rem - 2px);
  transition:
    width 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease-out;
}

.scheduled-feed-panel-expanded {
  width: min(
    var(--workbench-condition-expanded-width),
    calc(
      100vw - max(
          var(--workbench-agent-current-width),
          var(--workbench-agent-rail-width)
        ) - 100px
    )
  );
}

@media (min-width: 1536px) {
  .scheduled-feed-panel-expanded {
    width: min(
      var(--workbench-condition-expanded-width-wide),
      calc(
        100vw - max(
            var(--workbench-agent-current-width),
            var(--workbench-agent-rail-width)
          ) - 100px
      )
    );
  }
}

.scheduled-feed-mobile {
  transition: none;
}

.mobile-workbench-sheet {
  overscroll-behavior: contain;
  touch-action: manipulation;
}

/* The Popper wrapper must also let pointer events reach nearby timeline markers. */
.operational-timeline-tooltip,
[data-radix-popper-content-wrapper]:has(> .operational-timeline-tooltip) {
  pointer-events: none;
}

.scheduled-feed-detail-enter {
  animation: scheduled-feed-detail-show 140ms ease-out 180ms both;
  will-change: opacity;
}

.scheduled-feed-layout {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
  transition:
    grid-template-columns 180ms cubic-bezier(0.22, 1, 0.36, 1),
    column-gap 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: grid-template-columns;
}

.scheduled-feed-layout-expanded {
  grid-template-columns:
    minmax(0, 1fr)
    var(--scheduled-feed-timeline-width);
  column-gap: 0.75rem;
}

.scheduled-feed-layout-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
  column-gap: 0;
}

/* Investigation reading surface: diagrams and evidence share the report's typography. */
.investigation-report {
  min-width: 0;
  border: 1px solid var(--surface-divider);
  border-radius: 0.75rem;
  overflow: hidden;
}

.investigation-report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem;
}

.investigation-report-header > button { flex-shrink: 0; }

.investigation-report-section {
  min-width: 0;
  padding: 1rem;
  border-top: 1px solid var(--surface-divider);
}

.investigation-report > .investigation-report-section {
  margin: 0.75rem;
  border: 1px solid var(--surface-divider);
  border-radius: 0.75rem;
  background: var(--palette-paper);
}

.investigation-card-heading,
.investigation-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.investigation-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--palette-paper) 76%, transparent);
}

.investigation-detail-positioner {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.investigation-detail-panel {
  display: flex;
  flex-direction: column;
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(86dvh, 56rem);
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid var(--surface-divider);
  background: var(--palette-paper);
  box-shadow: 0 16px 48px rgb(38 51 77 / 12%);
}

.investigation-detail-panel-wide { width: min(70rem, calc(100vw - 2rem)); }
.investigation-detail-heading { flex-shrink: 0; padding: 1rem; border-bottom: 1px solid var(--surface-divider); }
.investigation-detail-scroll { min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-wrap: anywhere; }
.investigation-detail-scroll > .investigation-report-section { padding: 0; border: 0; }
.investigation-evidence-preview { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.investigation-conclusion-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.investigation-report-update {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--action-selection-soft);
  color: var(--ink);
  font-size: 0.75rem;
}

.investigation-action-summary {
  display: grid;
  gap: 0.125rem;
}

.investigation-action-summary-detail {
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.25rem;
}

.investigation-timeline {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding-block: 0.25rem 0.5rem;
}

.investigation-timeline::before {
  position: absolute;
  inset-block: 0.65rem 0.9rem;
  inset-inline-start: 0.1875rem;
  width: 1px;
  background: var(--surface-divider);
  content: "";
}

.investigation-timeline-item {
  position: relative;
  padding-inline-start: 1rem;
}

.investigation-timeline-item::before {
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  border: 1px solid var(--action-blue);
  border-radius: 999px;
  background: var(--surface-reading);
  content: "";
}

.investigation-diagram {
  min-width: 0;
  /* SVG replacement must not become the report reader's scroll anchor. */
  overflow-anchor: none;
  overflow: hidden;
  border: 1px solid var(--surface-divider);
  border-radius: 0.75rem;
  background: var(--palette-paper);
}

.investigation-diagram [data-streamdown="mermaid"] { margin-block: 0; }
.investigation-diagram .font-mono { display: none; }
.investigation-diagram [data-streamdown="mermaid"] { background: var(--palette-paper); }
.investigation-diagram [data-streamdown="mermaid"] [role="img"] { width: 100%; }
.investigation-diagram .node { cursor: pointer; }
.investigation-diagram .node:hover { filter: brightness(0.97); }

.investigation-diagram [data-streamdown="mermaid-block"] {
  --diagram-control-rail-inset: 1.0625rem;
  --diagram-control-group-gap: 0.5rem;
  --diagram-zoom-rail-height: 7.625rem;
  margin-block: 0;
}

/* Natural graph height, with only enough room for the existing control rail. */
.investigation-diagram [data-streamdown="mermaid"] > div {
  min-block-size: calc(var(--diagram-zoom-rail-height) + 1rem);
}

.investigation-diagram [data-streamdown="mermaid"] [role="img"] > svg {
  width: 100%;
  height: auto;
  animation: investigation-diagram-reveal 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.investigation-diagram [data-streamdown="mermaid"] [role="img"] {
  /* Reserve the existing right-hand control rail when fitting the graph. */
  padding-inline-end: 3rem;
}

@keyframes investigation-diagram-reveal {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .investigation-diagram [data-streamdown="mermaid"] [role="img"] > svg {
    animation: none;
  }
}

/* Match Button's compact icon-sm size, including controls portalled to body. */
button[type="button"]:has(> .investigation-diagram-control-icon) {
  --diagram-control-size: 2rem;
  --diagram-control-icon-size: 1rem;
  position: relative;
  display: grid;
  width: var(--diagram-control-size);
  height: var(--diagram-control-size);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

button[type="button"]:has(> .investigation-diagram-control-icon)::after {
  position: absolute;
  inset: -4px;
  content: "";
}

.investigation-diagram-control-icon {
  width: var(--diagram-control-icon-size);
  height: var(--diagram-control-icon-size);
  flex-shrink: 0;
  pointer-events: none;
}

div:has(> button > [data-investigation-diagram-control="zoom-in"]),
.investigation-diagram [data-streamdown="mermaid-block-actions"] {
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-control);
  background: var(--surface-control);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.investigation-diagram [data-streamdown="mermaid-block"] > div:first-child { display: none; }
.investigation-diagram [data-streamdown="mermaid-block"] > div:has(> [data-streamdown="mermaid-block-actions"]) {
  position: absolute;
  z-index: 20;
  inset-block-start: auto;
  inset-block-end: calc(
    var(--diagram-control-rail-inset) + var(--diagram-zoom-rail-height) +
      var(--diagram-control-group-gap)
  );
  inset-inline-start: auto;
  inset-inline-end: var(--diagram-control-rail-inset);
  height: auto;
  margin-top: 0;
}

.investigation-diagram div:has(> button > [data-investigation-diagram-control="zoom-in"]) {
  inset-inline-start: auto;
  inset-inline-end: 0.5rem;
}

button[type="button"]:has(> [data-investigation-diagram-control="close"]) {
  position: absolute;
  inset-block-start: 1.3125rem;
  inset-inline-end: 1.3125rem;
  border-color: transparent;
  background: var(--surface-control);
  box-shadow:
    0 0 0 4px var(--surface-control),
    0 0 0 5px var(--surface-border);
}

button[type="button"]:has(> [data-investigation-diagram-control="close"])::after {
  inset: -5px;
}

@media (hover: hover) {
  button[type="button"]:has(> .investigation-diagram-control-icon):hover:not(:disabled) {
    border-color: var(--action-border-hover);
    background: var(--action-soft);
    color: var(--action-blue-hover);
  }
}

button[type="button"]:has(> .investigation-diagram-control-icon):active:not(:disabled) {
  border-color: var(--action-border-pressed);
  background: var(--action-soft-pressed);
  color: var(--action-blue-pressed);
  box-shadow: var(--action-shadow-secondary-pressed);
  transform: scale(0.98);
}

button[type="button"]:has(> [data-investigation-diagram-control="close"]):active:not(:disabled) {
  box-shadow:
    0 0 0 4px var(--surface-control),
    0 0 0 5px var(--action-border-pressed),
    var(--action-shadow-secondary-pressed);
}

button[type="button"]:has(> .investigation-diagram-control-icon):focus-visible {
  outline: 2px solid var(--action-focus-ring);
  outline-offset: 2px;
}

button[type="button"]:has(> .investigation-diagram-control-icon):disabled {
  pointer-events: none;
  opacity: 0.45;
}

.investigation-node-link,
.investigation-history-row {
  border: 1px solid var(--surface-divider);
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  color: var(--ink-muted);
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.25rem;
  transition: background-color 120ms, color 120ms, transform 120ms;
}

.investigation-node-link[aria-pressed="true"],
.investigation-history-row[aria-pressed="true"] {
  border-color: var(--action-selection-border);
  background: var(--action-selection-soft);
  color: var(--ink);
}

.investigation-history-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

.investigation-text-action {
  padding-block: 0.375rem;
  color: var(--action-blue-hover);
  font-size: 0.75rem;
}

.investigation-node-link:focus-visible,
.investigation-history-row:focus-visible,
.investigation-text-action:focus-visible {
  outline: 2px solid var(--action-focus-ring);
  outline-offset: 2px;
}

.investigation-node-link:active,
.investigation-history-row:active,
.investigation-text-action:active { transform: scale(0.98); }

@media (hover: hover) {
  .investigation-node-link:hover,
  .investigation-history-row:hover { background: var(--action-selection-soft); color: var(--ink); }
  .investigation-text-action:hover { text-decoration: underline; }
}

@media (max-width: 400px) {
  .investigation-report-header { flex-wrap: wrap; }
  .investigation-report-section,
  .investigation-report-header { padding: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .investigation-node-link,
  .investigation-history-row { transition: none; }
}

.scheduled-feed-shell-enter {
  animation:
    scheduled-feed-shell-show 170ms cubic-bezier(0.22, 1, 0.36, 1),
    agent-panel-fade 140ms ease-out;
  transform-origin: top right;
}

.scheduled-feed-shell-exit {
  animation:
    scheduled-feed-shell-hide 170ms cubic-bezier(0.5, 0, 0.2, 1) forwards,
    agent-panel-dim 140ms ease-in forwards;
  pointer-events: none;
  transform-origin: top right;
}

.agent-panel-confirmation {
  border: 1px solid var(--status-warning-border);
  background: var(--status-warning-soft);
}

@keyframes agent-panel-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes agent-panel-dim {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes agent-stream-token-in {
  from {
    opacity: 0;
    filter: blur(0.75px);
    transform: translateY(2px);
  }

  60% {
    opacity: 0.88;
    filter: blur(0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes agent-chart-line-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes agent-chart-mark-in {
  from {
    opacity: 0;
    transform: translateY(4px) scaleY(0.75);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes scheduled-feed-detail-show {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scheduled-feed-shell-show {
  from {
    transform: translateX(10px) translateY(-4px) scale(0.985);
  }

  to {
    transform: translateX(0) translateY(0) scale(1);
  }
}

@keyframes scheduled-feed-shell-hide {
  from {
    transform: translateX(0) translateY(0) scale(1);
  }

  to {
    transform: translateX(10px) translateY(-4px) scale(0.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scheduled-feed-shell-enter,
  .scheduled-feed-shell-exit,
  .scheduled-feed-detail-enter {
    animation: none;
    clip-path: none;
    transform: none;
  }

  .scheduled-feed-panel-shell {
    transition: none;
  }

  .scheduled-feed-layout {
    transition: none;
  }

  .agent-streaming-response [data-sd-animate] {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }

  .agent-chart-line,
  .agent-chart-point,
  .agent-chart-bar {
    animation: none;
    opacity: 1;
    transform: none;
  }

}

details[open] > summary > .disclosure-accordion-indicator {
  transform: rotate(180deg);
}

.maplibregl-ctrl-group {
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--surface-shadow) !important;
  overflow: hidden;
}

.maplibregl-ctrl button {
  width: 34px !important;
  height: 34px !important;
}

.maplibregl-ctrl-attrib {
  border-radius: 8px 0 0 0 !important;
  color: #475569 !important;
}

/* Keep the conversation composer readable in resizable chat panels. */
.agent-panel-shell form.agent-panel-control textarea,
.agent-panel-overlay form.agent-panel-control textarea {
  min-height: 96px;
  max-height: clamp(96px, 24dvh, 192px);
  padding: 12px;
}

/* Locally registered answer components adapt to the resizable chat panel. */
.answer-ui-root { container-type: inline-size; min-width: 0; overflow-wrap: anywhere; }
.answer-ui-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.answer-ui-stack-compact { gap: 8px; }
.answer-ui-section { min-width: 0; padding-top: 12px; border-top: 1px solid var(--surface-divider); }
.answer-ui-evidence { border-top: 1px solid var(--surface-divider); }
.answer-ui-form { padding: 12px; border: 1px solid var(--surface-divider); border-radius: 12px; background: var(--surface-subtle); }
@container (min-width: 440px) {
  .answer-ui-stack-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Agent chat: an independent shadcn-style surface, scoped away from the map. */
.agent-panel-shell[data-agent-presentation],
.agent-panel-overlay[data-agent-presentation],
[data-agent-theme="chat"] {
  --agent-palette-shell: #f8fafc;
  --agent-palette-reading: #ffffff;
  --agent-palette-accent: #2563eb;
  --agent-palette-accent-hover: #1d4ed8;
  --agent-palette-accent-pressed: #1e40af;
  --agent-palette-selection: #eff6ff;
  --agent-dock-surface: #f8fafc;
  --agent-dock-reading: #ffffff;
  --agent-dock-band: #f8fafc;
  --agent-dock-acrylic-texture: none;
  --agent-dock-overlay-backdrop: none;
  --agent-dock-overlay-surface: #ffffff;
  --agent-dock-control-shadow: none;
  --agent-dock-acrylic-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
  --agent-user-message-surface: #f1f5f9;
  --agent-user-message-border: #e2e8f0;
  --agent-input-placeholder: #64748b;
  --agent-white-acrylic-surface: #ffffff;
  --agent-floating-reading-item: #ffffff;
  --agent-floating-reading-item-hover: #f1f5f9;
  --agent-floating-reading-active: #eff6ff;
  --surface-navigation: #ffffff;
  --surface-panel: #f8fafc;
  --surface-subtle: #f1f5f9;
  --surface-control: #f1f5f9;
  --surface-reading: #ffffff;
  --surface-dock: #f8fafc;
  --surface-border: #cbd5e1;
  --surface-divider: #e2e8f0;
  --ink: #0f172a;
  --ink-muted: #64748b;
  --action-soft: #f1f5f9;
  --action-soft-pressed: #e2e8f0;
  --action-border: #e2e8f0;
  --action-shadow-secondary: none;
  --acrylic-navigation: #ffffff;
  --acrylic-panel: #ffffff;
  --acrylic-control: #ffffff;
  --acrylic-noise: none;
  --acrylic-panel-blur: 0px;
  --acrylic-control-blur: 0px;
  color: var(--ink);
  background: #ffffff;
}

.agent-panel-shell[data-agent-presentation] .agent-panel-header {
  background: var(--surface-navigation);
  border-color: var(--surface-divider);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.agent-chat-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
}
.agent-chat-avatar { width: 28px; height: 28px; border-radius: 8px; }
.agent-chat-message-header { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.agent-chat-message-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; }
.agent-chat-context-bar { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; padding: 12px; background: var(--surface-navigation); }

.agent-panel-shell[data-agent-presentation] .agent-panel-conversation {
  background: #ffffff;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-conversation[data-agent-conversation-state="empty"] {
  background: #ffffff;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-message {
  border: 0;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}
.agent-panel-shell[data-agent-presentation] .agent-panel-user-message {
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px 14px 4px 14px;
  background: #f1f5f9;
  box-shadow: none;
}
.agent-panel-shell[data-agent-presentation] { --agent-message-list-inset: 4px; }
.agent-chat-message-list { padding: 8px var(--agent-message-list-inset, 4px); }
.agent-panel-shell[data-agent-presentation] .agent-panel-band {
  background: #ffffff;
  padding: 8px 12px;
  border-top: 0;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.agent-panel-shell[data-agent-presentation] .agent-panel-input-form {
  border: 1px solid #e4e4e7;
  border-radius: 22px;
  background: #ffffff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-input-body {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 22px 22px 0 0;
  background: #ffffff;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools {
  width: auto;
  min-width: 0;
  align-self: stretch;
  flex-wrap: nowrap;
  margin: 0 6px 6px;
  padding: 4px;
  border-top: 0;
  background: #ffffff;
}
.agent-panel-shell[data-agent-presentation="mobile-sheet"] .agent-panel-band { flex-shrink: 0; }
.agent-panel-shell[data-agent-presentation] .agent-panel-toolbar-trigger { border-radius: 10px; }
.agent-panel-shell[data-agent-presentation] .agent-panel-voice-input { border-radius: 50%; }
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools .agent-panel-toolbar-caret {
  width: 12px;
  height: 12px;
  color: var(--ink-muted);
}
.agent-panel-shell[data-agent-presentation] .agent-panel-input-tools .agent-panel-send-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.25;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon {
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: none;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:disabled {
  background: var(--surface-control);
  color: var(--ink-muted);
  opacity: 1;
}
.agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon[data-agent-action="stop"] {
  background: var(--status-danger-soft);
  color: var(--status-danger-foreground);
}
@media (hover: hover) {
  .agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon:hover:not(:disabled) {
    background: var(--action-blue-hover);
  }
  .agent-panel-shell[data-agent-presentation] .agent-panel-primary-icon[data-agent-action="stop"]:hover:not(:disabled) {
    background: var(--status-danger-border);
  }
}
.agent-panel-shell[data-agent-presentation] .agent-panel-icon-button,
.agent-panel-shell[data-agent-presentation] .agent-project-trigger {
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.agent-chat-empty-state { height: auto; padding: 0 0 20px; gap: 6px; }
.agent-panel-shell[data-agent-centered="true"] .agent-panel-body { overflow-y: auto; overscroll-behavior: contain; }
.agent-panel-shell[data-agent-centered="true"] .agent-panel-main-content { display: none; }
.agent-panel-shell[data-agent-centered="true"] .agent-panel-band {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: 600px;
  margin: auto;
  padding: 24px;
}
@media (max-width: 639px) {
  .agent-panel-shell[data-agent-centered="true"] .agent-panel-band { padding: 24px 16px; }
}
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar {
  position: relative;
  z-index: 2;
  padding-inline: calc(12px + var(--agent-message-list-inset));
  background: var(--surface-navigation);
  text-align: left;
}
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar > p {
  scrollbar-gutter: stable both-edges;
}
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after,
.agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
  position: absolute;
  inset-inline: 0;
  height: 32px;
  pointer-events: none;
  content: "";
}
.agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after {
  top: 100%;
  background: linear-gradient(to bottom, var(--surface-navigation), transparent);
}
.agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
  z-index: 2;
  bottom: 100%;
  background: linear-gradient(to top, var(--surface-navigation), transparent);
}
@media (forced-colors: active), (prefers-reduced-transparency: reduce) {
  .agent-panel-shell[data-agent-presentation] .agent-chat-context-bar::after,
  .agent-panel-shell[data-agent-presentation][data-agent-starting="false"] .agent-panel-band::before {
    content: none;
  }
}
/* Keep one compact form mounted while the starting group becomes a bottom composer. */
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-form > [data-slot="input-group"] { gap: 4px; }
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-tools { padding-block: 4px; }
.agent-panel-shell[data-agent-presentation][data-agent-starting] textarea.agent-panel-prompt-textarea {
  min-height: 64px;
  max-height: clamp(64px, 24dvh, 160px);
  padding: 14px 14px 8px;
  font-size: 16px;
  line-height: 28px;
}
.agent-panel-shell[data-agent-presentation][data-agent-starting] .agent-panel-input-body:has(.agent-panel-input-reference) textarea.agent-panel-prompt-textarea {
  padding-top: 6px;
}
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestions {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-top: 16px;
  padding-bottom: 0;
  min-height: 0;
}
.agent-panel-shell[data-agent-presentation] .agent-chat-suggestion {
  height: auto;
  min-height: 36px;
  width: 100%;
  flex-shrink: 0;
  justify-content: flex-start;
  padding: 8px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #ffffff;
  color: #52525b;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
@media (hover: hover) {
  .agent-panel-shell[data-agent-presentation] .agent-chat-suggestion:hover {
    border-color: #d4d4d8;
    background: #f4f4f5;
    color: #18181b;
  }
}
.agent-panel-shell[data-agent-presentation] form.agent-panel-control { box-shadow: var(--shadow-agent-composer); }


.resizable-handle { color: var(--ink-muted); touch-action: none; }
.resizable-grip { opacity: 0; }
.resizable-handle::after { content: ""; position: absolute; inset: 0 -6px; }
.resizable-handle[aria-orientation="horizontal"]::after { inset: -6px 0; }
.resizable-handle[aria-orientation="horizontal"] .resizable-grip { transform: rotate(90deg); }
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) { background: var(--action-blue); }
.resizable-handle:is([data-separator="hover"], [data-separator="active"], :focus-visible) .resizable-grip {
  opacity: 1;
  color: var(--action-blue);
  border-color: var(--action-blue);
}
.resizable-handle:focus-visible .resizable-grip { outline: 2px solid var(--action-focus-ring); outline-offset: 2px; }
@media (forced-colors: active) {
  .resizable-handle, .resizable-grip { background: Canvas; color: CanvasText; border-color: ButtonBorder; }
  .resizable-handle:focus-visible .resizable-grip { outline-color: Highlight; }
}

.answer-ui-root { --surface-reading: #ffffff; --surface-control: #f1f5f9; --surface-border: #e2e8f0; --ink: #0f172a; --ink-muted: #64748b; }
.answer-content-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--surface-divider); }
.answer-content-nav > span { min-width: 0; line-height: 1.6; }
.answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-location, .answer-ui-form, [data-answer-table]) { scroll-margin-block: 12px; }
.answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-location, .answer-ui-form, [data-answer-table]):focus-visible { outline: 2px solid var(--action-blue); outline-offset: 2px; }
.answer-ui-root .answer-ui-stack { gap: 14px; }
.answer-ui-root .answer-ui-stack-compact { gap: 10px; }
.answer-ui-root[data-answer-density="compact"] :is(.answer-task-layout, .answer-task-layout-simple, .answer-task-overview, .answer-task-analysis, .answer-task-support) { gap: 12px; }
.answer-ui-root .answer-ui-stack[data-answer-density="compact"] { gap: 10px; }
.answer-ui-root .answer-ui-stack[data-answer-density="comfortable"] { gap: 16px; }
.answer-ui-root[data-answer-density="comfortable"] :is(.answer-task-layout, .answer-task-layout-simple, .answer-task-overview, .answer-task-analysis, .answer-task-support) { gap: 20px; }
.answer-ui-root [data-answer-result] { scroll-margin-block: 12px; }
.answer-ui-root [data-answer-result]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.answer-ui-metric { min-width: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-metric-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; row-gap: 4px; }
.answer-ui-metric-label { grid-column: 1; grid-row: 1; min-width: 0; }
.answer-ui-metric-value { grid-column: 1 / -1; grid-row: 2; color: var(--ink); }
.answer-ui-metric-source { grid-column: 1 / -1; grid-row: 3; }
.answer-ui-metric-ask { display: contents; }
.answer-ui-metric-ask > button { grid-column: 2; grid-row: 1; }
.answer-ui-metric-ask > [role="status"] { grid-column: 1 / -1; grid-row: 4; }
/* Only metric-only comparisons form a compact summary strip. Mixed content keeps its own breakpoint. */
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) {
  gap: 0;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--surface-reading);
}
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric + .answer-ui-metric {
  border-top: 1px solid var(--surface-border);
}
@container (min-width: 240px) {
  .answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(2) { border-top: 0; }
  .answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(even) { border-left: 1px solid var(--surface-border); }
}
.answer-ui-chart { min-width: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-root .answer-ui-chart-series button[aria-pressed] { box-shadow: none; font-weight: 400; }
.answer-ui-root .answer-ui-chart-series button[aria-pressed="true"] {
  border-color: var(--surface-border);
  background: var(--surface-control);
  color: var(--ink);
}
.answer-ui-root .answer-ui-chart-series button[aria-pressed="false"] { color: var(--ink-muted); }
.answer-ui-evidence { min-width: 0; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-reading); }
.answer-ui-evidence-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-control); color: var(--ink-muted); }
.answer-ui-location { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-form { min-width: 0; padding: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-form :is(input, textarea) { background: var(--surface-reading); }
.answer-ui-table { scrollbar-gutter: stable; }

/* Shared report reading surfaces, independent of the map's material. */
.agent-report-workspace,
.investigation-report {
  --ink: #0f172a;
  --ink-muted: #64748b;
  --surface-reading: #ffffff;
  --surface-control: #f8fafc;
  --surface-subtle: #f8fafc;
  --surface-border: #e2e8f0;
  --surface-divider: #e2e8f0;
  color: var(--ink);
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.agent-report-workspace {
  container-type: inline-size;
  background-color: var(--surface-dock);
}
.agent-report-workspace > header { background: transparent; }
.agent-report-workspace .answer-ui-root { container-type: inline-size; }
.agent-report-workspace .investigation-report { border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; }
.investigation-report .investigation-report-section { border-color: #e2e8f0; box-shadow: none; background: #ffffff; }
.investigation-report .investigation-conclusion-preview { display: block; -webkit-line-clamp: unset; }
.agent-report-workspace .investigation-report-header h2 { font-size: 20px; line-height: 28px; }
.agent-report-workspace .investigation-conclusion-preview { font-size: 16px; line-height: 26px; }
.agent-report-workspace .investigation-report-header { padding: 0 0 16px; }
.agent-report-workspace .investigation-report > .investigation-report-section {
  margin: 0;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--surface-border);
  /* Override the shared-layout animation radius on the inline cards. */
  border-radius: 0 !important;
  scroll-margin-top: 68px;
}
.agent-report-workspace .investigation-report-section:focus-visible { outline: 2px solid var(--action-focus-ring); outline-offset: 2px; }
.investigation-report-navigation { display: none; }
.agent-report-workspace .investigation-report-navigation {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-reading);
  scrollbar-width: thin;
}
.investigation-report-navigation [aria-current="location"] { background: var(--surface-control); color: var(--ink); font-weight: 600; }
.agent-report-workspace .investigation-report-navigation + .investigation-report-section { border-top: 0; }
.agent-report-workspace [data-expandable-reading] { min-width: 0; }
.answer-ui-root [data-interactive-table] input { background: #ffffff; }

@media (max-width: 639px) {
  .agent-chat-message-list { padding-inline: 0; }
  .answer-ui-evidence [data-slot="button"] { gap: 6px; }
}
@media (forced-colors: active) {
  .agent-panel-shell[data-agent-presentation], .agent-panel-overlay[data-agent-presentation], [data-agent-theme="chat"] {
    --ink: CanvasText;
    --ink-muted: CanvasText;
    --surface-border: ButtonBorder;
    --surface-divider: ButtonBorder;
    --surface-reading: Canvas;
    --agent-dock-surface: Canvas;
    --agent-dock-reading: Canvas;
    --agent-dock-band: Canvas;
  }
  .agent-panel-shell[data-agent-presentation] :is(.agent-panel-header, .agent-panel-message, .agent-panel-user-message, .agent-panel-conversation, .agent-panel-band, .agent-panel-input-form, .agent-panel-input-body, .agent-panel-input-tools),
  [data-agent-theme="chat"], .agent-report-workspace, .investigation-report,
  .answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-form, .answer-ui-stack-comparison) { background: Canvas; color: CanvasText; border-color: ButtonBorder; }
  .answer-ui-root .answer-ui-chart-series button[aria-pressed="true"],
  .investigation-report-navigation [aria-current="location"] { background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Agent dialogs share the chat theme and retain the local Dialog backdrop. */
.agent-history-overlay {
  z-index: 110;
}
.agent-history-dialog {
  z-index: 111;
  width: min(760px, calc(100vw - 48px));
  height: min(720px, 80dvh);
  max-width: 760px;
}
body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [data-sonner-toaster] { z-index: 109; }
@media (prefers-reduced-motion: reduce) {
  .agent-history-dialog,
  .agent-history-overlay { animation: none; }
}
@media (max-width: 639px) {
  .agent-history-dialog {
    animation: none;
    inset: 0;
    top: var(--history-viewport-top, 0px);
    bottom: auto;
    width: 100%;
    height: var(--history-viewport-height, 100dvh);
    max-width: none;
    max-height: 100dvh;
    transform: none;
    translate: none;
    border-radius: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* One answer becomes a working surface when its actual content warrants it. */
.answer-task-layout, .answer-task-layout-simple { display: grid; min-width: 0; gap: 16px; }
.answer-task-overview { grid-column: 1 / -1; min-width: 0; }
.answer-task-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; border-top: 1px solid var(--surface-divider); padding-top: 12px; font-size: 12px; font-weight: 500; }
.answer-task-heading > span + span { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.answer-task-support-section { min-width: 0; border-top: 1px solid var(--surface-divider); }
.answer-task-layout-simple .answer-task-support-section { border: 0; }
.answer-task-layout-simple .answer-task-support-content { padding-top: 0; }
.answer-task-support:empty { display: none; }
.answer-ui-metric-actions { grid-column: 2; grid-row: 1; align-self: start; }
.answer-chart-range-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
.answer-chart-range-summary > :last-child { grid-column: 1 / -1; }
.answer-selection-tray { margin-top: 16px; }
.answer-selection-tray summary::marker { color: var(--ink-muted); }
@container (min-width: 800px) {
  .answer-task-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr); align-items: start; gap: 18px 24px; }
  .answer-task-layout .answer-task-heading { border-top: 0; padding-top: 0; }
  .answer-task-layout .answer-task-support { padding-left: 20px; border-left: 1px solid var(--surface-divider); }
  .answer-task-layout .answer-task-support-section:first-child { border-top: 0; }
}