/* Chat + Stage workspace layout (agent show page).
 *
 * The wrapper carries BOTH controllers: split-pane (drag resize between the
 * two panes) and chat--stage-layout (the chat/split/stage states as
 * data-state below). split-pane sets an inline flex-basis on the chat pane,
 * so the collapsed states must win with !important. */

.agent-stage-layout .split-pane-right {
  /* One scroll level inside the stage: the document scrolls (inside the
     viewer iframe), nothing else. */
  overflow: hidden;
  /* Definite basis so the state switches can interpolate (auto cannot). */
  flex: 1 1 0;
}

/* Snappy pane movement between the layout states — 200ms, never in the
   way. Gated behind data-animate (set one frame after connect) so the
   restored state doesn't animate on page load, and disabled while the
   split handle is dragged (inline flex updates every pointermove). */
.agent-stage-layout[data-animate] .split-pane-left,
.agent-stage-layout[data-animate] .split-pane-right {
  transition: flex-basis 0.2s cubic-bezier(0.2, 0, 0, 1),
              flex-grow 0.2s cubic-bezier(0.2, 0, 0, 1),
              margin 0.2s cubic-bezier(0.2, 0, 0, 1);
}

body.split-pane-dragging .agent-stage-layout .split-pane-left,
body.split-pane-dragging .agent-stage-layout .split-pane-right {
  transition: none;
}

/* --- state: chat (stage collapsed to its rail) ----------------------- */

/* Definite basis (rail 3rem + 0.5rem gap) instead of auto, so the
   collapse/expand interpolates. */
.agent-stage-layout[data-state="chat"] .split-pane-left {
  flex: 0 0 calc(100% - 3.5rem) !important; /* beats split-pane's inline flex-basis */
}

.agent-stage-layout[data-state="chat"] .split-pane-handle {
  display: none;
}

.agent-stage-layout[data-state="chat"] .split-pane-right {
  flex: 0 0 3rem;
  /* The hidden drag handle normally provides the gap — keep a sliver of
     breathing room between the chat and the collapsed rail. */
  margin-inline-start: 0.5rem;
  /* The pane clips its content by default — that cuts off the rail's
     border, shadow and hover lift. Only the rail lives here, so let it
     breathe. */
  overflow: visible;
}

/* The stage itself disappears; the rail below is the only visible child —
   the stage must never become unreachable. */
.agent-stage-layout[data-state="chat"] .split-pane-right > :not(.agent-stage-rail) {
  display: none !important; /* beats Bootstrap's d-flex utility (display: flex !important) */
}

.agent-stage-layout[data-state="chat"] .agent-stage-rail {
  display: flex;
}

/* --- state: stage (breakout) ---------------------------------------- */

.agent-stage-layout[data-state="stage"] .split-pane-left {
  flex: 0 0 3rem !important; /* beats split-pane's inline flex-basis */
  /* Same breathing room as the collapsed stage rail in chat-only mode. */
  margin-inline-end: 0.5rem;
  /* See the chat-state rule: don't clip the rail's border/shadow/lift. */
  overflow: visible;
}

.agent-stage-layout[data-state="stage"] .split-pane-handle {
  display: none;
}

/* The chat itself disappears; the rail below is the only visible child. */
.agent-stage-layout[data-state="stage"] .split-pane-left > :not(.agent-chat-rail) {
  display: none !important; /* beats Bootstrap's d-flex utility (display: flex !important) */
}

/* --- collapse rails --------------------------------------------------- */

/* Shared slim clickable stand-in for a collapsed pane: the chat rail in
   breakout mode, the stage rail in chat-only mode. Restores the split. */
.agent-collapse-rail {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  color: var(--tblr-secondary);
  cursor: pointer;
  position: relative;
  overflow: hidden; /* clips the sliding gradient to the pill */
  z-index: 0;
  /* A hint of depth; lift and gradient slide share one deliberate pace
     so the movement reads as one gesture. */
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.15s ease, border-color 0.15s ease;
}

/* The directional gradient lives on a pseudo-element parked outside the
   pill; hovering slides it in from the side the pane will open toward —
   the movement itself is the hint. */
.agent-collapse-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.agent-stage-layout[data-state="stage"] .agent-chat-rail {
  display: flex;
}

.agent-collapse-rail:hover {
  color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  box-shadow: var(--shadow-primary-md);
  transform: translateY(-1px);
}

/* The stage rail (right edge) opens leftward, the chat rail rightward:
   gradient and lift move the same way. */
.agent-stage-rail::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--traqx-blue-600) 5%, transparent), transparent 6rem),
    linear-gradient(270deg, color-mix(in srgb, var(--traqx-blue-600) 11%, transparent), color-mix(in srgb, var(--traqx-blue-600) 1%, transparent));
  transform: translateX(100%);
}

.agent-chat-rail::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--traqx-blue-600) 5%, transparent), transparent 6rem),
    linear-gradient(90deg, color-mix(in srgb, var(--traqx-blue-600) 11%, transparent), color-mix(in srgb, var(--traqx-blue-600) 1%, transparent));
  transform: translateX(-100%);
}

.agent-collapse-rail:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.agent-stage-rail:hover {
  transform: translate(-1px, -1px);
}

.agent-chat-rail:hover {
  transform: translate(1px, -1px);
}

.agent-collapse-rail-label {
  writing-mode: vertical-rl;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* --- stage card ------------------------------------------------------ */

.agent-stage-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- workset tabs (ADR-9: Home = inventory, tabs = workset) ----------
   The chips reuse the project cockpit tab styling (project_tabs.css) —
   below are only the stage-specific bits: bar placement inside the
   card, the tab strip, and the update dot. */

/* Compound selector on purpose: project_tabs.css loads AFTER this file
   and its overflow-x auto / overflow-y clip on .project-tab-bar would
   clip the collapsed strip's dropdown. */
.project-tab-bar.agent-stage-tabbar {
  margin-block-start: 0;
  padding: 0 0.5rem;
  flex: 0 0 auto;
  position: relative; /* anchors the collapsed strip's dropdown */
  overflow: visible;
  /* A weightier boundary between the bar and the stage content. */
  border-block-end-width: 2px;
}

/* Chips overlap the thicker bar border so the active tab's blue
   underline sits exactly on it. */
.agent-stage-tabbar .project-tab {
  margin-block-end: -2px;
}

/* Subtle separators make the individual tab items readable; the active
   tab keeps its blue underline from the cockpit styles. */
.agent-stage-tabstrip .agent-stage-tab {
  border-inline-start: 1px solid var(--tblr-border-color-translucent);
}

.agent-stage-tabstrip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

/* Chrome-style shrink: chips share the strip and ellipsize down to the
   controller's min-chip-width value before the strip collapses entirely. */
.agent-stage-tabstrip .agent-stage-tab {
  flex: 1 1 auto;
  min-width: 96px;
  max-width: 16rem;
}

.agent-stage-tab .project-tab__activator {
  flex: 1 1 auto;
  overflow: hidden;
}

.agent-stage-tab .project-tab__label {
  flex: 1 1 auto;
  max-width: none;
}

/* Icons are flex items inside the shrinking chips — without this they
   get squeezed along with the label. Only the text may shrink. */
.agent-stage-tabbar .project-tab svg {
  flex: 0 0 auto;
}

/* --- collapsed strip: the chips become the overflow menu -------------- */

/* The "Tabs" toggle reads as a button, not a tab: bordered soft pill
   with the open-tab count. Overrides the project-tab underline chrome. */
.agent-stage-overflow {
  max-width: 14rem;
  min-width: 0;
  align-self: center;
  margin-block-end: 0;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--tblr-border-color);
  border-block-end: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  box-shadow: var(--shadow-xs);
}

.agent-stage-overflow:hover {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
  background: color-mix(in srgb, var(--traqx-blue-600) 4%, transparent);
}

.agent-stage-overflow-count {
  margin-inline-start: 0.375rem;
  font-size: 0.6875rem;
  padding: 0.2em 0.45em;
  flex: 0 0 auto;
}

/* The static "Tabs" word never shrinks away… */
.agent-stage-overflow .project-tab__label {
  flex: 0 0 auto;
}

/* …instead the Home tab goes icon-only in collapsed mode (Chrome shows
   favicons only when tabs get tight). */
.agent-stage-tabbar[data-collapsed] .project-tab--anchor .project-tab__label {
  display: none;
}

.agent-stage-tabbar[data-collapsed] .agent-stage-tabstrip {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 2px);
  inset-inline-end: 0.5rem;
  z-index: var(--traqx-z-flyout);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 16rem;
  max-width: 24rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-md);
  box-shadow: var(--shadow-lg);
}

/* The open state lives on the toggle's aria-expanded — the strip IS the
   menu, no separate state class. */
.agent-stage-tabbar:has(.agent-stage-overflow[aria-expanded="true"]) .agent-stage-tabstrip {
  display: flex;
}

/* Menu rows: neutralize the tab-bar chrome (underline, separators,
   negative margin). */
.agent-stage-tabbar[data-collapsed] .agent-stage-tab {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  border-block-end: none;
  border-inline-start: none;
  margin-block-end: 0;
  border-radius: var(--tblr-border-radius);
}

/* Update dot: "changed since last opened" — a visibility status, never a
   review/approval state (the Trust layer owns that, ADR-9). */
.agent-stage-tab-dot {
  display: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--tblr-primary);
  flex: 0 0 auto;
  margin-inline-end: 0.25rem;
}

.agent-stage-tab[data-updated] .agent-stage-tab-dot {
  display: inline-block;
}

/* --- panels ----------------------------------------------------------- */

.agent-stage-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.agent-stage-panel--home {
  overflow-y: auto;
  /* No top padding: the first section's gradient starts flush under the
     tab bar (the sections carry their own head spacing). */
  padding: 0 1rem 1rem;
}

/* Home sections: flat areas inside the stage container — deliberately
   no card-in-card nesting. Hierarchy comes from the section heads
   (icon + weighted title + hint line) plus a whisper of a gradient that
   ties each head to its list: the tint sits behind the header and fades
   out into the content, so head + list read as one unit. Sections are
   full-bleed (negative margins across the panel padding). */
.agent-stage-section {
  margin-inline: -1rem;
  padding: 0.875rem 1rem 1.5rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--traqx-blue-600) 4.5%, transparent),
    color-mix(in srgb, var(--traqx-blue-600) 1.5%, transparent) 3.25rem,
    transparent 7rem
  );
}

/* Full-bleed, clearly visible boundary between the inventory areas. */
.agent-stage-section + .agent-stage-section {
  border-block-start: 1px solid var(--tblr-border-color);
}

/* The shared documents frame wraps its upload zone in a card-body —
   inside the Home panel that padding breaks the flush alignment with
   the artifact list. Neutralize it here only. */
.agent-stage-panel--home .card-body {
  padding: 0.75rem 0 0;
}

/* The documents list lives inside a turbo-frame, so the section's
   full-bleed rule doesn't reach it — align its rows with the artifact
   rows (bleed + same 1rem inline padding instead of theme's 1.25rem). */
.agent-stage-panel--home .extractable-documents-list .list-group-flush {
  margin-inline: -1rem;
}

.agent-stage-panel--home .document-item {
  padding-inline: 1rem;
}

.agent-stage-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.25rem;
}

.agent-stage-section-icon {
  color: var(--tblr-primary);
  flex: 0 0 auto;
}

.agent-stage-section-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tblr-body-color);
}

.agent-stage-section-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--tblr-secondary);
}

/* Lists inside a section bleed to the panel edges so row hover reads as
   part of the container, not a box within it. */
.agent-stage-section > .list-group-flush {
  margin-inline: -1rem;
}

/* --- artifact rows: the row IS the affordance ------------------------- */

.agent-artifact-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
}

.agent-artifact-row[role="button"] {
  cursor: pointer;
}

.agent-artifact-row-icon {
  color: var(--tblr-secondary);
  flex: 0 0 auto;
}

.agent-artifact-row-main {
  min-width: 0;
  flex: 1 1 auto;
}

.agent-artifact-row-title {
  display: block;
  font-weight: 500;
  color: var(--tblr-body-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-artifact-row-meta {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

.agent-artifact-row-download {
  display: inline-flex;
  align-items: center;
  /* Lifts the link above the row's stretched-link overlay. */
  position: relative;
  padding: 0.375rem;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary);
  opacity: 0.6;
  transition: opacity 0.12s ease, color 0.12s ease;
}

.agent-artifact-row:hover .agent-artifact-row-download {
  opacity: 1;
}

.agent-artifact-row-download:hover {
  color: var(--tblr-primary);
}

.agent-stage-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.agent-stage-panel--document {
  overflow: hidden;
}

.agent-stage-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--traqx-doc-canvas);
}

/* Stage actions (expand/restore/close): sized to the tab bar — same
   footprint and hover treatment as the cockpit tabs, not full Tabler
   icon buttons. */
.agent-stage-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.agent-stage-action:hover {
  background-color: color-mix(in srgb, var(--traqx-blue-600) 8%, transparent);
  color: var(--tblr-primary);
}

/* The chat header mirrors the stage's cluster; its expand hides once the
   chat already owns the full width. */
.agent-stage-layout[data-state="chat"] .agent-chat-expand {
  display: none;
}

/* Expand is the split-state affordance, restore the breakout-state one. */
.agent-stage-action.agent-stage-restore {
  display: none;
}

.agent-stage-layout[data-state="stage"] .agent-stage-action.agent-stage-restore {
  display: inline-flex;
}

.agent-stage-layout[data-state="stage"] .agent-stage-expand {
  display: none;
}

/* --- source panels ----------------------------------------------------- */

/* A source document's panel stacks the read-only banner above the
   viewer iframe; the iframe takes the rest. */
.agent-stage-panel--source {
  display: flex;
  flex-direction: column;
}

.agent-stage-source-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-bottom: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}

.agent-stage-source-badge {
  flex-shrink: 0;
}

.agent-stage-source-hint {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-stage-source-cta {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.agent-stage-panel--source .agent-stage-iframe {
  flex: 1 1 auto;
  min-height: 0;
}