/* Agentsway's three-level workflow canvas, adapted to the product palette. */
.workflow-builder .agent-activity { margin-top: 0; }
.workflow-resources { display: flex; flex-wrap: wrap; gap: 22px; padding: 4px 4px 12px; color: #8a7697; font-size:var(--text-ui); }
.workflow-resources > span { display: flex; gap: 8px; align-items: center; }
.workflow-resources .icon { width: 15px; height: 15px; }
.flow-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 26px; border-top: 1px solid #e9e1f0; color: #8b7899; font-size:var(--text-ui); }
.flow-options label { display: flex; align-items: center; gap: 9px; margin: 0; color: #77568e; font-size:var(--text-ui); cursor: pointer; }
.flow-options input { appearance: auto; accent-color: #9265ba; margin: 0; width: 15px; height: 15px; }
.flow-options .flow-key { display: inline-flex; align-items: center; gap: 8px; }
.flow-key::before { content: ''; width: 22px; border-top: 2px solid #a184ba; }
.flow-key.configuration-key::before { border-top-style: dashed; border-top-color: #c2aed3; }
.flow-options-right { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.activity-map.pipeline-map { padding: 0; overflow-x: auto; overscroll-behavior-x: contain; background-size: 20px 20px; }
.flow-board { position: relative; isolation: isolate; width: 100%; min-width: 1800px; height: 500px; overflow: hidden; }
.flow-edges { position: absolute; inset: 0; width: 100%; height: 500px; pointer-events: none; z-index: -1; }
.flow-execution { fill: none; stroke: #b49bc7; stroke-width: 1.5; marker-end: url(#flow-arrow); }
.flow-execution[data-state=completed] { stroke: #8e65b0; }
.flow-execution[data-state=working] { stroke: #9261bc; stroke-dasharray: 8 5; animation: flow-travel 1s linear infinite; }
.flow-configuration { stroke: #c6b4d7; stroke-width: 1.5; fill: none; stroke-dasharray: 5 7; }
.flow-port { fill: #fcfaff; stroke: #b49bc7; stroke-width: 1; }
.flow-stages { list-style: none; margin: 0; padding: 0; }
.pipeline-map .activity-step { position: absolute; width: 13.333333%; height: 80px; min-width: 0; }
.pipeline-map .activity-step::after, .pipeline-map .activity-step::before { display: none !important; }
.flow-node, .flow-terminal, .flow-config { display: flex; flex-direction: column; justify-content: center; align-items: start; text-align: left; gap: 7px; border: 1px solid #d9cae5; border-radius: 12px; background: #fffdfef5; color: #695177; padding: 13px; box-shadow: 0 3px 9px #41225a05; }
.flow-node { height: 100%; width: 100%; }
.flow-node strong, .flow-terminal strong { font-size:var(--text-ui); font-weight: 600; line-height: 1.25; }
.flow-kind { font-size:var(--text-caption); letter-spacing: 1.3px; color: #9b84ac; font-weight: 650; }
.flow-state, .flow-terminal > span:last-child, .flow-config > span:last-child { font-size:var(--text-caption); line-height: 1.3; color: #94819f; }
.flow-node:hover, .flow-terminal:hover, .flow-config:hover { border-color: #a17cbd; box-shadow: 0 4px 14px #66428214; }
.pipeline-map .is-agent .flow-node { background: linear-gradient(130deg,#6a4685,#795493); border-color: #73508b; color: #fff5ff; }
.pipeline-map .is-agent .flow-kind { color: #d2b8e7; }
.pipeline-map .is-agent .flow-state { color: #e2cfea; }
.pipeline-map .is-support .flow-node { background: #f0e9f7; }
.pipeline-map .activity-step[data-state=working] .flow-node { box-shadow: 0 0 0 4px #a47bc326; border-color: #a47bc3; }
.pipeline-map .activity-step[data-state=working] .flow-state::before { content: '• '; color: #e4b9ff; }
.pipeline-map .activity-step[data-state=completed] .flow-state::before { content: '✓ '; }
.pipeline-map .activity-step[data-state=failed] .flow-node { background: #faeceb; color: #995b58; border-color: #ce9e9b; }
.pipeline-map .activity-step[data-state=failed] .flow-kind, .pipeline-map .activity-step[data-state=failed] .flow-state { color: #a76b65; }
.flow-terminal { position: absolute; width: 13.333333%; height: 80px; top: 220px; }
.flow-input { left: .833333%; }
.flow-output { left: 85.833333%; }
.flow-output.is-complete { background: #eee5f6; border-color: #b99acf; }
[data-flow-stage=emails] { left: 8.333333%; top: 370px; }
[data-flow-stage=booking] { left: 18.75%; top: 220px; }
[data-flow-stage=activities] { left: 27.083333%; top: 370px; }
[data-flow-stage=activity] { left: 35.416667%; top: 220px; }
[data-flow-stage=fleet] { left: 43.75%; top: 370px; }
[data-flow-stage=transport] { left: 52.083333%; top: 220px; }
[data-flow-stage=planning] { left: 68.75%; top: 220px; }
[data-flow-stage=publish] { left: 77.083333%; top: 370px; }
.flow-config-pair { position: absolute; top: 30px; width: 13.333333%; height: 100px; display: flex; gap: 8px; }
.flow-config-pair[data-for-stage=booking] { left: 18.75%; }
.flow-config-pair[data-for-stage=activity] { left: 35.416667%; }
.flow-config-pair[data-for-stage=transport] { left: 52.083333%; }
.flow-config-pair[data-for-stage=planning] { left: 68.75%; }
.flow-config { width: calc(50% - 4px); padding: 10px; border-radius: 10px; min-width: 0; }
.flow-config strong { font-size:var(--text-ui); line-height: 1.3; }
.flow-config .flow-kind { font-size:var(--text-caption); }
.flow-config > span:last-child { font-size:var(--text-caption); overflow-wrap: anywhere; }
.flow-sequence-note { position: absolute; bottom: 12px; width: 100%; text-align: center; font-size:var(--text-caption); color: #9c88a9; margin: 0; }
.configuration-hidden .flow-board { height: 320px; }
.configuration-hidden .flow-edges { top: -180px; }
.configuration-hidden .flow-configurations, .configuration-hidden .flow-configuration { display: none; }
.configuration-hidden .flow-terminal, .configuration-hidden .is-agent { top: 40px; }
.configuration-hidden .is-support { top: 190px; }
.flow-scroll-hint { display: none; }
@keyframes flow-travel { to { stroke-dashoffset: -26; } }
@media (max-width: 2200px) { .flow-scroll-hint { display: inline; color: #9c88a9; font-size:var(--text-caption); } }
@media (max-width: 650px) {
  .flow-options { padding: 14px 18px; }
  .flow-options-right { gap: 12px; }
  .workflow-resources { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .flow-execution[data-state=working] { animation: none; } }
.flow-options[hidden] { display: none; }
.flow-node { padding: 10px; gap: 4px; }
.flow-node strong { font-size:var(--text-ui); line-height: 1.2; }
.flow-node .flow-state { font-size:var(--text-caption); }
.inspector-records > .button { margin-top: 16px; margin-right: 8px; }

.composer-footer { justify-content: flex-end; }
.connection-setup a { color: #7952a3; text-decoration: underline; text-underline-offset: 3px; }

.workflow-notices { padding: 0 28px; }
.workflow-notices p { margin: 0 0 18px; }
.workflow-notices p:empty { display: none; }
.activity-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; flex-shrink: 0; max-width: 100%; }
.activity-actions .activity-progress { margin: 0; }
.activity-actions .button { min-height: 44px; font-size:var(--text-ui); padding: 14px 18px; white-space: nowrap; }
.workflow-builder .activity-heading { flex-wrap: wrap; align-items: center; }
.workflow-builder .activity-actions { margin-left: auto; }
@media(max-width:650px) {
  .workflow-notices { padding-inline:18px; }
  .workflow-builder .activity-heading { align-items: stretch; }
  .workflow-builder .activity-actions { width:100%; margin-left:0; justify-content:flex-start; }
  .activity-actions .button { width:100%; justify-content:center; }
}

.activity-progress[hidden] { display:none; }
.booking-date-form { padding-top:24px; }
.booking-date-form label { display:block; font-size:var(--text-ui); margin-bottom:10px; }
.booking-date-form input { width:100%; min-height:46px; font-size:var(--text-body); color-scheme:light; }
.booking-date-form .field-help { font-size:var(--text-ui); line-height:1.7; margin:12px 0 20px; }

/* Wider nodes preserve the connected graph while keeping labels readable. */
.flow-kind { line-height:1.2; letter-spacing:.06em; }
.flow-config { gap:4px; padding:10px; }
.flow-node strong, .flow-terminal strong { font-size:var(--text-ui); }