/* Discrete desktop workflow session. The page remains scrollable until the
   script snaps this segment below the fixed chat header. */
@media (min-width: 721px) {
  .workflow-wide.workflow-step-ready,
  .workflow-wide.workflow-step-session {
    height: calc(100dvh - 200px) !important;
    min-height: calc(100dvh - 200px) !important;
    max-height: calc(100dvh - 200px) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    scroll-margin-top: 80px;
  }

  .workflow-wide.workflow-step-ready > [data-workflow],
  .workflow-wide.workflow-step-session > [data-workflow] {
    position: relative;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 20px 28px;
    padding: 24px 28px 18px !important;
    overflow: hidden;
    border: 1px solid #46545e;
    border-radius: 12px;
  }

  .workflow-step-ready .workflow-sheet,
  .workflow-step-session .workflow-sheet {
    min-width: 0;
    align-self: center;
    max-height: 100%;
  }

  .workflow-step-ready .workflow-graph-window,
  .workflow-step-session .workflow-graph-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
    display: block;
    overflow: hidden;
    border-left: 1px solid #3c4a53;
    padding: 0 12px 0 20px;
    mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  }

  .workflow-step-ready .agent-graph,
  .workflow-step-session .agent-graph {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0;
    grid-template-rows: 72px repeat(5, 112px) 72px;
    gap: 64px 12px;
    transition: transform .48s cubic-bezier(.22, .72, .25, 1);
    will-change: transform;
  }

  .workflow-step-ready .graph-node,
  .workflow-step-ready .graph-terminal,
  .workflow-step-session .graph-node,
  .workflow-step-session .graph-terminal {
    transition: opacity .32s ease, background .25s, border-color .25s, box-shadow .25s;
  }

  .workflow-step-ready .graph-node,
  .workflow-step-session .graph-node {
    font-size: 15px;
    padding: 10px 6px;
  }

  .workflow-step-ready .graph-node small,
  .workflow-step-session .graph-node small { font-size: 12px; }
  .workflow-step-ready .graph-node img,
  .workflow-step-session .graph-node img { width: 30px; height: 30px; }
  .workflow-step-ready .graph-node.is-current-row,
  .workflow-step-session .graph-node.is-current-row { box-shadow: 0 0 0 2px #a8c7de55, 0 8px 24px #0003; }
  .workflow-step-ready .workflow-foot,
  .workflow-step-session .workflow-foot { grid-column: 1 / -1; margin: 0; }
  .workflow-step-ready .workflow-caption,
  .workflow-step-session .workflow-caption { flex-wrap: wrap; gap: 12px; margin-top: 18px; }
  .workflow-step-ready .workflow-progress,
  .workflow-step-session .workflow-progress { align-items: flex-start; line-height: 1.5; min-height: 64px; }

  .workflow-step-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
  }

  .workflow-step-button {
    min-height: 32px;
    border: 1px solid #586a77;
    border-radius: 6px;
    padding: 5px 8px;
    background: #26343e;
    color: #dce5ec;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
  }

  .workflow-step-button:hover,
  .workflow-step-button:focus-visible { background: #32434f; color: #fff; }
  .workflow-step-button:focus-visible { outline: 2px solid #b7def0; outline-offset: 2px; }
  .workflow-step-session .workflow-step-controls { display: flex; }
  .workflow-step-ready .workflow-replay { display: none; }
  .workflow-step-ready .workflow-progress { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .workflow-step-ready .workflow-step-controls { grid-column: 1 / -1; justify-content: flex-end; }
}

/* A stale class must never create a scroll trap after a breakpoint or motion
   preference change. The script removes it as part of the same transition. */
@media (max-width: 720px) {
  .workflow-wide.workflow-step-ready,
  .workflow-wide.workflow-step-session {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .workflow-step-ready > [data-workflow],
  .workflow-step-session > [data-workflow] {
    height: auto !important;
    display: flex !important;
    overflow: visible !important;
  }

  .workflow-step-controls { display: none !important; }
}

/* Browser zoom reduces CSS viewport size. Keep the stepped layout and adapt
   its density instead of silently switching back to the stacked animation. */
@media (min-width: 721px) and (max-height: 820px), (min-width: 721px) and (max-width: 1200px) {
  .workflow-wide.workflow-step-ready { height: calc(100dvh - 180px) !important; min-height: calc(100dvh - 180px) !important; max-height: calc(100dvh - 180px) !important; }
  .workflow-wide.workflow-step-ready > [data-workflow] { padding: 14px !important; gap: 12px 18px; }
  .workflow-step-ready .workflow-sheet { align-self: start; }
  .workflow-step-ready .sheet-preview > .workflow-demo__head { padding: 9px 10px; }
  .workflow-step-ready .workflow-demo__head .tool { font-size: 12px; }
  .workflow-step-ready .sheet-formula { padding: 6px; font-size: 10px; }
  .workflow-step-ready .sheet-preview th, .workflow-step-ready .sheet-preview td { padding: 6px; font-size: 11px; }
  .workflow-step-ready .sheet-preview td { height: 38px; }
  .workflow-step-ready .workflow-caption { margin-top: 12px; }
  .workflow-step-ready .workflow-caption h3 { font-size: 16px; }
  .workflow-step-ready .workflow-caption p { display: none; }
  .workflow-step-ready .workflow-progress { font-size: 11px; padding: 10px 0; gap: 8px; }
  .workflow-step-ready .workflow-foot { padding-top: 8px; font-size: 10px; }
  .workflow-step-ready .workflow-graph-window { padding-inline: 8px; }
  .workflow-step-ready .agent-graph { grid-template-rows: 40px repeat(5, 96px) 40px; gap: 52px 10px; }
  .workflow-step-ready .graph-node { font-size: 12px; padding: 8px 4px; }
  .workflow-step-ready .graph-node small { font-size: 10px; }
  .workflow-step-ready .graph-node img { width: 24px; height: 24px; }
}
@media (min-width: 721px) and (max-height: 650px) {
  .workflow-step-ready .sheet-preview tbody tr:not(.sheet-selected) { display: none; }
  .workflow-step-ready .example-label { display: none; }
  .workflow-step-ready .workflow-foot { display: none; }
  .workflow-wide.workflow-step-ready > [data-workflow] { grid-template-rows: minmax(0, 1fr); }
  .workflow-step-ready .graph-node small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-step-ready .agent-graph, .workflow-step-ready .graph-node, .workflow-step-ready .graph-terminal { transition: none; }
}