.flow-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(17, 134, 200, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(227, 250, 255, 0.96), rgba(255, 250, 225, 0.96));
  box-shadow: 0 8px 24px rgba(8, 116, 169, 0.12);
  overflow: hidden;
  position: relative;
}

.flow-status::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, #16b8ef, #0c8d91, #f6b21d);
  transform-origin: left center;
  transform: scaleX(0.28);
  opacity: 0.72;
  transition: transform 220ms ease, opacity 220ms ease;
}

.flow-status-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(22, 184, 239, 0.15);
  font-size: 22px;
  line-height: 1;
}

.flow-status-copy {
  min-width: 0;
}

.flow-status-copy strong,
.flow-status-copy span {
  display: block;
}

.flow-status-copy strong {
  font-size: 13px;
  letter-spacing: 0.025em;
}

.flow-status-copy span {
  margin-top: 2px;
  color: var(--muted, #62798c);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-status-badge {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(12, 141, 145, 0.12);
  color: var(--teal, #0c8d91);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

body[data-flow-phase="preview"] .flow-status,
body[data-flow-phase="direction_change"] .flow-status,
body[data-flow-phase="rescue_chain"] .flow-status,
body[data-flow-phase="gate_complete"] .flow-status {
  border-color: rgba(12, 141, 145, 0.72);
  box-shadow: 0 10px 28px rgba(8, 116, 169, 0.2);
}

body[data-flow-phase="preview"] .flow-status::after {
  transform: scaleX(0.54);
}

body[data-flow-phase="direction_change"] .flow-status::after {
  transform: scaleX(0.72);
}

body[data-flow-phase="rescue_chain"] .flow-status::after,
body[data-flow-phase="gate_complete"] .flow-status::after {
  transform: scaleX(1);
  opacity: 1;
}

body[data-flow-phase="rescue_chain"] .flow-status-icon,
body[data-flow-phase="gate_complete"] .flow-status-icon {
  animation: flowStatusPulse 640ms ease-out 1;
}

body[data-flow-milestone="flow_gate_finale"] .flow-status {
  background: linear-gradient(135deg, rgba(224, 253, 248, 0.98), rgba(255, 242, 184, 0.98));
}

@keyframes flowStatusPulse {
  0% { transform: scale(0.88) rotate(-8deg); }
  55% { transform: scale(1.16) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 720px) {
  .flow-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .flow-status-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .flow-status-copy span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-status::after,
  .flow-status-icon {
    transition: none;
    animation: none !important;
  }
}