tutti/packages/agent/gui/app/renderer/agentactivity.css

@source "../..";

/* Restored agent activity renderer styles from the TSH desktop source during the GUI migration. */

.workspace-agents-status-panel__detail-tool-code,
.workspace-agents-status-panel__detail-tool-terminal,
.workspace-agents-status-panel__detail-tool-diff,
.workspace-agents-status-panel__detail-tool-result-list {
  box-shadow: none;
}

.workspace-agents-status-panel__detail-tool-terminal code,
.workspace-agents-status-panel__detail-tool-code code,
.workspace-agents-status-panel__detail-tool-diff pre {
  font-variant-ligatures: none;
}

.workspace-agents-status-panel__detail-tool-code,
.workspace-agents-status-panel__detail-tool-code pre,
.workspace-agents-status-panel__detail-tool-code code {
  font-family: "Droid Sans Mono", var(--tsh-font-mono);
}

.workspace-agents-status-panel__detail-tool-terminal
  [data-agent-terminal-command="true"],
.workspace-agents-status-panel__detail-tool-terminal pre,
.workspace-agents-status-panel__detail-tool-terminal code {
  font-family: "Droid Sans Mono", var(--tsh-font-mono);
}

.workspace-agents-status-panel
  .workspace-agents-status-panel__detail-tool-terminal {
  box-shadow: none;
  border-color: var(--line-2, var(--tutti-line-2));
  background: var(--background-panel);
}

.workspace-agents-status-panel
  .workspace-agents-status-panel__detail-tool-terminal
  [data-agent-terminal-command-row="true"] {
  border-color: var(--line-2, var(--tutti-line-2));
  background: var(--transparency-block);
}

.workspace-agents-status-panel__detail-tool-result-list a {
  text-decoration: none;
}

.workspace-agents-status-panel__detail-tool-result-list a:hover {
  background: color-mix(
    in srgb,
    var(--background-panel) 70%,
    var(--accent) 30%
  );
}

.tsh-zoomable-image {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.tsh-zoomable-image--block {
  display: block;
}

.tsh-zoomable-image__trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: zoom-in;
  -webkit-app-region: no-drag;
}

.tsh-zoom-dialog[data-rmiz-modal] {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-app-region: no-drag;
}

.tsh-zoom-dialog [data-rmiz-modal-overlay] {
  position: absolute;
  inset: 0;
}

.tsh-zoom-dialog [data-rmiz-modal-content] {
  position: relative;
  z-index: 100300;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  -webkit-app-region: no-drag;
}

.tsh-zoom-dialog [data-rmiz-modal-overlay="visible"] {
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(18px) saturate(1.02);
}

.tsh-zoom-dialog [data-rmiz-modal-overlay="hidden"] {
  background: rgb(0 0 0 / 0%);
}

.tsh-zoom-dialog[data-closing="true"] {
  animation: tsh-zoom-dialog-close 180ms ease-out forwards;
}

@keyframes tsh-zoom-dialog-close {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tsh-zoom-dialog[data-closing="true"] {
    animation-duration: 1ms;
  }
}

.tsh-zoom-dialog__toolbar-actions {
  position: fixed;
  top: max(20px, calc(var(--cove-titlebar-reserve, 0px) + 10px));
  right: 20px;
  inset-inline-end: 20px;
  z-index: 100301;
  display: flex;
  align-items: center;
  gap: 6px;
  -webkit-app-region: no-drag;
}

/*
 * The image preview is portaled to document.body, so it cannot inherit the
 * workbench header's scoped Windows titlebar inset. Reuse the same native
 * caption-button geometry for the portal controls; otherwise the close and
 * zoom buttons sit underneath the minimize/maximize/close buttons.
 */
body[data-tutti-titlebar-overlay="true"] {
  --tutti-titlebar-controls-inset: calc(
    100vw - env(titlebar-area-width, calc(100vw - 138px)) + 10px
  );
}

body[data-tutti-titlebar-overlay="true"] .tsh-zoom-dialog__toolbar-actions {
  right: calc(20px + var(--tutti-titlebar-controls-inset));
  inset-inline-end: calc(20px + var(--tutti-titlebar-controls-inset));
}

.tsh-zoom-dialog__image {
  display: block;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  object-fit: contain;
  transform-origin: center center;
  cursor: zoom-out;
}

.tsh-zoom-dialog__zoom-controls {
  position: fixed;
  top: max(20px, calc(var(--cove-titlebar-reserve, 0px) + 10px));
  right: 168px;
  z-index: 100301;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 2px;
  border-radius: 999px;
  background: var(--background-fronted);
  box-shadow:
    0 18px 40px color-mix(in srgb, black 26%, transparent),
    0 0 0 1px color-mix(in srgb, white 12%, transparent);
  color: var(--text-primary);
  -webkit-app-region: no-drag;
}

body[data-tutti-titlebar-overlay="true"] .tsh-zoom-dialog__zoom-controls {
  right: calc(168px + var(--tutti-titlebar-controls-inset));
}

.tsh-zoom-dialog:not([data-tsh-image-actions="true"])
  .tsh-zoom-dialog__zoom-controls {
  right: 72px;
}

body[data-tutti-titlebar-overlay="true"]
  .tsh-zoom-dialog:not([data-tsh-image-actions="true"])
  .tsh-zoom-dialog__zoom-controls {
  right: calc(72px + var(--tutti-titlebar-controls-inset));
}

.tsh-image-context-menu {
  position: fixed;
  z-index: 100302;
  min-width: 148px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--background-fronted);
  box-shadow: 0 18px 40px color-mix(in srgb, black 26%, transparent);
  color: var(--text-primary);
  padding: 4px;
  -webkit-app-region: no-drag;
}

.tsh-zoom-dialog__zoom-controls button,
.tsh-image-context-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 20px;
}

.tsh-zoom-dialog__zoom-controls button {
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
}

.tsh-zoom-dialog__zoom-controls button:disabled {
  cursor: default;
  opacity: 0.45;
}

.tsh-zoom-dialog__zoom-controls span {
  min-width: 44px;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 28px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.tsh-zoom-dialog__icon-button {
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--background-fronted);
  box-shadow:
    0 18px 40px color-mix(in srgb, black 26%, transparent),
    0 0 0 1px color-mix(in srgb, white 12%, transparent);
  color: var(--text-primary);
}

.tsh-image-context-menu button {
  width: 100%;
  padding: 7px 10px;
}

.tsh-zoom-dialog__icon-button:hover {
  background: color-mix(in srgb, var(--background-panel) 82%, white 12%);
}

.tsh-image-context-menu button:hover {
  background: var(--transparency-hover);
}

.tsh-zoom-dialog__zoom-controls button:not(:disabled):hover {
  background: color-mix(in srgb, var(--background-panel) 86%, black 8%);
}

.agent-markdown-mermaid {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--background-panel);
}

.agent-markdown-mermaid__preview {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 16px;
  outline: none;
  cursor: zoom-in;
}

.agent-markdown-mermaid__preview:focus-visible {
  box-shadow: inset 0 0 0 2px
    color-mix(in srgb, var(--tutti-purple) 72%, transparent);
}

.agent-markdown-mermaid__preview-spacer {
  min-height: 180px;
}

.agent-markdown-mermaid__svg {
  display: flex;
  min-width: min-content;
  align-items: center;
  justify-content: center;
}

.agent-markdown-mermaid__svg > svg {
  display: block;
  max-width: none;
  height: auto;
}

.agent-markdown-mermaid__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 5px;
  background: color-mix(
    in srgb,
    var(--background-fronted, var(--background-panel)) 88%,
    transparent
  );
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 120ms ease-out,
    color 120ms ease-out,
    background 120ms ease-out;
}

.agent-markdown-mermaid:hover .agent-markdown-mermaid__copy,
.agent-markdown-mermaid__copy:focus-visible {
  opacity: 1;
}

.agent-markdown-mermaid__copy:hover {
  background: var(--transparency-hover);
  color: var(--text-primary);
}

.agent-markdown-mermaid--loading {
  min-height: 180px;
  padding: 18px;
}

.agent-markdown-mermaid__placeholder {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--transparency-block);
}

.agent-markdown-mermaid__placeholder::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 24%,
    color-mix(in srgb, var(--text-primary) 7%, transparent) 42%,
    transparent 60%
  );
  content: "";
  animation: agent-markdown-mermaid-shimmer 1.25s ease-in-out infinite;
  transform: translateX(-100%);
}

.agent-markdown-mermaid__placeholder-node,
.agent-markdown-mermaid__placeholder-edge {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
}

.agent-markdown-mermaid__placeholder-node {
  width: 92px;
  height: 34px;
  border-radius: 6px;
}

.agent-markdown-mermaid__placeholder-node--start {
  top: 20px;
  left: calc(18% - 46px);
}

.agent-markdown-mermaid__placeholder-node--middle {
  top: 88px;
  left: calc(50% - 46px);
}

.agent-markdown-mermaid__placeholder-node--end {
  top: 20px;
  left: calc(82% - 46px);
}

.agent-markdown-mermaid__placeholder-edge {
  top: 70px;
  width: 25%;
  height: 2px;
  transform-origin: left center;
}

.agent-markdown-mermaid__placeholder-edge--first {
  left: 22%;
  transform: rotate(10deg);
}

.agent-markdown-mermaid__placeholder-edge--second {
  left: 55%;
  transform: rotate(-10deg);
}

@keyframes agent-markdown-mermaid-shimmer {
  to {
    transform: translateX(100%);
  }
}

.agent-markdown-mermaid--failed {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  color: var(--text-secondary);
}

.agent-markdown-mermaid__failure-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--transparency-block);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 11px;
  line-height: 16px;
}

.agent-markdown-mermaid__failure-copy:hover {
  background: var(--transparency-hover);
}

.agent-mermaid-viewer {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  overflow: hidden;
  -webkit-app-region: no-drag;
}

.agent-mermaid-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  backdrop-filter: blur(18px) saturate(1.02);
}

.agent-mermaid-viewer__stage {
  position: absolute;
  inset: 48px;
  z-index: 100300;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  outline: none;
  cursor: default;
  touch-action: none;
  user-select: none;
}

.agent-mermaid-viewer[data-agent-mermaid-space-pressed="true"]
  .agent-mermaid-viewer__stage {
  cursor: grab;
}

.agent-mermaid-viewer[data-agent-mermaid-dragging="true"]
  .agent-mermaid-viewer__stage {
  cursor: grabbing;
}

.agent-mermaid-viewer__canvas {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

.agent-mermaid-viewer__canvas .agent-markdown-mermaid__svg {
  width: 100%;
  height: 100%;
  min-width: 0;
}

.agent-mermaid-viewer__canvas .agent-markdown-mermaid__svg > svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.agent-mermaid-viewer__zoom-controls {
  right: 72px;
}

.agent-mermaid-viewer__hint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 100301;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--background-fronted);
  box-shadow: 0 10px 28px color-mix(in srgb, black 24%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 18px;
  pointer-events: none;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .agent-markdown-mermaid__placeholder::after {
    animation: none;
  }
}

.workspace-agents-status-panel {
  --workspace-agents-status-panel-chrome-gap: 8px;
  --workspace-room-top-bar-safe-area: 52px;
  --workspace-desktop-bottom-bar-height: 64px;
  --workspace-agents-status-panel-width-user: 360px;
  position: absolute;
  left: var(--workspace-agents-status-panel-chrome-gap);
  top: calc(
    var(--workspace-room-top-bar-safe-area) +
      var(--workspace-agents-status-panel-chrome-gap)
  );
  bottom: calc(
    var(--workspace-desktop-bottom-bar-height) +
      var(--workspace-agents-status-panel-chrome-gap)
  );
  z-index: 9;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(
    var(--workspace-agents-status-panel-width-user),
    calc(100% - (2 * var(--workspace-agents-status-panel-chrome-gap)))
  );
  min-width: min(
    280px,
    calc(100% - (2 * var(--workspace-agents-status-panel-chrome-gap)))
  );
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 1px solid var(--node-window-border);
  border-radius: 12px;
  color: var(--text-primary);
  background: var(--background-panel);
  box-shadow: var(--window-drop-shadow);
  backdrop-filter: none;
  transform-origin: bottom left;
  -webkit-app-region: no-drag;
}

.workspace-agents-status-panel[data-layer="raised"] {
  z-index: var(--z-toast, 100300);
}

[data-testid="workspace-agent-message-center"],
[data-testid="workspace-agent-message-center"] * {
  -webkit-app-region: no-drag;
}

[data-testid="workspace-agent-message-center"] {
  --agent-gui-package-accent: var(--accent-codex);
  --agent-gui-package-accent-strong: var(--accent-codex);
  --agent-gui-package-success: var(--state-success);
  --agent-gui-package-warning: var(--state-warning);
  --agent-gui-package-danger: var(--state-danger);
  --agent-gui-accent: var(--agent-gui-package-accent);
  --agent-gui-accent-strong: var(--agent-gui-package-accent-strong);
  --agent-gui-mention-app-color: var(--tutti-purple);
  --agent-gui-success: var(--agent-gui-package-success);
  --agent-gui-warning: var(--agent-gui-package-warning);
  --agent-gui-danger: var(--agent-gui-package-danger);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: min(440px, calc(100vw - 16px));
  max-width: none;
  overflow: hidden;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: var(--background-panel);
  color: var(--text-primary);
}

[data-testid="workspace-agent-message-center"][data-presentation="embedded"] {
  width: 100%;
}

[data-testid="workspace-agent-message-center"]
  .workspace-agent-message-center__copy-text,
[data-testid="workspace-agent-message-center"]
  .workspace-agent-message-center__copy-text
  * {
  -webkit-user-select: text;
  user-select: text;
}

[data-testid="workspace-agent-message-center"]
  .workspace-agent-message-center__copy-text
  a,
[data-testid="workspace-agent-message-center"]
  .workspace-agent-message-center__copy-text
  button {
  cursor: pointer;
}

.workspace-agent-message-center__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--background-fronted);
  padding: 14px;
  color: var(--text-primary);
  outline: 0 solid transparent;
  outline-offset: 2px;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    outline-color 140ms ease;
}

.workspace-agent-message-center__card[data-waiting="true"] {
  border-color: var(--tutti-purple-border);
  background: var(--tutti-purple-bg);
}

.workspace-agent-message-center__card[data-highlighted="true"] {
  outline-width: 2px;
  outline-color: var(--accent);
}

.workspace-agent-message-center__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.workspace-agent-message-center__footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workspace-agent-message-center__provider {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.workspace-agent-message-center__provider-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--line-1, var(--nexight-line-1));
  border-radius: 50%;
  object-fit: cover;
}

.workspace-agent-message-center__provider-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agent-message-center__open-chat-button {
  display: inline-flex;
  visibility: hidden;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  padding: 0;
  color: var(--accent-codex);
  box-shadow: none;
  opacity: 0;
  transition:
    color 140ms ease,
    opacity 140ms ease,
    visibility 140ms ease;
}

.workspace-agent-message-center__open-chat-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: currentColor;
}

.workspace-agent-message-center__card:hover
  .workspace-agent-message-center__open-chat-button,
.workspace-agent-message-center__card:focus-within
  .workspace-agent-message-center__open-chat-button {
  visibility: visible;
  opacity: 1;
}

.workspace-agent-message-center__open-chat-button:hover,
.workspace-agent-message-center__open-chat-button:focus-visible,
.workspace-agent-message-center__open-chat-button:active {
  background: transparent;
  background-color: transparent;
  color: var(--accent-codex);
}

.workspace-agent-message-center__project-info-button {
  display: inline-flex;
  visibility: hidden;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  opacity: 0;
  transition:
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    visibility 140ms ease;
}

.workspace-agent-message-center__card:hover
  .workspace-agent-message-center__project-info-button,
.workspace-agent-message-center__card:focus-within
  .workspace-agent-message-center__project-info-button {
  visibility: visible;
  opacity: 1;
}

.workspace-agent-message-center__project-info-button:hover,
.workspace-agent-message-center__project-info-button:focus-visible {
  background: var(--transparency-hover);
  color: var(--text-primary);
  outline: none;
}

.workspace-agent-message-center__summary--overflowing {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 32px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 32px),
    transparent 100%
  );
}

.workspace-agent-message-center__stack-rest {
  display: grid;
  grid-template-rows: 1fr;
}

.workspace-agent-message-center__stack-rest--opening {
  animation: workspace-agent-message-center-stack-grow 340ms
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

.workspace-agent-message-center__stack-rest--closing {
  pointer-events: none;
  animation: workspace-agent-message-center-stack-shrink 260ms
    cubic-bezier(0.45, 0.05, 0.55, 0.95) both;
}

@keyframes workspace-agent-message-center-stack-grow {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
  to {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

@keyframes workspace-agent-message-center-stack-shrink {
  from {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  to {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-agent-message-center__stack-rest--opening {
    animation: none;
  }

  .workspace-agent-message-center__stack-rest--closing {
    grid-template-rows: 0fr;
    opacity: 0;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-modal {
    transition: none !important;
  }

  .t-modal-backdrop {
    transition: none !important;
  }

  .t-dropdown {
    transition: none !important;
  }

  .t-modal-backdrop::before {
    animation: none !important;
    transition: none !important;
  }

  .agent-gui-chrome__card--warning,
  .agent-gui-chrome__card--danger,
  .agent-gui-chrome__card--success,
  .agent-gui-chrome__card--muted,
  .agent-gui-chrome__card--connecting {
    animation: none !important;
    transition: none !important;
  }
}

.workspace-agents-status-panel__titlebar {
  display: flex;
  flex: 0 0 48px;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 8px 0 16px;
}

.workspace-agents-status-panel__titlebar--detail {
  padding-left: 8px;
}

aside.workspace-agents-status-panel
  .workspace-agents-status-panel__titlebar
  button.workspace-agents-status-panel__header-icon-btn {
  color: var(--text-secondary) !important;
}

aside.workspace-agents-status-panel
  .workspace-agents-status-panel__titlebar
  button.workspace-agents-status-panel__header-icon-btn:hover,
aside.workspace-agents-status-panel
  .workspace-agents-status-panel__titlebar
  button.workspace-agents-status-panel__header-icon-btn:active {
  color: var(--secondary-foreground) !important;
}

.workspace-agents-status-panel__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--tsh-font-display);
  font-size: 15px;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.3;
}

.workspace-agents-status-panel__detail-titlebar-main {
  display: flex;
  flex: 1 1 auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__detail-heading {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__detail-heading
  .workspace-agents-status-panel__status {
  padding-right: 6px;
  padding-left: 6px;
}

.workspace-agents-status-panel__detail-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--tsh-font-display);
  font-size: 15px;
  font-weight: 600;
  font-synthesis: none;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agents-status-panel__detail-title
  [data-workspace-agent-markdown-shell="true"],
.workspace-agents-status-panel__detail-title
  [data-workspace-agent-markdown="true"] {
  display: inline;
  width: auto;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.workspace-agents-status-panel__detail-title .tsh-agent-object-token {
  max-width: 100%;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.workspace-agents-status-panel__avatar {
  display: inline-grid;
  box-sizing: border-box;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border: 1px solid var(--line-1, var(--nexight-line-1));
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  background: var(--transparency-block);
}

.workspace-agents-status-panel__avatar-img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
}

.workspace-agents-status-panel__avatar-img--user-placeholder {
  background-color: var(--muted);
}

.workspace-agents-status-panel__content-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 4px 16px 16px;
}

.workspace-agents-status-panel__content-shell--detail {
  gap: 0;
  padding: 0;
}

.workspace-agents-status-panel__viewport {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.workspace-agents-status-panel__content {
  width: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.workspace-agents-status-panel__content--detail {
  gap: 0;
  padding-inline: 28px;
}

.workspace-agents-status-panel__content--detail-overlay {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.workspace-agents-status-panel__detail-overlay-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: transparent;
}

.workspace-agents-status-panel__detail-action-bar {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px 24px 16px;
  border-top: 1px solid color-mix(in srgb, var(--line-2) 52%, transparent);
  background: var(--background-panel);
}

.workspace-agents-status-panel__detail-action-button {
  max-width: 100%;
}

.workspace-agents-status-panel__conversation-timeline {
  --agent-conversation-text: var(--text-primary);
  --agent-conversation-user-text: var(--text-primary);
  --agent-conversation-user-bg: var(--transparency-block);
  --agent-conversation-user-max-width: calc(100% - 32px);
  box-sizing: border-box;
  width: 100%;
  scrollbar-width: none;
}

.workspace-agents-status-panel__conversation-timeline::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.workspace-agents-status-panel__content--list-hidden {
  visibility: hidden;
  pointer-events: none;
}

.workspace-agents-status-panel__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.workspace-agents-status-panel__content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tsh-custom-scrollbar {
  position: absolute;
  right: 8px;
  width: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease-in-out;
}

.workspace-agents-status-panel__scrollbar {
  top: 52px;
  bottom: 16px;
}

.tsh-custom-scroll-area:hover .tsh-custom-scrollbar[data-scrollable="true"],
.tsh-custom-scroll-area:focus-within
  .tsh-custom-scrollbar[data-scrollable="true"] {
  opacity: 1;
}

.workspace-agents-status-panel:hover
  .workspace-agents-status-panel__scrollbar[data-scrollable="true"] {
  opacity: 1;
}

.tsh-custom-scrollbar__thumb {
  width: 4px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--transparency-block);
  cursor: grab;
  transition: background-color 160ms ease-in-out;
}

.workspace-agents-status-panel__scrollbar-thumb {
  width: 4px;
  min-height: 24px;
  border-radius: 999px;
  background: var(--transparency-block);
  cursor: grab;
  transition: background-color 160ms ease-in-out;
}

.tsh-custom-scrollbar:hover .tsh-custom-scrollbar__thumb,
.workspace-agents-status-panel__scrollbar:hover
  .workspace-agents-status-panel__scrollbar-thumb {
  background: var(--transparency-hover);
}

.tsh-custom-scrollbar[data-dragging="true"],
.workspace-agents-status-panel__scrollbar[data-dragging="true"] {
  opacity: 1;
}

.tsh-custom-scrollbar[data-dragging="true"] .tsh-custom-scrollbar__thumb,
.workspace-agents-status-panel__scrollbar[data-dragging="true"]
  .workspace-agents-status-panel__scrollbar-thumb {
  background: var(--transparency-hover);
  cursor: grabbing;
  will-change: transform;
}

.agent-tool-scroll-area__scrollbar {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  width: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease-in-out;
}

.agent-tool-scroll-area:hover
  .agent-tool-scroll-area__scrollbar[data-scrollable="true"] {
  opacity: 1;
}

.agent-tool-scroll-area__scrollbar:hover
  .workspace-agents-status-panel__scrollbar-thumb {
  background: var(--transparency-hover);
}

.agent-tool-scroll-area__scrollbar[data-dragging="true"] {
  opacity: 1;
}

.agent-tool-scroll-area__scrollbar[data-dragging="true"]
  .workspace-agents-status-panel__scrollbar-thumb {
  background: var(--transparency-hover);
  cursor: grabbing;
}

.agent-tool-diff__viewport,
.agent-tool-diff__line {
  background: var(--background-fronted, var(--background-panel));
}

.workspace-agents-status-panel__resize-handle {
  position: absolute;
  top: 48px;
  right: 0;
  bottom: 16px;
  z-index: 1;
  width: 6px;
  touch-action: none;
  cursor: col-resize;
  background: transparent;
}

.workspace-agents-status-panel__resize-handle::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
  content: "";
  border-radius: 0 1px 1px 0;
  opacity: 0;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  transition: opacity 140ms ease;
}

.workspace-agents-status-panel__resize-handle:hover::after,
.workspace-agents-status-panel__resize-handle:focus-visible::after {
  opacity: 1;
}

.workspace-agents-status-panel__resize-handle:focus-visible {
  outline: 1px solid var(--tutti-d-border-signal-focus);
  outline-offset: -1px;
}

.workspace-agents-status-panel__skeleton-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.workspace-agents-status-panel__skeleton-card {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-2, var(--nexight-line-2));
  border-radius: 8px;
  background: var(--background-fronted);
}

.workspace-agents-status-panel__skeleton-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__skeleton-avatar,
.workspace-agents-status-panel__skeleton-line {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-tertiary) 8%, transparent);
}

.workspace-agents-status-panel__skeleton-avatar::after,
.workspace-agents-status-panel__skeleton-line::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--text-tertiary) 8%, transparent) 45%,
    transparent 90%
  );
  animation: workspace-agents-status-panel-skeleton 1.2s ease-in-out infinite;
}

.workspace-agents-status-panel__skeleton-avatar {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.workspace-agents-status-panel__skeleton-line {
  display: block;
  height: 12px;
  border-radius: 4px;
}

.workspace-agents-status-panel__skeleton-line--name {
  width: 118px;
}

.workspace-agents-status-panel__skeleton-line--tag {
  width: 46px;
  margin-left: auto;
}

.workspace-agents-status-panel__skeleton-line--title {
  width: 82%;
  height: 18px;
}

.workspace-agents-status-panel__skeleton-line--summary {
  width: 100%;
  height: 38px;
  border-radius: 4px;
}

.workspace-agents-status-panel__activity {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-2, var(--nexight-line-2));
  border-radius: 8px;
  background: var(--background-fronted);
  cursor: pointer;
  outline: none;
  transition:
    background-color 200ms ease-in-out,
    border-color 200ms ease-in-out,
    box-shadow 200ms ease-in-out;
}

.workspace-agents-status-panel__activity:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.workspace-agents-status-panel__activity:hover {
  border-color: var(--line-2, var(--nexight-line-2));
  background: var(--transparency-block);
}

.workspace-agents-status-panel__activity--working,
.workspace-agents-status-panel__activity--waiting,
.workspace-agents-status-panel__activity--idle,
.workspace-agents-status-panel__activity--done,
.workspace-agents-status-panel__activity--failed {
  border-color: var(--line-2, var(--nexight-line-2));
}

.workspace-agents-status-panel__activity--targeted {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.workspace-agents-status-panel__activity-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__activity-avatar-stack {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  width: 44px;
  height: 24px;
}

.workspace-agents-status-panel__activity-agent-avatar {
  margin-left: -4px;
}

.workspace-agents-status-panel__activity-user-avatar {
  z-index: 1;
  background: var(--background-1);
}

.workspace-agents-status-panel__activity-identity {
  display: flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__activity-identity-names {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.workspace-agents-status-panel__activity-user-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agents-status-panel__activity-name-sep {
  flex-shrink: 0;
  margin: 0 4px;
}

.workspace-agents-status-panel__activity-agent-name {
  flex-shrink: 0;
  white-space: nowrap;
}

.workspace-agents-status-panel__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 20px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: var(--tsh-ui-pill-neutral-fg);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--tsh-ui-pill-neutral-bg);
}

.workspace-agents-status-panel__status--working,
.workspace-agents-status-panel__status[data-status="working"] {
  color: var(--tsh-ui-pill-success-fg);
  background: var(--tsh-ui-pill-success-bg);
}

.workspace-agents-status-panel__status--failed,
.workspace-agents-status-panel__status[data-status="failed"] {
  color: var(--state-danger);
  background: color-mix(in srgb, var(--state-danger) 12%, transparent);
}

.workspace-agents-status-panel__activity-title {
  display: -webkit-box;
  min-width: 0;
  margin: 4px 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.workspace-agents-status-panel__activity-summary {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  background: var(--transparency-block);
  overflow-wrap: anywhere;
}

.workspace-agents-status-panel__activity-summary-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.workspace-agents-status-panel__activity-summary-messages
  .workspace-agents-status-panel__activity-summary-text
  + .workspace-agents-status-panel__activity-summary-text {
  padding-top: 10px;
  border-top: 1px solid
    color-mix(in srgb, var(--line-2, var(--nexight-line-2)) 72%, transparent);
}

.workspace-agents-status-panel__activity-summary-loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 52px;
}

.workspace-agents-status-panel__activity-summary-text {
  margin: 0;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__activity-summary-text[data-workspace-agent-markdown="true"] {
  display: block;
}

.workspace-agents-status-panel__activity-summary-text--image {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__activity-summary-text
  p {
  margin: 0;
}

.workspace-agents-status-panel__activity-summary strong {
  color: var(--text-primary);
  font-weight: 600;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown-shell {
  min-width: 0;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown
  code {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  background: transparent;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown
  pre,
.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown
  pre
  code {
  box-sizing: border-box !important;
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown
  a,
.workspace-agents-status-panel__activity-summary
  .workspace-agents-status-panel__detail-markdown
  code
  a {
  color: var(--tutti-purple);
  font-weight: 600;
}

.workspace-agents-status-panel__activity-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.workspace-agents-status-panel__activity-file {
  display: flex;
  flex: 1 1 100%;
  gap: 4px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-family: inherit;
  text-align: left;
  transition: background-color 160ms ease-in-out;
}

.workspace-agents-status-panel__activity-file--clickable {
  cursor: pointer;
}

.workspace-agents-status-panel__activity-file--clickable:hover,
.workspace-agents-status-panel__activity-file--clickable:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.workspace-agents-status-panel__activity-file svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.workspace-agents-status-panel__activity-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agents-status-panel__empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 34px 18px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.workspace-agents-status-panel__detail-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 34px 18px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.workspace-agents-status-panel__notice {
  position: absolute;
  top: 4px;
  right: 16px;
  left: 16px;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--label-orange) 34%, transparent);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--background-fronted) 86%,
    var(--label-orange) 14%
  );
  padding: 8px 10px;
  color: var(--label-orange);
  font-size: 13px;
  line-height: 1.35;
}

.workspace-agents-status-panel__detail {
  --agent-conversation-text: var(--text-primary);
  --agent-conversation-user-text: var(--text-primary);
  --agent-conversation-user-bg: var(--transparency-block);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding-bottom: 0;
}

.workspace-agents-status-panel__detail::after {
  display: block;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 32px;
  min-height: 32px;
  pointer-events: none;
  content: "";
}

.workspace-agents-status-panel__detail-tool-section,
.workspace-agents-status-panel__detail-thinking-section,
.workspace-agents-status-panel__detail-turn-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: min(860px, 100%);
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.agent-gui-node__timeline .workspace-agents-status-panel__detail-turn-summary {
  max-width: 100%;
}

.workspace-agents-status-panel__detail-turn-summary {
  --agent-turn-summary-border: color-mix(
    in srgb,
    var(--line-1) 58%,
    transparent
  );
  --agent-turn-summary-row-border: color-mix(
    in srgb,
    var(--line-1) 46%,
    transparent
  );
  --agent-turn-summary-surface: color-mix(
    in srgb,
    var(--background-fronted) 96%,
    var(--background-panel) 4%
  );
  --agent-turn-summary-hover: color-mix(
    in srgb,
    var(--transparency-block) 58%,
    transparent
  );
  --agent-turn-summary-path: color-mix(
    in srgb,
    var(--text-secondary) 78%,
    transparent
  );
  --agent-turn-summary-toggle: color-mix(
    in srgb,
    var(--text-secondary) 88%,
    transparent
  );
}

.agent-turn-summary-card {
  border: 1px solid var(--agent-turn-summary-border);
  background: var(--agent-turn-summary-surface);
  box-shadow: inset 0 1px 0
    color-mix(in srgb, var(--background-fronted) 82%, transparent);
}

.agent-turn-summary-card__list,
.agent-turn-summary-card__overflow-list,
.agent-turn-summary-card__preview {
  border-top: 1px solid var(--agent-turn-summary-row-border);
}

.agent-turn-summary-card__file {
  border-top: 1px solid var(--agent-turn-summary-row-border);
}

.agent-turn-summary-card__file:first-child {
  border-top: 0;
}

.agent-turn-summary-card__file-row:hover {
  background: var(--agent-turn-summary-hover);
}

.agent-turn-summary-card__path {
  color: var(--agent-turn-summary-path);
}

.agent-turn-summary-card__path-directory,
.agent-turn-summary-card__path-file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-turn-summary-card__path-directory {
  flex: 0 1 auto;
}

.agent-turn-summary-card__path-file {
  flex: 0 0 auto;
  max-width: 100%;
}

.agent-path-tail-label {
  display: flex;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.agent-path-tail-label__directory,
.agent-path-tail-label__file {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-path-tail-label__directory {
  flex: 0 1 auto;
}

.agent-path-tail-label__file {
  flex: 0 0 auto;
  max-width: 100%;
}

.workspace-agents-status-panel__detail-turn-summary
  .workspace-agents-status-panel__detail-tool-diff-added {
  color: var(--state-success);
}

.workspace-agents-status-panel__detail-turn-summary
  .workspace-agents-status-panel__detail-tool-diff-removed {
  color: var(--state-danger);
}

.agent-turn-summary-card__toggle-more {
  color: var(--agent-turn-summary-toggle);
}

.agent-turn-summary-card__toggle-more:hover {
  background: var(--agent-turn-summary-hover);
  color: var(--text-secondary);
}

.workspace-agents-status-panel__detail-tool-section {
  position: relative;
  gap: 16px;
}

.workspace-agents-status-panel__detail-tool-section[data-tool-group-expanded="true"]
  .workspace-agents-status-panel__detail-tool-count-icon,
.workspace-agents-status-panel__detail-tool-section[data-tool-group-expanded="true"]
  .workspace-agents-status-panel__detail-tool-row-icon,
.workspace-agents-status-panel__detail-tool-section[data-tool-group-expanded="true"]
  .workspace-agents-status-panel__detail-tool-list-item
  .tsh-inline-scanlight-icon {
  border-radius: 999px;
}

.workspace-agents-status-panel__detail-tool-count {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--tsh-font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    opacity 150ms ease;
  appearance: none;
}

.workspace-agents-status-panel__detail-tool-section[data-tool-group-expanded="true"]
  .workspace-agents-status-panel__detail-tool-count::after {
  position: absolute;
  top: 24px;
  left: 7.5px;
  width: 1px;
  height: 4px;
  background: var(--line-1);
  content: "";
  pointer-events: none;
}

.workspace-agents-status-panel__detail-tool-count:hover {
  color: var(--text-primary);
}

.workspace-agents-status-panel__detail-tool-count span {
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-count-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agents-status-panel__detail-tool-count-primary {
  font-weight: 600;
}

.workspace-agents-status-panel__detail-tool-count svg {
  flex: 0 0 auto;
}

.workspace-agents-status-panel__detail-tool-count-icon {
  position: relative;
  z-index: 1;
  opacity: 0.72;
  transition: opacity 150ms ease;
}

.workspace-agents-status-panel__detail-tool-count:hover
  .workspace-agents-status-panel__detail-tool-count-icon,
.workspace-agents-status-panel__detail-tool-count:focus-visible
  .workspace-agents-status-panel__detail-tool-count-icon {
  opacity: 1;
}

.workspace-agents-status-panel__detail-tool-count-chevron {
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 150ms ease;
}

.workspace-agents-status-panel__detail-tool-count:hover
  .workspace-agents-status-panel__detail-tool-count-chevron,
.workspace-agents-status-panel__detail-tool-count:focus-visible
  .workspace-agents-status-panel__detail-tool-count-chevron {
  opacity: 1;
}

.workspace-agents-status-panel__detail-tool-count--summary {
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.workspace-agents-status-panel__detail-tool-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-agents-status-panel__detail-tool-list-item {
  position: relative;
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-list-item:not(:last-child)::after {
  position: absolute;
  top: 24px;
  left: 7.5px;
  width: 1px;
  height: max(4px, calc(100% - 16px));
  background: var(--line-1);
  content: "";
  pointer-events: none;
}

.workspace-agents-status-panel__detail-tool-section[data-tool-group-expanded="true"]
  .workspace-agents-status-panel__detail-tool-list-item
  .agent-collapsible-reveal {
  box-sizing: border-box;
  padding-left: 24px;
}

.workspace-agents-status-panel__detail-tool-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
}

.workspace-agents-status-panel__detail-tool-row-head {
  display: inline-flex;
  gap: 0;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 2px 0;
  color: var(--text-secondary);
  font-family: var(--tsh-font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.workspace-agents-status-panel__detail-tool-row-head--button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition:
    color 150ms ease,
    opacity 150ms ease;
  appearance: none;
}

.workspace-agents-status-panel__detail-tool-row-head--button:hover {
  color: var(--text-primary);
}

.workspace-agents-status-panel__detail-tool-row-head svg {
  flex: 0 0 auto;
  opacity: 0.78;
  transition: opacity 150ms ease;
}

.workspace-agents-status-panel__detail-tool-row-head--button:hover
  .workspace-agents-status-panel__detail-tool-row-icon
  svg,
.workspace-agents-status-panel__detail-tool-row-head--button:focus-visible
  .workspace-agents-status-panel__detail-tool-row-icon
  svg {
  opacity: 1;
}

.workspace-agents-status-panel__detail-tool-row-header-content {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-row-header-content[data-active="true"] {
  color: var(--text-primary);
}

.workspace-agents-status-panel__detail-tool-row-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.workspace-agents-status-panel__detail-tool-row-text {
  display: inline-flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-row-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--tsh-font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-agents-status-panel__detail-tool-status {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.workspace-agents-status-panel__detail-tool-diff-stats {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.3;
}

.workspace-agents-status-panel__detail-tool-diff-added {
  color: var(--state-success);
}

.workspace-agents-status-panel__detail-tool-diff-removed {
  color: var(--state-danger);
}

.tsh-inline-scanlight-line
  .workspace-agents-status-panel__detail-tool-diff-added,
.tsh-inline-scanlight-line
  .workspace-agents-status-panel__detail-tool-diff-removed {
  background: none;
  -webkit-text-fill-color: currentColor;
}

.workspace-agents-status-panel__detail-tool-row-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact tool-call rows when nested inside a details block (e.g. task STEPS) */
.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-row-title,
.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-status,
.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-diff-stats,
.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-row-summary {
  font-size: 11px;
}

.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-row-icon {
  width: 14px;
  height: 14px;
}

.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-row-icon
  svg {
  width: 14px;
  height: 14px;
}

/* Looser vertical rhythm for the nested step rows so they don't feel cramped */
.workspace-agents-status-panel__detail-tool-body
  .workspace-agents-status-panel__detail-tool-stack {
  gap: 12px;
}

.workspace-agents-status-panel__detail-tool-row-head
  .workspace-agents-status-panel__detail-tool-row-chevron {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity 150ms ease;
}

.workspace-agents-status-panel__detail-tool-row-head--button:hover
  .workspace-agents-status-panel__detail-tool-row-chevron,
.workspace-agents-status-panel__detail-tool-row-head--button:focus-visible
  .workspace-agents-status-panel__detail-tool-row-chevron {
  opacity: 1;
}

.workspace-agents-status-panel__detail-tool-summary {
  width: 100%;
  min-width: 0;
  margin: 6px 0 0;
  padding: 0 0 0 20px;
  color: currentColor;
  font-family: var(--tsh-font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  opacity: 0.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-collapsible-reveal {
  contain: layout paint;
  width: 100%;
  min-width: 0;
  opacity: 0;
  overflow: clip;
  transform: translateY(-2px);
  transition:
    height 220ms ease,
    opacity 160ms ease,
    transform 180ms ease;
}

.agent-collapsible-reveal[data-expanded="true"] {
  opacity: 1;
  transform: translateY(0);
}

.agent-collapsible-reveal__inner {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workspace-agents-status-panel__detail-tool-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--transparency-block);
  font-size: 11px;
  line-height: 1.45;
}

.workspace-agents-status-panel__detail-tool-body--flat {
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

.workspace-agents-status-panel__detail-tool-body--plain {
  gap: 8px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-agents-status-panel__detail-tool-code--flat,
.workspace-agents-status-panel__detail-tool-diff--flat,
.workspace-agents-status-panel__detail-tool-monaco--flat {
  box-shadow: none;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.workspace-agents-status-panel__detail-tool-section-block,
.workspace-agents-status-panel__detail-tool-stack {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-stack-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.workspace-agents-status-panel__detail-tool-section-title {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
}

.workspace-agents-status-panel__detail-tool-answer,
.workspace-agents-status-panel__detail-tool-question {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.workspace-agents-status-panel__detail-tool-answer--muted {
  color: var(--text-tertiary);
}

.workspace-agents-status-panel__detail-subagents {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.workspace-agents-status-panel__detail-subagent-card {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--text-tertiary) 24%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-tertiary) 5%, transparent);
  overflow: hidden;
}

.workspace-agents-status-panel__detail-subagent-header {
  display: grid;
  grid-template-columns: 12px 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px 9px;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  line-height: 1.45;
}

.workspace-agents-status-panel__detail-subagent-header::-webkit-details-marker {
  display: none;
}

.workspace-agents-status-panel__detail-subagent-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.workspace-agents-status-panel__detail-subagent-card[open]
  .workspace-agents-status-panel__detail-subagent-chevron {
  transform: rotate(45deg);
}

.workspace-agents-status-panel__detail-subagent-status {
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.workspace-agents-status-panel__detail-subagent-status--running {
  background: var(--state-success, #22c55e);
  animation: workspace-agents-subagent-pulse 1.6s ease-in-out infinite;
}

.workspace-agents-status-panel__detail-subagent-status--completed {
  background: var(--state-success, #22c55e);
}

.workspace-agents-status-panel__detail-subagent-status--failed {
  background: var(--state-danger);
}

.workspace-agents-status-panel__detail-subagent-status--canceled {
  background: var(--text-tertiary);
}

.workspace-agents-status-panel__detail-subagent-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.workspace-agents-status-panel__detail-subagent-meta {
  flex: none;
  color: var(--text-tertiary);
  font-weight: 600;
  white-space: nowrap;
}

.workspace-agents-status-panel__detail-subagent-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 0 9px 9px 27px;
}

.workspace-agents-status-panel__detail-subagent-activity {
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@keyframes workspace-agents-subagent-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.workspace-agents-status-panel__detail-tool-bullets {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.workspace-agents-status-panel__detail-tool-markdown {
  width: 100%;
  min-width: 0;
  font-size: 11px;
  line-height: 1.45;
}

.workspace-agents-status-panel__detail-turn-summary-title {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.35;
}

.workspace-agents-status-panel__detail-processing {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--text-primary);
  font-family: var(--tsh-font-ui);
  font-size: 13px;
  line-height: 1.3;
  background: transparent;
  box-shadow: none;
}

.group\/thinking-disclosure[data-active="true"] {
  color: var(--text-primary);
}

.tsh-inline-scanlight-line,
.tsh-inline-scanlight-group .tsh-inline-scanlight-text,
.tsh-inline-scanlight-text--standalone {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 36%,
    color-mix(in srgb, currentColor 32%, white) 50%,
    currentColor 64%,
    currentColor 100%
  );
  background-size: 260% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tsh-inline-scanlight-text-sweep 1.85s ease-in-out infinite;
}

.tsh-inline-scanlight-line {
  display: inline-flex;
  gap: inherit;
  align-items: center;
  min-width: 0;
}

.tsh-inline-loading-ellipsis {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0.13em;
  align-items: center;
  margin-left: 0;
  color: currentColor;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.tsh-inline-loading-label {
  margin-right: 4px;
}

.tsh-inline-loading-ellipsis span {
  display: block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.28;
  transform: translateY(0.08em) scale(0.82);
  animation: tsh-inline-loading-dot 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.tsh-inline-loading-ellipsis span:nth-child(2) {
  animation-delay: 150ms;
}

.tsh-inline-loading-ellipsis span:nth-child(3) {
  animation-delay: 300ms;
}

.tsh-inline-loading-ellipsis--entry-timing span {
  animation: tsh-inline-loading-dot 1.05s ease-in-out infinite;
}

.tsh-inline-loading-ellipsis--entry-timing span:nth-child(2) {
  animation-delay: 140ms;
}

.tsh-inline-loading-ellipsis--entry-timing span:nth-child(3) {
  animation-delay: 280ms;
}

.tsh-inline-scanlight-group .tsh-inline-scanlight-text--status {
  animation-delay: 260ms;
}

.tsh-inline-scanlight-group
  .workspace-agents-status-panel__detail-tool-row-title,
.tsh-inline-scanlight-group .font-semibold.tsh-inline-scanlight-text {
  animation-delay: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .tsh-inline-scanlight-line,
  .tsh-inline-scanlight-group .tsh-inline-scanlight-text,
  .tsh-inline-scanlight-text--standalone {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .tsh-inline-loading-ellipsis span {
    opacity: 0.72;
    transform: none;
    animation: none;
  }
}

@keyframes workspace-agents-status-panel-skeleton {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes workspace-agents-status-panel-working-shimmer {
  0% {
    transform: translateX(0) skewX(-18deg);
  }

  100% {
    transform: translateX(330%) skewX(-18deg);
  }
}

@keyframes tsh-inline-scanlight-text-sweep {
  0% {
    background-position: 130% 0;
  }

  42% {
    background-position: 48% 0;
  }

  100% {
    background-position: -42% 0;
  }
}

@keyframes tsh-inline-loading-dot {
  0%,
  72%,
  100% {
    opacity: 0.28;
    transform: translateY(0.08em) scale(0.82);
  }

  28% {
    opacity: 0.95;
    transform: translateY(-0.04em) scale(1);
  }
}

.workspace-agents-status-panel__detail-scroll-region {
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
}

.workspace-agents-status-panel__detail-scroll-region:hover {
  scrollbar-color: var(--transparency-hover) transparent;
}

.workspace-agents-status-panel__detail-scroll-region::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
}

.workspace-agents-status-panel__detail-scroll-region::-webkit-scrollbar-track,
.workspace-agents-status-panel__detail-scroll-region::-webkit-scrollbar-corner {
  background: transparent;
}

.workspace-agents-status-panel__detail-scroll-region::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: transparent;
}

.workspace-agents-status-panel__detail-scroll-region:hover::-webkit-scrollbar-thumb {
  background: var(--transparency-hover);
}

.agent-tool-scroll-area .workspace-agents-status-panel__detail-scroll-region {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.agent-tool-scroll-area
  .workspace-agents-status-panel__detail-scroll-region::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.agent-gui-node__mention-palette-scroll-region {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto;
}

.agent-gui-node__mention-palette-scroll-region::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.agent-gui-node__mention-palette-scrollbar {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  width: 4px;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 160ms ease-in-out;
}

.agent-gui-node__mention-palette {
  container-type: inline-size;
}

.tsh-underline-tabs.agent-gui-node__mention-palette-tabs {
  height: 41px;
  padding: 8px 16px 0;
}

.agent-gui-node__mention-palette-header {
  padding: 8px 0 0;
}

.agent-gui-node__mention-palette-footer {
  min-height: 36px;
  border-top: 1px solid var(--line-2, var(--tutti-line-2));
  background: var(--background-fronted, var(--background-panel));
}

.agent-gui-node__mention-palette-hint {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 16px 1px;
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  pointer-events: auto;
}

.agent-gui-node__mention-palette-hint-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

.agent-gui-node__mention-palette-hint-item > span:last-child {
  font-size: 11px;
}

.agent-gui-node__mention-palette-hint-button,
.agent-gui-node__mention-palette-shortcut-button {
  appearance: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.agent-gui-node__mention-palette-hint-button {
  padding: 0;
  background: transparent;
  color: inherit;
}

.agent-gui-node__mention-palette-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  border: 1px solid var(--line-2, var(--tutti-line-2));
  border-radius: 4px;
  background: color-mix(in srgb, var(--transparency-block) 72%, transparent);
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
}

.agent-gui-node__mention-palette-hint-button:hover
  .agent-gui-node__mention-palette-shortcut,
.agent-gui-node__mention-palette-hint-button:focus-visible
  .agent-gui-node__mention-palette-shortcut,
.agent-gui-node__mention-palette-shortcut-button:hover,
.agent-gui-node__mention-palette-shortcut-button:focus-visible {
  background: var(--transparency-block);
}

.agent-gui-node__mention-palette-hint-button:focus-visible,
.agent-gui-node__mention-palette-shortcut-button:focus-visible {
  outline: 2px solid var(--line-1);
  outline-offset: 2px;
}

.agent-gui-node__mention-palette-shortcut--arrow {
  width: 20px;
  min-width: 20px;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}

.agent-gui-node__mention-palette-shortcut-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.agent-gui-node__mention-palette-hint-separator {
  color: var(--line-2, var(--tutti-line-2));
}

.agent-gui-node__mention-palette:hover
  .agent-gui-node__mention-palette-scrollbar[data-scrollable="true"] {
  opacity: 1;
}

.agent-gui-node__mention-palette {
  --agent-mention-file-icon-size: 16px;
}

@container (max-width: 520px) {
  .agent-gui-node__mention-palette .rich-text-at-mention-palette__shell {
    overflow: visible;
  }

  .agent-gui-node__mention-palette-hint {
    gap: 4px;
    padding-inline: 8px;
  }

  .agent-gui-node__mention-palette-hint-item {
    position: relative;
  }

  .agent-gui-node__mention-palette-hint-item > span:last-child {
    display: none;
  }

  .agent-gui-node__mention-palette-hint-item::after {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 20;
    width: max-content;
    max-width: min(240px, calc(100cqw - 16px));
    padding: 5px 8px;
    border: 1px solid var(--line-2, var(--tutti-line-2));
    border-radius: 6px;
    background: var(--background-fronted, var(--background-panel));
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
    color: var(--text-primary);
    content: attr(data-tooltip);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(2px);
    transition:
      opacity 120ms ease,
      transform 120ms ease;
    white-space: normal;
  }

  .agent-gui-node__mention-palette-hint-item:hover::after,
  .agent-gui-node__mention-palette-hint-item:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .agent-gui-node__mention-palette-hint-item:last-child::after {
    right: 0;
    left: auto;
    transform: translateY(2px);
  }

  .agent-gui-node__mention-palette-hint-item:last-child:hover::after,
  .agent-gui-node__mention-palette-hint-item:last-child:focus-within::after {
    transform: translateY(0);
  }
}

.agent-gui-node__mention-palette .rich-text-at-mention-palette__row-button,
.agent-gui-node__mention-palette .rich-text-at-mention-palette__expand-button {
  min-height: 28px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
}

.agent-gui-node__mention-palette
  .rich-text-at-mention-palette__empty-state-inner {
  width: min(100%, 52ch);
}

.agent-gui-node__mention-file-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--agent-mention-file-icon-size, 16px);
  height: var(--agent-mention-file-icon-size, 16px);
  flex: 0 0 var(--agent-mention-file-icon-size, 16px);
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--bg-block, var(--block));
  vertical-align: middle;
}

.agent-gui-node__mention-file-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-gui-node__mention-file-icon {
  width: var(--agent-mention-file-icon-size, 16px);
  height: var(--agent-mention-file-icon-size, 16px);
  flex: 0 0 var(--agent-mention-file-icon-size, 16px);
  background-color: var(--folder);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--agent-mention-file-icon-size, 16px)
    var(--agent-mention-file-icon-size, 16px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--agent-mention-file-icon-size, 16px)
    var(--agent-mention-file-icon-size, 16px);
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="folder"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/folder-filled.svg");
  -webkit-mask-image: url("./assets/icons/folder-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="markdown"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/product-filled.svg");
  -webkit-mask-image: url("./assets/icons/product-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="code"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/code-filled.svg");
  -webkit-mask-image: url("./assets/icons/code-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="image"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/image-filled.svg");
  -webkit-mask-image: url("./assets/icons/image-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="video"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/video-filled.svg");
  -webkit-mask-image: url("./assets/icons/video-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="document"]
  .agent-gui-node__mention-file-icon {
  mask-image: url("./assets/icons/doc-filled.svg");
  -webkit-mask-image: url("./assets/icons/doc-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="back"]
  .agent-gui-node__mention-file-icon.rich-text-at-mention-file-icon--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  mask-image: none;
  -webkit-mask-image: none;
  color: currentColor;
}

.agent-gui-chrome__session-chrome {
  display: grid;
  justify-self: stretch;
  width: auto;
  gap: 0;
  margin: 0 8px;
  padding: 0;
  background: transparent;
}

.agent-gui-node__empty-hero-body > .agent-gui-chrome__session-chrome {
  justify-self: center;
  width: min(760px, 100%);
  margin: 0 auto;
}

.agent-gui-node__empty-hero-body
  > .agent-gui-chrome__session-chrome
  > .agent-gui-chrome__card {
  margin-right: 12px;
  margin-left: 12px;
}

.agent-gui-node__empty-hero-body
  > .agent-gui-chrome__session-chrome
  + .agent-gui-node__composer-hero {
  margin-top: calc(var(--agent-gui-empty-hero-gap, 24px) * -1);
}

.agent-gui-chrome__session-chrome:has(+ .agent-gui-chrome__session-chrome) {
  margin-right: 16px;
  margin-left: 16px;
}

.agent-gui-node__composer-input-group > .agent-gui-chrome__session-chrome {
  position: relative;
  z-index: 3;
  min-width: 0;
  margin-right: 8px;
  margin-left: 8px;
}

.agent-gui-node__composer-input-group-hero > .agent-gui-chrome__session-chrome {
  margin-right: 24px;
  margin-left: 24px;
}

.agent-gui-node__bottom-dock > .agent-gui-chrome__session-chrome {
  margin-right: 24px;
  margin-left: 24px;
}

.agent-gui-node__bottom-dock
  > .agent-gui-chrome__session-chrome:has(+ .agent-gui-chrome__session-chrome) {
  margin-right: 36px;
  margin-left: 36px;
}

.agent-gui-node__bottom-dock
  > .agent-gui-chrome__session-chrome:has(
    + .agent-gui-node__composer
      .agent-gui-node__composer-input-group
      > .agent-gui-chrome__session-chrome
  ) {
  margin-right: 36px;
  margin-left: 36px;
}

.agent-gui-node__bottom-dock
  > .agent-gui-chrome__session-chrome:has(
    + .agent-gui-node__composer
      .agent-gui-node__composer-input-group
      > .agent-gui-chrome__session-chrome
  )
  + .agent-gui-node__composer
  .agent-gui-node__composer-input-group
  > .agent-gui-chrome__session-chrome {
  margin-right: 24px;
  margin-left: 24px;
}

.agent-gui-chrome__card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--agent-gui-border-subtle, var(--line-2));
  border-radius: 12px;
  padding: 12px;
  background: var(--agent-gui-surface-strong, var(--background-panel));
}

.agent-gui-chrome__card--warning,
.agent-gui-chrome__card--danger,
.agent-gui-chrome__card--success,
.agent-gui-chrome__card--muted,
.agent-gui-chrome__card--connecting {
  --agent-gui-chrome-card-spring: cubic-bezier(0.22, 1.18, 0.36, 1);

  animation: agent-gui-chrome-card-enter 260ms
    var(--agent-gui-chrome-card-spring);
  box-sizing: border-box;
  height: auto;
  min-height: 36px;
  overflow: hidden;
  transform: translateY(0) scaleY(1);
  transform-origin: bottom center;
  transition:
    border-radius 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms var(--agent-gui-chrome-card-spring);
}

@keyframes agent-gui-chrome-card-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scaleY(0.96);
  }
}

.agent-gui-chrome__card--warning {
  border-color: color-mix(
    in srgb,
    var(--agent-gui-warning, var(--cove-label-orange)) 36%,
    transparent
  );
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: color-mix(
    in srgb,
    var(--agent-gui-warning, var(--cove-label-orange)) 10%,
    var(--background-fronted)
  );
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  cursor: default;
}

.agent-gui-chrome__card--warning .agent-gui-chrome__icon,
.agent-gui-chrome__card--warning .agent-gui-chrome__message {
  color: var(--agent-gui-warning, var(--cove-label-orange));
}

.agent-gui-chrome__card--warning .agent-gui-chrome__actions button,
.agent-gui-chrome__card--warning .agent-gui-chrome__danger-ghost-button {
  color: var(--agent-gui-warning, var(--cove-label-orange));
}

.agent-gui-chrome__card--warning
  .agent-gui-chrome__actions
  button:hover:not(:disabled),
.agent-gui-chrome__card--warning
  .agent-gui-chrome__danger-ghost-button:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--agent-gui-warning, var(--cove-label-orange)) 14%,
    transparent
  );
}

.agent-gui-chrome__card--action {
  border-color: color-mix(
    in srgb,
    var(--accent) 24%,
    var(--agent-gui-border-subtle, var(--line-2))
  );
  background: color-mix(
    in srgb,
    var(--accent) 8%,
    var(--agent-gui-surface, var(--background-panel))
  );
}

.agent-gui-chrome__card--muted {
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  background: var(--transparency-block);
  cursor: default;
}

.agent-gui-chrome__card--connecting {
  border-color: var(--agent-gui-border-subtle, var(--line-2));
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--agent-gui-text-primary, var(--text-primary));
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  cursor: default;
  background: var(--agent-gui-surface-strong, var(--background-fronted));
}

.agent-gui-chrome__card--connecting .agent-gui-chrome__message {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  color: var(--agent-gui-text-primary, var(--text-primary));
}

.agent-gui-chrome__card--connecting .agent-gui-chrome__icon {
  color: var(--agent-gui-text-primary, var(--text-primary));
}

.agent-gui-chrome__card--danger {
  border-color: color-mix(
    in srgb,
    var(--status-danger, var(--state-danger)) 28%,
    transparent
  );
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: color-mix(
    in srgb,
    var(--status-danger, var(--state-danger)) 10%,
    var(--background-fronted)
  );
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  cursor: default;
}

.agent-gui-chrome__card[data-has-inline-actions="true"] {
  padding-right: 4px;
}

.agent-gui-chrome__card--danger .agent-gui-chrome__icon,
.agent-gui-chrome__card--danger .agent-gui-chrome__message {
  color: var(--status-danger, var(--state-danger));
}

.agent-gui-chrome__danger-ghost-button {
  background: transparent;
  color: var(--status-danger, var(--state-danger));
  font-size: 13px;
  font-weight: 400;
}

.agent-gui-chrome__danger-ghost-button:hover:not(:disabled) {
  background: var(--on-danger-hover);
  color: var(--status-danger-hover, var(--state-danger-hover));
}

.agent-gui-chrome__card--success {
  /* --state-success alone reads ~2:1 against the light-theme card wash;
     mixing toward --text-primary keeps the hue while adapting the contrast
     in both themes (45% keeps 13px text past the 4.5:1 target). Borders and
     backgrounds stay on the raw token. */
  --agent-gui-chrome-success-foreground: color-mix(
    in srgb,
    var(--state-success) 45%,
    var(--text-primary)
  );

  border-color: color-mix(in srgb, var(--state-success) 28%, transparent);
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background: color-mix(
    in srgb,
    var(--state-success) 10%,
    var(--background-fronted)
  );
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 36px;
  padding: 6px 16px;
  cursor: default;
}

.agent-gui-chrome__card--success .agent-gui-chrome__icon,
.agent-gui-chrome__card--success .agent-gui-chrome__message {
  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
}

.agent-gui-chrome__success-ghost-button {
  background: transparent;
  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
  font-size: 13px;
  font-weight: 400;
}

.agent-gui-chrome__success-ghost-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--state-success) 14%, transparent);
}

.agent-gui-chrome__success-ghost-button:focus-visible {
  border-color: var(--state-success);
  color: var(--agent-gui-chrome-success-foreground, var(--state-success));
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--state-success) 25%, transparent);
}

.agent-gui-chrome__danger-ghost-button:focus-visible {
  border-color: var(--status-danger, var(--state-danger));
  color: var(--status-danger, var(--state-danger));
  box-shadow: 0 0 0 2px
    color-mix(
      in srgb,
      var(--status-danger, var(--state-danger)) 25%,
      transparent
    );
}

.agent-gui-chrome__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.agent-gui-chrome__title {
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.agent-gui-chrome__message {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  font-size: 13px;
  line-height: 20px;
}

.agent-gui-chrome__card--warning
  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
.agent-gui-chrome__card--danger
  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
.agent-gui-chrome__card--success
  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
.agent-gui-chrome__card--muted
  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message),
.agent-gui-chrome__card--connecting
  .agent-gui-chrome__message:not(.agent-gui-chrome__notice-message) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: clip;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-gui-chrome__message-tooltip {
  max-width: min(560px, calc(100vw - 32px));
  max-height: min(40vh, 260px);
  overflow: auto;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: pre-wrap;
}

.agent-gui-chrome__notice-message {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-gui-chrome__notice-title {
  flex: 0 0 auto;
  color: currentColor;
  font-weight: 400;
}

.agent-gui-chrome__notice-description {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-chrome__goal-hint {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: var(--agent-gui-text-tertiary, var(--text-tertiary));
  opacity: 0.8;
}

.agent-gui-chrome__goal-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.agent-gui-chrome__goal-actions button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  cursor: pointer;
}

.agent-gui-chrome__goal-actions button:hover {
  background: color-mix(
    in srgb,
    var(--agent-gui-text-primary, var(--text-primary)) 8%,
    transparent
  );
  color: var(--agent-gui-text-primary, var(--text-primary));
}

/* Tutti workflow intensity button: tint icon + tier label + value by tier.
   Needs the extra attribute hook to outrank the goal-actions button rule. */
.agent-gui-chrome__goal-actions button[data-agent-tutti-tier="cost"] {
  color: var(--state-success);
}

.agent-gui-chrome__goal-actions button[data-agent-tutti-tier="balance"] {
  color: var(--accent-codex);
}

.agent-gui-chrome__goal-actions button[data-agent-tutti-tier="powerful"] {
  color: var(--tutti-purple);
}

/* The Tutti intensity chip is a non-button-like indicator: keep it flat on
   hover instead of picking up the goal-actions button hover background. */
.agent-gui-chrome__goal-actions button[data-agent-tutti-tier]:hover {
  background: transparent;
}

.agent-gui-chrome__composer-disclosure {
  display: grid;
  min-width: 0;
}

.agent-gui-chrome__composer-disclosure-panel {
  box-sizing: border-box;
  max-height: min(52vh, 520px);
  overflow: auto;
  /* The translateY below fuses the panel with its own banner by painting
     over the banner's top edge; the matching negative margin keeps the
     panel flush with any card stacked above it instead of leaving a gap. */
  margin-top: -12px;
  border: 1px solid var(--agent-gui-border-subtle, var(--line-2));
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 12px;
  background: var(--agent-gui-surface-strong, var(--background-panel));
  pointer-events: auto;
  transform: translateY(12px);
}

/* Tutti workflow plan-review surfaces: --background-fronted base with an 8%
   tutti-purple wash. Geometry (fused panel/banner overlap, radii, borders)
   stays identical to the generic disclosure card. */
.agent-gui-chrome__tutti-workflow-panel {
  padding: 8px;
  background: color-mix(
    in srgb,
    var(--tutti-purple) 8%,
    var(--background-fronted)
  );
}

.agent-gui-chrome__tutti-workflow-banner {
  background: color-mix(
    in srgb,
    var(--tutti-purple) 8%,
    var(--background-fronted)
  );
}

.agent-gui-chrome__composer-disclosure[data-expanded="true"]
  .agent-gui-chrome__composer-disclosure-banner {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.agent-gui-chrome__composer-disclosure-banner {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
}

.agent-gui-chrome__composer-disclosure-trigger {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  text-align: left;
  cursor: pointer;
}

.agent-gui-chrome__composer-disclosure-trigger:focus-visible {
  border-radius: 6px;
  outline: 2px solid color-mix(in srgb, var(--tutti-purple) 62%, transparent);
  outline-offset: 2px;
}

.agent-gui-chrome__composer-disclosure-chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.agent-gui-chrome__composer-disclosure-chevron--expanded {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-chrome__composer-disclosure-chevron {
    transition: none;
  }
}

.agent-gui-chrome__goal-edit-input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  background: color-mix(
    in srgb,
    var(--agent-gui-text-primary, var(--text-primary)) 6%,
    transparent
  );
  font-size: 12px;
  line-height: 18px;
  color: var(--agent-gui-text-primary, var(--text-primary));
  outline: none;
}

.agent-gui-chrome__message-slot {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
}

.agent-gui-chrome__inline-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.agent-gui-chrome__inline-actions button {
  flex: 0 0 auto;
}

.agent-gui-chrome__actions,
.agent-gui-chrome__meta-row {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.agent-gui-chrome__actions button {
  min-height: 30px;
  border: 1px solid var(--agent-gui-border, var(--cove-border));
  border-radius: 6px;
  background: var(--agent-gui-surface-muted, var(--transparency-block));
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.agent-gui-chrome__actions button:hover:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--accent) 44%,
    var(--agent-gui-border, var(--cove-border))
  );
  background: var(--agent-gui-surface-hover, var(--transparency-block));
  color: var(--text-primary);
}

.agent-gui-chrome__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.agent-gui-conversation__interactive-prompt {
  padding: 0 clamp(20px, 4vw, 52px) 14px;
  background: transparent;
  font-family: var(
    --tsh-font-ui,
    var(--font-ui, var(--font-sans-system, sans-serif))
  );
}

.agent-gui-conversation__interactive-prompt--embedded {
  padding: 0;
}

.agent-gui-conversation__interactive-prompt-card {
  display: grid;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line-2, var(--tutti-line-2));
  border-radius: 12px;
  background: var(--background-fronted);
  padding: 12px 16px 16px;
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--tutti-p-shadow-node) 16%, transparent);
  transform-origin: bottom center;
  animation: agent-gui-interactive-prompt-enter 190ms
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.agent-gui-conversation__interactive-prompt-card.agent-gui-edge-glow {
  --agent-gui-star-border-radius: 12px;
}

[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-prompt--embedded
  .agent-gui-conversation__interactive-prompt-card {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  box-shadow: none;
}

[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-prompt--embedded,
[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-prompt-options,
[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-option-display,
[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-option-button {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-prompt-question,
[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-option-title,
[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-option-description {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

[data-testid="workspace-agent-message-center"]
  .agent-gui-conversation__interactive-option-command-description {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-conversation__interactive-prompt-card {
    animation: none;
  }
}

.agent-gui-conversation__interactive-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.agent-gui-conversation__interactive-prompt-lead-content {
  display: grid;
  gap: 4px;
}

.agent-gui-conversation__interactive-prompt-lead {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.agent-gui-conversation__interactive-prompt-meta {
  color: var(--text-tertiary);
  font-size: 13px;
}

.agent-gui-conversation__interactive-prompt-question {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.agent-gui-conversation__interactive-prompt-options {
  display: grid;
  gap: 8px;
}

.agent-gui-conversation__interactive-option-button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 12px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: var(--transparency-block);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  outline: none;
  padding: 8px 8px 8px 12px;
  text-align: left;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;
}

.agent-gui-conversation__interactive-option-button:hover:not(:disabled),
.agent-gui-conversation__interactive-option-button[data-active="true"] {
  background: var(--transparency-hover);
}

.agent-gui-conversation__interactive-option-button[data-active="true"] {
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--text-primary) 24%, transparent);
}

.agent-gui-conversation__interactive-option-button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.agent-gui-conversation__interactive-option-display {
  display: grid;
  gap: 3px;
  justify-items: start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  padding: 12px;
  text-align: left;
}

.agent-gui-conversation__interactive-option-button:disabled {
  cursor: not-allowed;
  background: var(--transparency-block);
  color: var(--text-disabled);
  opacity: 0.48;
}

.agent-gui-conversation__interactive-option-button:disabled
  .agent-gui-conversation__interactive-option-title,
.agent-gui-conversation__interactive-option-button:disabled
  .agent-gui-conversation__interactive-option-description,
.agent-gui-conversation__interactive-option-button:disabled
  .agent-gui-conversation__interactive-option-shortcut {
  color: var(--text-disabled);
}

.agent-gui-conversation__interactive-option-button:disabled
  .agent-gui-conversation__interactive-option-shortcut {
  background: color-mix(in srgb, var(--transparency-block) 54%, transparent);
}

.agent-gui-conversation__interactive-option-title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-gui-conversation__interactive-option-content {
  display: grid;
  flex: 1 1 auto;
  gap: 3px;
  justify-items: start;
  max-width: 100%;
  min-width: 0;
}

.agent-gui-conversation__interactive-option-description {
  max-width: 100%;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.agent-gui-conversation__interactive-option-command-description {
  display: -webkit-box;
  max-height: calc(1.3em * 4);
  overflow: hidden;
  font-family: var(
    --tsh-font-mono,
    var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)
  );
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.agent-gui-conversation__interactive-option-command-tooltip {
  max-width: min(640px, calc(100vw - 32px));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-gui-conversation__interactive-option-shortcut {
  flex: none;
  margin-inline-start: auto;
  font-weight: 500;
}

.agent-gui-conversation__interactive-option-spinner {
  flex: none;
  color: currentColor;
}

.agent-gui-conversation__interactive-feedback-composer {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 80px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: var(--background-fronted);
  padding-bottom: 44px;
}

.agent-gui-conversation__interactive-prompt-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--background-fronted);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  resize: vertical;
}

.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 36px;
  max-height: 132px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 10px;
  resize: vertical;
  scrollbar-width: thin;
  scrollbar-color: var(--transparency-hover) transparent;
  scrollbar-gutter: stable;
}

.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea::placeholder {
  color: var(--text-placeholder);
}

.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea::-webkit-scrollbar {
  display: block;
  width: 4px;
  height: 4px;
}

.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea::-webkit-scrollbar-track,
.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.agent-gui-conversation__interactive-feedback-composer
  .agent-gui-conversation__interactive-prompt-textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--transparency-hover);
}

.agent-gui-conversation__interactive-feedback-send-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--text-inverted);
  font-family: inherit;
  padding: 0;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.agent-gui-conversation__interactive-feedback-send-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.agent-gui-conversation__interactive-feedback-send-button:disabled {
  background: var(--text-disabled);
  color: var(--white-stationary);
  cursor: not-allowed;
}

.agent-gui-conversation__interactive-feedback-send-button svg {
  width: 22px;
  height: 22px;
}

.agent-gui-conversation__interactive-prompt-footer {
  display: grid;
  gap: 10px;
}

.agent-gui-conversation__interactive-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.agent-gui-conversation__interactive-prompt-card.agent-gui-conversation__interactive-prompt-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
}

.agent-gui-conversation__user-message-flow,
.agent-gui-conversation__assistant-message-flow {
  display: grid;
  width: 100%;
  min-width: 0;
}

.agent-gui-conversation__user-message-flow {
  row-gap: 14px;
  justify-items: end;
}

.agent-gui-conversation__participant-message-layout {
  display: grid;
  width: 100%;
  min-width: 0;
}

.agent-gui-conversation__participant-message-header {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  column-gap: 8px;
}

/* The participant header sits directly above the thinking/tool-call info and
   the message content, so it uses a tighter gap than the default 24px flow
   spacing. */
.agent-gui-conversation__assistant-message-flow
  > .agent-gui-conversation__participant-message-header
  + * {
  margin-top: 8px;
}

/* Content below the header aligns with the participant name: assistant
   content insets to the name's left edge, user content to the name's right
   edge (28px avatar + 8px gap). The header is pulled back over the padding so
   it stays flush with the flow edge. */
.agent-gui-conversation__assistant-message-flow[data-agent-message-flow-participant="true"] {
  padding-left: 36px;
}

.agent-gui-conversation__assistant-message-flow[data-agent-message-flow-participant="true"]
  > .agent-gui-conversation__participant-message-header {
  margin-left: -36px;
}

.agent-gui-conversation__user-message-flow[data-agent-message-flow-participant="true"] {
  padding-right: 36px;
}

.agent-gui-conversation__user-message-flow[data-agent-message-flow-participant="true"]
  > .agent-gui-conversation__participant-message-header {
  margin-right: -36px;
}

/*
 * Participant headers render once per visible turn. Later assistant-owned
 * transcript rows are siblings of that header row, so carry the same
 * avatar-and-gap inset onto their content without changing host row padding.
 */
.agent-gui-transcript-row[data-agent-transcript-row-participant-content="assistant"]
  > * {
  box-sizing: border-box;
  padding-left: 36px;
}

.agent-gui-conversation__participant-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hairline ring + crisp circular edge for participant avatars. The ring is
   painted on the avatar root (paint, anti-aliased on composited layers); the
   radial-gradient mask on the surface keeps the clipped image edge smooth in
   virtualized/composited lists where border-radius clipping is not
   anti-aliased. */
.agent-gui-conversation__participant-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 0.5px var(--line-2);
}

.agent-gui-conversation__participant-avatar [data-slot="avatar-surface"] {
  -webkit-mask-image: radial-gradient(
    circle closest-side,
    #000 calc(100% - 1px),
    transparent
  );
  mask-image: radial-gradient(
    circle closest-side,
    #000 calc(100% - 1px),
    transparent
  );
}

.agent-gui-conversation__participant-message-content {
  display: grid;
  width: 100%;
  min-width: 0;
}

.agent-gui-conversation__participant-message-layout[data-agent-message-speaker="user"]
  > .agent-gui-conversation__participant-message-content {
  row-gap: 14px;
  justify-items: end;
}

.agent-gui-conversation__message-group {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
}

.agent-gui-conversation__message-group::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 26px;
  content: "";
}

.agent-gui-conversation__message-group[data-agent-message-footer="true"] {
  margin-bottom: 26px;
}

.agent-gui-conversation__message-footer {
  position: absolute;
  top: calc(100% + 4px);
  z-index: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.agent-gui-conversation__message-timestamp {
  display: inline-flex;
  align-items: center;
  height: 22px;
  font-size: 11px;
  line-height: 22px;
  color: var(
    --text-secondary,
    color-mix(in srgb, var(--text-primary) 60%, transparent)
  );
  white-space: nowrap;
}

.agent-gui-conversation__message-copy-button {
  position: static;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 5px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.agent-gui-conversation__message-copy-button[data-pending="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.agent-gui-conversation__message-footer
  > .agent-gui-conversation__message-copy-button
  + .agent-gui-conversation__message-copy-button {
  margin-left: -8px;
}

.agent-gui-conversation__message-group[data-agent-message-speaker="user"]
  > .agent-gui-conversation__message-footer {
  right: 0;
}

.agent-gui-conversation__message-group[data-agent-message-speaker="assistant"]
  > .agent-gui-conversation__message-footer {
  left: 0;
}

.agent-gui-conversation__message-group:hover
  > .agent-gui-conversation__message-footer,
.agent-gui-conversation__message-group:focus-within
  > .agent-gui-conversation__message-footer {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.agent-gui-conversation__message-group:hover
  > .agent-gui-conversation__message-footer
  > .agent-gui-conversation__message-copy-button,
.agent-gui-conversation__message-group:focus-within
  > .agent-gui-conversation__message-footer
  > .agent-gui-conversation__message-copy-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.agent-gui-conversation__message-copy-button[data-copied="true"] {
  color: var(--state-success, #22c55e);
}

.agent-gui-conversation__user-message-flow
  > .agent-gui-conversation__message-group {
  justify-items: end;
}

.agent-gui-conversation__user-image-grid {
  display: grid;
  gap: 8px;
  justify-self: end;
}

.agent-gui-conversation__user-image-thumbnail {
  position: relative;
  box-sizing: border-box;
  height: 80px;
  max-height: 80px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
}

.agent-gui-conversation__user-image-thumbnail > .tsh-zoomable-image {
  width: 100%;
  height: 100%;
}

.agent-gui-conversation__user-image-thumbnail > .tsh-zoomable-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agent-gui-conversation__user-image-thumbnail[data-image-state="loading"]
  > .tsh-zoomable-image {
  opacity: 0;
  pointer-events: none;
}

.agent-gui-conversation__user-image-thumbnail[data-image-state="loading"]
  > .tsh-zoomable-image
  > .tsh-zoomable-image__trigger {
  visibility: hidden;
}

.agent-gui-conversation__assistant-message-flow {
  gap: 0;
}

.agent-gui-conversation__assistant-message-flow > * + * {
  margin-top: 24px;
}

.agent-gui-conversation__assistant-message-flow
  > :is(
    .workspace-agents-status-panel__detail-thinking-disclosure,
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  )
  + :is(
    .workspace-agents-status-panel__detail-thinking-disclosure,
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  ) {
  margin-top: 8px;
}

.agent-gui-node__timeline
  > .agent-gui-conversation__assistant-message-flow[data-agent-message-flow-thinking-last="true"]
  + :is(
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  ),
.agent-gui-node__timeline
  > :is(
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  )
  + .agent-gui-conversation__assistant-message-flow[data-agent-message-flow-thinking-first="true"],
.agent-gui-node__timeline
  > :is(
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  )
  + :is(
    .workspace-agents-status-panel__detail-tool-section,
    .workspace-agents-status-panel__detail-tool-row
  ) {
  margin-top: -8px;
}

.agent-gui-node__timeline
  > .agent-gui-transcript-row[data-agent-transcript-row-thinking-last="true"]
  + .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"],
.agent-gui-node__timeline
  > .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"]
  + .agent-gui-transcript-row[data-agent-transcript-row-thinking-first="true"],
.agent-gui-node__timeline
  > .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"]
  + .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"] {
  margin-top: -8px;
}

.agent-gui-node__timeline
  > .agent-gui-transcript-row[data-agent-transcript-row-speaker="assistant"]
  + .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"],
.agent-gui-node__timeline
  > .agent-gui-transcript-row[data-agent-transcript-row-kind="tool-group"]
  + .agent-gui-transcript-row[data-agent-transcript-row-speaker="assistant"] {
  margin-top: -12px;
}

.agent-gui-conversation__user-message-bubble {
  align-self: flex-end;
}

.agent-gui-conversation__assistant-markdown {
  max-width: min(880px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--agent-conversation-text, var(--text-primary));
  font-size: 13px;
  line-height: 1.72;
}

.workspace-agents-status-panel__detail-user-message.agent-gui-conversation__user-message-bubble {
  box-sizing: border-box;
  display: inline-block;
  justify-self: end;
  width: fit-content;
  min-width: 0;
  max-width: var(--agent-conversation-user-max-width, min(540px, 72%));
  overflow: visible;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--agent-conversation-user-bg, var(--transparency-block));
  color: var(--agent-conversation-user-text, var(--text-primary));
  font-size: 13px;
  line-height: 24px;
  box-shadow: none;
}

.workspace-agents-status-panel__detail-user-message.agent-gui-conversation__user-message-bubble.agent-gui-conversation__user-message-editor {
  display: grid;
  width: calc(100% - 32px);
  min-width: 0;
  max-width: calc(100% - 32px);
  gap: 8px;
  padding: 10px 12px 8px;
  border-radius: 16px;
}

.agent-gui-conversation__user-message-editor:focus-within {
  outline: 1px solid var(--tsh-shell-accent);
  outline-offset: 1px;
}

.agent-gui-conversation__user-message-editor-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  max-height: 192px;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  line-height: 1.55;
}

.agent-gui-conversation__user-message-editor-textarea:disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
}

.agent-gui-conversation__user-message-editor-actions {
  display: flex;
  width: 100%;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}

.workspace-agents-status-panel__detail-user-message.agent-gui-conversation__user-message-editor
  > .agent-gui-conversation__user-message-editor-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.agent-gui-conversation__user-message-editor-actions > [data-slot="button"] {
  border-radius: 10px;
}

.workspace-agents-status-panel__detail-user-message[data-agent-mention-only="true"].agent-gui-conversation__user-message-bubble {
  max-width: min(100%, calc(var(--agent-mention-max-width, 16rem) + 24px));
}

.workspace-agents-status-panel__detail-user-message .tsh-agent-object-token {
  font-size: inherit;
  overflow: visible;
}

.workspace-agents-status-panel__detail-user-message
  .agent-rich-text-mention-node {
  /* Avoid a percentage max-width feeding the mention's untruncated intrinsic
     width back into the fit-content message bubble. The nested pill still
     shrinks against this wrapper when the available line is narrower. */
  max-width: var(--agent-mention-max-width, 16rem);
}

.workspace-agents-status-panel__detail-user-message
  .tsh-agent-object-token--file {
  --agent-mention-file-icon-size: 16px;
}

.workspace-agents-status-panel__detail-user-message > div,
.workspace-agents-status-panel__detail-user-message > [contenteditable="false"],
.workspace-agents-status-panel__detail-user-message .ProseMirror {
  display: inline-block;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  vertical-align: top;
  font-size: inherit;
  line-height: inherit;
}

.workspace-agents-status-panel__detail-user-message.agent-gui-conversation__user-message-bubble
  p {
  width: fit-content;
  max-width: 100%;
  margin: 0;
}

.workspace-agents-status-panel__detail-user-message.agent-gui-conversation__user-message-bubble
  p
  + p {
  margin-top: 16px;
}

.workspace-agents-status-panel__detail-markdown-shell {
  width: 100%;
}

.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown
  p {
  margin: 0;
}

.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown
  p
  + p {
  margin-top: 16px;
}

.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown
  hr {
  height: 1px;
  margin: 14px 0;
  border: 0;
  background: var(--line-2, var(--tutti-line-2));
}

.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown
  pre,
.workspace-agents-status-panel__detail-markdown.agent-gui-conversation__assistant-markdown
  pre
  code {
  font-family: "Droid Sans Mono", var(--tsh-font-mono);
}

.workspace-agents-status-panel__detail-markdown p:last-child,
.workspace-agents-status-panel__detail-markdown ul:last-child,
.workspace-agents-status-panel__detail-markdown ol:last-child,
.workspace-agents-status-panel__detail-markdown pre:last-child {
  margin-bottom: 0;
}

.workspace-agents-status-panel__detail-thinking-section,
.workspace-agents-status-panel__detail-turn-summary,
.workspace-agents-status-panel__detail-tool-section {
  max-width: min(860px, 100%);
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tsh-agent-object-token {
  min-width: 0;
  /* 超出最大展示宽度时截断为省略号(标签 __main 已有 ellipsis);hover 经原生 title 看完整文本。 */
  max-width: min(100%, var(--agent-mention-max-width, 16rem));
  text-decoration: none;
}

.tsh-agent-object-token__main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsh-agent-object-token--file {
  position: relative;
  top: 3px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  gap: 4px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--folder);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  vertical-align: middle;
}

.tsh-agent-object-token--file .tsh-agent-object-token__icon {
  width: var(--agent-mention-file-icon-size, 16px);
  height: var(--agent-mention-file-icon-size, 16px);
  flex: 0 0 var(--agent-mention-file-icon-size, 16px);
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--agent-mention-file-icon-size, 16px)
    var(--agent-mention-file-icon-size, 16px);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--agent-mention-file-icon-size, 16px)
    var(--agent-mention-file-icon-size, 16px);
  mask-image: url("./assets/icons/product-filled.svg");
  -webkit-mask-image: url("./assets/icons/product-filled.svg");
}

.tsh-agent-object-token--entity {
  position: relative;
  top: -2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 20px;
  padding: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: inherit;
  vertical-align: middle;
}

[data-agent-mention-only="true"] .tsh-agent-object-token--file,
[data-agent-mention-only="true"] .tsh-agent-object-token--entity {
  top: 0;
}

.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"][data-agent-mention-kind="file"].tsh-agent-object-token--file {
  top: -2px;
  line-height: 20px;
  vertical-align: middle;
}

.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"][data-agent-mention-kind="workspace-app"].tsh-agent-object-token--entity {
  top: -2px;
  min-height: 24px;
  line-height: 24px;
  vertical-align: middle;
}

.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"][data-agent-mention-kind="workspace-app"]
  .tsh-agent-object-token__main {
  overflow: visible;
}

.tsh-agent-object-token__kind {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;
  white-space: nowrap;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 16px;
}

[data-agent-mention-kind="task"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  color: var(--label-purple);
}

[data-agent-mention-kind="task"].tsh-agent-object-token--entity {
  gap: 4px;
  color: var(--label-purple);
}

[data-agent-mention-kind="task"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("./assets/icons/issue-filled.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-image: url("./assets/icons/issue-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
}

[data-agent-mention-kind="workspace-issue"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  color: var(--label-purple);
}

[data-agent-mention-kind="workspace-issue"].tsh-agent-object-token--entity {
  gap: 4px;
  color: var(--label-purple);
}

[data-agent-mention-kind="workspace-issue"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("./assets/icons/issue-filled.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-image: url("./assets/icons/issue-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
}

[data-agent-mention-kind="session"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind {
  flex-basis: 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  color: var(--room-issue-running, var(--tsh-ui-pill-success-fg));
}

[data-agent-mention-kind="session"].tsh-agent-object-token--entity {
  gap: 4px;
  color: var(--room-issue-running, var(--tsh-ui-pill-success-fg));
}

[data-agent-mention-kind="session"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind-icon {
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("./assets/icons/agent-sessions-filled.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-image: url("./assets/icons/agent-sessions-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
}

[data-agent-mention-kind="workspace-app"].tsh-agent-object-token--entity,
[data-agent-mention-kind="workspace-reference"][data-agent-reference-source="app"].tsh-agent-object-token--entity {
  color: var(--agent-gui-mention-app-color, var(--tutti-purple));
}

[data-agent-mention-kind="skill"].tsh-agent-object-token--entity,
[data-agent-mention-kind="capability"].tsh-agent-object-token--entity {
  top: -1px;
  gap: 0;
  padding: 0 4px 0 0;
  background: transparent;
  color: var(--tutti-purple);
}

[data-agent-mention-kind="skill"].tsh-agent-object-token--entity
  .tsh-agent-object-token__main,
[data-agent-mention-kind="capability"].tsh-agent-object-token--entity
  .tsh-agent-object-token__main {
  padding: 0 6px;
  border-radius: 6px;
  background: transparent;
}

[data-agent-mention-kind="skill"].tsh-agent-object-token--entity.ProseMirror-selectednode
  .tsh-agent-object-token__main,
[data-agent-mention-kind="capability"].tsh-agent-object-token--entity.ProseMirror-selectednode
  .tsh-agent-object-token__main {
  background: color-mix(in srgb, var(--tutti-purple) 20%, transparent);
}

[data-agent-mention-kind="skill"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind,
[data-agent-mention-kind="capability"].tsh-agent-object-token--entity
  .tsh-agent-object-token__kind {
  display: none;
}

[data-agent-mention-kind="workspace-app"]
  [data-agent-mention-app-icon="true"]
  .tsh-agent-object-token__kind-icon,
[data-agent-mention-kind="workspace-reference"][data-agent-reference-source="app"]
  [data-agent-mention-app-icon="true"]
  .tsh-agent-object-token__kind-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  mask-image: url("./assets/icons/product-filled.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-image: url("./assets/icons/product-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
}

.agent-gui-node__composer-textarea .agent-rich-text-mention-node {
  display: inline-flex;
  align-items: center;
  top: 1px;
  height: 24px;
  min-height: 24px;
  line-height: 24px;
  vertical-align: middle;
}

.agent-gui-node__composer-textarea
  .agent-rich-text-mention-node[data-agent-custom-mention="true"] {
  top: 0;
  height: auto;
  min-height: 0;
  line-height: inherit;
}

.agent-gui-node__composer-textarea
  .agent-rich-text-mention-node[data-agent-file-mention="true"].tsh-agent-object-token,
.agent-gui-node__composer-textarea
  .agent-rich-text-mention-node
  [data-slot="mention-pill"] {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  top: 0;
  height: 24px;
  min-height: 24px;
  padding-top: 0;
  padding-right: 4px;
  padding-bottom: 0;
  padding-left: 4px;
  border-radius: 4px;
  line-height: 24px;
  transform: translateY(1px);
  transition: background-color 140ms ease-in-out;
  vertical-align: middle;
}

.agent-gui-node__composer-textarea
  .agent-rich-text-mention-node
  [data-slot="mention-pill"] {
  height: 24px;
}

.agent-gui-node__composer-textarea
  [data-agent-mention-kind="skill"].tsh-agent-object-token--entity,
.agent-gui-node__composer-textarea
  [data-agent-mention-kind="capability"].tsh-agent-object-token--entity {
  top: 1px;
  height: 24px;
  min-height: 24px;
  box-sizing: border-box;
  line-height: 24px;
  vertical-align: middle;
}

.agent-gui-node__composer-textarea
  [data-agent-mention-kind="skill"].tsh-agent-object-token--entity
  .tsh-agent-object-token__main,
.agent-gui-node__composer-textarea
  [data-agent-mention-kind="capability"].tsh-agent-object-token--entity
  .tsh-agent-object-token__main {
  height: 24px;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 13px;
  line-height: 24px;
  transform: translateY(-2px);
}

.agent-gui-node__composer-textarea
  [data-agent-file-mention="true"].tsh-agent-object-token:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.agent-gui-conversation__assistant-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token,
.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"].tsh-agent-object-token {
  cursor: pointer;
  font-size: 13px;
}

.agent-gui-conversation__assistant-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token
  .tsh-agent-object-token__main,
.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"].tsh-agent-object-token
  .tsh-agent-object-token__main {
  font-size: 13px;
}

.agent-gui-conversation__assistant-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token:hover,
.workspace-agents-status-panel__detail-user-message
  [data-agent-file-mention="true"].tsh-agent-object-token:hover {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"].tsh-agent-object-token--file {
  color: var(--folder);
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-upload-error="true"].tsh-agent-object-token--file {
  border-color: color-mix(in srgb, var(--state-danger) 42%, transparent);
  background: color-mix(in srgb, var(--state-danger) 8%, transparent);
  color: var(--state-danger);
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-entry-kind="directory"]
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/folder-filled.svg");
  -webkit-mask-image: url("./assets/icons/folder-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="markdown"]
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/product-filled.svg");
  -webkit-mask-image: url("./assets/icons/product-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="code"]
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/code-filled.svg");
  -webkit-mask-image: url("./assets/icons/code-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="image"]
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/image-filled.svg");
  -webkit-mask-image: url("./assets/icons/image-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="video"]
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/video-filled.svg");
  -webkit-mask-image: url("./assets/icons/video-filled.svg");
}

[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="document"]
  .tsh-agent-object-token__icon,
[data-agent-file-mention="true"][data-agent-mention-kind="file"][data-agent-file-visual-kind="binary"]
  .tsh-agent-object-token__icon,
[data-agent-file-mention="true"][data-agent-mention-kind="file"]:not(
    [data-agent-file-entry-kind="directory"]
  ):not([data-agent-file-visual-kind])
  .tsh-agent-object-token__icon {
  mask-image: url("./assets/icons/doc-filled.svg");
  -webkit-mask-image: url("./assets/icons/doc-filled.svg");
}

.agent-gui-node__composer-textarea
  [data-agent-file-mention="true"].tsh-agent-object-token--file {
  vertical-align: middle;
}

.agent-gui-node__shell,
.agent-gui-node__side-surface {
  --agent-mention-file-icon-size: 16px;
  --agent-gui-text-primary: var(--text-primary);
  --agent-gui-text-secondary: var(--text-secondary);
  --agent-gui-text-tertiary: var(--text-tertiary);
  --agent-gui-surface: transparent;
  --agent-gui-surface-strong: var(--node-surface);
  --agent-gui-surface-raised: var(--background-fronted);
  --agent-gui-surface-muted: var(--transparency-block);
  --agent-gui-surface-hover: var(--transparency-block);
  --agent-gui-border: var(--cove-border);
  --agent-gui-border-subtle: var(--line-2);
  --agent-gui-package-accent: var(--accent-codex);
  --agent-gui-package-accent-strong: var(--accent-codex);
  --agent-gui-package-accent-bg: color-mix(
    in srgb,
    var(--agent-gui-surface-raised) 88%,
    var(--agent-gui-package-accent) 12%
  );
  --agent-gui-package-border-focus: var(--accent-codex-border);
  --agent-gui-package-success: var(--state-success);
  --agent-gui-package-warning: var(--state-warning);
  --agent-gui-package-danger: var(--state-danger);
  --agent-gui-accent: var(--agent-gui-package-accent);
  --agent-gui-accent-strong: var(--agent-gui-package-accent-strong);
  --agent-gui-accent-bg: var(--agent-gui-package-accent-bg);
  --agent-gui-border-focus: var(--agent-gui-package-border-focus);
  --agent-gui-mention-app-color: var(--tutti-purple);
  --agent-gui-success: var(--agent-gui-package-success);
  --agent-gui-warning: var(--agent-gui-package-warning);
  --agent-gui-danger: var(--agent-gui-package-danger);
  --agent-conversation-text: var(--text-primary);
  --agent-conversation-user-text: var(--text-primary);
  --agent-conversation-user-bg: var(--agent-gui-surface-muted);
  --agent-gui-session-flow-background: var(
    --background-session-flow,
    rgb(252 253 255)
  );
  --agent-gui-session-sidepanel-background: var(
    --background-session-sidepanel,
    rgb(244 245 247)
  );
  --agent-gui-detail-padding-x: 48px;
  color: var(--agent-gui-text-primary);
}

.agent-gui-node__shell {
  width: 100%;
  height: 100%;
  container: agent-gui-node / inline-size;
  background: transparent;
}

:root[data-theme="dark"]
  :is(.agent-gui-node__shell, .agent-gui-node__side-surface) {
  --agent-gui-session-flow-background: var(
    --background-session-flow,
    rgb(24 24 24)
  );
  --agent-gui-session-sidepanel-background: var(
    --background-session-sidepanel,
    rgb(42 42 43)
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    :is(.agent-gui-node__shell, .agent-gui-node__side-surface) {
    --agent-gui-session-flow-background: var(
      --background-session-flow,
      rgb(24 24 24)
    );
    --agent-gui-session-sidepanel-background: var(
      --background-session-sidepanel,
      rgb(42 42 43)
    );
  }
}

.agent-gui-node__body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.agent-gui-node__layout {
  --agent-gui-provider-rail-width: 0px;

  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--agent-gui-session-sidepanel-background);
  transition: grid-template-columns 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-gui-node__layout[data-rail-resizing="true"] {
  transition: none;
}

.workbench-window[data-window-header-layout="overlay"] {
  --agent-gui-workbench-header-height: 44px;

  grid-template-rows: minmax(0, 1fr);
}

.workbench-window[data-window-header-layout="overlay"]
  .workbench-window__header {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 30;
  width: 100% !important;
  height: var(--agent-gui-workbench-header-height);
  min-height: var(--agent-gui-workbench-header-height);
  padding: 0;
  overflow: visible;
  border-bottom: 0;
  background: transparent;
  cursor: default;
  pointer-events: none !important;
  user-select: auto;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .workbench-window__header {
  cursor: grab !important;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .workbench-window__header:active {
  cursor: grabbing !important;
}

.workbench-window[data-window-header-layout="overlay"]
  .workbench-window__header {
  z-index: calc(var(--z-panel) + 1);
}

.workbench-window[data-window-header-layout="overlay"] .workbench-window__body {
  grid-row: 1;
  overflow: hidden;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .workbench-window__body {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.workbench-window[data-agent-gui-standalone-window="true"] {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .workspace-node-window,
.workbench-window[data-agent-gui-standalone-window="true"]
  [data-workspace-node-window-root="true"],
.workbench-window[data-agent-gui-standalone-window="true"]
  [data-workspace-node-window-body="true"],
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__shell,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__body,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__layout {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__provider-rail-panel,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__rail,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__detail-panel,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__detail {
  min-height: 0;
  overflow: hidden;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__rail-toolbar {
  flex: 0 0 auto;
}

.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__conversation-list,
.workbench-window[data-agent-gui-standalone-window="true"]
  .agent-gui-node__timeline {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.workbench-window[data-window-header-layout="overlay"]
  .agent-gui-node__provider-rail-panel {
  padding-top: var(--agent-gui-workbench-header-height);
}

/* The provider rail nests the workbench-header offset on the panel and the 2px
   breathing room on the inner rail, so the "All" tile sits at header + 2px. The
   toolbar has no such wrapper, so fold the same 2px into its offset to keep the
   search field top aligned with the provider tiles. */
.workbench-window[data-window-header-layout="overlay"]
  .agent-gui-node__rail-toolbar {
  padding-top: calc(var(--agent-gui-workbench-header-height) + 2px);
}

.workbench-window[data-window-header-layout="overlay"]
  .agent-gui-node__detail-panel {
  position: relative;
}

.workbench-window[data-window-header-layout="overlay"] .agent-gui-node__detail {
  padding-top: var(--agent-gui-workbench-header-height);
}

.workbench-window[data-window-header-layout="overlay"]
  .agent-gui-node__timeline-with-composer {
  padding-top: 20px;
}

.agent-gui-workbench-dock-icon {
  box-sizing: border-box;
  display: grid;
  width: 44px;
  height: 44px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--agent-gui-workbench-dock-icon-border, var(--line-1));
  border-radius: 8px;
  background: var(
    --agent-gui-workbench-dock-icon-bg,
    var(--transparency-block)
  );
}

.agent-gui-workbench-dock-icon__tile {
  display: block;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  background: transparent;
}

.agent-gui-workbench-dock-icon__tile > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.agent-gui-workbench-dock-icon--single {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.agent-gui-workbench-dock-icon--single > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agent-gui-workbench-header {
  --agent-gui-workbench-header-rail-width: 280px;
  --agent-gui-workbench-header-padding-x: 16px;
  --agent-gui-workbench-header-primary-gap: 12px;
  --agent-gui-workbench-header-traffic-light-hit-area-size: 20px;
  --agent-gui-workbench-header-traffic-light-gap: 8px;
  --agent-gui-workbench-header-traffic-light-size: 12px;
  --agent-gui-workbench-header-title-max-width: calc(100% - 32px);
  --agent-gui-workbench-header-text: var(--text-primary);
  --agent-gui-workbench-header-muted: var(--text-secondary);
  position: relative;
  display: grid;
  width: 100%;
  height: var(--agent-gui-workbench-header-height, 44px);
  min-height: var(--agent-gui-workbench-header-height, 44px);
  grid-template-columns:
    minmax(0, var(--agent-gui-workbench-header-rail-width))
    minmax(0, 1fr);
  align-items: center;
  background: transparent;
  color: var(--agent-gui-workbench-header-text);
  cursor: grab;
  pointer-events: auto;
  transition: grid-template-columns 180ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
}

/*
 * Windows keeps the native caption buttons, but Electron overlays them on the
 * app-owned header when titleBarStyle is hidden. Match that overlay's height
 * and reserve its right-side hit area so Agent content never sits underneath
 * the native minimize/maximize/close buttons.
 */
.agent-gui-workbench-header[data-tutti-titlebar-overlay="true"] {
  --agent-gui-workbench-header-height: 52px;
  --tutti-titlebar-controls-inset: calc(
    100vw - env(titlebar-area-width, calc(100vw - 138px)) + 10px
  );
  box-sizing: border-box;
  padding-right: var(--tutti-titlebar-controls-inset);
}

.agent-gui-workbench-header[data-tutti-titlebar-overlay="true"]
  .agent-gui-workbench-header__traffic-lights {
  visibility: hidden;
  pointer-events: none;
}

.agent-gui-workbench-header:active {
  cursor: grabbing;
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"] {
  grid-template-columns: minmax(0, 0px) minmax(0, 1fr);
}

.agent-gui-workbench-header__primary {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--agent-gui-workbench-header-primary-gap);
  padding: 0 var(--agent-gui-workbench-header-padding-x);
  background: var(--agent-gui-session-sidepanel-background);
  pointer-events: auto;
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__primary {
  grid-column: 1 / -1;
  width: 100%;
  background: transparent;
}

/*
 * Tool-sidebar actions belong to the single Agent window header regardless of
 * whether that header is owned by the native window or an embedding host.
 * Collapsing the conversation rail must not pull them into the 720px content
 * cap. Let the primary row span the host header and keep the same trailing
 * inset as the expanded detail row.
 *
 * The tool actions are absolutely positioned against the window's right edge,
 * so they no longer occupy space in the flex row. In the collapsed primary row
 * the title is preceded by the traffic lights and header chrome buttons, which
 * means a max-width on the title alone cannot stop its right edge from sliding
 * under those actions. Reserve the actions' width plus the normal inset as
 * trailing padding on the row itself so the title flex-grows and truncates
 * before it can reach them, regardless of what precedes it.
 */
.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"][data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__primary {
  width: 100%;
  padding-inline-end: calc(
    var(--agent-gui-tool-sidebar-layout-width, 0px) +
      var(--agent-gui-workbench-header-padding-x)
  );
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"]
  .agent-gui-workbench-header__secondary-accessory {
  padding-right: 0;
}

/* Keep the tool header on the same right edge as its body panel.
   The body panel is right-anchored independently of the Agent header's rail
   grid; leaving this accessory in the grid makes its left edge drift when the
   panel expands to the available width. */
.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"]
  .agent-gui-workbench-header__secondary-accessory:has(
    [data-agent-tool-sidebar-header="true"]
  ) {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}

/*
 * The tool-sidebar actions are removed from the flex flow above. On Windows
 * the native caption buttons occupy the right edge of the same overlay. Keep
 * the tool header anchored to the same edge as its body panel, then reserve
 * the caption-button hit area inside that header so its controls stay clear
 * without shifting the header border into the Agent surface.
 */
.agent-gui-workbench-header[data-tutti-titlebar-overlay="true"]
  [data-agent-tool-sidebar-header="true"] {
  box-sizing: border-box;
  padding-right: calc(
    var(--tutti-titlebar-controls-inset) +
      var(--agent-gui-workbench-header-padding-x)
  );
}

/*
 * The detached-window button pushes the detail controls to the far edge while
 * the conversation rail is expanded. Once the rail collapses, every primary
 * control and the session title share one full-width row, so keep that group
 * anchored immediately after the traffic lights. Secondary tool actions retain
 * their own right alignment across the full header width.
 */
.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__detached-window {
  margin-left: 0;
}

.agent-gui-workbench-header__traffic-lights {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--agent-gui-workbench-header-traffic-light-gap);
  margin-right: 0;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"] {
  cursor: grab !important;
  -webkit-app-region: drag;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]:active {
  cursor: grabbing !important;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__primary {
  cursor: grab !important;
  -webkit-app-region: drag;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__primary:active {
  cursor: grabbing !important;
}

.agent-gui-workbench-header__traffic-light {
  position: relative;
  display: inline-flex;
  width: var(--agent-gui-workbench-header-traffic-light-hit-area-size);
  height: var(--agent-gui-workbench-header-traffic-light-hit-area-size);
  flex: 0 0 auto;
  margin: calc(
    (
        var(--agent-gui-workbench-header-traffic-light-size) -
          var(--agent-gui-workbench-header-traffic-light-hit-area-size)
      ) /
      2
  );
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 160ms ease;
}

.agent-gui-workbench-header__traffic-light::before {
  position: absolute;
  inset: calc(
    (
        var(--agent-gui-workbench-header-traffic-light-hit-area-size) -
          var(--agent-gui-workbench-header-traffic-light-size)
      ) /
      2
  );
  border-radius: inherit;
  background-color: color-mix(in srgb, var(--text-tertiary) 72%, transparent);
  content: "";
  transition: background-color 160ms ease;
}

.agent-gui-workbench-header__traffic-light-icon {
  position: absolute;
  z-index: 1;
  inset: 5px;
  width: 10px;
  height: 10px;
  color: color-mix(in srgb, #000 68%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.agent-gui-workbench-header__traffic-lights:hover
  .agent-gui-workbench-header__traffic-light,
.agent-gui-workbench-header__traffic-lights:focus-within
  .agent-gui-workbench-header__traffic-light {
  opacity: 1;
}

.agent-gui-workbench-header__traffic-light:focus-visible {
  outline: none;
}

.agent-gui-workbench-header__traffic-lights:hover
  .agent-gui-workbench-header__traffic-light-icon,
.agent-gui-workbench-header__traffic-lights:focus-within
  .agent-gui-workbench-header__traffic-light-icon {
  opacity: 1;
}

.agent-gui-workbench-header__traffic-lights:hover
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="close"]::before,
.agent-gui-workbench-header__traffic-lights:focus-within
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="close"]::before {
  background-color: #ff5f57;
}

.agent-gui-workbench-header__traffic-lights:hover
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="minimize"]::before,
.agent-gui-workbench-header__traffic-lights:focus-within
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="minimize"]::before {
  background-color: #ffbd2e;
}

.agent-gui-workbench-header__traffic-lights:hover
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="maximize"]::before,
.agent-gui-workbench-header__traffic-lights:focus-within
  .agent-gui-workbench-header__traffic-light[data-agent-gui-workbench-traffic-light="maximize"]::before {
  background-color: #28c840;
}

.agent-gui-workbench-header__agent-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.agent-gui-workbench-header__primary-accessory {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  -webkit-app-region: no-drag;
}

.agent-gui-workbench-header__detail {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-items: center;
}

.agent-gui-workbench-header__secondary-accessory {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  padding-right: var(--agent-gui-workbench-header-padding-x);
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

/* The collapsed primary row already supplies the header's right inset. Avoid
   stacking the accessory inset when actions move out of the detail column. */
.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__secondary-accessory {
  padding-right: 0;
}

.agent-gui-workbench-header__agent-name,
.agent-gui-workbench-header__session-title,
.agent-gui-workbench-header__detail-title {
  box-sizing: border-box;
  min-width: 0;
  color: var(--agent-gui-workbench-header-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.agent-gui-workbench-header__title-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mention typography and icons use the same 24px row as the plain title, so
   the whole rich title can share the Agent icon's vertical center directly. */
.agent-gui-workbench-header__rich-title {
  display: block;
  width: max-content;
  min-width: 0;
  max-width: calc(100% - 36px);
  height: 24px;
  flex: 0 1 auto;
  overflow: hidden;
}

.agent-gui-workbench-header__rich-title > div,
.agent-gui-workbench-header__rich-title .ProseMirror {
  display: block;
  width: 100%;
  min-width: 0;
  height: 24px;
  margin: 0;
  overflow: visible;
}

.agent-gui-workbench-header__rich-title p {
  display: flex;
  width: max-content;
  min-width: 100%;
  max-width: none;
  height: 24px;
  align-items: center;
  margin: 0;
  overflow: visible;
  overflow-wrap: normal;
  line-height: 24px;
  white-space: nowrap;
  word-break: normal;
}

.agent-gui-workbench-header__rich-title .agent-rich-text-mention-node,
.agent-gui-workbench-header__rich-title .tsh-agent-object-token--file,
.agent-gui-workbench-header__rich-title .tsh-agent-object-token--entity,
.agent-gui-workbench-header__rich-title [data-slot="mention-pill"] {
  top: 0;
  align-items: center;
  transform: none;
  vertical-align: middle;
}

.agent-gui-workbench-header__rich-title
  .agent-rich-text-mention-node[data-agent-custom-mention="true"] {
  display: inline-flex;
  max-width: min(100%, var(--agent-mention-max-width, 20rem));
  height: 24px;
  align-items: center;
  margin-right: 4px;
  transform: translateY(-1.5px);
  vertical-align: middle;
}

.agent-gui-workbench-header__rich-title .tsh-agent-object-token--file {
  height: 24px;
  min-height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 24px;
}

.agent-gui-workbench-header__rich-title
  .tsh-agent-object-token--file
  .tsh-agent-object-token__main {
  transform: translateY(-1.25px);
}

.agent-gui-workbench-header__agent-name {
  flex: 0 0 auto;
}

.agent-gui-workbench-header__session-title {
  display: flex;
  flex: 0 1 auto;
  max-width: min(100%, var(--agent-gui-workbench-header-title-max-width));
  margin-left: 4px;
  align-items: center;
  gap: 8px;
}

.agent-gui-workbench-header__session-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 5px;
}

.agent-gui-workbench-header__session-icon-info-trigger {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  border-radius: 5px;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.agent-gui-workbench-header__session-icon-info-trigger:focus-visible {
  outline: auto;
}

.agent-gui-workbench-header__session-icon--pending {
  background: var(--transparency-block);
  animation: agent-gui-workbench-header-icon-pending 1.2s ease-in-out infinite;
}

@keyframes agent-gui-workbench-header-icon-pending {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.agent-gui-workbench-header__detail-title {
  display: flex;
  height: 100%;
  flex: 0 1 auto;
  max-width: min(100%, var(--agent-gui-workbench-header-title-max-width));
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  pointer-events: none;
}

.agent-gui-workbench-header__session-title:has(
    .agent-gui-workbench-header__session-menu-trigger
  )
  > .agent-gui-workbench-header__title-text,
.agent-gui-workbench-header__detail-title:has(
    .agent-gui-workbench-header__session-menu-trigger
  )
  > .agent-gui-workbench-header__title-text {
  max-width: calc(100% - 36px);
}

.agent-gui-workbench-header__session-menu-trigger {
  pointer-events: auto;
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"]
  .agent-gui-workbench-header__session-title,
.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"]
  .agent-gui-workbench-header__detail-title {
  box-sizing: border-box;
  width: auto;
  max-width: calc(
    100% - var(--agent-gui-tool-sidebar-layout-width, 0px) - 16px
  );
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

/*
 * In the collapsed primary row the trailing reserve is supplied by the row's
 * own padding-inline-end (it has to account for the leading traffic lights and
 * chrome buttons that a title-level max-width cannot see). Relax the shared
 * max-width here so the reservation is not counted twice, which would strand
 * the title far short of the actions.
 */
.agent-gui-workbench-header[data-agent-gui-workbench-header-tool-sidebar="true"][data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__session-title {
  max-width: 100%;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__agent-brand,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__session-title,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__detail-title {
  cursor: grab !important;
  -webkit-app-region: drag;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__agent-brand:active,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__session-title:active,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__detail-title:active {
  cursor: grabbing !important;
}

.agent-gui-workbench-header__icon-button {
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--agent-gui-workbench-header-muted) !important;
  cursor: pointer;
  /* Header chrome icon buttons must not animate: no hover fade, no
     press-down motion inherited from the ui-system Button base. */
  transition: none !important;
}

.agent-gui-workbench-header__icon-button:active {
  transform: none !important;
}

.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__traffic-lights,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__traffic-light,
.agent-gui-workbench-header[data-agent-gui-standalone-window-header="true"]
  .agent-gui-workbench-header__icon-button {
  cursor: pointer !important;
  -webkit-app-region: no-drag;
}

.agent-gui-workbench-header__icon-button:hover,
.agent-gui-workbench-header__icon-button:focus-visible {
  background: color-mix(
    in srgb,
    var(--text-primary) 8%,
    transparent
  ) !important;
  color: var(--agent-gui-workbench-header-text) !important;
}

.agent-gui-workbench-header__rail-toggle {
  margin-left: auto;
}

.agent-gui-workbench-header__detached-window {
  margin-left: auto;
}

.agent-gui-workbench-header__detached-window
  + .agent-gui-workbench-header__rail-toggle {
  /* The primary row gap is 12px; keep this icon pair at a net 8px. */
  margin-left: -4px;
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-body-error="true"]
  .agent-gui-workbench-header__rail-toggle {
  display: none !important;
}

.agent-gui-workbench-header[data-agent-gui-workbench-header-collapsed="true"]
  .agent-gui-workbench-header__rail-toggle {
  margin-left: 0;
}

.agent-gui-workbench-header__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.agent-gui-node__rail-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-right: 0;
  overflow: visible;
  isolation: isolate;
}

.agent-gui-node__rail-panel--collapsed {
  overflow: hidden;
  pointer-events: none;
}

.agent-gui-node__rail-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    var(--agent-gui-provider-rail-width, 0px) +
      var(--agent-gui-conversation-rail-width) - 6px
  );
  z-index: 20;
  width: 12px;
  min-width: 12px;
  cursor: col-resize;
  touch-action: none;
  opacity: 1;
  transition:
    left 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;
}

.agent-gui-node__rail-resize-handle[data-resizing="true"] {
  transition: none;
}

.agent-gui-node__rail-resize-handle--collapsed {
  left: calc(var(--agent-gui-provider-rail-width, 0px) - 6px);
  opacity: 0;
}

.agent-gui-node__rail-resize-handle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition:
    background-color 150ms ease,
    width 150ms ease;
}

.agent-gui-node__rail-resize-handle:hover::after,
.agent-gui-node__rail-resize-handle:focus-visible::after,
.agent-gui-node__rail-resize-handle[data-resizing="true"]::after {
  width: 2px;
  background: color-mix(in srgb, var(--border-focus) 40%, transparent);
}

.agent-gui-node__detail-panel {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--agent-gui-session-flow-background);
}

.agent-gui-node__detail-panel > .agent-gui-node__detail {
  min-height: 0;
  border-radius: inherit;
  overflow: hidden;
}

.agent-gui-node__composer-file-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: inherit;
  border: 2px dashed color-mix(in srgb, var(--tutti-purple) 70%, transparent);
  background: color-mix(
    in srgb,
    var(--tutti-purple) 12%,
    var(--agent-gui-session-flow-background)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.agent-gui-node__composer-file-drop-overlay--active {
  opacity: 1;
}

.agent-gui-node__composer-file-drop-overlay-card {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

.agent-gui-node__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(
    --agent-gui-conversation-rail-content-width,
    var(--agent-gui-conversation-rail-width)
  );
  min-width: var(
    --agent-gui-conversation-rail-content-width,
    var(--agent-gui-conversation-rail-width)
  );
  height: 100%;
  min-height: 0;
  background: var(--agent-gui-session-sidepanel-background);
  box-shadow: none;
  opacity: 1;
}

.agent-gui-node__provider-rail-panel {
  position: relative;
  z-index: 3;
  display: flex;
  width: var(--agent-gui-provider-rail-width, 52px);
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  background: var(--agent-gui-session-sidepanel-background);
  overflow: hidden;
  transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-app-region: no-drag;
}

.agent-gui-node__provider-rail-panel::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--line-1) 24px,
    var(--line-1) calc(100% - 24px),
    transparent 100%
  );
}

.workbench-window[data-window-header-layout="overlay"]
  .agent-gui-node__provider-rail-panel::after {
  top: var(--agent-gui-workbench-header-height);
}

.agent-gui-node__rail > * {
  transition:
    opacity 120ms ease,
    filter 120ms ease;
  transition-delay: 40ms;
}

.agent-gui-node__rail::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(
    in srgb,
    var(--agent-gui-session-sidepanel-background) 88%,
    transparent
  );
  opacity: 0;
  transition: opacity 120ms ease;
}

.agent-gui-node__rail-panel--collapsed .agent-gui-node__rail {
  box-shadow: none;
}

.agent-gui-node__rail-panel--collapsed .agent-gui-node__rail > * {
  filter: blur(1px);
  opacity: 0;
  transition-delay: 0ms;
}

.agent-gui-node__rail-panel--collapsed .agent-gui-node__rail::after {
  opacity: 1;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__layout,
  .agent-gui-workbench-header,
  .agent-gui-node__rail-resize-handle,
  .agent-gui-node__provider-rail-panel,
  .agent-gui-node__rail > *,
  .agent-gui-node__rail::after {
    transition: none;
  }

  .agent-gui-node__rail-panel--collapsed .agent-gui-node__rail > * {
    filter: none;
  }
}

.agent-gui-node__rail-toolbar {
  --agent-gui-rail-control-radius: 6px;

  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 12px 16px 12px;
}

.agent-gui-node__activity-toggle-button {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: var(--agent-gui-rail-control-radius);
  background: transparent;
  color: var(--text-secondary);
}

.agent-gui-node__activity-toggle-button:hover,
.agent-gui-node__activity-toggle-button:focus-visible {
  background: var(--transparency-hover);
  color: var(--text-primary);
}

.agent-gui-node__activity-toggle-button[data-active="true"] {
  background: color-mix(in srgb, var(--agent-gui-accent) 12%, transparent);
  color: var(--agent-gui-accent-strong);
}

.agent-gui-node__activity-toggle-button svg {
  width: 18px;
  height: 18px;
}

.agent-gui-node__activity-toggle-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--agent-gui-session-sidepanel-background);
  border-radius: 999px;
  background: var(--agent-gui-accent);
}

.agent-gui-node__project-rail-header {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 26px;
  margin-bottom: 8px;
  padding: 0 6px 0 10px;
}

.agent-gui-node__conversation-section + .agent-gui-node__project-rail-header {
  margin-top: 24px;
}

.agent-gui-node__project-rail-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.agent-gui-node__project-rail-title > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__project-rail-add-project {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    color 140ms ease;
}

.agent-gui-node__project-rail-header:hover
  .agent-gui-node__project-rail-add-project,
.agent-gui-node__project-rail-header:focus-within
  .agent-gui-node__project-rail-add-project {
  opacity: 1;
  pointer-events: auto;
}

.agent-gui-node__project-rail-add-project-trigger {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  max-width: 24px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0;
  color: var(--text-secondary);
}

.agent-gui-node__project-rail-add-project-trigger > span {
  display: none;
}

.agent-gui-node__project-rail-add-project-trigger > svg {
  display: none;
}

.agent-gui-node__project-rail-add-project-trigger:hover:not(:disabled),
.agent-gui-node__project-rail-add-project-trigger:focus-visible {
  background: var(--transparency-block-hover);
  color: var(--text-primary);
  outline: none;
}

.agent-gui-node__project-rail-add-project-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 14px;
  color: var(--text-secondary);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.agent-gui-node__project-rail-add-project-trigger:hover:not(:disabled)
  + .agent-gui-node__project-rail-add-project-icon,
.agent-gui-node__project-rail-add-project-trigger:focus-visible
  + .agent-gui-node__project-rail-add-project-icon {
  color: var(--text-primary);
}

.room-issue-node__search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.room-issue-node__search-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: 32px !important;
  min-height: 32px;
  max-height: 32px;
  border: 0 !important;
  border-radius: var(--agent-gui-rail-control-radius) !important;
  padding-left: 12px;
  padding-right: 36px;
  font-size: 13px !important;
  line-height: 18px;
  appearance: none;
}

.room-issue-node__search-input:hover,
.room-issue-node__search-input:focus,
.room-issue-node__search-input:focus-visible {
  background: var(--transparency-hover);
}

.room-issue-node__search-field[data-has-value="false"]
  .room-issue-node__search-input {
  padding-right: 12px;
}

.room-issue-node__search-input::-webkit-search-cancel-button,
.room-issue-node__search-input::-webkit-search-decoration {
  appearance: none;
}

.room-issue-node__search-clear-button {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  appearance: none;
  transform: translateY(-50%);
}

.room-issue-node__search-clear-button:hover,
.room-issue-node__search-clear-button:focus-visible {
  color: var(--text-secondary);
  background: var(--transparency-block-hover);
  outline: none;
}

.room-issue-node__search-clear-button svg {
  width: 14px;
  height: 14px;
}

.agent-gui-node__rail-toolbar .room-issue-node__search-field,
.agent-gui-node__rail-toolbar .room-issue-node__search-input {
  min-width: 0;
  overflow: hidden;
}

.agent-gui-node__rail-toolbar .room-issue-node__search-input {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__rail-toolbar .room-issue-node__search-input::placeholder {
  text-overflow: ellipsis;
}

.agent-gui-node__new-conversation-icon-button {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  border: 0 !important;
  border-radius: var(--agent-gui-rail-control-radius) !important;
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
}

.agent-gui-node__new-conversation-icon-button svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.agent-gui-node__window-agent-info {
  color: var(--text-secondary);
}

.agent-gui-node__composer-send-button {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border: 1px solid var(--text-primary);
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--text-inverted);
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.agent-gui-node__composer-send-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.agent-gui-node__composer-send-button svg {
  width: 18px;
  height: 18px;
}

/* Plan-review decision copy: the send button widens into a labeled pill
   ("Accept plan" / "Request changes") while the empty-send override is on. */
.agent-gui-node__composer-send-button[data-plan-review-label="true"] {
  display: inline-flex;
  width: auto;
  min-width: 28px;
  max-width: 220px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.agent-gui-node__composer-reference-trigger {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
}

.agent-gui-node__composer-reference-trigger svg:first-child {
  width: 14px;
  height: 14px;
}

.agent-gui-node__gateway-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 12px;
  padding: 0 14px;
  min-height: 38px;
  border: 1px solid var(--agent-gui-border-subtle);
  border-radius: 8px;
  background: var(--agent-gui-surface-muted);
  color: var(--agent-gui-text-secondary);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

.agent-gui-node__gateway-status[data-state="starting"] {
  border-color: color-mix(
    in srgb,
    var(--agent-gui-accent) 24%,
    var(--agent-gui-border-subtle)
  );
  color: var(--agent-gui-accent-strong);
}

.agent-gui-node__gateway-status[data-state="failed"] {
  align-items: flex-start;
  flex-direction: column;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: color-mix(
    in srgb,
    var(--agent-gui-danger) 24%,
    var(--agent-gui-border-subtle)
  );
  color: var(--agent-gui-danger);
}

.agent-gui-node__gateway-retry-button {
  width: fit-content;
  border: 1px solid
    color-mix(in srgb, var(--agent-gui-danger) 24%, var(--agent-gui-border));
  border-radius: 6px;
  background: var(--agent-gui-surface-muted);
  padding: 6px 10px;
  color: var(--agent-gui-danger);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.agent-gui-node__gateway-retry-button:hover {
  background: color-mix(in srgb, var(--agent-gui-danger) 8%, transparent);
  border-color: color-mix(
    in srgb,
    var(--agent-gui-danger) 44%,
    var(--agent-gui-border)
  );
}

.agent-gui-node__conversation-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  /* The native overlay scrollbar does not reserve a gutter on macOS, so the
     right inset must match the left side explicitly. */
  padding: 0 12px 18px 12px;
}

.agent-gui-node__activity-heading {
  flex: 0 0 auto;
  min-width: 0;
  margin: 14px 0 0;
  padding: 4px 10px 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.agent-gui-node__activity-heading[data-first="true"] {
  margin-top: 0;
}

.agent-gui-node__activity-empty {
  min-width: 0;
  padding: 8px 10px 10px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 18px;
}

.agent-gui-node__conversation-section {
  position: relative;
  display: grid;
  min-width: 0;
  max-width: 100%;
}

.agent-gui-node__pinned-project-rail-header {
  min-width: 0;
  padding: 4px 10px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.agent-gui-node__conversation-section[data-project-dragging="true"] {
  opacity: 0.42;
}

.agent-gui-node__conversation-section[data-project-drop-indicator]::before {
  position: absolute;
  right: 6px;
  left: 6px;
  z-index: 4;
  height: 2px;
  border-radius: 999px;
  background: var(--agent-gui-accent);
  content: "";
  pointer-events: none;
}

.agent-gui-node__conversation-section[data-project-drop-indicator="before"]::before {
  top: -1px;
}

.agent-gui-node__conversation-section[data-project-drop-indicator="after"]::before {
  bottom: -1px;
}

.agent-gui-node__project-drag-image {
  position: fixed;
  top: -1000px;
  left: -1000px;
  display: flex;
  max-width: 220px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--agent-gui-surface-raised);
  box-shadow: var(--shadow-elevated);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 12px;
  pointer-events: none;
}

.agent-gui-node__project-drag-image > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-section + .agent-gui-node__conversation-section {
  margin-top: 12px;
}

.agent-gui-node__conversation-section[data-kind="project"]
  + .agent-gui-node__conversation-section[data-kind="project"] {
  margin-top: 2px;
}

.agent-gui-node__conversation-section[data-kind="pinned"]
  + .agent-gui-node__conversation-section[data-kind="conversations"],
.agent-gui-node__conversation-section[data-kind="project"]
  + .agent-gui-node__conversation-section[data-kind="conversations"] {
  margin-top: 24px;
}

.agent-gui-node__conversation-section-header {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 6px;
  background-color: transparent;
  padding: 4px 6px 4px 10px;
  transition: background-color 140ms ease;
}

.agent-gui-node__conversation-section[data-kind="project"]
  > .agent-gui-node__conversation-section-header:hover {
  background-color: var(--agent-gui-surface-hover);
}

.agent-gui-node__conversation-section-toggle {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  padding: 2px 0;
  text-align: left;
}

button.agent-gui-node__conversation-section-toggle {
  cursor: pointer;
}

button.agent-gui-node__conversation-section-toggle:hover {
  color: var(--text-primary);
}

.agent-gui-node__conversation-section-chevron {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition:
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}

.agent-gui-node__conversation-section[data-kind="project"]
  > .agent-gui-node__conversation-section-header:hover
  .agent-gui-node__conversation-section-chevron {
  opacity: 1;
}

.agent-gui-node__conversation-section-toggle[aria-expanded="true"]
  .agent-gui-node__conversation-section-chevron {
  transform: rotate(90deg);
}

button.agent-gui-node__conversation-section-toggle:hover
  .agent-gui-node__conversation-section-chevron {
  color: var(--text-secondary);
}

.agent-gui-node__conversation-section-label {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.agent-gui-node__conversation-section-label > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-section-label-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  transition: opacity 140ms ease;
}

.agent-gui-node__conversation-section[data-kind="project"]
  > .agent-gui-node__conversation-section-header:hover
  .agent-gui-node__conversation-section-label-icon {
  opacity: 0;
}

.agent-gui-node__conversation-section-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-width: 44px;
  pointer-events: auto;
}

.agent-gui-node__conversation-section[data-kind="conversations"]
  .agent-gui-node__conversation-section-actions {
  min-width: 0;
}

.agent-gui-node__conversation-section-action-tooltip-wrap {
  display: inline-flex;
  flex: none;
}

.agent-gui-node__conversation-section-action-tooltip {
  max-width: 180px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-section-more-button {
  flex: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    color 140ms ease;
}

.agent-gui-node__conversation-section-more-button svg {
  width: 14px;
  height: 14px;
}

.agent-gui-node__conversation-section:hover
  .agent-gui-node__conversation-section-more-button,
.agent-gui-node__conversation-section:focus-within
  .agent-gui-node__conversation-section-more-button,
.agent-gui-node__conversation-section-more-button[aria-expanded="true"] {
  opacity: 1;
  pointer-events: auto;
}

.agent-gui-node__conversation-section-items {
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 180ms ease,
    opacity 140ms ease,
    visibility 0s linear 0s;
  padding-left: 14px;
  padding-top: 8px;
}

.agent-gui-node__conversation-section[data-kind="project"]
  .agent-gui-node__conversation-section-items {
  padding-left: 0;
  padding-top: 4px;
}

.agent-gui-node__conversation-section[data-kind="pinned"]
  .agent-gui-node__conversation-section-items {
  padding-left: 0;
}

.agent-gui-node__conversation-section[data-kind="conversations"]
  .agent-gui-node__conversation-section-items {
  padding-left: 0;
}

.agent-gui-node__conversation-section[data-collapsed="true"]
  .agent-gui-node__conversation-section-items {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    grid-template-rows 180ms ease,
    opacity 120ms ease,
    visibility 0s linear 180ms;
}

.agent-gui-node__conversation-section-items-inner {
  display: grid;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  gap: 4px;
  overflow: hidden;
}

.agent-gui-node__conversation-section[data-kind="project"]
  .agent-gui-node__conversation-section-items-inner {
  gap: 2px;
}

.agent-gui-node__conversation-section-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  margin-bottom: 12px;
  padding: 2px 6px 0 22px;
}

.agent-gui-node__conversation-section-pagination-button {
  min-width: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  padding: 1px 4px;
  text-align: left;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.agent-gui-node__conversation-section-pagination-button:hover,
.agent-gui-node__conversation-section-pagination-button:focus-visible {
  background-color: var(--agent-gui-surface-hover);
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__conversation-section-items {
    transition: none;
  }
}

.agent-gui-node__conversation-section-empty {
  min-width: 0;
  padding: 7px 12px 7px 26px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 18px;
}

.agent-gui-node__conversation-list-skeleton {
  display: grid;
  gap: 10px;
  padding: 2px 0;
}

.agent-gui-node__conversation-list-skeleton-row {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-rows: repeat(2, 10px);
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
  min-height: 46px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--transparency-block) 54%, transparent);
  padding: 10px 12px;
}

.agent-gui-node__conversation-list-skeleton-row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, var(--background-fronted) 48%, transparent) 46%,
    transparent 82%
  );
  animation: agent-gui-conversation-list-skeleton-shimmer 1.18s ease-in-out
    infinite;
}

.agent-gui-node__conversation-list-skeleton-spine,
.agent-gui-node__conversation-list-skeleton-rib {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--agent-gui-text-tertiary) 18%,
    transparent
  );
}

.agent-gui-node__conversation-list-skeleton-spine {
  grid-row: 1 / -1;
  width: 3px;
  height: 26px;
  justify-self: center;
}

.agent-gui-node__conversation-list-skeleton-rib {
  height: 12px;
}

.agent-gui-node__conversation-list-skeleton-rib-primary {
  width: 78%;
}

.agent-gui-node__conversation-list-skeleton-rib-secondary {
  width: 52%;
  opacity: 0.72;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="long"]
  .agent-gui-node__conversation-list-skeleton-rib-primary {
  width: 88%;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="medium"]
  .agent-gui-node__conversation-list-skeleton-rib-primary {
  width: 72%;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="short"]
  .agent-gui-node__conversation-list-skeleton-rib-primary {
  width: 58%;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="long"]
  .agent-gui-node__conversation-list-skeleton-rib-secondary {
  width: 60%;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="medium"]
  .agent-gui-node__conversation-list-skeleton-rib-secondary {
  width: 48%;
}

.agent-gui-node__conversation-list-skeleton-row[data-size="short"]
  .agent-gui-node__conversation-list-skeleton-rib-secondary {
  width: 38%;
}

.agent-gui-node__conversation-item {
  --agent-gui-conversation-actions-width: 72px;
  --agent-gui-conversation-actions-inset: 4px;
  --agent-gui-conversation-actions-gap: 8px;

  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  color: var(--agent-gui-text-primary);
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}

.agent-gui-node__conversation-item[data-presentation="activity"] {
  height: auto;
  min-height: 56px;
  margin-bottom: 4px;
}

.agent-gui-node__conversation-item[data-presentation="activity"]
  .agent-gui-node__conversation-select {
  align-items: start;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.agent-gui-node__conversation-activity-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.agent-gui-node__conversation-activity-project-label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-activity-secondary {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  max-height: 34px;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 17px;
}

.agent-gui-node__conversation-activity-secondary > span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.agent-gui-node__conversation-activity-secondary-icon {
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 2px 4px 0 0;
}

.agent-gui-node__conversation-item[data-presentation="activity"]
  .agent-gui-node__conversation-actions {
  top: 4px;
  transform: none;
}

.agent-gui-node__conversation-item:has(
  .agent-gui-node__conversation-open-window-button
) {
  --agent-gui-conversation-actions-width: 96px;
}

.agent-gui-node__conversation-item:focus-within,
.agent-gui-node__conversation-item:hover,
.agent-gui-node__conversation-item[data-state="open"],
.agent-gui-node__conversation-item:has(
  .agent-gui-node__conversation-actions [data-state="open"]
) {
  background-color: var(--agent-gui-surface-hover);
}

.agent-gui-node__conversation-item[data-active="true"] {
  border-color: var(--line-1);
  background-color: var(--background-fronted);
}

.agent-gui-node__conversation-select {
  display: grid;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--agent-gui-conversation-actions-gap);
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
  padding: 0 8px 0 12px;
  text-align: left;
  transition: padding-right 140ms ease;
}

.agent-gui-node__conversation-section[data-kind="project"]
  .agent-gui-node__conversation-select {
  padding-left: 26px;
}

.agent-gui-node__conversation-section[data-kind="pinned"]
  .agent-gui-node__conversation-select {
  padding-left: 26px;
}

.agent-gui-node__conversation-section[data-kind="conversations"]
  .agent-gui-node__conversation-select {
  padding-left: 26px;
}

.agent-gui-node__conversation-item:hover .agent-gui-node__conversation-select,
.agent-gui-node__conversation-item[data-state="open"]
  .agent-gui-node__conversation-select,
.agent-gui-node__conversation-item:has(
    .agent-gui-node__conversation-actions [data-state="open"]
  )
  .agent-gui-node__conversation-select,
.agent-gui-node__conversation-item:has(
    .agent-gui-node__conversation-actions:focus-within
  )
  .agent-gui-node__conversation-select {
  grid-template-columns: minmax(0, 1fr) 0;
  padding-right: calc(
    var(--agent-gui-conversation-actions-width) +
      var(--agent-gui-conversation-actions-inset)
  );
}

.agent-gui-node__conversation-item[data-pending-delete="true"]
  .agent-gui-node__conversation-select {
  grid-template-columns: minmax(0, 1fr) 0;
  padding-right: min(96px, calc(100% - 24px));
}

.agent-gui-node__conversation-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 28px;
  gap: 4px;
}

.agent-gui-node__conversation-meta[data-kind="loading"],
.agent-gui-node__conversation-meta[data-kind="waiting"],
.agent-gui-node__conversation-meta[data-kind="failed"],
.agent-gui-node__conversation-meta[data-kind="unread-complete"] {
  width: 28px;
  min-width: 28px;
  justify-content: center;
}

.agent-gui-node__conversation-meta[data-worktree="true"] {
  width: auto;
  min-width: max-content;
}

.agent-gui-node__conversation-meta[data-kind="time"] {
  margin-right: 6px;
  min-width: max-content;
  white-space: nowrap;
}

.agent-gui-node__conversation-actions {
  position: absolute;
  top: 50%;
  right: var(--agent-gui-conversation-actions-inset);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  box-sizing: border-box;
  min-width: var(--agent-gui-conversation-actions-width);
  max-width: calc(100% - 20px);
  opacity: 0;
  transform: translateY(-50%);
}

.agent-gui-node__conversation-more-button {
  background: transparent;
  color: var(--text-tertiary);
}

.agent-gui-node__conversation-more-button svg {
  width: 16px;
  height: 16px;
}

.agent-gui-node__conversation-more-button:not(:disabled):hover,
.agent-gui-node__conversation-more-button:not(:disabled):focus-visible {
  background: var(--transparency-hover);
  color: var(--text-primary);
}

.agent-gui-node__conversation-delete-button,
.agent-gui-node__conversation-open-window-button,
.agent-gui-node__conversation-pin-button {
  background: transparent;
  background-color: transparent;
  color: var(--text-tertiary);
}

.agent-gui-node__conversation-pin-button svg,
.agent-gui-node__conversation-open-window-button svg,
.agent-gui-node__conversation-delete-button svg {
  width: 14px;
  height: 14px;
}

.agent-gui-node__conversation-item:hover .agent-gui-node__conversation-actions,
.agent-gui-node__conversation-item[data-state="open"]
  .agent-gui-node__conversation-actions,
.agent-gui-node__conversation-actions:focus-within,
.agent-gui-node__conversation-actions:has([data-state="open"]) {
  opacity: 1;
  /* Only in the visible state: fading in on hover stays smooth while
     leaving the row swaps back to the meta icon instantly, with no
     lingering cross-fade overlapping the two. */
  transition: opacity 140ms ease;
}

.agent-gui-node__conversation-item[data-pinned="true"]
  .agent-gui-node__conversation-pin-button {
  color: var(--agent-gui-accent);
}

.agent-gui-node__conversation-item[data-pending-delete="true"]
  .agent-gui-node__conversation-actions {
  opacity: 1;
}

.agent-gui-node__conversation-item[data-pending-delete="true"]
  .agent-gui-node__conversation-delete-button {
  width: auto;
  min-width: 76px;
  background: transparent;
  color: var(--agent-gui-danger, var(--state-danger));
  padding: 0 10px;
  opacity: 1;
}

.agent-gui-node__conversation-delete-confirm-text {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.agent-gui-node__conversation-item[data-pending-delete="true"]
  .agent-gui-node__conversation-meta,
.agent-gui-node__conversation-item:hover .agent-gui-node__conversation-meta,
.agent-gui-node__conversation-item[data-state="open"]
  .agent-gui-node__conversation-meta,
.agent-gui-node__conversation-item:has(
    .agent-gui-node__conversation-actions:focus-within
  )
  .agent-gui-node__conversation-meta,
.agent-gui-node__conversation-item:has(
    .agent-gui-node__conversation-actions [data-state="open"]
  )
  .agent-gui-node__conversation-meta {
  width: 0;
  min-width: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
}

.agent-gui-node__conversation-title-row {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  overflow: hidden;
}

.agent-gui-node__conversation-provider-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}

.agent-gui-node__conversation-provider-image {
  display: block;
  object-fit: contain;
}

.agent-gui-node__conversation-provider-mask-icon {
  display: inline-block;
  color: var(--text-tertiary);
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.agent-gui-node__conversation-title-mention-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.agent-gui-node__conversation-title-mention-icon > svg {
  width: 14px;
  height: 14px;
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(:disabled):hover,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(
    :disabled
  ):focus-visible,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(
    :disabled
  ):active {
  background: transparent;
  background-color: transparent;
  color: var(--text-primary);
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(:disabled):hover
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(
    :disabled
  ):focus-visible
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-open-window-button:not(:disabled):active
  svg {
  color: var(--text-primary);
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):hover,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):focus-visible,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):active {
  background: transparent;
  background-color: transparent;
  color: var(--agent-gui-accent);
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):hover
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):focus-visible
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-pin-button:not(:disabled):active
  svg {
  color: var(--agent-gui-accent);
  fill: currentColor;
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(:disabled):hover,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(
    :disabled
  ):focus-visible,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(:disabled):active {
  background: transparent;
  background-color: transparent;
  color: var(--agent-gui-danger, var(--state-danger));
}

.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(:disabled):hover
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(
    :disabled
  ):focus-visible
  svg,
.agent-gui-node__conversation-actions
  > button.agent-gui-node__conversation-delete-button:not(:disabled):active
  svg {
  color: var(--agent-gui-danger, var(--state-danger));
  fill: currentColor;
}

.agent-gui-node__conversation-delete-button:disabled,
.agent-gui-node__conversation-open-window-button:disabled,
.agent-gui-node__conversation-pin-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.agent-gui-node__conversation-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-title
  [data-workspace-agent-markdown-shell="true"],
.agent-gui-node__conversation-title [data-workspace-agent-markdown="true"] {
  display: block;
  height: 18px;
  line-height: inherit;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__conversation-time {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.agent-gui-node__conversation-status-glyph {
  display: block;
  flex: none;
  width: 14px;
  height: 14px;
  transform-origin: center;
}

.agent-gui-node__conversation-worktree-glyph {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
}

.agent-gui-node__conversation-meta[data-kind="loading"] {
  color: var(--agent-gui-text-tertiary);
}

.agent-gui-node__conversation-meta[data-kind="failed"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  justify-content: center;
  color: var(--state-danger);
}

.agent-gui-node__conversation-meta[data-kind="waiting"] {
  width: 28px;
  height: 28px;
  min-width: 28px;
  justify-content: center;
  color: var(--color-amber-500);
}

.agent-gui-node__conversation-meta[data-kind="waiting"]
  .agent-gui-node__conversation-status-glyph,
.agent-gui-node__conversation-meta[data-kind="failed"]
  .agent-gui-node__conversation-status-glyph {
  width: 16px;
  height: 16px;
}

.agent-gui-node__conversation-meta[data-kind="failed"]
  .agent-gui-node__conversation-status-glyph {
  color: var(--state-danger);
}

.agent-gui-node__conversation-unread-lamp {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--agent-gui-accent);
}

@keyframes agent-gui-conversation-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes agent-gui-conversation-list-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes agent-gui-interactive-prompt-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.agent-gui-node__detail {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  background: inherit;
}

.agent-gui-node__detail-workbench {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.agent-gui-node__detail-primary {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: inherit;
}

.agent-gui-node__side-pane {
  position: relative;
  display: flex;
  flex: 0 0 var(--agent-gui-side-pane-width, 440px);
  flex-direction: column;
  width: var(--agent-gui-side-pane-width, 440px);
  min-width: 360px;
  max-width: 600px;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line-1, var(--tutti-line-1));
  background: var(--agent-gui-session-sidepanel-background);
}

.agent-gui-node__side-surface {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--agent-gui-session-sidepanel-background);
}

.agent-gui-node__side-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  z-index: 8;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.agent-gui-node__side-resize-handle::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: transparent;
  content: "";
  transition: background 120ms ease;
}

.agent-gui-node__side-resize-handle:hover::after,
.agent-gui-node__side-resize-handle:focus-visible::after {
  background: var(--tutti-purple);
}

.agent-gui-node__side-resize-handle:focus-visible {
  outline: none;
}

.agent-gui-node__side-close-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, var(--tutti-text-secondary));
  cursor: pointer;
}

.agent-gui-node__side-header {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 10px 4px;
}

.agent-gui-node__side-close-button:hover {
  background: var(--transparency-block, var(--tutti-surface-2));
  color: var(--text-primary, var(--tutti-text-primary));
}

.agent-gui-node__side-close-button:focus-visible {
  outline: 2px solid var(--tutti-purple);
  outline-offset: 1px;
}

.agent-gui-node__side-timeline-frame {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.agent-gui-node__side-timeline {
  display: grid;
  align-content: start;
  min-height: 0;
  padding: 8px 18px 112px;
  scroll-padding-bottom: 112px;
}

.agent-gui-node__side-empty-state {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  color: var(--text-secondary, var(--tutti-text-secondary));
  text-align: center;
}

.agent-gui-node__side-empty-state-icon {
  margin-bottom: 18px;
  color: var(--text-secondary, var(--tutti-text-secondary));
}

.agent-gui-node__side-empty-state-title {
  color: var(--text-primary, var(--tutti-text-primary));
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.agent-gui-node__side-empty-state-description {
  max-width: 360px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
}

.agent-gui-node__side-error {
  margin: 0 12px 12px;
  color: var(--destructive, var(--tutti-destructive));
  font-size: 13px;
  line-height: 20px;
}

.agent-gui-node__side-composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  flex: 0 0 auto;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--agent-gui-session-sidepanel-background) 18px
  );
}

.agent-gui-node__side-composer > .agent-gui-node__composer {
  padding-right: 10px;
  padding-left: 10px;
}

/* Dock Composer defaults to the main conversation-flow surface. Side is an
   adapter host for the shared Composer, so keep the dock padding and footer on
   the tool-sidebar surface without changing the shared input-card surface. */
.agent-gui-node__side-composer > .agent-gui-node__composer[data-layout="dock"],
.agent-gui-node__side-composer
  > .agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-footer {
  background: var(--agent-gui-session-sidepanel-background);
}

@media (max-width: 860px) {
  .agent-gui-node__detail-workbench:has(.agent-gui-node__side-pane)
    > .agent-gui-node__detail-primary {
    display: none;
  }

  .agent-gui-node__side-pane {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: 0;
  }

  .agent-gui-node__side-resize-handle {
    display: none;
  }
}

.agent-gui-node__timeline {
  --agent-gui-message-locator-inline-offset: var(--agent-gui-detail-padding-x);

  position: relative;
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 24px;
  min-height: 0;
  overflow: auto;
  padding: 32px var(--agent-gui-detail-padding-x)
    calc(24px + var(--agent-gui-bottom-dock-safe-area, 0px));
  scroll-padding-bottom: calc(
    24px + var(--agent-gui-bottom-dock-safe-area, 0px)
  );
  background: transparent;
}

.agent-gui-transcript-row {
  display: grid;
  width: 100%;
  min-width: 0;
  transform-origin: top center;
}

.agent-gui-message-locator {
  --agent-message-locator-dot-size: 6px;
  --agent-message-locator-hit-size: 36px;
  --agent-message-locator-center-offset: 18px;
  --agent-message-locator-inline-shift: 8px;
  --agent-message-locator-scrollbar-gap: 8px;
  --agent-message-locator-visible-height: 100vh;
  --agent-message-locator-visible-top-offset: 0px;
  --agent-message-locator-viewport-height: var(--agent-message-locator-height);

  position: sticky;
  top: max(
    0px,
    calc(
      var(--agent-message-locator-visible-top-offset) +
        (
          (
              var(--agent-message-locator-visible-height) -
                var(--agent-message-locator-viewport-height)
            ) /
            2
        )
    )
  );
  right: 0;
  z-index: 7;
  justify-self: stretch;
  width: calc(100% + var(--agent-gui-message-locator-inline-offset));
  height: var(--agent-message-locator-viewport-height);
  margin-right: calc(-1 * var(--agent-gui-message-locator-inline-offset));
  margin-bottom: calc(-1 * var(--agent-message-locator-viewport-height));
  pointer-events: none;
}

.agent-gui-message-locator__viewport {
  position: absolute;
  top: 0;
  right: calc(
    var(--agent-message-locator-scrollbar-gap) +
      var(--agent-message-locator-center-offset) -
      var(--agent-message-locator-hit-size) / 2 -
      var(--agent-message-locator-inline-shift)
  );
  width: var(--agent-message-locator-hit-size);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: none;
  cursor: pointer;
  z-index: 1;
}

.agent-gui-message-locator__viewport::-webkit-scrollbar {
  display: none;
}

.agent-gui-message-locator__content {
  position: relative;
  min-height: 100%;
  height: var(--agent-message-locator-height);
}

.agent-gui-message-locator__track-segment {
  position: absolute;
  top: var(--agent-message-locator-segment-position);
  left: calc(var(--agent-message-locator-hit-size) / 2);
  width: 1px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: var(--line-1, var(--nexight-line-1));
}

.agent-gui-message-locator__tick {
  position: absolute;
  top: var(--agent-message-locator-position);
  left: 0;
  display: grid;
  width: var(--agent-message-locator-hit-size);
  height: var(--agent-message-locator-hit-size);
  padding: 0;
  border: 0;
  place-items: center;
  background: transparent;
  color: inherit;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.agent-gui-message-locator__dot {
  box-sizing: border-box;
  width: var(--agent-message-locator-dot-size);
  height: var(--agent-message-locator-dot-size);
  border: 0 solid transparent;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--text-tertiary, var(--tutti-text-tertiary)) 62%,
    transparent
  );
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
}

.agent-gui-message-locator__tick:hover .agent-gui-message-locator__dot,
.agent-gui-message-locator__tick:focus-visible .agent-gui-message-locator__dot,
.agent-gui-message-locator__tick[data-selected="true"]
  .agent-gui-message-locator__dot {
  transform: scale(1.6667);
}

.agent-gui-message-locator__tick[data-selected="true"]
  .agent-gui-message-locator__dot {
  border-width: 2px;
  border-color: var(--text-secondary, var(--tutti-text-secondary));
  background: transparent;
}

.agent-gui-message-locator__tick:hover .agent-gui-message-locator__dot,
.agent-gui-message-locator__tick:focus-visible .agent-gui-message-locator__dot {
  border-width: 2px;
  border-color: var(--text-primary, var(--tutti-text-primary));
  background: transparent;
}

.agent-gui-message-locator__tick[data-unread-agent-response="true"]
  .agent-gui-message-locator__dot {
  background: var(--tutti-purple);
}

.agent-gui-message-locator__tick[data-unread-agent-response="true"]:hover
  .agent-gui-message-locator__dot,
.agent-gui-message-locator__tick[data-unread-agent-response="true"]:focus-visible
  .agent-gui-message-locator__dot {
  border-width: 2px;
  border-color: var(--tutti-purple);
  background: transparent;
}

.agent-gui-message-locator__panel {
  position: absolute;
  top: 50%;
  right: calc(22px + var(--agent-message-locator-scrollbar-gap));
  display: grid;
  width: min(360px, calc(100vw - 112px));
  max-width: max-content;
  max-height: calc(var(--agent-message-locator-visible-height) - 32px);
  gap: 12px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid
    color-mix(in srgb, var(--line-2, var(--tutti-line-2)) 72%, transparent);
  border-radius: 8px;
  background: var(
    --background-fronted,
    var(--surface-1, var(--tutti-surface-1))
  );
  box-shadow: var(--shadow-panel);
  color: var(--text-primary, var(--tutti-text-primary));
  opacity: 0;
  transform: translateY(-50%) translateX(4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  pointer-events: none;
}

.agent-gui-message-locator__panel[data-open="true"] {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.agent-gui-message-locator__panel-item {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary, var(--tutti-text-tertiary));
  text-align: left;
  cursor: pointer;
  transition: color 160ms ease;
}

.agent-gui-message-locator__panel-item:hover,
.agent-gui-message-locator__panel-item:focus-visible {
  background: color-mix(
    in srgb,
    var(--surface-2, var(--tutti-surface-2)) 86%,
    transparent
  );
  outline: none;
}

.agent-gui-message-locator__panel-item[data-active="true"] {
  color: var(--text-primary, var(--tutti-text-primary));
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-message-locator__panel,
  .agent-gui-message-locator__panel-item {
    transition: none;
  }
}

.agent-gui-message-locator__panel-item-text {
  display: block;
  overflow: hidden;
  max-width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-transcript-virtual {
  position: relative;
  width: 100%;
  min-width: 0;
  contain: layout;
  overflow-anchor: none;
}

.agent-gui-transcript-virtual-item {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-bottom: 16px;
  will-change: transform;
}

.agent-gui-transcript-virtual-item
  > .agent-gui-transcript-row
  + .agent-gui-transcript-row,
.agent-gui-transcript-virtual-item
  > [data-testid="agent-transcript-turn-divider"]
  + .agent-gui-transcript-row {
  margin-top: 16px;
}

.agent-gui-transcript-row[data-agent-transcript-row-enter="true"] {
  animation: agent-gui-transcript-row-enter 180ms cubic-bezier(0.16, 1, 0.3, 1)
    both;
}

@keyframes agent-gui-transcript-row-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-transcript-row[data-agent-transcript-row-enter="true"] {
    animation: none;
  }
}

.workspace-agents-status-panel__conversation-timeline.agent-gui-node__timeline {
  --agent-gui-message-locator-inline-offset: 28px;

  padding-right: 28px;
  padding-left: 28px;
}

.agent-gui-node__timeline-with-composer {
  padding-top: 24px;
  padding-bottom: calc(120px + var(--agent-gui-bottom-dock-safe-area, 0px));
  scroll-padding-bottom: calc(
    120px + var(--agent-gui-bottom-dock-safe-area, 0px)
  );
}

.agent-gui-node__timeline-with-composer.agent-gui-node__timeline--scrolled-from-top {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgb(0 0 0 / 0.18) 10px,
    rgb(0 0 0 / 0.62) 26px,
    black 44px
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgb(0 0 0 / 0.18) 10px,
    rgb(0 0 0 / 0.62) 26px,
    black 44px
  );
}

.agent-gui-node__timeline-unavailable-chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
  scroll-padding-bottom: 24px;
}

.agent-gui-node__timeline-centered {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.agent-gui-node__transcript-skeleton {
  display: grid;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.agent-gui-node__transcript-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(72%, 560px);
  min-width: 0;
}

.agent-gui-node__transcript-skeleton-row-user {
  justify-self: end;
  align-items: flex-end;
  width: min(48%, 360px);
}

.agent-gui-node__transcript-skeleton-row-assistant {
  justify-self: start;
  align-items: flex-start;
}

.agent-gui-node__transcript-skeleton-line,
.agent-gui-node__transcript-skeleton-bubble {
  position: relative;
  display: block;
  overflow: hidden;
  height: 16px;
  border-radius: 4px;
  background: var(--transparency-block);
}

.agent-gui-node__transcript-skeleton-line::after,
.agent-gui-node__transcript-skeleton-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--background-fronted) 42%, transparent) 50%,
    transparent 100%
  );
  animation: agent-gui-transcript-skeleton-shimmer 1.2s ease-in-out infinite;
}

.agent-gui-node__transcript-skeleton-line-long {
  width: 100%;
}

.agent-gui-node__transcript-skeleton-line-medium {
  width: 72%;
}

.agent-gui-node__transcript-skeleton-line-short {
  width: 46%;
}

@keyframes agent-gui-transcript-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__conversation-list-skeleton-row::after,
  .agent-gui-node__transcript-skeleton-line::after,
  .agent-gui-node__transcript-skeleton-bubble::after {
    animation: none;
  }
}

.agent-gui-node__bottom-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  align-self: stretch;
  box-sizing: border-box;
  gap: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  margin-top: auto;
  padding-top: 0;
  background: transparent;
  border-top: 0;
  pointer-events: none;
}

.agent-gui-node__bottom-dock > .agent-gui-node__composer {
  padding-right: 12px;
  padding-left: 12px;
  pointer-events: none;
}

.agent-gui-node__bottom-dock-scroll-to-bottom {
  position: absolute;
  bottom: calc(
    100% + var(--agent-gui-bottom-dock-floating-safe-area, 0px) + 8px
  );
  left: 50%;
  z-index: 6;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid
    color-mix(in srgb, var(--line-2, var(--tutti-line-2)) 72%, transparent);
  border-radius: 999px;
  background: var(--background-fronted, var(--tutti-surface-1));
  box-shadow: 0 10px 26px rgb(0 0 0 / 10%);
  color: var(--text-secondary, var(--tutti-text-secondary));
  pointer-events: auto;
  cursor: pointer;
  transform: translateX(-50%);
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.agent-gui-node__bottom-dock-scroll-to-bottom:hover {
  background: var(--background-fronted, var(--tutti-surface-1));
  color: var(--text-primary, var(--tutti-text-primary));
  transform: translateX(-50%) translateY(-1px);
}

.agent-gui-node__bottom-dock-scroll-to-bottom:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--text-secondary, var(--tutti-text-secondary)) 46%,
    transparent
  );
  background: var(--background-fronted, var(--tutti-surface-1));
  color: var(--text-primary, var(--tutti-text-primary));
  outline: none;
  transform: translateX(-50%) translateY(-1px);
}

.agent-gui-node__bottom-dock-scroll-to-bottom:active {
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__bottom-dock-scroll-to-bottom {
    transition: none;
  }
}

.agent-gui-node__bottom-dock > .agent-gui-chrome__session-chrome,
.agent-gui-node__bottom-dock-prompt,
.agent-gui-node__bottom-dock
  > .agent-gui-node__composer
  .agent-gui-node__composer-floating-prompt,
.agent-gui-node__bottom-dock
  > .agent-gui-node__composer
  .agent-gui-node__composer-input-shell {
  pointer-events: auto;
}

.agent-gui-node__bottom-dock-prompt {
  position: relative;
  z-index: 5;
  margin: 0 12px 8px;
}

.agent-gui-node__empty,
.agent-gui-node__empty-state {
  color: var(--agent-gui-text-secondary);
  font-size: 13px;
  line-height: 20px;
}

.agent-gui-node__empty-state {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding: 16px 14px;
  color: var(--text-secondary);
  text-align: center;
}

.agent-gui-node__conversation-rail-load-error {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.agent-gui-node__conversation-rail-load-error-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.agent-gui-node__unavailable-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px;
  color: var(--agent-gui-text-tertiary, var(--text-tertiary));
  text-align: center;
}

.agent-gui-node__unavailable-chat-empty-icon {
  width: 25px;
  height: 25px;
  flex: none;
  color: var(--text-tertiary);
}

.agent-gui-node__unavailable-chat-empty-text {
  margin-top: 10px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.agent-gui-node__timeline-row {
  display: flex;
  width: 100%;
  min-width: 0;
}

.agent-gui-node__timeline-row[data-kind="user"] {
  justify-content: flex-end;
}

.agent-gui-node__timeline-row[data-kind="assistant"],
.agent-gui-node__timeline-row[data-kind="tool"] {
  justify-content: flex-start;
}

.agent-gui-node__timeline-row[data-kind="system"] {
  justify-content: center;
}

.agent-gui-node__layout [data-slot="status-dot"],
[data-testid="workspace-agent-message-center"] [data-slot="status-dot"] {
  --agent-gui-status-dot-color: var(
    --agent-gui-text-tertiary,
    var(--text-tertiary)
  );
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--agent-gui-status-dot-color);
}

.agent-gui-node__layout [data-slot="status-dot"][data-size="xs"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-size="xs"] {
  width: 6px;
  height: 6px;
}

.agent-gui-node__layout [data-slot="status-dot"][data-size="sm"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-size="sm"] {
  width: 8px;
  height: 8px;
}

.agent-gui-node__layout [data-slot="status-dot"][data-size="md"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-size="md"] {
  width: 10px;
  height: 10px;
}

.agent-gui-node__layout [data-slot="status-dot"][data-tone="neutral"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-tone="neutral"] {
  --agent-gui-status-dot-color: var(
    --agent-gui-text-tertiary,
    var(--text-tertiary)
  );
}

.agent-gui-node__layout [data-slot="status-dot"][data-tone="green"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-tone="green"] {
  --agent-gui-status-dot-color: var(--state-success);
}

.agent-gui-node__layout [data-slot="status-dot"][data-tone="blue"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-tone="blue"] {
  --agent-gui-status-dot-color: var(--status-running);
}

.agent-gui-node__layout [data-slot="status-dot"][data-tone="amber"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-tone="amber"] {
  --agent-gui-status-dot-color: var(--state-warning);
}

.agent-gui-node__layout [data-slot="status-dot"][data-tone="red"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-tone="red"] {
  --agent-gui-status-dot-color: var(--state-danger);
}

.agent-gui-node__layout [data-slot="status-dot"][data-pulse="true"],
[data-testid="workspace-agent-message-center"]
  [data-slot="status-dot"][data-pulse="true"] {
  animation: agent-gui-status-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes agent-gui-status-dot-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--agent-gui-status-dot-color) 36%, transparent);
  }

  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 4px
      color-mix(in srgb, var(--agent-gui-status-dot-color) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__layout [data-slot="status-dot"][data-pulse="true"],
  [data-testid="workspace-agent-message-center"]
    [data-slot="status-dot"][data-pulse="true"] {
    animation: none;
  }
}

.agent-gui-node__message-bubble {
  max-width: 100%;
  min-width: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 20px;
}

.agent-gui-node__timeline-row[data-kind="user"]
  .agent-gui-node__message-bubble {
  max-width: min(620px, 86%);
  border-radius: 8px;
  background: var(--transparency-block);
  padding: 10px 14px;
}

.agent-gui-node__timeline-row[data-kind="assistant"]
  .agent-gui-node__message-bubble {
  width: 100%;
  max-width: 860px;
  padding: 2px 0;
}

.agent-gui-node__timeline-row[data-kind="tool"]
  .agent-gui-node__message-bubble {
  width: 100%;
  max-width: 860px;
  border-left: 2px solid var(--agent-gui-border-subtle);
  padding: 2px 0 2px 10px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 20px;
}

.agent-gui-node__timeline-row[data-kind="system"]
  .agent-gui-node__message-bubble {
  max-width: min(520px, 90%);
  border-radius: 8px;
  background: var(--agent-gui-surface-muted);
  padding: 6px 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.agent-gui-node__timeline-row p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agent-gui-node__row-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--agent-gui-text-secondary);
  font-size: 11px;
  line-height: 18px;
}

.agent-gui-node__timeline-row[data-kind="user"] .agent-gui-node__row-meta,
.agent-gui-node__timeline-row[data-kind="system"] .agent-gui-node__row-meta {
  display: none;
}

.agent-gui-node__timeline-row[data-kind="assistant"] .agent-gui-node__row-meta,
.agent-gui-node__timeline-row[data-kind="tool"] .agent-gui-node__row-meta {
  color: var(--agent-gui-text-tertiary);
}

.agent-gui-node__timeline-row[data-kind="tool"] .agent-gui-node__row-meta {
  margin-bottom: 3px;
  font-weight: 400;
}

.agent-gui-node__composer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: 0;
  padding: 0 12px 12px;
  background: transparent;
}

.agent-gui-node__composer-hero {
  width: min(760px, 100%);
  min-width: 320px;
  margin: 0 auto;
}

.agent-gui-node__composer-input-group {
  display: grid;
  min-width: 0;
}

.agent-gui-node__slash-status-panel {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  color: var(--agent-gui-text-primary);
  font-size: 11px;
}

.agent-gui-node__slash-status-limit {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) max-content;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.agent-gui-node__slash-status-limit-meter {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(
    in srgb,
    var(--agent-gui-text-primary) 10%,
    transparent
  );
}

.agent-gui-node__slash-status-limit-value {
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

.agent-gui-node__slash-status-limit-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 2px;
  border-radius: 0;
  background: var(--agent-gui-text-primary);
}

.agent-gui-node__composer-input-group-hero {
  padding: 2px;
  border: 1px solid var(--agent-gui-border-focus);
  border-radius: 16px;
  background: var(--agent-gui-accent-bg);
}

/* In dock layout a growing draft overhangs upward past the composer's top
   edge (the dock only reserves the collapsed input height in flow), so the
   floating panels anchored at bottom: 100% must be lifted by that overhang
   (--agent-gui-composer-input-overflow) or the grown input covers them. */
.agent-gui-node__composer-floating-prompt {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px + var(--agent-gui-composer-input-overflow, 0px));
  left: 12px;
  z-index: 5;
}

.agent-gui-node__composer-floating-prompt--queued {
  z-index: 1;
  right: 24px;
  bottom: calc(100% + var(--agent-gui-composer-input-overflow, 0px));
  left: 24px;
}

.agent-gui-node__composer-input-shell {
  display: grid;
  gap: 10px;
  position: relative;
  isolation: isolate;
  z-index: 2;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--agent-gui-border-subtle);
  border-radius: 12px;
  background: var(--agent-gui-surface-raised);
  box-shadow: 0 8px 24px rgb(0 0 0 / 4%);
  transition: box-shadow 140ms ease;
}

.agent-gui-node__composer-hero-prompt-input-area {
  box-sizing: border-box;
  width: calc(100% - 8px);
  margin-inline: 4px;
}

.agent-gui-node__composer[data-layout="dock"] {
  /* Opaque backdrop for the footer strip: the timeline can slide beneath the
     dock, and a transparent footer would show message rows behind the
     toolbar controls. */
  background: var(--agent-gui-session-flow-background);
}

/* Compact host surfaces are not conversation timelines. Keep attachments and
   growing text in normal flow so they cannot overhang unrelated host chrome. */
.agent-gui-node__composer[data-layout="embedded"] {
  position: relative;
  bottom: auto;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.agent-gui-node__composer[data-layout="embedded"]
  .agent-gui-node__composer-input-shell {
  gap: 8px;
}

.agent-gui-node__shell[data-quick-composer-input-surface="borderless"]
  .agent-gui-node__composer-input-shell,
.agent-gui-node__shell[data-quick-composer-input-surface="borderless"]
  .agent-gui-node__composer-input-shell:hover,
.agent-gui-node__shell[data-quick-composer-input-surface="borderless"]
  .agent-gui-node__composer-input-shell:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.agent-gui-node__composer[data-layout="embedded"]
  .agent-gui-node__composer-prompt-input-area {
  display: grid;
  min-width: 0;
}

.agent-gui-node__composer[data-layout="embedded"]
  .agent-gui-node__composer-prompt-input-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.agent-gui-node__composer[data-layout="embedded"]
  .agent-gui-node__composer-textarea {
  min-height: 46px;
  max-height: 96px;
  overflow-y: auto;
}

/* Full-height launch surfaces explicitly assign the available block size.
   Keep that contract opt-in so compact embedded composers continue sizing to
   their content. */
.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"] {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__composer-input-group {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__composer-input-shell {
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__composer-prompt-input-area {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__composer-prompt-input-line {
  align-items: stretch;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__rich-text-editor-surface,
.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__rich-text-editor-content {
  height: 100%;
  min-height: 0;
}

.agent-gui-node__composer[data-layout="embedded"][data-fill-available-height="true"]
  .agent-gui-node__composer-textarea {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-input-shell {
  /* Reserve only the collapsed input height (56px, keep in sync with
     DOCK_COMPOSER_INPUT_MIN_HEIGHT) in the layout flow. A growing draft
     (long paste, attachments) expands the text box upward over the
     conversation instead of enlarging the dock and pushing the message
     stream up. */
  grid-template-rows: 56px auto;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area {
  display: grid;
  /* Keep the input shadow above the following footer row. Both rows otherwise
     share z-index: 1, so the later-painted footer visually clips the shadow. */
  z-index: 2;
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  height: var(--agent-gui-composer-input-height, 56px);
  min-height: 56px;
  max-height: var(--agent-gui-composer-input-max-height, 110px);
  align-items: end;
  align-self: end;
  contain: layout;
  overflow: hidden;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--agent-gui-surface-raised);
  box-shadow: 0 8px 24px rgb(0 0 0 / 4%);
  transition:
    height 160ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area:focus-within,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-attachments="true"] {
  grid-template-rows:
    minmax(0, var(--agent-gui-composer-attachment-height, 0px))
    minmax(40px, 1fr);
  align-items: end;
  padding: 12px;
}

.agent-gui-node__composer[data-layout="dock"]
  [data-testid="agent-gui-composer-attachment-drafts"] {
  margin-bottom: 0;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-images="true"]
  [data-testid="agent-gui-composer-image-drafts"] {
  min-height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-images="true"]
  [data-testid="agent-gui-composer-image-draft"] {
  max-height: 56px;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
  gap: 8px;
  height: calc(var(--agent-gui-composer-text-height, 56px) - 2px);
  min-height: 54px;
  max-height: 118px;
  min-width: 0;
  padding: 0 0 12px;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-attachments="true"]
  .agent-gui-node__composer-prompt-input-line {
  min-height: 40px;
  height: calc(var(--agent-gui-composer-text-height, 56px) - 2px);
  max-height: 118px;
  padding: 4px 0 0;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-send-button,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-stop-button {
  align-self: end;
}

.agent-gui-node__composer-input-shell > * {
  position: relative;
  z-index: 1;
}

.agent-gui-edge-glow,
.agent-gui-node__composer-input-group[data-edge-glow="true"] {
  --agent-gui-star-border-size: 2px;
  --agent-gui-star-border-duration: 5.8s;
  --agent-gui-star-border-color: rgb(248 250 252 / 90%);
  --agent-gui-star-border-mid-color: color-mix(
    in srgb,
    var(--accent-codex) 68%,
    transparent
  );
  --agent-gui-star-border-core-stop: 42%;
  --agent-gui-star-border-fade-stop: 72%;
  --agent-gui-star-border-length: clamp(88px, 18%, 160px);
  --agent-gui-star-border-radius: 16px;
  --agent-gui-star-border-shadow: drop-shadow(
    0 0 8px color-mix(in srgb, var(--accent-codex) 58%, transparent)
  );
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.agent-gui-edge-glow > * {
  position: relative;
  z-index: 1;
}

.agent-gui-node__composer-input-group[data-edge-glow="true"] {
  overflow: hidden;
}

html[data-theme="light"] .agent-gui-edge-glow,
html[data-theme="light"]
  .agent-gui-node__composer-input-group[data-edge-glow="true"] {
  --agent-gui-star-border-color: color-mix(
    in srgb,
    var(--accent-codex) 90%,
    transparent
  );
  --agent-gui-star-border-mid-color: color-mix(
    in srgb,
    var(--accent-codex) 50%,
    transparent
  );
  --agent-gui-star-border-core-stop: 24%;
  --agent-gui-star-border-fade-stop: 58%;
}

.agent-gui-edge-glow::before,
.agent-gui-edge-glow::after,
.agent-gui-node__composer-input-group[data-edge-glow="true"]::before,
.agent-gui-node__composer-input-group[data-edge-glow="true"]::after {
  content: "";
  position: absolute;
  top: calc(var(--agent-gui-star-border-size) / -2);
  left: 0;
  z-index: 0;
  width: var(--agent-gui-star-border-length);
  height: var(--agent-gui-star-border-size);
  border-radius: 999px;
  background: radial-gradient(
    circle,
    var(--agent-gui-star-border-color) 0,
    var(--agent-gui-star-border-mid-color)
      var(--agent-gui-star-border-core-stop),
    transparent var(--agent-gui-star-border-fade-stop)
  );
  filter: var(--agent-gui-star-border-shadow);
  offset-anchor: 50% 50%;
  offset-path: inset(
    calc(var(--agent-gui-star-border-size) / 2) round
      var(--agent-gui-star-border-radius)
  );
  offset-rotate: auto;
  pointer-events: none;
}

.agent-gui-edge-glow::before,
.agent-gui-node__composer-input-group[data-edge-glow="true"]::before {
  animation: agent-gui-star-border-path var(--agent-gui-star-border-duration)
    linear infinite;
}

.agent-gui-edge-glow::after,
.agent-gui-node__composer-input-group[data-edge-glow="true"]::after {
  animation: agent-gui-star-border-path var(--agent-gui-star-border-duration)
    linear infinite;
  animation-delay: calc(var(--agent-gui-star-border-duration) / -2);
}

.workspace-agent-decision-toast__edge-glow.agent-gui-edge-glow {
  --agent-gui-star-border-size: 1px;
  --agent-gui-star-border-color: color-mix(
    in srgb,
    var(--tutti-purple) 62%,
    transparent
  );
  --agent-gui-star-border-mid-color: color-mix(
    in srgb,
    var(--tutti-purple) 28%,
    transparent
  );
  --agent-gui-star-border-core-stop: 18%;
  --agent-gui-star-border-fade-stop: 48%;
  --agent-gui-star-border-length: clamp(180px, 58%, 280px);
  --agent-gui-star-border-radius: 12px;
  --agent-gui-star-border-shadow: drop-shadow(
    0 0 3px color-mix(in srgb, var(--tutti-purple) 30%, transparent)
  );
}

.workspace-agent-decision-toast[data-sonner-toast] {
  --decision-toast-collapse-duration: 320ms;
  --decision-toast-collapse-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --decision-toast-content-fade-duration: 160ms;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  background: transparent;
  padding: 0;
  transform: translateX(calc(100% + 24px)) !important;
  transition:
    transform 360ms var(--decision-toast-collapse-easing),
    opacity 240ms ease,
    width var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    right var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    min-height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    max-height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    padding var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    border-top-width 0ms linear,
    border-radius 120ms ease,
    box-shadow 200ms !important;
}

.workspace-agent-decision-toast[data-sonner-toast][data-mounted="true"] {
  transform: var(--y) translateX(0) !important;
}

.workspace-agent-decision-toast__prompt
  .agent-gui-conversation__interactive-prompt-card {
  border: 0;
  padding: 12px;
  box-shadow: none;
}

.workspace-agent-decision-toast__outcome-card {
  border: 1px solid var(--line-1);
  border-radius: 8px;
  background: var(--background-fronted);
  padding: 10px;
}

.workspace-agent-decision-toast__outcome-card:hover {
  border-color: var(--line-2);
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"] {
  --decision-toast-collapsed-offset: 0px;
  --decision-toast-collapsed-scale: 0.94;
  --y: translateY(
    calc(var(--front-toast-height) + var(--decision-toast-collapsed-offset))
  );
  width: calc(var(--width) * var(--decision-toast-collapsed-scale));
  min-height: 0 !important;
  height: 10px !important;
  max-height: 10px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line-2);
  border-top-width: 0;
  border-radius: 0 0 8px 8px;
  background: var(--background-fronted);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--shadow-elevated) 72%, transparent);
  pointer-events: auto;
  right: calc(
    (var(--width) - (var(--width) * var(--decision-toast-collapsed-scale))) / 2
  ) !important;
  transition:
    transform var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    opacity 240ms ease,
    width var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    right var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    min-height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    max-height var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    padding var(--decision-toast-collapse-duration)
      var(--decision-toast-collapse-easing),
    border-top-width 0ms linear,
    border-radius 0ms linear,
    box-shadow 200ms !important;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  > [data-content],
.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  > [data-content]
  > [data-title],
.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  > [data-content]
  article {
  min-height: 0 !important;
  height: 10px !important;
  max-height: 10px !important;
  overflow: hidden !important;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  > [data-content]
  article {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"][data-index="2"] {
  --decision-toast-collapsed-offset: 8px;
  --decision-toast-collapsed-scale: 0.88;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"][data-index="3"] {
  --decision-toast-collapsed-offset: 16px;
  --decision-toast-collapsed-scale: 0.82;
}

.workspace-agent-decision-toast__edge-glow,
.workspace-agent-decision-toast__close,
.workspace-agent-decision-toast__content {
  transition: opacity var(--decision-toast-content-fade-duration) ease;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  .workspace-agent-decision-toast__edge-glow,
.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  .workspace-agent-decision-toast__close,
.workspace-agent-decision-toast[data-sonner-toast][data-expanded="false"][data-front="false"]
  .workspace-agent-decision-toast__content {
  opacity: 0 !important;
  pointer-events: none !important;
}

.workspace-agent-decision-toast[data-sonner-toast][data-expanded="true"][data-front="false"]
  .workspace-agent-decision-toast__close,
.workspace-agent-decision-toast[data-sonner-toast][data-expanded="true"][data-front="false"]
  .workspace-agent-decision-toast__content {
  opacity: 0;
  animation: workspace-agent-decision-toast-content-fade-in 180ms ease 300ms
    forwards;
}

.workspace-agent-decision-toast[data-sonner-toast][data-removed="true"][data-swipe-out="false"] {
  opacity: 0 !important;
  transform: translateX(calc(100% + 24px)) !important;
}

@keyframes workspace-agent-decision-toast-content-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.workspace-agents-status-panel__activity.agent-gui-edge-glow {
  --agent-gui-star-border-radius: 8px;
  border-color: var(--border-focus);
}

[data-message-center-item-id].agent-gui-edge-glow,
html[data-theme="light"] [data-message-center-item-id].agent-gui-edge-glow {
  --agent-gui-star-border-color: var(--tutti-purple);
  --agent-gui-star-border-mid-color: color-mix(
    in srgb,
    var(--tutti-purple) 48%,
    transparent
  );
  --agent-gui-star-border-radius: 8px;
  --agent-gui-star-border-shadow: drop-shadow(
    0 0 6px color-mix(in srgb, var(--tutti-purple) 58%, transparent)
  );
  overflow: hidden;
}

.agent-gui-node__composer-controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.agent-gui-node__composer-select {
  min-height: 30px;
  border: 1px solid var(--agent-gui-border-subtle);
  border-radius: 6px;
  background: var(--agent-gui-surface-muted);
  color: var(--agent-gui-text-primary);
  font-size: 13px;
  padding: 0 10px;
}

.agent-gui-node__composer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 6px;
  background: var(--agent-gui-surface-muted);
  padding: 0 10px;
  font-size: 13px;
  color: var(--agent-gui-text-primary);
  cursor: pointer;
  transition:
    opacity 120ms ease,
    background 120ms ease;
}

.agent-gui-node__composer-toggle:hover:not(:disabled) {
  background: var(--agent-gui-surface-strong, var(--agent-gui-surface-muted));
}

/* Off state: dim the control so the on/off choice reads at a glance. */
.agent-gui-node__composer-toggle[aria-pressed="false"] {
  opacity: 0.4;
}

.agent-gui-node__composer-toggle:disabled {
  cursor: default;
  opacity: 0.5;
}

.agent-gui-node__composer-queued-prompt-list {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 0;
  max-height: 36px;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-right: 2px;
  transition: max-height 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.agent-gui-node__composer-queued-prompt-panel {
  display: grid;
  min-width: 0;
  gap: 4px;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding: 10px 16px 12px;
  border: 1px solid var(--agent-gui-border-subtle, var(--line-2));
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: var(--background-panel);
  box-shadow: none;
  cursor: default;
}

.agent-gui-node__composer-queued-prompt-panel[data-expandable="true"] {
  cursor: pointer;
}

.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-list {
  max-height: var(--agent-gui-queued-prompt-expanded-height, 280px);
  overflow-y: auto;
}

.agent-gui-node__composer-queued-prompt-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 20px;
}

.agent-gui-node__composer-queued-prompt-expand-cue {
  display: block;
  flex: 0 0 auto;
  color: var(--agent-gui-accent-strong);
  opacity: 0;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.agent-gui-node__composer-queued-prompt-panel:hover
  .agent-gui-node__composer-queued-prompt-expand-cue,
.agent-gui-node__composer-queued-prompt-panel:focus-visible
  .agent-gui-node__composer-queued-prompt-expand-cue,
.agent-gui-node__composer-queued-prompt-panel:focus-within
  .agent-gui-node__composer-queued-prompt-expand-cue,
.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-expand-cue {
  opacity: 1;
}

.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-expand-cue {
  transform: rotate(90deg);
}

.agent-gui-node__composer-queued-prompt-card {
  display: contents;
}

.agent-gui-node__composer-queued-prompt-row {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
}

.agent-gui-node__composer-queued-prompt-row[data-draining="true"] {
  opacity: 0.58;
}

.agent-gui-node__composer-queued-prompt-main {
  display: block;
  width: 100%;
  min-width: 0;
}

.agent-gui-node__composer-queued-prompt-body {
  display: flex;
  width: 100%;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  gap: 6px;
}

.agent-gui-node__composer-queued-prompt-images {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.agent-gui-node__composer-queued-prompt-image {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--agent-gui-border-subtle, var(--line-2));
  border-radius: 4px;
  object-fit: cover;
  background: var(--agent-gui-surface-muted);
}

.agent-gui-node__composer-queued-prompt-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--agent-gui-accent-strong);
  line-height: 20px;
}

.agent-gui-node__composer-queued-prompt-panel[data-queue-status="paused_by_user"]
  .agent-gui-node__composer-queued-prompt-label {
  overflow-wrap: anywhere;
  white-space: normal;
}

.agent-gui-node__composer-queued-prompt-count {
  margin-left: 4px;
  color: var(--agent-gui-accent-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.agent-gui-node__composer-queued-prompt-text {
  position: relative;
  width: 0;
  max-width: 100%;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  font-size: 13px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: clip;
  word-break: break-word;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-text[data-overflowing="true"]::after {
  content: "…";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(90deg, transparent, var(--background-panel) 52%);
  color: var(--agent-gui-text-secondary, var(--text-secondary));
  line-height: 28px;
  text-align: right;
  pointer-events: none;
}

.agent-gui-node__composer-queued-prompt-markdown {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-workspace-agent-markdown-shell="true"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-workspace-agent-markdown="true"] {
  display: block;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Queued rows are single-line previews. Flatten every markdown block
   (lists, code blocks, quotes, headings) to plain inline text — including
   their box styling from the markdown renderer — so the row's nowrap +
   overflow: hidden + "…" overlay can truncate instead of the blocks
   stacking extra lines. Scoped under the text wrapper to outrank the
   renderer's own [&_ol]/[&_pre]-style utilities. */
.agent-gui-node__composer-queued-prompt-text
  .agent-gui-node__composer-queued-prompt-markdown
  :is(p, ul, ol, li, blockquote, pre, h1, h2, h3, h4, h5, h6) {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-text
  .agent-gui-node__composer-queued-prompt-markdown
  pre
  code {
  white-space: nowrap;
}

/* Standalone media, tables, rules, and explicit line breaks cannot collapse
   into one text line — drop them from the preview entirely. MentionPill owns
   its nested image icon, which remains part of the inline mention preview. */
.agent-gui-node__composer-queued-prompt-text
  .agent-gui-node__composer-queued-prompt-markdown
  :is(img, video, table, hr, br, input):not([data-slot="mention-pill"] *) {
  display: none;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"] {
  width: max-content;
  max-width: min(100%, var(--agent-mention-max-width, 16rem));
  color: inherit;
  vertical-align: middle;
}

/* Entity mentions wrap the shared MentionPill in an interactive link. Keep
   that link layout-only so the pill remains the single owner of its visual
   box; otherwise the wrapper's padding and offset create a second pill around
   it and push adjacent queued mentions apart. */
.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token--entity {
  color: inherit;
  top: 0;
  gap: 0;
  max-width: min(100%, var(--agent-mention-max-width, 16rem));
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: inherit;
  transition: none;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token--file,
.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token--entity
  > [data-slot="mention-pill"] {
  top: 0;
  vertical-align: middle;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"].tsh-agent-object-token:hover {
  border-color: transparent;
  background: transparent;
  text-decoration: none;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-mention-kind="workspace-app"].tsh-agent-object-token--entity {
  color: inherit;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"]
  .tsh-agent-object-token__kind,
.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-file-mention="true"]
  [data-agent-mention-app-icon="true"] {
  color: inherit;
}

.agent-gui-node__composer-queued-prompt-markdown
  [data-agent-mention-kind="workspace-app"]
  [data-agent-mention-app-icon="true"]
  .tsh-agent-object-token__kind-icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("./assets/icons/product-filled.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  -webkit-mask-image: url("./assets/icons/product-filled.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 16px 16px;
}

.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-text {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-markdown,
.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-markdown
  [data-workspace-agent-markdown-shell="true"],
.agent-gui-node__composer-queued-prompt-panel[data-expanded="true"]
  .agent-gui-node__composer-queued-prompt-markdown
  [data-workspace-agent-markdown="true"] {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.agent-gui-node__composer-queued-prompt-actions {
  display: inline-flex;
  justify-self: end;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.agent-gui-node__composer-queued-prompt-actions button {
  color: var(--text-secondary);
}

.agent-gui-node__composer-prompt-input-area textarea,
.agent-gui-node__composer-textarea {
  --agent-gui-composer-text-line-height: 24px;
  --agent-gui-composer-text-max-visible-lines: 3.5;
  /* prettier-ignore */
  --agent-gui-composer-text-viewport-height: calc(var(--agent-gui-composer-text-line-height) * var(--agent-gui-composer-text-max-visible-lines));

  width: 100%;
  min-width: 0;
  min-height: 46px;
  max-height: var(--agent-gui-composer-text-viewport-height);
  overflow-y: auto;
  border: 0;
  background: transparent;
  color: var(--agent-gui-text-primary);
  font: inherit;
  font-size: 13px;
  line-height: var(--agent-gui-composer-text-line-height);
  outline: 0;
  padding: 0;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: var(--transparency-hover) transparent;
  scrollbar-gutter: stable;
  -ms-overflow-style: auto;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area
  textarea,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-textarea {
  display: block;
  height: auto;
  min-height: 24px;
  max-height: var(--agent-gui-composer-text-viewport-height);
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding-top: 12px;
  scrollbar-gutter: stable;
  /* Keep the scrollbar persistently visible (not hover/focus-only) once the
     draft overflows the visible viewport: a long pasted/dictated block of
     text must never look like a single visible line with no affordance that
     more content exists below (see: Feishu recvo2ITCPrpcA). */
  scrollbar-width: thin;
  white-space: pre-wrap;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-attachments="true"]
  textarea,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area[data-has-draft-attachments="true"]
  .agent-gui-node__composer-textarea {
  max-height: var(--agent-gui-composer-text-viewport-height);
  padding-top: 0;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-prompt-input-area
  textarea::-webkit-scrollbar,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-textarea::-webkit-scrollbar {
  display: block;
  width: 4px;
  height: 4px;
}

.agent-gui-node__composer-prompt-input-area textarea::-webkit-scrollbar,
.agent-gui-node__composer-textarea::-webkit-scrollbar {
  display: block;
  width: 4px;
  height: 4px;
}

.agent-gui-node__composer-prompt-input-area textarea::-webkit-scrollbar-track,
.agent-gui-node__composer-prompt-input-area textarea::-webkit-scrollbar-corner,
.agent-gui-node__composer-textarea::-webkit-scrollbar-track,
.agent-gui-node__composer-textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.agent-gui-node__composer-prompt-input-area textarea::-webkit-scrollbar-thumb,
.agent-gui-node__composer-textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--transparency-hover);
}

.agent-gui-node__composer-input-shell[data-input-disabled="true"],
.agent-gui-node__composer-textarea[aria-disabled="true"] {
  cursor: not-allowed;
}

.agent-gui-node__composer-textarea.ProseMirror {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.agent-gui-node__composer-textarea.ProseMirror:focus,
.agent-gui-node__composer-textarea.ProseMirror-focused {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.agent-gui-node__composer-textarea p {
  margin: 0;
  font-size: 13px;
  line-height: 24px;
  min-height: 0;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-textarea
  p {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: pre-wrap;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-textarea
  .agent-rich-text-placeholder-node:first-child {
  position: relative;
  display: block;
  width: 100%;
  min-height: 24px;
}

.agent-gui-node__composer-textarea
  p:empty:not(.agent-rich-text-placeholder-node) {
  min-height: 0;
  line-height: 0;
}

.agent-gui-node__composer-textarea
  p:not(.agent-rich-text-placeholder-node):not(:empty) {
  position: relative;
  top: 0;
  line-height: var(--agent-gui-composer-text-line-height);
}

.agent-gui-node__composer-textarea
  p:not(.agent-rich-text-placeholder-node):not(:empty)
  .agent-rich-text-mention-node {
  transform: translateY(-2px);
}

.agent-gui-node__composer-textarea
  .agent-rich-text-placeholder-node:first-child::before {
  content: attr(data-agent-rich-text-placeholder);
  float: left;
  height: 0;
  color: var(--agent-gui-text-tertiary);
  font-size: 13px;
  line-height: 24px;
  pointer-events: none;
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-textarea
  .agent-rich-text-placeholder-node:first-child::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  float: none;
  height: 24px;
  line-height: 24px;
  white-space: nowrap;
}

.agent-gui-node__composer-prompt-input-area textarea::placeholder,
.agent-gui-node__composer-textarea::placeholder {
  color: var(--agent-gui-text-tertiary);
  line-height: 24px;
}

.agent-gui-node__composer-input-shell:focus-within,
.agent-gui-node__composer-input-shell:hover {
  box-shadow: 0 8px 24px rgb(0 0 0 / 6%);
}

.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-input-shell:focus-within,
.agent-gui-node__composer[data-layout="dock"]
  .agent-gui-node__composer-input-shell:hover {
  box-shadow: none;
}

.agent-gui-node__composer-input-shell:focus-within {
  border-color: var(--agent-gui-border-subtle);
}

.agent-gui-node__composer-input-shell-hero {
  border-color: transparent;
  border-radius: 14px;
  box-shadow: none;
}

.agent-gui-node__composer-input-shell-hero:hover,
.agent-gui-node__composer-input-shell-hero:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.agent-gui-node__composer-project-row[data-project-missing="true"] {
  display: none;
}

.agent-gui-node__composer-project-row {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
}

.agent-gui-node__composer-input-group-hero
  .agent-gui-node__composer-project-row {
  padding: 2px 8px;
}

.agent-gui-node__composer-project-controls {
  display: grid;
  grid-template-columns: fit-content(240px);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 0;
}

.agent-gui-node__composer-project-controls:has(
  [data-testid="agent-gui-session-launch-mode"]
) {
  grid-template-columns: fit-content(240px) max-content;
}

.agent-gui-node__composer-project-trigger {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 240px;
}

.agent-gui-node__composer-project-controls
  [data-testid="agent-gui-session-launch-mode"] {
  flex: 0 0 auto;
  max-width: none;
}

.agent-gui-node__composer-provider-select {
  flex: 0 1 auto;
  min-width: 0;
}

.agent-gui-node__composer-handoff-trigger {
  padding-left: 6px;
}

.agent-gui-node__composer-handoff-icon {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  contain: layout paint;
}

.agent-gui-node__composer-handoff-icon[data-playing="true"] {
  color: var(--text-primary);
}

.agent-gui-node__composer-handoff-icon[data-disabled="true"] {
  color: var(--agent-gui-text-tertiary);
}

.agent-gui-node__composer-handoff-icon-static,
.agent-gui-node__composer-handoff-icon-animated {
  width: 18px;
  height: 18px;
  display: block;
}

.agent-gui-node__composer-handoff-icon-static {
  background-color: currentColor;
  opacity: 1;
}

.agent-gui-node__composer-handoff-icon:has(
    .agent-gui-node__composer-handoff-icon-animated[data-active="true"]
  )
  .agent-gui-node__composer-handoff-icon-static {
  opacity: 0;
}

.agent-gui-node__composer-handoff-icon-animated {
  position: absolute;
  inset: 0;
  /* Match the APNG's padded 44px canvas to the static icon's visual size. */
  transform: scale(1.3);
  filter: var(--agent-gui-handoff-animation-filter, none);
  opacity: 0;
  pointer-events: none;
}

.agent-gui-node__composer-handoff-icon-animated[data-active="true"] {
  transform: translateZ(0) scale(1.3);
  opacity: 1;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.agent-gui-node__composer-tutti-mode-icon {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  /* Inherit color from the chip label so the mark tracks every state:
     text-secondary at rest, text-primary on hover, tutti-purple when armed. */
  contain: layout paint;
}

.agent-gui-node__composer-tutti-mode-icon-static,
.agent-gui-node__composer-tutti-mode-icon-animated {
  width: 16px;
  height: 16px;
  display: block;
}

.agent-gui-node__composer-tutti-mode-icon-static {
  background-color: currentColor;
  opacity: 1;
}

.agent-gui-node__composer-tutti-mode-icon:has(
    .agent-gui-node__composer-tutti-mode-icon-animated[data-active="true"]
  )
  .agent-gui-node__composer-tutti-mode-icon-static {
  opacity: 0;
}

.agent-gui-node__composer-tutti-mode-icon-animated {
  position: absolute;
  inset: 0;
  /* Match the 16px static mark exactly; the APNG canvas already pads the
    snapping hand and bursting stars, so no enlargement is applied. */
  opacity: 0;
  pointer-events: none;
}

.agent-gui-node__composer-tutti-mode-icon-animated[data-active="true"] {
  transform: translateZ(0);
  opacity: 1;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__composer-tutti-mode-icon-animated {
    display: none;
  }

  .agent-gui-node__composer-tutti-mode-icon-static {
    opacity: 1 !important;
  }
}

.agent-gui-node__composer-handoff-icon[data-disabled="true"]
  .agent-gui-node__composer-handoff-icon-animated {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__composer-handoff-icon-animated {
    display: none;
  }

  .agent-gui-node__composer-handoff-icon-static {
    opacity: 1 !important;
  }
}

:root[data-theme="dark"] .agent-gui-node__composer-handoff-icon-animated {
  --agent-gui-handoff-animation-filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])
    .agent-gui-node__composer-handoff-icon-animated {
    --agent-gui-handoff-animation-filter: brightness(0) invert(1);
  }
}

.agent-gui-node__composer-handoff-menu-content [data-slot="select-item"] {
  padding-right: 0.5rem;
}

.agent-gui-node__composer-handoff-menu-content
  [data-slot="select-item"]
  > span:first-child {
  display: none;
}

.agent-gui-node__composer-prompt-tips {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
}

.agent-gui-node__composer-prompt-tip {
  --agent-gui-prompt-tip-count: 1;
  --agent-gui-prompt-tip-cycle-duration: 5200ms;
  display: block;
  box-sizing: border-box;
  width: min(620px, 100%);
  max-width: 100%;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  color: var(--agent-gui-text-tertiary);
  font-size: 11px;
  line-height: 18px;
  text-align: right;
}

.agent-gui-node__composer-prompt-tip-track {
  display: block;
  min-width: 0;
  animation: agent-gui-node-prompt-tip-in 180ms ease backwards;
}

.agent-gui-node__composer-prompt-tip[data-rotating="true"]
  .agent-gui-node__composer-prompt-tip-track {
  animation: agent-gui-node-prompt-tip-track
    var(--agent-gui-prompt-tip-cycle-duration)
    steps(var(--agent-gui-prompt-tip-count)) infinite;
  will-change: transform;
}

.agent-gui-node__layout[data-agent-gui-active="false"]
  .agent-gui-node__composer-prompt-tip-track,
.agent-gui-node__layout[data-agent-gui-active="false"]
  .agent-gui-node__composer-prompt-tip-item {
  animation: none;
  will-change: auto;
}

.agent-gui-node__composer-prompt-tip-item {
  display: block;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__composer-prompt-tip[data-rotating="true"]
  .agent-gui-node__composer-prompt-tip-item {
  animation: agent-gui-node-prompt-tip-cycle 5200ms
    cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.agent-gui-node__composer-prompt-tip-prefix {
  color: var(--agent-gui-text-tertiary);
  font-weight: 500;
}

.agent-gui-node__composer-prompt-tip-label {
  color: var(--agent-gui-text-tertiary);
  font-weight: 400;
}

.agent-gui-node__composer-prompt-tip-text {
  color: var(--agent-gui-text-tertiary);
  font-weight: 450;
}

.agent-gui-node__composer-prompt-tip-tooltip {
  max-width: min(560px, calc(100vw - 32px));
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

@keyframes agent-gui-node-prompt-tip-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

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

@keyframes agent-gui-node-prompt-tip-track {
  to {
    transform: translateY(calc(var(--agent-gui-prompt-tip-count) * -18px));
  }
}

@keyframes agent-gui-node-prompt-tip-cycle {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }

  4%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-node__composer-prompt-tip-track,
  .agent-gui-node__composer-prompt-tip-item,
  .agent-gui-node__composer-prompt-tip[data-rotating="true"]
    .agent-gui-node__composer-prompt-tip-track,
  .agent-gui-node__composer-prompt-tip[data-rotating="true"]
    .agent-gui-node__composer-prompt-tip-item {
    animation: none;
  }
}

.agent-gui-node__composer-footer {
  display: flex;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 4px;
  flex-wrap: wrap;
  padding-top: 0;
}

.agent-gui-node__composer[data-layout="dock"] .agent-gui-node__composer-footer {
  position: relative;
  /* The base rule's width: 100% keeps the parent's content width, so the
     negative margins only shift the row left instead of widening it: the
     right edge falls 24px short of the composer edge and strands the model
     dropdown far from the send button above. width: auto lets
     justify-self: stretch + the negative margins span the full row. */
  width: auto;
  margin: 0 -12px -12px;
  padding: 0 14px 12px;
  background: var(--agent-gui-session-flow-background);
}

.agent-gui-node__composer-footer-left,
.agent-gui-node__composer-footer-right {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.agent-gui-node__composer-footer-left {
  gap: 8px;
}

.agent-gui-node__composer-footer-accessory {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.agent-gui-node__composer-footer-accessory:empty {
  display: none;
}

.agent-gui-node__composer-footer-right {
  flex: 1 1 auto;
  gap: 2px;
  margin-left: auto;
  justify-content: flex-end;
  overflow: hidden;
}

.agent-gui-node__composer-footer-right
  .agent-gui-node__composer-menu-trigger
  > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: 0;
}

.agent-gui-node__composer-menu-trigger {
  display: inline-flex;
  min-width: 0;
  min-height: 28px;
  max-width: min(100%, 240px);
  align-items: center;
  gap: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0 8px;
  color: var(--agent-gui-text-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

/* Plan-task assignment rows space items with the row gap instead of each
   trigger's own horizontal padding. */
.tutti-plan-task-assignment-row .agent-gui-node__composer-menu-trigger {
  padding-right: 0;
  padding-left: 0;
}

.agent-gui-node__composer-menu-item > span:last-child {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.agent-gui-node__composer-menu-item > span:last-child > span {
  width: 100%;
  min-width: 0;
}

.agent-gui-node__composer-menu-trigger[data-agent-plan-mode-badge="true"],
.agent-gui-node__composer-menu-trigger[data-agent-plan-mode-badge="true"]:hover:not(
    :disabled
  ) {
  color: var(--state-warning);
}

.agent-gui-node__composer-menu-trigger[data-agent-goal-badge="true"],
.agent-gui-node__composer-menu-trigger[data-agent-goal-badge="true"]:hover:not(
    :disabled
  ) {
  color: var(--tutti-purple);
}

/* Active Tutti Mode chip: icon (bg-current) and label both go tutti-purple. */
.agent-gui-node__composer-menu-trigger[data-agent-tutti-mode-active="true"],
.agent-gui-node__composer-menu-trigger[data-agent-tutti-mode-active="true"]:hover:not(
    :disabled
  ) {
  color: var(--tutti-purple);
}
.agent-gui-node__composer-menu-trigger:hover:not(:disabled) {
  color: var(--agent-gui-text-primary);
}

.agent-gui-node__composer-menu-trigger[data-agent-model-reasoning-trigger="true"] {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: min(100%, 180px);
  overflow: hidden;
}

.agent-gui-node__composer-menu-trigger[data-agent-model-reasoning-trigger="true"]:hover:not(
    :disabled
  ) {
  color: var(--agent-gui-text-secondary);
}

.agent-gui-node__composer-menu-trigger[data-agent-model-reasoning-trigger="true"]
  > span:first-child {
  flex: 0 1 auto;
}

.agent-gui-node__composer-menu-trigger[data-agent-model-reasoning-trigger="true"]
  > svg {
  transition: transform 200ms ease;
}

.agent-gui-node__composer-menu-trigger[data-agent-model-reasoning-trigger="true"][data-state="open"]
  > svg {
  transform: rotate(180deg);
}

.agent-gui-node__composer-menu-trigger[data-permission-tone="accent"],
.agent-gui-node__composer-menu-trigger[data-permission-tone="accent"]:hover:not(
    :disabled
  ),
.agent-gui-node__composer-menu-trigger[data-permission-tone="accent"] > span,
.agent-gui-node__composer-menu-trigger[data-permission-tone="accent"] > svg {
  color: var(--tutti-purple);
}

.agent-gui-node__composer-menu-trigger[data-permission-tone="success"],
.agent-gui-node__composer-menu-trigger[data-permission-tone="success"]:hover:not(
    :disabled
  ),
.agent-gui-node__composer-menu-trigger[data-permission-tone="success"] > span,
.agent-gui-node__composer-menu-trigger[data-permission-tone="success"] > svg {
  color: var(--agent-gui-success);
}

.agent-gui-node__composer-menu-trigger[data-permission-tone="warning"],
.agent-gui-node__composer-menu-trigger[data-permission-tone="warning"]:hover:not(
    :disabled
  ),
.agent-gui-node__composer-menu-trigger[data-permission-tone="warning"] > span,
.agent-gui-node__composer-menu-trigger[data-permission-tone="warning"] > svg {
  color: var(--agent-gui-warning) !important;
}

.agent-gui-node__composer-menu-trigger:focus,
.agent-gui-node__composer-menu-trigger:focus-visible {
  outline: none;
  box-shadow: none;
}

.agent-gui-node__composer-menu-trigger:disabled {
  cursor: not-allowed;
  color: var(--agent-gui-text-tertiary);
  opacity: 0.6;
}

.agent-gui-node__composer-menu-trigger:disabled:hover {
  cursor: not-allowed;
  color: var(--agent-gui-text-tertiary);
}

.agent-gui-node__composer-menu-content {
  --accent: var(--tutti-purple);
  --agent-gui-text-primary: var(--text-primary);
  --agent-gui-text-secondary: var(--text-secondary);
  --agent-gui-text-tertiary: var(--text-tertiary);
  --agent-gui-surface-raised: var(--background-fronted);
  --agent-gui-border-subtle: var(--line-2);
  --agent-gui-package-accent: var(--tutti-purple);
  --agent-gui-package-accent-strong: var(--tutti-purple);
  --agent-gui-package-success: var(--state-success);
  --agent-gui-package-warning: var(--state-warning);
  --agent-gui-package-danger: var(--state-danger);
  --agent-gui-accent: var(--agent-gui-package-accent);
  --agent-gui-accent-strong: var(--agent-gui-package-accent-strong);
  --agent-gui-success: var(--agent-gui-package-success);
  --agent-gui-warning: var(--agent-gui-package-warning);
  --agent-gui-danger: var(--agent-gui-package-danger);
  border: 1px solid var(--agent-gui-border-subtle);
  border-radius: 8px;
  padding: 4px;
  background: var(--agent-gui-surface-raised);
  color: var(--agent-gui-text-primary);
  max-height: min(
    360px,
    var(--radix-dropdown-menu-content-available-height, 360px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-gui-node__composer-menu-content
  [data-workspace-user-project-action-separator="true"] {
  margin-inline: 12px;
  background: var(--agent-gui-border-subtle, var(--line-2));
}

.agent-gui-node__composer-menu-label {
  padding: 4px 10px 2px;
  color: var(--agent-gui-text-secondary);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
}

.agent-gui-node__composer-menu-item {
  min-height: 28px;
  border-radius: 6px;
  padding-block: 4px;
  padding-inline: 10px 28px;
  color: var(--agent-gui-text-primary);
  font-size: 13px;
  line-height: 1.2;
}

.agent-gui-node__composer-menu-item[data-disabled] {
  cursor: not-allowed;
  color: var(--text-disabled);
  opacity: 0.5;
}

.agent-gui-node__composer-menu-content[data-agent-composer-settings-layout="model-primary"]
  .agent-gui-node__composer-menu-item,
.agent-gui-node__composer-menu-content[data-agent-composer-settings-layout="model-submenu"]
  .agent-gui-node__composer-menu-item {
  padding-inline: 8px 10px;
}

.agent-gui-node__composer-menu-item-meta {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-gui-node__composer-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 6px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--agent-gui-success) 10%, transparent);
  color: var(--agent-gui-success);
  font-size: 13px;
  font-weight: 600;
}

.agent-gui-node__composer-send-button {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: var(--text-primary);
  color: var(--text-inverted);
  padding: 0;
  transition:
    transform 140ms ease,
    background-color 140ms ease,
    color 140ms ease;
}

.agent-gui-node__composer-send-button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--text-primary);
  color: var(--text-inverted);
}

.agent-gui-node__composer-send-button:disabled {
  background: var(--text-disabled);
  color: var(--white-stationary);
  box-shadow: none;
}

.agent-gui-node__composer-send-button[data-state="loading"],
.agent-gui-node__composer-send-button[data-state="stopping"] {
  border: 0;
  background: var(--transparency-block);
  color: var(--text-primary);
  box-shadow: none;
}

.agent-gui-node__composer-send-button[data-state="interrupt"] {
  background: rgb(24 24 27);
  color: #ffffff;
}

.agent-gui-node__composer-send-button[data-state="interrupt"]:hover:not(
    :disabled
  ) {
  background: rgb(9 9 11);
}

.agent-gui-node__provider-rail {
  display: flex;
  width: 52px;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 2px 0 16px;
  overflow-x: hidden;
  overflow-y: auto;
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 24px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 24px),
    transparent 100%
  );
  -webkit-app-region: no-drag;
}

.agent-gui-node__provider-rail-footer {
  display: flex;
  width: 52px;
  min-width: 0;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  -webkit-app-region: no-drag;
}

.agent-gui-node__provider-rail-config-footer {
  padding-bottom: 4px;
}

.agent-gui-node__provider-rail-config-footer:last-child {
  padding-bottom: 12px;
}

.agent-gui-node__provider-rail-sidebar-footer {
  padding-bottom: 0;
}

.agent-gui-node__provider-rail-sidebar-footer:last-child {
  padding-bottom: 12px;
}

.agent-gui-node__provider-rail-sidebar-footer
  + .agent-gui-node__provider-rail-config-footer {
  margin-top: 8px;
}

.agent-gui-node__provider-rail-config-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  padding: 0;
  transition:
    background 120ms ease,
    color 120ms ease;
  -webkit-app-region: no-drag;
}

.agent-gui-node__provider-rail-config-button:hover:not(:disabled),
.agent-gui-node__provider-rail-config-button[data-state="open"] {
  background: var(--transparency-hover);
  color: var(--text-primary);
}

.agent-gui-node__provider-rail-config-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--border-focus);
}

.agent-gui-node__provider-rail-config-button:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.agent-gui-node__provider-rail-tile {
  position: relative;
  display: grid;
  width: 52px;
  min-width: 0;
  grid-template-rows: 32px;
  gap: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  transition:
    color 120ms ease,
    margin 140ms ease,
    opacity 140ms ease;
  -webkit-app-region: no-drag;
}

.agent-gui-node__provider-rail-tile[draggable="true"] {
  cursor: grab;
}

.agent-gui-node__provider-rail-tile[draggable="true"]:active {
  cursor: grabbing;
}

.agent-gui-node__provider-rail-tile + .agent-gui-node__provider-rail-tile {
  margin-top: 12px;
}

.agent-gui-node__provider-rail-tile-label {
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.agent-gui-node__provider-rail-tile:has(
  + .agent-gui-node__provider-rail-separator
) {
  padding-bottom: 0;
}

.agent-gui-node__provider-rail-tile:hover:not(:disabled) {
  color: var(--text-secondary);
}

.agent-gui-node__provider-rail-tile:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.agent-gui-node__provider-rail-tile[data-dragging="true"] {
  opacity: 0.42;
}

.agent-gui-node__provider-rail-tile[data-drag-over="before"] {
  margin-top: 24px;
}

.agent-gui-node__provider-rail-tile[data-drag-over="after"] {
  margin-bottom: 12px;
}

.agent-gui-node__provider-rail-tile[data-drag-over="before"]::before,
.agent-gui-node__provider-rail-tile[data-drag-over="after"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-primary, var(--tutti-purple));
  pointer-events: none;
}

.agent-gui-node__provider-rail-tile[data-drag-over="before"]::before {
  top: -13px;
}

.agent-gui-node__provider-rail-tile[data-drag-over="after"]::after {
  bottom: -13px;
}

.agent-gui-node__provider-rail-separator {
  display: block;
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  margin-block: 12px;
  background: var(--line-2);
}

.agent-gui-node__provider-rail-tile[data-loading="true"] {
  cursor: progress;
}

.agent-gui-node__provider-rail-avatar {
  --agent-gui-avatar-badge-offset: -4px;
  --agent-gui-avatar-badge-size: 16px;

  position: relative;
  box-sizing: border-box;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary);
  transition:
    border-color 140ms ease,
    outline-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}

.agent-gui-node__provider-rail-tile:not([data-selected="true"])
  .agent-gui-node__provider-rail-avatar {
  opacity: 1;
}

/* "Beta" tag straddling the selected icon's stroke: its centerline sits on
   the avatar's outer edge (the stroke is centered there with a -1px
   outline offset), horizontally centered on the icon. */
.agent-gui-node__provider-rail-beta-badge {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 26px;
  height: auto;
  pointer-events: none;
}

.agent-gui-node__provider-rail-tile:hover:not(:disabled)
  .agent-gui-node__provider-rail-avatar {
  background: var(--fill-secondary);
  color: var(--text-secondary);
}

.agent-gui-node__provider-rail-tile[data-selected="true"] {
  color: var(--text-primary);
}

/* Selected stroke floats 1px outside the 28px icon container: a 2px outline
   centered on the avatar's outer edge (-1px offset) leaves exactly 1px of
   transparent gap between the container and the stroke's inner edge. */
.agent-gui-node__provider-rail-tile[data-selected="true"]
  .agent-gui-node__provider-rail-avatar {
  border-color: transparent;
  background: color-mix(in srgb, var(--background-fronted) 80%, white);
  outline: 2px solid var(--brand-primary, var(--tutti-purple));
  outline-offset: -1px;
  color: var(--brand-primary, var(--tutti-purple));
}

.agent-gui-node__provider-rail-avatar-icon {
  width: 18px;
  height: 18px;
}

.agent-gui-node__provider-rail-avatar-image {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
}

.agent-gui-node__agent-avatar {
  position: relative;
}

.agent-gui-node__agent-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.agent-gui-node__agent-avatar-badge {
  position: absolute;
  right: var(--agent-gui-avatar-badge-offset, -4px);
  bottom: var(--agent-gui-avatar-badge-offset, -4px);
  box-sizing: border-box;
  display: grid;
  width: var(--agent-gui-avatar-badge-size, 16px);
  height: var(--agent-gui-avatar-badge-size, 16px);
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--background-fronted);
  border-radius: 999px;
  background: var(--background-fronted);
  pointer-events: none;
  font-size: 9px;
  line-height: 1;
}

.agent-gui-node__agent-avatar-badge-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-gui-node__provider-rail-tile[data-loading="true"]
  .agent-gui-node__provider-rail-avatar {
  background: linear-gradient(
    90deg,
    var(--fill-tertiary),
    var(--fill-secondary),
    var(--fill-tertiary)
  );
  background-size: 200% 100%;
  animation: agent-gui-provider-target-loading 1.2s ease-in-out infinite;
}

.agent-gui-provider-manager-tile[data-dragging="true"] {
  opacity: 0.45;
}

.agent-gui-provider-manager-drop-zone {
  transition:
    background-color 140ms ease,
    box-shadow 140ms ease;
}

.agent-gui-provider-manager-drop-zone[data-drop-active="true"] {
  background: color-mix(
    in srgb,
    var(--brand-primary, var(--tutti-purple)) 7%,
    transparent
  );
  box-shadow: inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--brand-primary, var(--tutti-purple)) 42%,
      transparent
    );
}

.agent-gui-provider-manager-drop-zone[data-drop-blocked="true"] {
  background: color-mix(in srgb, var(--state-danger) 6%, transparent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--state-danger) 28%, transparent);
}

.agent-gui-provider-manager-tile
  > :not(.agent-gui-provider-manager-drop-indicator) {
  transition: translate 140ms ease;
}

.agent-gui-provider-manager-tile[data-drag-over="before"]
  > :not(.agent-gui-provider-manager-drop-indicator) {
  translate: 8px 0;
}

.agent-gui-provider-manager-tile[data-drag-over="after"]
  > :not(.agent-gui-provider-manager-drop-indicator) {
  translate: -8px 0;
}

.agent-gui-provider-manager-drop-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 999px;
  background: var(--brand-primary, var(--tutti-purple));
  pointer-events: none;
}

.agent-gui-provider-manager-drop-indicator[data-position="before"] {
  left: -9px;
}

.agent-gui-provider-manager-drop-indicator[data-position="after"] {
  right: -9px;
}

.agent-gui-provider-manager-tile[data-long-press="true"] {
  animation: agent-gui-provider-manager-long-press 550ms linear;
}

.agent-gui-provider-manager-tile[data-editing="true"] {
  transform-origin: 50% 42%;
  animation: agent-gui-provider-manager-wiggle 180ms ease-in-out infinite
    alternate;
}

.agent-gui-provider-manager-tile[data-editing="true"]:nth-child(2n) {
  animation-delay: -90ms;
  animation-direction: alternate-reverse;
}

.agent-gui-provider-manager-tile[data-editing="true"][data-drag-active="true"] {
  animation: none;
}

@keyframes agent-gui-provider-manager-wiggle {
  0% {
    transform: rotate(-1.2deg) translateY(0);
  }

  100% {
    transform: rotate(1.2deg) translateY(-0.5px);
  }
}

@keyframes agent-gui-provider-manager-long-press {
  from {
    scale: 1;
  }

  to {
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-provider-manager-tile[data-editing="true"] {
    animation: none;
  }
}

@keyframes agent-gui-provider-target-loading {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.agent-gui-node__empty-hero {
  /* Center one shared frame instead of each state's intrinsic content height.
     Wrapped titles, composer controls, and readiness actions then grow down. */
  --agent-gui-empty-hero-anchor-block-size: 398px;

  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 24px clamp(32px, 4vw, 48px) 40px;
}

.agent-gui-node__empty-hero-body {
  --agent-gui-empty-hero-gap: 24px;

  display: grid;
  width: min(820px, 100%);
  min-width: 0;
  block-size: var(--agent-gui-empty-hero-anchor-block-size);
  align-content: start;
  gap: var(--agent-gui-empty-hero-gap);
  justify-items: center;
}

.agent-gui-node__empty-hero-icon-slot {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
}

/* The coverflow carousel needs a wider, taller stage than the single-icon
   slot; keep it centered in the hero column. */
.agent-gui-node__empty-hero-icon-slot:has(
  > .agent-gui-node__empty-hero-carousel
),
.agent-gui-node__empty-hero-icon-slot[data-carousel-placeholder="true"] {
  width: min(400px, 100%);
  min-width: 320px;
  height: 112px;
}

.agent-gui-node__empty-hero-carousel-stage {
  position: relative;
  top: -24px;
  width: 100%;
  min-height: 100%;
}

.agent-gui-node__empty-hero-carousel-layer {
  position: absolute;
  z-index: 1;

  --agent-gui-hero-carousel-scale: 0.8;

  /* The stage measures the body's placeholder slot and pins the layer to it;
     the calc()/50% fallbacks remain only as the first-paint estimate. */
  top: var(--agent-gui-hero-carousel-slot-top, calc(50% - 210px));
  left: var(--agent-gui-hero-carousel-slot-left, 50%);
  width: round(nearest, min(400px, calc(100% - 64px)), 1px);
  min-width: 320px;
  transform: translateX(-50%) scale(var(--agent-gui-hero-carousel-scale));
  transform-origin: center center;
}

@media (max-height: 639px) {
  .agent-gui-node__empty-hero-carousel-layer {
    --agent-gui-hero-carousel-scale: 0.64;
    top: calc(
      var(--agent-gui-hero-carousel-slot-top, calc(50% - 210px)) - 16px
    );
  }
}

.agent-gui-node__empty-hero-carousel-placeholder {
  width: min(400px, 100%);
  min-width: 320px;
  height: 112px;
  flex: 0 0 auto;
}

/* Keep the overlayed carousel interactive while the ready/gated body below it
   changes independently. */
.agent-gui-node__empty-hero-carousel-layer
  > .agent-gui-node__empty-hero-carousel {
  pointer-events: auto;
}

.agent-gui-node__empty-hero-icon-effect {
  --agent-gui-avatar-badge-offset: -5px;
  --agent-gui-avatar-badge-size: 18px;

  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  animation: agent-gui-empty-hero-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms
    backwards;
}

/* Empty-hero agent carousel ("All" tab): a three.js ring of same-sized agent
   records (see agentGuiHeroCarouselScene.ts). Records farther around the ring
   genuinely shrink and fade with perspective; visuals live on the canvas,
   while visually-hidden buttons keep the switcher reachable by keyboard,
   screen readers, and DOM tests. */
.agent-gui-node__empty-hero-carousel {
  position: relative;
  width: 100%;
  height: 112px;
  outline: none;
  touch-action: pan-y;
  animation: agent-gui-empty-hero-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms
    backwards;
}

/* Reference VinylPlayer structure, scaled from 440px to the 112px hero slot. */
.agent-gui-vinyl-player {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 440px;
  height: 440px;
  overflow: visible;
  border-radius: 40px;
  background: transparent;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.25);
  transform-origin: center;
}

.agent-gui-vinyl-player__chassis {
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 0;
  width: 440px;
  height: 416px;
  object-fit: fill;
  pointer-events: none;
}

/* "Beta" wordmark SVG tucked into the turntable's bottom-right corner, tilted
   30° to the left. The player renders at 0.25 (root) × 0.8 (hero layer) = 0.2
   on screen, so the artwork is counter-scaled to net a readable on-screen size;
   position lengths stay in the 440px local space (× 0.2 on screen). */
.agent-gui-vinyl-player__beta {
  position: absolute;
  top: 380px;
  left: 372px;
  z-index: 3;
  width: 113px;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-30deg) scale(1.9);
  transform-origin: center;
  animation: agent-gui-vinyl-player-beta-slap 420ms
    cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Sticker "slap": drops in oversized and transparent, then snaps down to size
   with a slight overshoot so it lands like a decal being pressed on. Keep the
   translate/rotate in every keyframe since transform is a single property. */
@keyframes agent-gui-vinyl-player-beta-slap {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-30deg) scale(4.2);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-30deg) scale(1.7);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-30deg) scale(1.9);
  }
}

.agent-gui-vinyl-player__indicator {
  position: absolute;
  top: 32px;
  left: 32px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #c0c2c4;
  border-radius: 50%;
  background: #9ea0a3;
  box-shadow:
    0 2px 4px rgb(0 0 0 / 10%),
    inset 0 1px 2px rgb(255 255 255 / 80%);
  display: none;
}

.agent-gui-vinyl-player__indicator-light {
  display: flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid #384a3c;
  border-radius: 50%;
  background: #4b6652;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 40%);
}

.agent-gui-vinyl-player__indicator-light--playing {
  border-color: #86f0a6;
  background: #5edb84;
  box-shadow:
    0 0 12px rgb(74 222 128 / 70%),
    inset 0 1px 4px rgb(255 255 255 / 60%);
}

.agent-gui-vinyl-player__indicator-light > span {
  width: 1px;
  height: 8px;
  background: rgb(255 255 255 / 80%);
}

.agent-gui-vinyl-player__platter {
  position: absolute;
  top: 29px;
  left: 24px;
  display: grid;
  width: 370px;
  height: 370px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.agent-gui-vinyl-player__platter-inner {
  display: grid;
  width: 340px;
  height: 340px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.agent-gui-vinyl-player__record {
  position: relative;
  display: grid;
  width: 326px;
  height: 326px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at center,
      rgb(255 255 255 / 9%) 0 2px,
      rgb(0 0 0 / 0%) 2px 8px
    ),
    #111;
  box-shadow: 0 4px 15px rgb(0 0 0 / 60%);
  animation: agent-gui-vinyl-player-record-spin 4s linear infinite paused;
}

.agent-gui-vinyl-player__record--playing {
  animation-play-state: running;
}

@keyframes agent-gui-vinyl-player-record-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-vinyl-player__record {
    animation: none;
  }
}

.agent-gui-vinyl-player__groove,
.agent-gui-vinyl-player__reflection,
.agent-gui-vinyl-player__label,
.agent-gui-vinyl-player__hole {
  position: absolute;
  border-radius: 50%;
}

.agent-gui-vinyl-player__groove {
  border: 2px solid rgb(255 255 255 / 12%);
}

.agent-gui-vinyl-player__reflection {
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgb(255 255 255 / 15%) 45deg,
    transparent 90deg,
    transparent 180deg,
    rgb(255 255 255 / 15%) 225deg,
    transparent 270deg
  );
  mix-blend-mode: screen;
  opacity: 0.35;
}

.agent-gui-vinyl-player__label {
  display: grid;
  width: 144px;
  height: 144px;
  place-items: center;
  overflow: hidden;
  background: #2a2a2a;
  box-shadow: inset 0 0 12px rgb(0 0 0 / 60%);
}

.agent-gui-vinyl-player__label > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-gui-vinyl-player__tonearm {
  position: absolute;
  top: -20px;
  right: 14px;
  z-index: 4;
  width: 140px;
  height: 400px;
  object-fit: contain;
  pointer-events: none;
  transform: rotate(15deg);
  transform-origin: 50% 8%;
}

.agent-gui-vinyl-player__hole {
  width: 12px;
  height: 12px;
  border: 0.5px solid #717171;
  background: #e0e2e5;
  box-shadow: inset 0 1px 4px rgb(0 0 0 / 80%);
}

.agent-gui-vinyl-player__power-control {
  position: absolute;
  bottom: 32px;
  left: 32px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.agent-gui-vinyl-player__lever {
  display: block;
  width: 16px;
  height: 44px;
  border: 1px solid #111;
  border-radius: 10px;
  background: linear-gradient(90deg, #1a1a1a, #3a3a3a, #1a1a1a);
  box-shadow: 4px 2px 8px rgb(0 0 0 / 40%);
  transform-origin: bottom;
}

.agent-gui-vinyl-player__power-label {
  color: #3f4144;
  font-size: 10px;
  font-weight: 700;
}

.agent-gui-vinyl-player__tone-control {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: none;
  align-items: center;
  gap: 12px;
  color: #65676b;
  font-size: 10px;
  font-weight: 700;
}

.agent-gui-vinyl-player__tone-control > span:first-child {
  width: 30px;
  height: 52px;
  border: 1px solid #a0a2a4;
  border-radius: 6px;
  background: linear-gradient(#b0b2b5, #ced0d3);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 30%);
}

/* Match the WebGL carousel's historical BADGE_DIAMETER (0.36) and
   BADGE_OFFSET (0.4): the selected DOM player must keep the same owner-marker
   geometry as the records that move into and out of the center slot. */
.agent-gui-vinyl-player__owner-badge {
  position: absolute;
  right: -8%;
  bottom: -8%;
  z-index: 5;
  box-sizing: border-box;
  display: grid;
  width: 36%;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 8px solid var(--background-fronted);
  border-radius: 999px;
  background: var(--background-fronted);
  font-size: 18px;
  line-height: 1;
}

.agent-gui-node__empty-hero-carousel:has(:focus-visible) {
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px var(--tutti-purple);
}

.agent-gui-node__empty-hero-carousel-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 120ms ease-out;

  /* Fade-out mask: the horizontal fade runs edge to edge so there is no dead
     band beside the integer-aligned canvas buffer. The vertical band melts
     tiles sinking down the wheel instead of clipping them at the bottom. */
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 20%,
      #000 80%,
      transparent 100%
    ),
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-composite: intersect;
  mask-size: 100% 100%;
  mask-position: center;
}

.agent-gui-node__empty-hero-carousel[data-icons-ready="true"]
  > .agent-gui-node__empty-hero-carousel-canvas {
  opacity: 1;
}

.agent-gui-node__empty-hero-carousel-item {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.agent-gui-node__empty-hero-title {
  margin: 0;
  text-align: center;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  animation: agent-gui-empty-hero-enter 280ms cubic-bezier(0.16, 1, 0.3, 1)
    110ms backwards;
}

.agent-gui-node__empty-hero-provider {
  font-family: Merriweather, Georgia, serif;
  font-style: italic;
  font-weight: 700;
}

.agent-gui-node__empty-provider-gate {
  max-width: 520px;
  gap: 8px;
}

/* Gate gap is 8px; add 16px so the icon-to-title spacing is 24px. */
.agent-gui-node__empty-provider-gate > .agent-gui-node__empty-hero-icon-effect,
.agent-gui-node__empty-provider-gate > .agent-gui-node__empty-hero-carousel,
.agent-gui-node__empty-provider-gate
  > .agent-gui-node__empty-hero-carousel-placeholder {
  margin-bottom: 16px;
}

/* Keep the gate's carousel the same width as the ready hero's so the ring
   doesn't jump when selection lands on an unavailable agent. */
.agent-gui-node__empty-provider-gate > .agent-gui-node__empty-hero-carousel {
  max-width: min(400px, 100%);
}

.agent-gui-node__empty-provider-gate-description {
  max-width: 420px;
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
  animation: agent-gui-empty-hero-enter 280ms cubic-bezier(0.16, 1, 0.3, 1)
    150ms backwards;
}

.agent-gui-node__empty-provider-gate-status {
  min-height: 20px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 20px;
  animation: agent-gui-empty-hero-enter 280ms cubic-bezier(0.16, 1, 0.3, 1)
    170ms backwards;
}

.agent-gui-node__empty-provider-gate-action {
  /* Container gap is 8px; add 16px so the description-to-button spacing is 24px. */
  margin-top: 16px;
  animation: agent-gui-empty-hero-enter 300ms cubic-bezier(0.16, 1, 0.3, 1)
    190ms backwards;
}

.agent-gui-node__empty-hero-provider-select {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  vertical-align: baseline;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  gap: 0.08em;
  line-height: inherit;
  letter-spacing: inherit;
  box-shadow: none;
  white-space: nowrap;
}

.agent-gui-node__empty-hero-provider-select:hover,
.agent-gui-node__empty-hero-provider-select:focus,
.agent-gui-node__empty-hero-provider-select:focus-visible,
.agent-gui-node__empty-hero-provider-select[data-state="open"] {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.agent-gui-node__empty-hero-provider-select > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 0.08em;
  margin-left: 2px;
  opacity: 0.72;
  stroke-width: 3px;
}

.agent-gui-node__empty-provider-gate-action:disabled {
  border-color: var(--line-2);
  background: var(--fill-tertiary);
  color: var(--text-disabled);
  cursor: not-allowed;
  opacity: 0.65;
}

.agent-gui-node__empty-hero-body > .agent-gui-node__composer-hero {
  animation: agent-gui-empty-hero-enter 300ms cubic-bezier(0.16, 1, 0.3, 1)
    180ms backwards;
}

.agent-gui-node__empty-hero-suggestions {
  position: relative;
  display: grid;
  width: min(760px, 100%);
  margin: 0 auto;
  gap: 12px;
  justify-items: stretch;
  animation: agent-gui-empty-hero-enter 300ms cubic-bezier(0.16, 1, 0.3, 1)
    240ms backwards;
}

.agent-gui-node__empty-hero-suggestions-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.agent-gui-node__empty-hero-suggestions-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2, var(--nexight-line-2));
  border-radius: 999px;
  background: transparent;
  padding: 6px 14px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.agent-gui-node__empty-hero-suggestions-chip:hover {
  border-color: var(--line-1, var(--nexight-line-1));
  background: var(--background-fronted);
  color: var(--text-primary);
}

.agent-gui-node__empty-hero-suggestions-chip[aria-pressed="true"] {
  border-color: var(--line-1, var(--nexight-line-1));
  background: color-mix(in srgb, var(--text-tertiary) 12%, transparent);
  color: var(--text-primary);
}

.agent-gui-node__empty-hero-suggestions-chip-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.8;
}

.agent-gui-node__empty-hero-suggestions-card {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line-2, var(--nexight-line-2));
  border-radius: 16px;
  background: var(--background-fronted);
  padding: 8px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.28);
  animation: agent-gui-empty-hero-enter 220ms cubic-bezier(0.16, 1, 0.3, 1)
    backwards;
}

.agent-gui-node__empty-hero-suggestions-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 4px;
}

.agent-gui-node__empty-hero-suggestions-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.2;
}

.agent-gui-node__empty-hero-suggestions-card-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.agent-gui-node__empty-hero-suggestions-card-close:hover {
  background: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
  color: var(--text-primary);
}

.agent-gui-node__empty-hero-suggestions-card-close > svg {
  width: 16px;
  height: 16px;
}

.agent-gui-node__empty-hero-suggestions-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 0 14px;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.agent-gui-node__empty-hero-suggestions-item:hover {
  background: color-mix(in srgb, var(--text-tertiary) 8%, transparent);
  color: var(--text-primary);
}

@container agent-gui-node (max-width: 900px) {
  .agent-gui-node__empty-hero {
    padding-right: 32px;
    padding-left: 32px;
  }

  .agent-gui-node__empty-hero-body,
  .agent-gui-node__empty-hero-body > .agent-gui-node__composer-hero,
  .agent-gui-node__empty-hero-body > .agent-gui-node__empty-hero-suggestions {
    width: 100%;
  }
}

[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-icon-effect,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-carousel,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-title,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-provider-gate-description,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-provider-gate-status,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-provider-gate-action,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-body
  > .agent-gui-node__composer-hero,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-suggestions,
[data-workspace-node-window-kind="agentGui"][data-workspace-node-window-appearance="embedded"]
  .agent-gui-node__empty-hero-suggestions-card {
  animation: none;
}

@keyframes agent-gui-empty-hero-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes agent-gui-star-border-path {
  0% {
    opacity: 0;
    offset-distance: 0%;
  }

  5% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  27% {
    opacity: 0;
  }

  30% {
    opacity: 0;
    offset-distance: 30%;
  }

  34% {
    opacity: 1;
  }

  46% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    offset-distance: 50%;
  }

  55% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  77% {
    opacity: 0;
  }

  80% {
    opacity: 0;
    offset-distance: 80%;
  }

  84% {
    opacity: 1;
  }

  96% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-gui-edge-glow::before,
  .agent-gui-edge-glow::after,
  .agent-gui-node__composer-input-group[data-edge-glow="true"]::before,
  .agent-gui-node__composer-input-group[data-edge-glow="true"]::after {
    animation: none;
    opacity: 0.62;
  }
}

.desktop-dock-popup__agent-info {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: default;
  outline: none;
  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.desktop-dock-popup__agent-info:hover,
.desktop-dock-popup__agent-info:focus-visible {
  color: var(--text-secondary);
  background: var(--transparency-block);
}

.desktop-dock-popup__agent-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 3;
  box-sizing: border-box;
  width: min(280px, calc(100vw - 48px));
  min-width: 220px;
  max-width: calc(100vw - 48px);
  padding: 10px 12px;
  border: 1px solid var(--line-2, var(--tutti-line-2));
  border-radius: 8px;
  background: var(--background-fronted);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.desktop-dock-popup__agent-info-popover--portal {
  position: fixed;
  z-index: 1000000;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transform-origin: top center;
  animation: desktop-dock-agent-info-popover-enter 160ms
    cubic-bezier(0.16, 1, 0.3, 1) both;
}

.desktop-dock-popup__agent-info:hover .desktop-dock-popup__agent-info-popover,
.desktop-dock-popup__agent-info:focus-visible
  .desktop-dock-popup__agent-info-popover,
.desktop-dock-popup__agent-info:focus-within
  .desktop-dock-popup__agent-info-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@keyframes desktop-dock-agent-info-popover-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }

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

@media (prefers-reduced-motion: reduce) {
  .desktop-dock-popup__agent-info-popover--portal {
    animation: none;
  }
}

.desktop-dock-popup__agent-info-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.desktop-dock-popup__agent-info-item {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.45;
  white-space: normal;
}

.desktop-dock-popup__agent-info-item[data-has-label="false"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.desktop-dock-popup__agent-info-label {
  color: var(--text-secondary);
  white-space: nowrap;
}

.desktop-dock-popup__agent-info-value {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--text-primary);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-dock-popup__agent-info-item[data-has-label="false"]
  .desktop-dock-popup__agent-info-value {
  text-align: left;
}

.desktop-dock-popup__agent-status-secondary {
  color: var(--text-tertiary);
}

.workspace-node-window__title:has(.desktop-dock-popup__agent-info) {
  overflow: visible;
}

.workspace-agents-status-panel__activity-footer {
  width: 100%;
  margin-top: 4px;
}

[data-workspace-app-icon="true"] {
  display: inline-grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 22.5%;
  background: var(--workspace-app-icon-bg, transparent);
}

[data-workspace-app-icon="true"] > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

[data-workspace-app-icon="true"] > .tsh-agent-object-token__kind-icon {
  display: block;
}

.workspace-agents-status-panel__detail-subagent-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-agents-status-panel__detail-subagent-log-entry {
  color: var(--tutti-text-muted, rgba(0, 0, 0, 0.55));
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.workspace-agents-status-panel__detail-subagent-log-entry--latest {
  color: var(--tutti-text-primary, rgba(0, 0, 0, 0.85));
}

.workspace-agents-status-panel__detail-subagent-log-entry--tool {
  font-family: var(--tutti-font-mono, ui-monospace, monospace);
}

.workspace-agents-status-panel__detail-subagent-log-entry--failure {
  color: var(--tutti-status-danger, #c0392b);
}

.workspace-agents-status-panel__detail-subagent-log-omitted {
  color: var(--tutti-text-muted, rgba(0, 0, 0, 0.45));
  font-size: 11px;
  font-style: italic;
}

.workspace-agents-status-panel__detail-subagent-activity--failure {
  color: var(--tutti-status-danger, #c0392b);
}

.workspace-agents-status-panel__detail-subagent-name {
  color: var(--text-secondary);
  margin-left: 4px;
}

.workspace-agents-status-panel__detail-tool-row--subagent
  .workspace-agents-status-panel__detail-subagent-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Sub-agent body indents like an expanded tool (24px under the icon column) */
.workspace-agents-status-panel__detail-subagent-reveal {
  box-sizing: border-box;
  padding-left: 24px;
}

/* Bash-block-style sub-agent body: task strip on top, progress below */
.workspace-agents-status-panel__detail-subagent-terminal {
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--background-panel);
}

.workspace-agents-status-panel__detail-subagent-task-strip {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.workspace-agents-status-panel__detail-subagent-activity--in-terminal {
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.5;
}

/* Fully occluded Workbench nodes stay mounted for instant switching, but their
   animations must not keep repainting pixels that cannot reach the screen.
   Partial exposure removes this rule, even when another window owns focus. */
.agent-gui-node__layout[data-agent-gui-visible="false"]
  :where(*, *::before, *::after) {
  animation-play-state: paused !important;
}

/* Occlusion is geometric, not focus-based. Fully covered Workbench bodies keep
   their DOM state but stop producing tiles; partially exposed bodies remain
   painted in full so moving the covering window never reveals a black region. */
.agent-gui-node__layout[data-agent-gui-visible="false"] {
  content-visibility: hidden;
}