/* ==========================================================================
   AI generative-UI cards (.aic-*) — Ask Dash typed card catalog (#3796)
   Rendered by resources/views/components/ai-cards/* (history) and mirrored
   1:1 by window.DashCards (streaming). Loads app-wide from the base layout
   because the AI sidebar renders on every supplier page.
   Tokens: AI purple #7c3aed→#9333ea, surfaces #FAF5FF/#DDD6FE, navy #003264,
   12px card radius. Font inherits the global BRCandor.
   ========================================================================== */

.aic-card {
	background: #fff;
	border: 1px solid #DDD6FE;
	border-radius: 12px;
	margin-top: 8px;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -16px rgba(124, 58, 237, 0.25);
	font-size: 13px;
	line-height: 1.45;
	color: #101d2b;
}

.aic-card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid #f0ebfc;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: -0.01em;
}

.aic-card-header .aic-pill {
	margin-left: auto;
}

.aic-card-header .aic-pill + .aic-pill {
	margin-left: 0;
}

.aic-card-body {
	padding: 10px 14px;
}

.aic-card a {
	display: inline;
	color: #7c3aed;
	text-decoration: none;
}

.aic-card a:hover {
	text-decoration: underline;
}

/* --- Key/value rows (booking, customer, availability) --- */

.aic-kv {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
}

.aic-kv-label {
	color: #5c7186;
	font-size: 12px;
	flex-shrink: 0;
}

.aic-kv-value {
	font-weight: 600;
	text-align: right;
	word-break: break-word;
}

.aic-accent {
	color: #7c3aed;
}

/* Money still owed / attention value (e.g. open balance on customer_card). */
.aic-warn {
	color: #dc2626;
}

/* --- Status pills --- */

.aic-pill {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

.aic-pill--green {
	background: #dcfce7;
	color: #16a34a;
}

.aic-pill--amber {
	background: #fef3c7;
	color: #b45309;
}

.aic-pill--red {
	background: #fee2e2;
	color: #dc2626;
}

.aic-pill--blue {
	background: #dbeafe;
	color: #1d4ed8;
}

.aic-pill--purple {
	background: #FAF5FF;
	color: #6d28d9;
	border: 1px solid #DDD6FE;
}

.aic-pill--neutral {
	background: #eef2f7;
	color: #5c7186;
}

/* --- availability_card day strip (#3884) — mirrors the Check Availability
   grid's bucket colors: high = green, med = purple, low = amber, none = red,
   closed = gray. The requested window gets a purple ring. --- */

.aic-subline {
	padding: 0 14px 6px;
	font-size: 12px;
	color: #5c7186;
}

.aic-days {
	display: flex;
	gap: 4px;
	padding: 4px 14px 10px;
}

.aic-day {
	flex: 1;
	min-width: 0;
	text-align: center;
	border-radius: 8px;
	padding: 5px 1px;
	border: 1px solid #eef2f7;
	background: #fafbfd;
}

.aic-day-label {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: #5c7186;
	white-space: nowrap;
	overflow: hidden;
}

.aic-day-count {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #101d2b;
	white-space: nowrap;
}

.aic-day--high {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.aic-day--high .aic-day-count {
	color: #16a34a;
}

.aic-day--med {
	background: #faf5ff;
	border-color: #e9d5ff;
}

.aic-day--med .aic-day-count {
	color: #7c3aed;
}

.aic-day--low {
	background: #fffbeb;
	border-color: #fde68a;
}

.aic-day--low .aic-day-count {
	color: #b45309;
}

.aic-day--none {
	background: #fef2f2;
	border-color: #fecaca;
}

.aic-day--none .aic-day-count {
	color: #dc2626;
}

.aic-day--closed {
	background: #f1f4f8;
	border-color: #e2e8f0;
}

.aic-day--closed .aic-day-count {
	color: #94a3b8;
	font-weight: 600;
}

.aic-day--range {
	box-shadow: inset 0 0 0 1.5px #7c3aed;
}

/* --- stat_row --- */

.aic-stats {
	display: flex;
	flex-wrap: wrap;
}

.aic-stat {
	flex: 1 1 0;
	min-width: 90px;
	padding: 10px 14px;
	border-right: 1px solid #f6f1fd;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.aic-stat:last-child {
	border-right: none;
}

.aic-stat-label {
	font-size: 11px;
	color: #5c7186;
	font-weight: 600;
}

.aic-stat-value {
	font-size: 17px;
	font-weight: 700;
	color: #7c3aed;
	letter-spacing: -0.02em;
}

.aic-delta {
	display: inline-block;
	align-self: flex-start;
	margin-top: 2px;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
}

.aic-delta--up {
	background: #dcfce7;
	color: #16a34a;
}

.aic-delta--down {
	background: #fee2e2;
	color: #dc2626;
}

.aic-delta--neutral {
	background: #eef2f7;
	color: #5c7186;
}

/* --- chart_card --- */

.aic-bars {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 110px;
	padding: 22px 14px 2px;
}

.aic-bar {
	flex: 1;
	min-width: 0;
	background: linear-gradient(180deg, #a78bfa, #7c3aed);
	border-radius: 6px 6px 0 0;
	position: relative;
	box-shadow: 0 -4px 14px -6px rgba(124, 58, 237, 0.4);
}

.aic-bar span {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10.5px;
	font-weight: 700;
	color: #101d2b;
	white-space: nowrap;
}

.aic-bar-labels {
	display: flex;
	gap: 8px;
	padding: 3px 14px 10px;
	font-size: 10.5px;
	color: #5c7186;
}

.aic-bar-labels span {
	flex: 1;
	min-width: 0;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aic-line {
	padding: 14px 14px 0;
}

.aic-line svg {
	display: block;
	width: 100%;
	height: 110px;
}

/* --- chart_card expand affordance + full-width modal (#3880) --- */

.aic-expand-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border: 1px solid #DDD6FE;
	border-radius: 999px;
	background: #FAF5FF;
	color: #6d28d9;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}

.aic-expand-btn:hover {
	background: #f3eafe;
}

.aic-chart-area {
	cursor: zoom-in;
}

.aic-chart-modal {
	position: fixed;
	inset: 0;
	z-index: 1080; /* above the AI sidebar panel (1045) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.aic-chart-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.55);
}

.aic-chart-modal-dialog {
	position: relative;
	width: min(920px, 94vw);
	max-height: 86vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 64px -12px rgba(16, 24, 40, 0.35);
	padding-bottom: 8px;
}

.aic-chart-modal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid #f0ebfc;
	font-weight: 700;
	font-size: 14px;
}

.aic-chart-modal-close {
	margin-left: auto;
	border: none;
	background: none;
	color: #5c7186;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 8px;
}

.aic-chart-modal-close:hover {
	background: #f1f5f9;
	color: #101d2b;
}

.aic-bars--modal {
	height: 260px;
	padding: 26px 22px 4px;
	gap: 6px;
}

.aic-line--modal svg {
	height: 260px;
}

.aic-bar-labels--modal {
	padding: 4px 22px 12px;
	gap: 6px;
}

.aic-chart-modal .aic-takeaway {
	padding: 0 22px 12px;
}

/* --- table_card --- */

.aic-table-wrap {
	overflow-x: auto;
}

.aic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.aic-table th {
	text-align: left;
	color: #5c7186;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 8px 14px;
	border-bottom: 1px solid #f1f4f8;
	white-space: nowrap;
}

.aic-table td {
	padding: 7px 14px;
	border-bottom: 1px solid #f6f8fb;
}

.aic-table tbody tr:last-child td {
	border-bottom: none;
}

/* --- booking_card extras --- */

.aic-items {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.aic-item {
	background: #FAF5FF;
	border: 1px solid #DDD6FE;
	color: #003264;
	border-radius: 8px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
}

.aic-money {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid #f1f4f8;
}

.aic-money-total {
	font-size: 16px;
	font-weight: 700;
	color: #7c3aed;
	letter-spacing: -0.02em;
}

.aic-money-note {
	margin-left: auto;
	font-size: 11.5px;
	color: #5c7186;
}

/* --- diff_card --- */

.aic-diff {
	padding-top: 6px;
	padding-bottom: 6px;
}

.aic-diff-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid #f6f8fb;
}

.aic-diff-row:last-child {
	border-bottom: none;
}

.aic-diff-values {
	display: flex;
	align-items: baseline;
	gap: 8px;
	text-align: right;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.aic-diff-before {
	color: #5c7186;
	text-decoration: line-through;
	font-size: 12px;
}

.aic-diff-arrow {
	color: #9333ea;
	font-weight: 700;
}

.aic-diff-after {
	color: #7c3aed;
	font-weight: 700;
}

/* diff_card availability verdict on the proposed window (#3885). */
.aic-avail-note {
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	border-top: 1px solid #f1f4f8;
}

.aic-avail-note--ok {
	color: #16a34a;
	background: #f0fdf4;
}

.aic-avail-note--warn {
	color: #b45309;
	background: #fffbeb;
}

/* Actionable cards (#3927): the Approve/Decline row and the outcome strip
   the card morphs to once the pending action is acted on (or expired). The
   buttons reuse .aic-btn from the plan cards; the strip mirrors the plan
   result tones. */
.aic-actions {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 14px;
	border-top: 1px solid #f1f4f8;
	background: rgba(250, 245, 255, 0.6);
}

.aic-outcome {
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 600;
	border-top: 1px solid #f1f4f8;
}

.aic-outcome--ok {
	color: #166534;
	background: #f0fdf4;
}

.aic-outcome--warn {
	color: #b45309;
	background: #fffbeb;
}

.aic-outcome--neutral {
	color: #5c7186;
	background: #f1f5f9;
}

/* --- shared states / footer --- */

.aic-takeaway {
	padding: 0 14px 10px;
	font-size: 12.5px;
	color: #5c7186;
}

.aic-empty {
	padding: 14px;
	font-size: 12.5px;
	color: #5c7186;
	background: #FAF5FF;
}

.aic-error-line {
	padding: 10px 14px;
	font-size: 12.5px;
	color: #b45309;
	background: #fef3c7;
}

.aic-card-footer {
	padding: 9px 14px;
	border-top: 1px solid #f1f4f8;
}

.aic-action {
	font-weight: 700;
	font-size: 12.5px;
}

/* The live stream composes prose + cards in ONE bubble: each prose segment is
   an .ai-stream-prose div, cards land inline between them at the point of the
   answer (#3881…#3885). */
.ai-stream-content .ai-stream-prose:empty {
	display: none;
}

.ai-stream-content .aic-card + .ai-stream-prose {
	margin-top: 10px;
}

/* Chart axis labels (#3880): the renderers thin to a handful of short labels,
   so nothing truncates mid-word ("Augu…") — the ellipsis stays only as a
   last-resort guard. In the narrow sidebar panel, shrink a touch further. */
.ai-sidebar-panel .aic-bar-labels {
	font-size: 10px;
	gap: 5px;
}

.ai-sidebar-panel .aic-bars {
	gap: 5px;
}


/* ==========================================================================
   plan_card / result_card (#3797) — the plan-approve-execute surface.
   Rendered by components/ai-cards/plan-card.blade.php + result-card.blade.php
   and mirrored 1:1 by window.DashCards.plan_card / .result_card.
   ========================================================================== */

.aic-plan-count {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: #5c7186;
}

.aic-plan-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 14px;
	border-bottom: 1px solid #f1f4f8;
	font-size: 13px;
}

.aic-plan-step:last-of-type {
	border-bottom: none;
}

.aic-plan-ck {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1.5px solid #DDD6FE;
	background: #faf5ff;
	color: #7c3aed;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 1px;
}

.aic-plan-step--done .aic-plan-ck {
	background: linear-gradient(135deg, #7c3aed, #9333ea);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 2px 8px rgba(124, 58, 237, 0.45);
}

.aic-plan-step--running .aic-plan-ck {
	border-color: #7c3aed;
	animation: aic-pulse 1.1s ease-in-out infinite;
}

.aic-plan-step--failed .aic-plan-ck,
.aic-plan-step--awaiting_confirmation .aic-plan-ck {
	background: #fef3c7;
	border-color: #f59e0b;
	color: #b45309;
}

.aic-plan-step--skipped {
	opacity: 0.55;
}

@keyframes aic-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.aic-plan-step-body {
	flex: 1;
	min-width: 0;
}

.aic-plan-step-label {
	font-weight: 600;
	letter-spacing: -0.005em;
}

.aic-plan-step-detail {
	font-size: 12px;
	color: #5c7186;
	margin-top: 1px;
}

.aic-plan-step-fail {
	font-size: 12px;
	color: #b91c1c;
	margin-top: 1px;
}

.aic-plan-step-link {
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}

.aic-plan-remove {
	border: none;
	background: transparent;
	color: #5c7186;
	font-size: 12px;
	cursor: pointer;
	padding: 2px 4px;
	flex-shrink: 0;
}

.aic-plan-remove:hover {
	color: #b91c1c;
}

.aic-plan-failure {
	padding: 10px 14px;
	font-size: 12.5px;
	color: #b91c1c;
	background: #fef2f2;
}

.aic-plan-foot {
	display: flex;
	gap: 9px;
	align-items: center;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: rgba(250, 245, 255, 0.6);
}

.aic-btn {
	border: none;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: -0.005em;
}

.aic-btn--primary {
	background: linear-gradient(135deg, #7c3aed, #9333ea);
	color: #fff;
	box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.5);
}

.aic-btn--plain {
	background: #eef2f7;
	color: #101d2b;
}

.aic-btn--ghost {
	background: transparent;
	color: #5c7186;
}

.aic-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.aic-plan-note {
	font-size: 12px;
	color: #5c7186;
	font-weight: 600;
}

.aic-plan-result {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 14px;
	font-size: 12.5px;
	background: #f0fdf4;
	color: #166534;
}

.aic-plan-result-ok {
	font-weight: 800;
}

.aic-plan-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.aic-plan-links a {
	font-weight: 700;
}

.aic-plan-undo {
	border: none;
	background: transparent;
	color: #7c3aed;
	font-weight: 700;
	font-size: 12.5px;
	cursor: pointer;
	padding: 0;
}

.aic-plan-undo:hover {
	text-decoration: underline;
}

/* result_card — the standalone completion/failure card. */
.aic-result--completed {
	border-color: #bbf7d0;
}

.aic-result--failed {
	border-color: #fecaca;
}

.aic-result-line {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	font-size: 13px;
}

.aic-result--completed .aic-result-line {
	background: #f0fdf4;
	color: #166534;
}

.aic-result--failed .aic-result-line {
	background: #fef2f2;
	color: #b91c1c;
}

.aic-result--cancelled .aic-result-line {
	background: #f1f4f8;
	color: #5c7186;
}

.aic-result-mark {
	font-weight: 800;
}