/* Small, hand-written CSS overrides/additions that we want available on every page. */

/* Ensure the flow tab indicator can animate (slide) without covering labels.
   We do this by putting the tabbar snapshot above the indicator snapshot. */
::view-transition-group(root) {
  z-index: 0;
}

::view-transition-group(flow-panel-tabbar) {
  z-index: 2;
}

::view-transition-old(flow-panel-tabbar),
::view-transition-new(flow-panel-tabbar) {
  animation: none;
  opacity: 1;
}

::view-transition-group(flow-panel-tab-indicator) {
  z-index: 1;
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* For the tab indicator we want spatial movement, not cross-fade. */
::view-transition-old(flow-panel-tab-indicator),
::view-transition-new(flow-panel-tab-indicator) {
  opacity: 1;
}

/* Generic "loading" affordance for Datastar @post actions.
   Pattern: set `el.classList.add('is-loading')` before @post; clear on morph re-render. */
.ds-loading-indicator {
  display: none;
}

.ds-loading-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 120ms ease;
}

.is-loading {
  pointer-events: none;
  opacity: 0.65;
}

.is-loading .ds-loading-label {
  opacity: 0;
}

.is-loading .ds-loading-indicator {
  display: inline-flex;
}

/* Overlay-only loading for link navigation (keeps content visible, dims it). */
.is-loading-overlay {
  pointer-events: none;
}

.is-loading-overlay .step-loading-content {
  opacity: 0.65;
}

.is-loading-overlay .ds-loading-indicator {
  display: flex;
}

/* Enhanced Resource UI navigation keeps the app shell mounted, so expose a
   central-panel loading affordance in place of the browser tab spinner. */
[data-resource-ui-content-scroll] {
  position: relative;
}

[data-resource-ui-content-scroll]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 35;
  height: 2px;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 120ms ease-out;
  background: linear-gradient(
    90deg,
    rgb(var(--color-primary) / 0) 0%,
    rgb(var(--color-primary) / 0.96) 18%,
    rgb(var(--color-link) / 1) 68%,
    rgb(var(--color-yellow) / 1) 100%
  );
  box-shadow: 0 1px 6px rgb(var(--color-primary) / 0.2);
}

body.breyta-resource-ui-navigating [data-resource-ui-content-scroll]::before {
  opacity: 1;
  animation: breyta-resource-ui-progress 1.25s cubic-bezier(0.22, 1, 0.36, 1)
    infinite;
}

body.breyta-resource-ui-navigating [data-resource-ui-content-scroll] > #main {
  opacity: 0.34;
  will-change: opacity;
}

[data-resource-ui-content-scroll] > #main {
  opacity: 1;
  transition: opacity 180ms ease-out;
}

[data-resource-ui-content-scroll]
  > #main[data-resource-ui-loading-reset="true"] {
  opacity: 1;
  will-change: auto;
}

@keyframes breyta-resource-ui-progress {
  0% {
    opacity: 0;
    transform: translateX(-20%) scaleX(0);
  }

  18% {
    opacity: 1;
  }

  58% {
    opacity: 1;
    transform: translateX(0) scaleX(0.72);
  }

  100% {
    opacity: 0;
    transform: translateX(72%) scaleX(0.28);
  }
}

/* Artifact sidepeek fullscreen transition: smooth expansion in-place. */
.agent-panel-resize-handle,
.agent-panel-desktop-only,
.agent-panel-desktop-content,
.app-sidebar-desktop,
.sidepeek-resize-handle,
.sidepeek-desktop-only {
  display: none;
}

.agent-panel-mobile-root,
.agent-panel-mobile-shell,
.resource-mobile-menu-root,
.resource-mobile-menu-trigger,
.resource-mobile-notifications-trigger,
.resource-mobile-notifications-sheet,
.sidepeek-mobile-root,
.sidepeek-mobile-shell {
  display: block;
}

.resource-ui-shell {
  padding-left: 0;
}

.resource-agent-panel-mobile-fab {
  display: none;
}

/* Panel transitions are applied on-demand by __breytaPanelTransition()
   so panels don't animate on page navigation/reload. */

#sidepeek-panel-container.sidepeek-panel-shell.sidepeek-artifact-fullscreen {
  width: calc(100dvw - 4rem) !important;
  max-width: calc(100dvw - 4rem);
  margin-left: 0 !important;
}

#agent-panel-container.agent-panel-shell.agent-panel-fullscreen {
  width: calc(100dvw - 4rem) !important;
  max-width: calc(100dvw - 4rem);
  margin-left: 0 !important;
}

#agent-panel-container.agent-panel-shell.agent-panel-fullscreen
  .agent-panel-content {
  width: 100%;
}

#sidepeek-panel-container.sidepeek-panel-shell.sidepeek-artifact-fullscreen
  .sidepeek-panel-content {
  width: 100%;
}

.artifact-panel-shell {
  transition-property: opacity, transform;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  opacity: 0.98;
  transform: translateX(0.125rem);
}

.artifact-panel-shell.artifact-panel-fullscreen {
  opacity: 1;
  transform: translateX(0);
}

.artifact-panel-shell.artifact-panel-fullscreen .artifact-output-content {
  padding-left: 2rem;
  padding-right: 2rem;
}

.artifact-output-content > article {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.discover-hero-dots {
  opacity: 1;
}

[data-theme="dark"] .discover-hero-dots,
.dark-mode .discover-hero-dots {
  opacity: 0.3;
}

/* Sparkle button surface: warm peach → yellow gradient used by
   `button-icon-sparkle` / `:intent :sparkle`. Derived from the 194px figma
   export (peach #E0917B @ ~64%/69%, yellow #FFFC92 @ ~93%/122%). */
.btn-sparkle-surface {
  /* Warmer, more saturated base so the gradient reads punchy even at 40px. */
  background-color: #f7c9a4;
  background-image:
    radial-gradient(
      circle at 62% 66%,
      rgba(226, 132, 104, 1) 0%,
      rgba(226, 132, 104, 0.55) 45%,
      rgba(226, 132, 104, 0) 78%
    ),
    radial-gradient(
      circle at 96% 120%,
      rgba(255, 236, 94, 1) 0%,
      rgba(255, 236, 94, 0.55) 45%,
      rgba(255, 236, 94, 0) 82%
    );
  background-repeat: no-repeat;
  transition:
    filter 160ms ease-out,
    box-shadow 160ms ease-out;
}

.btn-sparkle-surface:hover {
  filter: saturate(1.18) brightness(1.05);
}

.btn-sparkle-surface:active {
  filter: saturate(1.25) brightness(0.97);
}

@media (prefers-reduced-motion: no-preference) {
  [data-dropdown-menu-id] [data-dropdown-menu-item] {
    animation: breyta-dropdown-menu-item-in 180ms cubic-bezier(0.32, 0.72, 0, 1)
      both;
  }
}

@keyframes breyta-dropdown-menu-item-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }

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

.breyta-table-row-selected {
  position: relative;
}

[data-table-scroll-root]:has(.breyta-table-row-selected) {
  overflow: visible;
}

[data-table-scroll-viewport]:has(.breyta-table-row-selected) {
  margin: -2px;
  padding: 2px;
}

[data-table-scroll-root]:has(.breyta-table-row-selected)
  [data-table-scroll-frame]
  > [data-table-scroll-left] {
  left: -2px;
}

[data-table-scroll-root]:has(.breyta-table-row-selected)
  [data-table-scroll-frame]
  > [data-table-scroll-right] {
  right: -2px;
}

.breyta-table-row-selected::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 20;
  pointer-events: none;
  border: 2px solid rgb(var(--color-link) / 1);
  border-radius: 0.375rem;
}

.breyta-item-selected {
  box-shadow: 0 0 0 2px rgb(var(--color-link) / 1);
}

.breyta-selection-room {
  padding: 2px;
  overflow: visible;
}

.breyta-card-content-selection-room {
  overflow: visible;
}

.breyta-reasoning-collapse.is-open > .breyta-selection-room-collapse-inner,
.breyta-reasoning-collapse.is-open > .breyta-card-content-selection-room-collapse-inner {
  overflow: visible;
}

.breyta-streaming-cursor::after {
  content: "";
  display: inline-block;
  width: 0.38em;
  height: 1em;
  margin-left: 0.12em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.42;
  transform: translateY(0.12em);
  animation: breyta-streaming-cursor-pulse 1s ease-in-out infinite;
}

.breyta-workflow-detail {
  display: flex;
  min-height: calc(100dvh - 4rem);
  flex-direction: column;
  isolation: isolate;
}

.breyta-workflow-detail-section {
  margin-top: 1.5rem;
}

/* Canvas mode fills the content scroller EXACTLY — a viewport calc here
   (100dvh minus an assumed chrome height) drifts a few px whenever the top
   nav's real height differs from the constant, which put a useless vertical
   scrollbar on the canvas page. Anchor the height chain to the scroller
   instead and clip it: the canvas owns wheel/pan, nothing should scroll. */
[data-resource-ui-content-scroll]:has(.breyta-workflow-detail--canvas) {
  overflow: hidden;
}

[data-resource-ui-content-scroll]:has(.breyta-workflow-detail--canvas) > main,
[data-resource-ui-content-scroll]:has(.breyta-workflow-detail--canvas) #app-content {
  height: 100%;
  min-height: 0;
}

.breyta-workflow-detail--canvas {
  position: relative;
  height: 100%;
  min-height: 0;
  max-width: none !important;
  overflow: hidden;
  padding: 0 !important;
}

.breyta-workflow-detail--canvas .breyta-workflow-detail-section {
  margin-top: 0;
}

.breyta-workflow-canvas-section {
  flex: 1 1 auto;
  min-height: 0;
}

.breyta-workflow-detail--canvas .breyta-workflow-canvas-section {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100%;
}

.breyta-workflow-detail--canvas > .flex-1 > div {
  max-width: none !important;
  height: 100%;
  padding: 0 !important;
}

.breyta-workflow-detail--canvas > .flex-1 {
  overflow: hidden;
}

.breyta-workflow-detail-header {
  position: relative;
  z-index: 40;
  pointer-events: auto;
}

.breyta-workflow-detail--canvas .breyta-workflow-detail-header {
  padding: 1.5rem 1rem 0;
}

@media (min-width: 1024px) {
  .breyta-workflow-detail--canvas .breyta-workflow-detail-header {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

.breyta-workflow-canvas-dialog {
  position: relative;
  display: block;
  min-width: 0;
  min-height: calc(100dvh - 11rem);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  border-radius: 0.5rem;
  background: var(--surface-root);
}

.breyta-workflow-detail--canvas .breyta-workflow-canvas-dialog {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border-width: 0;
  border-radius: 0;
}

.breyta-workflow-canvas-dialog-main {
  position: relative;
  min-width: 0;
  min-height: calc(100dvh - 11rem);
  overflow: hidden;
}

.breyta-workflow-detail--canvas .breyta-workflow-canvas-dialog-main {
  min-height: 100%;
}

.breyta-workflow-canvas-dialog-header {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 35;
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.25rem;
  box-shadow: 0 12px 32px rgb(var(--color-primary) / 0.12);
}

.breyta-workflow-canvas-dialog [data-workflow-toolbar] {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 2rem;
  top: auto;
  z-index: 60;
  max-width: calc(100% - 2rem);
  transform: translateX(-50%);
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem;
  pointer-events: auto;
}

.breyta-workflow-canvas-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: calc(100dvh - 11rem);
  overflow: hidden;
}

.breyta-workflow-detail--canvas .breyta-workflow-canvas-layer {
  min-height: 100%;
}

.breyta-workflow-canvas-layer > * {
  height: 100%;
}

.breyta-workflow-canvas-layer .flow-artboard {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: calc(100dvh - 11rem);
  overflow: visible;
  border-width: 0;
  border-radius: 0;
  background: var(--surface-root);
}

.breyta-workflow-detail--canvas .breyta-workflow-canvas-layer .flow-artboard {
  min-height: 100%;
}

.breyta-workflow-canvas-layer [data-workflow-toolbar] [data-workflow-action] {
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.375rem 0.5rem;
  line-height: 1;
}

.breyta-workflow-canvas-layer
  [data-workflow-toolbar]
  [data-workflow-orientation-select] {
  min-height: 2rem;
}

.breyta-workflow-canvas-layer [data-workflow-content] {
  isolation: isolate;
}

.breyta-workflow-canvas-layer [data-workflow-viewport] {
  overflow: visible;
}

.breyta-workflow-canvas-layer [data-workflow-connections] {
  z-index: 0;
  overflow: visible;
}

.breyta-workflow-canvas-layer [data-artboard-node] {
  z-index: 20;
  transition:
    box-shadow 160ms ease-out,
    filter 160ms ease-out;
}

.breyta-workflow-canvas-layer
  [data-artboard-node][data-workflow-selected="true"]:not(
    [data-workflow-active="true"]
  ),
.breyta-workflow-canvas-layer
  [data-artboard-node].workflow-node-selected:not(
    [data-workflow-active="true"]
  ) {
  box-shadow: 0 0 0 2px rgb(var(--color-link) / 1);
}

.breyta-workflow-canvas-layer
  [data-artboard-node][data-workflow-active="true"] {
  --tw-ring-color: rgb(var(--color-link) / 0.85);
  --tw-ring-offset-width: 3px;
  filter: drop-shadow(0 10px 20px rgb(var(--color-link) / 0.12));
}

.breyta-workflow-canvas-layer
  [data-artboard-node][data-workflow-active="true"]::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 2px solid rgb(var(--color-link) / 0.5);
  border-radius: 0.875rem;
  box-shadow: 0 0 0 4px rgb(var(--color-link) / 0.12);
  pointer-events: none;
}

.breyta-workflow-canvas-layer
  [data-artboard-node][data-workflow-node-dragging="true"] {
  --tw-ring-color: rgb(var(--color-link) / 0.55);
  --tw-ring-offset-width: 2px;
}

.breyta-workflow-canvas-layer
  [data-artboard-node][data-workflow-node-dragging="true"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 2px solid rgb(var(--color-link) / 0.4);
  border-radius: 0.875rem;
  box-shadow: 0 0 0 3px rgb(var(--color-link) / 0.1);
  pointer-events: none;
}

.breyta-workflow-canvas-layer [data-artboard-route-label] {
  align-items: center;
  filter: drop-shadow(0 4px 10px rgb(var(--color-primary) / 0.08));
}

.breyta-workflow-canvas-layer [data-artboard-route-label]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 2.75rem;
  height: 2px;
  border-radius: 999px;
  background: var(--surface-border);
  transform: translate(-50%, -50%);
}

.breyta-workflow-canvas-layer [data-artboard-route-label] > div {
  max-width: 11rem;
  border-color: color-mix(
    in srgb,
    var(--surface-border) 72%,
    rgb(var(--color-primary)) 28%
  );
  background: color-mix(
    in srgb,
    var(--surface-panel) 94%,
    rgb(var(--color-primary)) 6%
  );
  box-shadow: 0 1px 2px rgb(var(--color-primary) / 0.08);
  line-height: 1.1;
}

.breyta-workflow-canvas-layer [data-artboard-route-label] span {
  max-width: 9.5rem;
}

.breyta-workflow-canvas-layer
  [data-artboard-route-state="active"]
  > [data-artboard-route-label]::before,
.breyta-workflow-canvas-layer
  [data-artboard-route-state="taken"]
  > [data-artboard-route-label]::before {
  background: rgb(var(--color-link) / 0.75);
}

.breyta-workflow-canvas-layer
  [data-artboard-route-state="active"]
  > [data-artboard-route-label]
  > div,
.breyta-workflow-canvas-layer
  [data-artboard-route-state="taken"]
  > [data-artboard-route-label]
  > div {
  border-color: rgb(var(--color-link) / 0.45);
}

.breyta-workflow-canvas-layer
  [data-artboard-route-state="skipped"]
  > [data-artboard-route-label] {
  opacity: 0.76;
}

.breyta-workflow-canvas-layer
  [data-artboard-route-state="skipped"]
  > [data-artboard-route-label]::before {
  background: rgb(var(--color-muted) / 0.65);
}

.breyta-workflow-canvas-layer [data-workflow-viewport] {
  position: relative;
  isolation: isolate;
  background-color: var(--surface-root);
  min-height: 100%;
}

.breyta-workflow-canvas-layer [data-workflow-grid] {
  --workflow-grid-dot-size: 1.15px;
  --workflow-grid-size: 24px;
  position: absolute;
  inset: calc(-1 * var(--workflow-grid-size));
  z-index: -1;
  background-image: radial-gradient(
    circle,
    rgb(var(--color-primary) / 0.24) var(--workflow-grid-dot-size),
    transparent calc(var(--workflow-grid-dot-size) + 0.35px)
  );
  background-repeat: repeat;
  background-size: var(--workflow-grid-size) var(--workflow-grid-size);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
  will-change: transform;
}

.breyta-workflow-canvas-layer [data-workflow-stage] {
  contain: paint;
  overflow: hidden;
  overflow: clip;
  transition: opacity 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Full-page Canvas lives inside the Resource UI content scroller, whose
   available height changes when browser chrome, banners, or docked panels are
   present. Keep this entire chain container-sized. A viewport-based stage
   minimum can exceed the scroller and gets clipped by the intentional
   overflow boundary, leaving a black strip at the bottom. */
.breyta-workflow-detail--canvas .breyta-workflow-canvas-section,
.breyta-workflow-detail--canvas .breyta-workflow-canvas-dialog,
.breyta-workflow-detail--canvas .breyta-workflow-canvas-dialog-main,
.breyta-workflow-detail--canvas .breyta-workflow-canvas-layer,
.breyta-workflow-detail--canvas .breyta-workflow-canvas-layer .flow-artboard,
.breyta-workflow-detail--canvas
  .breyta-workflow-canvas-layer
  [data-workflow-viewport],
.breyta-workflow-detail--canvas
  .breyta-workflow-canvas-layer
  [data-workflow-stage] {
  height: 100%;
  min-height: 0;
}

.breyta-workflow-canvas-layer [data-workflow-ready-overlay] {
  opacity: 1;
  transition: opacity 90ms cubic-bezier(0.4, 0, 1, 1);
}

.breyta-workflow-canvas-layer
  [data-workflow-loading-artboard]
  [data-workflow-stage] {
  display: grid;
  place-items: center;
}

.breyta-workflow-canvas-layer
  [data-workflow-loading-artboard]
  [data-workflow-content] {
  transform-origin: center center !important;
}

.breyta-workflow-inline-tabs {
  display: flex;
  width: 100%;
  justify-content: center;
}

@keyframes breyta-streaming-cursor-pulse {
  0%,
  100% {
    opacity: 0.22;
  }

  50% {
    opacity: 0.62;
  }
}

@media (min-width: 768px) {
  .agent-panel-resize-handle,
  .agent-panel-desktop-only,
  .app-sidebar-desktop,
  .sidepeek-resize-handle,
  .sidepeek-desktop-only {
    display: block;
  }

  .agent-panel-desktop-content {
    display: flex;
  }

  .agent-panel-mobile-root,
  .agent-panel-mobile-shell,
  .resource-mobile-menu-root,
  .resource-mobile-menu-trigger,
  .resource-mobile-notifications-trigger,
  .resource-mobile-notifications-sheet,
  .sidepeek-mobile-root,
  .sidepeek-mobile-shell {
    display: none;
  }

  .resource-ui-shell {
    padding-left: 4rem;
  }
}

@media (max-width: 767px) {
  .resource-agent-panel-header-trigger {
    display: none !important;
  }

  .resource-agent-panel-mobile-fab {
    position: fixed;
    right: 1rem;
    bottom: max(1rem, calc(env(safe-area-inset-bottom) + 1rem));
    z-index: 45;
    display: block;
    touch-action: none;
    user-select: none;
  }

  .resource-agent-panel-mobile-fab[data-mobile-agent-fab-dragging="true"] {
    cursor: grabbing;
  }

  .resource-agent-panel-mobile-fab-button {
    width: 3.25rem;
    height: 3.25rem;
    box-shadow:
      0 1rem 2.5rem rgb(17 12 24 / 0.32),
      0 0 0 1px rgb(255 255 255 / 0.12);
  }

  .breyta-workflow-canvas-dialog-header {
    top: 0.75rem;
    right: 0.75rem;
  }

  .breyta-workflow-canvas-dialog [data-workflow-toolbar] {
    right: auto;
    left: 50%;
    bottom: 2rem;
    max-width: calc(100% - 1.5rem);
    justify-content: center;
    transform: translateX(-50%);
  }

  .breyta-workflow-canvas-layer [data-workflow-toolbar] [data-workflow-action] {
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.breyta-resource-ui-navigating [data-resource-ui-content-scroll]::before,
  [data-resource-ui-content-scroll] > #main,
  #agent-panel-container.agent-panel-shell,
  #agent-panel-container.agent-panel-shell .agent-panel-content,
  #sidepeek-panel-container.sidepeek-panel-shell,
  #sidepeek-panel-container.sidepeek-panel-shell .sidepeek-panel-content,
  .artifact-panel-shell,
  .breyta-workflow-canvas-layer [data-workflow-stage],
  .breyta-workflow-canvas-layer [data-workflow-ready-overlay],
  .breyta-streaming-cursor::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }

  body.breyta-resource-ui-navigating [data-resource-ui-content-scroll] > #main {
    opacity: 1;
  }
}

/* Dark mode: disabled dropdown items should read clearly as inactive. */
[data-theme="dark"] [data-dropdown-menu-item][aria-disabled="true"] {
  opacity: 0.3;
}

/* Canvas toolbar toggles (Follow active node, playback): pressed state must
   read as clearly ON — not just a hover-tint. State is re-asserted by
   workflow-canvas.js after morphs via aria-pressed. */
.workflow-artboard-toolbar button[aria-pressed="true"] {
  color: rgb(var(--color-link));
  background-color: rgb(var(--color-link) / 0.12);
  box-shadow: inset 0 0 0 1.5px rgb(var(--color-link) / 0.55);
}