/**
 * Hero live-workflow demo — pixel matched to Lovable animate-float-slow column.
 */

.lg\:pl-6 {
	/* mobile: no extra pad */
}

@media (min-width: 1024px) {
	.lg\:pl-6 {
		padding-left: 1.5rem;
	}
}

.dc-wf {
	height: 620px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dc-wf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--dc-border);
	background: color-mix(in oklab, var(--dc-surface-muted) 60%, transparent);
	flex-shrink: 0;
}

.dc-wf__head-left {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.dc-wf__icon {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(to bottom right, oklch(0.85 0.13 220), oklch(0.55 0.16 245));
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.dc-wf-icon {
	width: 1rem;
	height: 1rem;
}

.dc-wf-icon-sm {
	width: 0.75rem;
	height: 0.75rem;
}

.dc-wf__title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dc-ink);
}

.dc-wf__badge {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--dc-ink-soft);
}

.dc-wf__live {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	color: var(--dc-ink-soft);
}

.dc-wf__live-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--dc-emerald-400, oklch(0.765 0.177 163));
}

.dc-wf__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem 1rem;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dc-wf__body > [data-dc-workflow-steps] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.dc-wf__body {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

.dc-wf__step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dc-wf__progress {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 0.5rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--dc-brand-deep);
}

.dc-wf__progress-bar {
	width: 1.5rem;
	height: 0.25rem;
	border-radius: 999px;
	background: linear-gradient(to right, var(--dc-brand), var(--dc-brand-deep));
}

.dc-wf__msg {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.dc-wf__msg--customer {
	flex-direction: row-reverse;
}

.dc-wf__avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
}

.dc-wf__avatar--ai {
	background: linear-gradient(to bottom right, oklch(0.85 0.13 220), oklch(0.55 0.16 245));
}

.dc-wf__avatar--user {
	background: color-mix(in oklab, var(--dc-ink) 80%, transparent);
}

.dc-wf__avatar .dc-wf-icon {
	width: 0.875rem;
	height: 0.875rem;
}

.dc-wf__bubble {
	max-width: 82%;
	border-radius: 1rem;
	padding: 0.5rem 0.875rem;
	font-size: 14px;
	line-height: 1.375;
	box-shadow: var(--dc-shadow-soft);
}

.dc-wf__bubble--agent {
	background: #fff;
	border: 1px solid var(--dc-border);
	color: var(--dc-ink);
	border-bottom-left-radius: 0.375rem;
}

.dc-wf__bubble--customer {
	background: var(--dc-ink);
	color: #fff;
	border-bottom-right-radius: 0.375rem;
}

.dc-wf__typing {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.dc-wf__typing[hidden] {
	display: none !important;
}

.dc-wf__typing-bubble {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	border-radius: 1rem;
	border-bottom-left-radius: 0.375rem;
	background: #fff;
	border: 1px solid var(--dc-border);
	padding: 0.5rem 0.875rem;
	box-shadow: var(--dc-shadow-soft);
}

.dc-wf__typing-bubble span {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--dc-brand);
}

.dc-wf__typing-delay-1 {
	animation-delay: 0.15s;
}

.dc-wf__typing-delay-2 {
	animation-delay: 0.3s;
}

.dc-wf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dc-wf__chip {
	font-size: 13px;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--dc-border-strong);
	background: #fff;
	color: var(--dc-ink);
	transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
	cursor: default;
}

.dc-wf__chip.is-selected {
	background: var(--dc-brand);
	color: #fff;
	border-color: var(--dc-brand);
	box-shadow: var(--dc-shadow-soft);
}

.dc-wf__chip.is-disabled {
	background: #fff;
	color: color-mix(in oklab, var(--dc-ink-soft) 60%, transparent);
	border-color: var(--dc-border);
	opacity: 0.6;
}

.dc-wf__card {
	border-radius: 1rem;
	border: 1px solid var(--dc-border);
	background: #fff;
	padding: 1rem;
	box-shadow: var(--dc-shadow-soft);
}

.dc-wf__card--brand {
	border-color: var(--dc-brand-soft);
}

.dc-wf__card--outcome {
	border-color: var(--dc-brand-soft);
	background: linear-gradient(to bottom right, #fff, oklch(0.98 0.04 220));
	box-shadow: var(--dc-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 40px -20px rgba(8, 145, 178, 0.18));
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 18px 40px -20px rgba(8, 145, 178, 0.18),
		0 0 0 1px color-mix(in oklab, var(--dc-brand) 20%, transparent);
}

.dc-wf__card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dc-brand-deep);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dc-wf__card-title svg {
	width: 0.875rem;
	height: 0.875rem;
}

.dc-wf__rows {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 13.5px;
	color: var(--dc-ink);
	list-style: none;
	padding: 0;
}

.dc-wf__rows li {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

.dc-wf__rows .dc-wf__row-label {
	color: var(--dc-ink-soft);
}

.dc-wf__rows .dc-wf__row-value {
	font-weight: 500;
	text-align: right;
}

.dc-wf__submitted {
	margin-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 11px;
	font-weight: 600;
	color: oklch(0.508 0.118 165.612);
}

.dc-wf__submitted svg {
	width: 0.875rem;
	height: 0.875rem;
}

.dc-wf__outcome-tag {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dc-brand-deep);
}

.dc-wf__outcome-tag svg {
	width: 0.875rem;
	height: 0.875rem;
}

.dc-wf__timeline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	font-size: 12px;
}

.dc-wf__timeline-item {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dc-wf__timeline-chip {
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	background: var(--dc-brand-soft);
	color: var(--dc-brand-deep);
	font-weight: 500;
}

.dc-wf__timeline-arrow {
	width: 0.75rem;
	height: 0.75rem;
	color: var(--dc-ink-soft);
}

.dc-wf__foot {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid var(--dc-border);
	background: color-mix(in oklab, var(--dc-surface-muted) 40%, transparent);
	font-size: 0.75rem;
	color: var(--dc-ink-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-shrink: 0;
}

.dc-wf__foot-msg {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dc-wf__foot-dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 999px;
	background: var(--dc-brand);
	flex-shrink: 0;
}

.dc-wf__replay {
	display: none;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--dc-brand-deep);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.dc-wf__replay:not([hidden]) {
	display: inline-flex;
}

.dc-wf__replay:hover {
	text-decoration: underline;
}

.dc-wf__multi-hint {
	font-size: 11px;
	color: var(--dc-ink-soft);
	align-self: center;
}

.dc-wf__chips--mt {
	margin-top: 0.75rem;
}

.dc-wf__segmented {
	margin-top: 0.75rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.375rem;
	border-radius: 0.5rem;
	background: var(--dc-surface-muted);
	padding: 0.25rem;
}

@media (min-width: 640px) {
	.dc-wf__segmented {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.dc-wf__segment {
	text-align: center;
	font-size: 12.5px;
	padding: 0.375rem 0;
	border-radius: 0.375rem;
	color: var(--dc-ink-soft);
	transition: all 0.15s;
}

.dc-wf__segment.is-selected {
	background: #fff;
	color: var(--dc-ink);
	font-weight: 600;
	border: 1px solid var(--dc-brand);
	box-shadow: var(--dc-shadow-soft);
}

.dc-wf__products {
	display: grid;
	gap: 0.625rem;
}

@media (min-width: 640px) {
	.dc-wf__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.dc-wf__product {
	padding: 0.875rem !important;
}

.dc-wf__product-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.dc-wf__product-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--dc-ink);
}

.dc-wf__fit {
	font-size: 10px;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
}

.dc-wf__fit.is-best {
	background: var(--dc-brand);
	color: #fff;
}

.dc-wf__fit.is-budget {
	background: var(--dc-surface-muted);
	color: var(--dc-ink-soft);
}

.dc-wf__fit.is-default {
	background: var(--dc-brand-soft);
	color: var(--dc-brand-deep);
}

.dc-wf__product-why {
	margin-top: 0.375rem;
	font-size: 12.5px;
	line-height: 1.375;
	color: var(--dc-ink-soft);
}

.dc-wf__product-bottom {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dc-wf__product-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--dc-ink);
}

.dc-wf__in-bundle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 11px;
	font-weight: 600;
	color: var(--dc-brand-deep);
}

.dc-wf__in-bundle svg {
	width: 0.75rem;
	height: 0.75rem;
}

.dc-wf__compare {
	margin-top: 0.75rem;
	overflow: hidden;
	border-radius: 0.5rem;
	border: 1px solid var(--dc-border);
}

.dc-wf__compare-head,
.dc-wf__compare-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dc-wf__compare-head {
	font-size: 12px;
	background: var(--dc-surface-muted);
}

.dc-wf__compare-head > div {
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	color: var(--dc-ink);
}

.dc-wf__compare-head > div:first-child {
	color: var(--dc-ink-soft);
}

.dc-wf__compare-head > div.is-highlight {
	color: var(--dc-brand-deep);
	background: color-mix(in oklab, var(--dc-brand) 5%, transparent);
}

.dc-wf__compare-row {
	font-size: 12.5px;
	border-top: 1px solid var(--dc-border);
}

.dc-wf__compare-row > div {
	padding: 0.375rem 0.75rem;
	color: var(--dc-ink);
}

.dc-wf__compare-feature {
	color: var(--dc-ink-soft) !important;
}

.dc-wf__compare-row > div.is-highlight {
	font-weight: 500;
	background: color-mix(in oklab, var(--dc-brand) 5%, transparent);
}

.dc-wf__checklist,
.dc-wf__status-list {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 13.5px;
	list-style: none;
	padding: 0;
}

.dc-wf__checklist li,
.dc-wf__status-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--dc-ink);
}

.dc-wf__checklist svg {
	width: 0.875rem;
	height: 0.875rem;
	color: var(--dc-brand-deep);
	flex-shrink: 0;
}

.dc-wf__status-dot {
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	background: color-mix(in oklab, var(--dc-brand) 10%, transparent);
	color: var(--dc-brand-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dc-wf__status-dot svg {
	width: 0.75rem;
	height: 0.75rem;
}

.dc-wf__cart-items {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 13.5px;
	list-style: none;
	padding: 0;
}

.dc-wf__cart-items li {
	display: flex;
	justify-content: space-between;
	color: var(--dc-ink);
}

.dc-wf__muted {
	color: var(--dc-ink-soft);
}

.dc-wf__cart-total {
	margin-top: 0.625rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--dc-border);
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--dc-ink);
}

.dc-wf__cart-check {
	margin-top: 0.75rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	font-size: 12px;
	color: var(--dc-ink-soft);
	list-style: none;
	padding: 0;
}

.dc-wf__cart-check li {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dc-wf__cart-check svg {
	width: 0.75rem;
	height: 0.75rem;
	color: oklch(0.596 0.145 163.225);
}

.dc-wf__ol {
	margin-top: 0.75rem;
	padding-left: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 13px;
	color: var(--dc-ink);
}

.dc-wf__row-value--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.dc-wf__row-value--icon svg {
	width: 0.75rem;
	height: 0.75rem;
	color: oklch(0.596 0.145 163.225);
}

.dc-wf__score-list {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	list-style: none;
	padding: 0;
}

.dc-wf__score-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--dc-ink);
	margin-bottom: 0.25rem;
}

.dc-wf__score-meta span:last-child {
	font-weight: 600;
	color: var(--dc-brand-deep);
}

.dc-wf__score-track {
	height: 0.375rem;
	border-radius: 999px;
	background: var(--dc-surface-muted);
	overflow: hidden;
}

.dc-wf__score-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(to right, var(--dc-brand), var(--dc-brand-deep));
	transition: width 0.7s ease;
}

/* Keep hero grid padding-left on chat wrap in sync with design */
@media (min-width: 1024px) {
	.dc-hero__grid > .lg\:pl-6,
	.lg\:pl-6 {
		padding-left: 1.5rem;
	}
}