/* The assistant: the conversation (.swc) and the floating shell (.swa).
 *
 * Two surfaces, one stylesheet. The tokens below resolve against the portal's
 * --p-* palette when the widget is on /portal, and fall back to the desk's own
 * variables everywhere else, so the same component looks native in both
 * without either side knowing about the other.
 */
.swc,
.swa {
	--swc-brand: var(--p-blue, var(--chpa-blue, #3e4095));
	--swc-brand-dark: var(--p-blue-dark, #2c2e6d);
	--swc-line: var(--p-line, var(--border-color, #dcdee8));
	--swc-surface: var(--p-surface, var(--card-bg, #fff));
	--swc-ground: var(--p-ground, var(--bg-color, #f5f6fa));
	--swc-ink: var(--p-ink, var(--text-color, #1c1d1d));
	--swc-radius: 10px;
	/* Text links and text buttons. The brand blue is fine on white and too
	 * dark to read on the desk's dark theme, where links get a lighter tint;
	 * fills (header, bubbles, the Ask button) keep the brand itself. */
	--swc-link: var(--swc-brand);
}

[data-theme="dark"] .swc,
[data-theme="dark"] .swa { --swc-link: #a9acf2; }

/* ---------------------------------------------------------------- the chat */

.swc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	min-height: 0;
}

.swc-banner {
	padding: 9px 12px;
	border: 1px solid var(--swc-line);
	border-left: 3px solid var(--swc-brand);
	border-radius: var(--swc-radius);
	background: var(--swc-surface);
	font-size: 0.82rem;
}

.swc-log {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 14px;
	background: var(--swc-ground);
	border: 1px solid var(--swc-line);
	border-radius: var(--swc-radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.swc-msg {
	max-width: 42rem;
	padding: 10px 13px;
	border-radius: var(--swc-radius);
	background: var(--swc-surface);
	border: 1px solid var(--swc-line);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--swc-ink);
	overflow-wrap: anywhere;
}

.swc-msg p { margin: 0 0 0.55em; }
.swc-msg p:last-child { margin-bottom: 0; }

/* The person's own words sit right and carry the brand; anything the model
 * said stays on the neutral surface, so the two are never confused. */
.swc-msg-user {
	align-self: flex-end;
	background: var(--swc-brand);
	border-color: var(--swc-brand);
	color: #fff;
}

.swc-msg-system { border-style: dashed; }

.swc-msg-error {
	border-color: var(--p-red, #ed3339);
	background: #fdf3f3;
}

.swc-note {
	margin-top: 7px;
	padding-top: 6px;
	border-top: 1px solid var(--swc-line);
	font-size: 0.72rem;
}

.swc-list { margin: 0 0 0.55em; padding-left: 1.2em; }
.swc-list li { margin-bottom: 0.22em; }
.swc-list li:last-child { margin-bottom: 0; }

.swc-msg code {
	background: var(--swc-ground);
	border: 1px solid var(--swc-line);
	border-radius: 4px;
	padding: 0 4px;
	font-size: 0.9em;
}

.swc-msg-user code { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: #fff; }

.swc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.swc-chip {
	border: 1px solid var(--swc-line);
	background: var(--swc-ground);
	color: var(--swc-ink);
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 0.8rem;
	cursor: pointer;
	text-align: left;
}

.swc-chip:hover { border-color: var(--swc-link); color: var(--swc-link); }

.swc-composer { display: flex; gap: 7px; align-items: flex-end; }

.swc-input {
	flex: 1;
	resize: none;
	padding: 9px 11px;
	border: 1px solid var(--swc-line);
	border-radius: var(--swc-radius);
	background: var(--swc-surface);
	color: var(--swc-ink);
	font-size: 0.9rem;
	line-height: 1.5;
	max-height: 140px;
	font-family: inherit;
}

.swc-input:focus {
	outline: none;
	border-color: var(--swc-brand);
	box-shadow: 0 0 0 2px rgba(62, 64, 149, 0.14);
}

.swc-send { min-width: 72px; align-self: stretch; }
.swc-foot { margin: 0; font-size: 0.72rem; }

.swc-thinking { display: flex; align-items: center; gap: 9px; }
.swc-dots { display: inline-flex; gap: 4px; }

.swc-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--swc-brand);
	opacity: 0.35;
	animation: swc-blink 1.2s infinite ease-in-out;
}

.swc-dots i:nth-child(2) { animation-delay: 0.18s; }
.swc-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes swc-blink {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-2px); }
}

/* ------------------------------------------------------- the floating shell */

.swa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030; /* above the portal nav, below frappe's modals */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.swa-launcher {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--swc-brand);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(28, 29, 29, 0.24);
	transition: transform 0.15s ease, background 0.15s ease;
}

.swa-launcher:hover { background: var(--swc-brand-dark); transform: translateY(-1px); }
.swa-launcher:focus-visible { outline: 3px solid var(--swc-brand); outline-offset: 3px; }
.swa-launcher.is-open .swa-launcher-icon { transform: scale(0.92); }

/* A popup above the launcher on a phone or tablet; docked down the right edge
 * on a desktop (the min-width block below). */
.swa-panel {
	width: min(408px, calc(100vw - 32px));
	height: min(560px, calc(100vh - 128px));
	/* dvh where it exists: 100vh on a phone includes the area behind the
	 * on-screen keyboard, which put the composer underneath it. */
	height: min(560px, calc(100dvh - 128px));
	display: flex;
	flex-direction: column;
	background: var(--swc-surface);
	border: 1px solid var(--swc-line);
	border-radius: 14px;
	box-shadow: 0 16px 44px rgba(28, 29, 29, 0.22);
	overflow: hidden;
}

.swa-panel[hidden] { display: none; }

/* On a desktop the conversation is a panel the full height of the window,
 * docked on the right, and the page narrows to make room for it rather than
 * being covered: with `swa-docked` on <html> (assistant_widget.js), the body
 * gives up the panel's width. That works on both surfaces because nothing on
 * the desk or the portal is position: fixed - their headers are sticky, and
 * move with the body. The launcher is hidden while the panel is open; the
 * panel's own close button folds it away. */
/* Wider on a wider screen, so a 1920px monitor does not get a sliver and a
 * 1024px laptop keeps most of its page. */
:root { --swa-dock-width: clamp(360px, 30vw, 440px); }

@media (min-width: 768px) {
	html.swa-docked body { margin-right: var(--swa-dock-width); }

	.swa-panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--swa-dock-width);
		height: 100vh;
		height: 100dvh;
		border: none;
		border-left: 1px solid var(--swc-line);
		border-radius: 0;
		box-shadow: -12px 0 28px -22px rgba(28, 29, 29, 0.45);
	}

	/* The desk's page header is 48px; at the same height the two bars read
	 * as one band across the top of the window. */
	.swa-head { height: 48px; padding-top: 0; padding-bottom: 0; }

	.swa-launcher.is-open { display: none; }
}

.swa-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 8px 9px 14px;
	background: var(--swc-brand);
	color: #fff;
	flex: none;
}

.swa-mark {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.16);
}

.swa-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.swa-title { font-weight: 600; font-size: 0.92rem; }
.swa-subtitle {
	font-size: 0.72rem;
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 32px targets: comfortably over WCAG 2.2's 24px minimum. */
.swa-icon {
	flex: none;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0.85;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.swa-icon:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.swa-icon:focus-visible { outline: 2px solid #fff; outline-offset: -2px; opacity: 1; }

.swa-body { flex: 1; min-height: 0; padding: 12px 14px; display: flex; }
.swa-body .swc { flex: 1; min-width: 0; }

/* The panel already frames the conversation, so nothing inside it gets a
 * second frame: the log has no border, and an answer is text on the panel
 * with its cards as the only boxes. Only the person's own words keep a
 * bubble, which is what tells the two voices apart. */
.swa-body .swc-log { border: none; padding: 4px 0; background: transparent; gap: 14px; }
.swa-body .swc-msg { max-width: 100%; }
.swa-body .swc-msg-assistant,
.swa-body .swc-msg-system { background: transparent; border: none; padding: 0; }
.swa-body .swc-msg-user { max-width: 85%; }
.swa-body .swc-msg-error { padding: 10px 13px; }

/* "Start again" is the header's New conversation button here. */
.swa-body .swc-clear { display: none; }

@media (max-width: 480px) {
	.swa { right: 12px; bottom: 12px; left: 12px; align-items: stretch; }
	.swa-panel { width: auto; height: min(70vh, calc(100vh - 110px)); height: min(70dvh, calc(100dvh - 110px)); }
	.swa-launcher { align-self: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
	.swc-dots i { animation: none; opacity: 0.6; }
	.swa-launcher { transition: none; }
}

/* Sits in the footer line rather than the header: starting over is a rare,
 * deliberate act, and a prominent button beside the composer invites accidents.
 */
.swc-clear {
	border: none;
	background: none;
	padding: 0;
	margin-left: 6px;
	font: inherit;
	font-size: 0.72rem;
	color: var(--swc-link);
	text-decoration: underline;
	cursor: pointer;
}

.swc-clear:hover { color: var(--swc-brand-dark); }

/* ------------------------------------------------- reading it, not just seeing it */

/* Present for screen readers, invisible on screen: the status region that
 * says "Looking that up" and "The assistant has answered" once each. */
.swc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.swc-person { font-size: 0.82rem; }

.swc-thinking { flex-direction: column; align-items: stretch; }
.swc-thinking-head { display: flex; align-items: center; gap: 9px; }
.swc-steps { margin: 6px 0 0; padding-left: 1.1em; font-size: 0.8rem; color: var(--text-muted, #6c7680); }
.swc-steps li.is-done { color: var(--swc-ink); }
.swc-steps:empty { display: none; }

/* ------------------------------------------------------------------- cards */
/* Built on the server from the records themselves, so the figures here say
 * what the record says. Kept visually plain: they support the answer, they
 * are not a second one. */

.swc-card {
	margin-top: 9px;
	padding: 9px 11px;
	border: 1px solid var(--swc-line);
	border-radius: 8px;
	background: var(--swc-ground);
	font-size: 0.84rem;
}

.swc-card-title { margin: 0 0 5px; font-size: 0.86rem; font-weight: 600; }
.swc-card-sub { margin: 0 0 6px; color: var(--text-muted, #6c7680); }
.swc-card-link, .swc-card-more { margin: 6px 0 0; font-size: 0.8rem; }

.swc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; }
.swc-facts dt { font-weight: 500; color: var(--text-muted, #6c7680); }
.swc-facts dd { margin: 0; }

.swc-card-items, .swc-checklist { list-style: none; margin: 0; padding: 0; }
.swc-card-items li, .swc-checklist li { padding: 3px 0; border-top: 1px solid var(--swc-line); }
.swc-card-items li:first-child, .swc-checklist li:first-child { border-top: none; }
.swc-card-item.is-warn a, .swc-card-item.is-bad a { font-weight: 600; }

.swc-figures { display: flex; flex-wrap: wrap; gap: 6px; }
.swc-figure {
	flex: 1 1 90px;
	display: flex;
	flex-direction: column;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--swc-surface);
	border: 1px solid var(--swc-line);
}
.swc-figure-value { font-weight: 600; font-size: 0.95rem; }
.swc-figure-label { font-size: 0.72rem; color: var(--text-muted, #6c7680); }
.swc-figure.is-warn { border-color: #e8a33d; }
.swc-figure.is-bad { border-color: var(--p-red, #ed3339); }
.swc-figure.is-ok { border-color: #2e9d5b; }

.swc-check.is-bad { color: var(--p-red, #c62828); }
.swc-check.is-ok span[aria-hidden] { color: #2e9d5b; }

/* --------------------------------------------------- after an answer */

.swc-actions { margin: 7px 0 0; font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swc-rate { display: inline-flex; gap: 6px; align-items: center; color: var(--text-muted, #6c7680); }

/* Text buttons, but still 24px tall: WCAG 2.2's minimum target size. */
.swc-link {
	border: none;
	background: none;
	padding: 2px 4px;
	min-height: 24px;
	font: inherit;
	color: var(--swc-link);
	text-decoration: underline;
	cursor: pointer;
}

.swc-why { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.swc-why label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-weight: 400; }
.swc-why select, .swc-why input { font-size: 0.78rem; padding: 2px 4px; min-height: 24px; }

/* ----------------------------------------------------- following things up */

/* The desk leaves links the colour of the text around them, so a card's
 * links did not read as links at all. */
.swc-card a { color: var(--swc-link); text-decoration: underline; text-underline-offset: 2px; }
.swc-card a:hover { color: var(--swc-brand-dark); }

.swc-card-items li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.swc-ask { flex: none; font-size: 0.76rem; }

.swc-counts { grid-template-columns: 1fr max-content; }
.swc-counts dt { font-weight: 400; color: var(--swc-ink); }
.swc-counts dd { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.swc-followups { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--swc-line); }
.swc-followups-label { font-size: 0.75rem; }
.swc-followups .swc-chips { margin-top: 5px; }

/* The record on screen, said once above the composer rather than guessed at. */
.swc-page {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 6px 10px;
	border: 1px solid var(--swc-line);
	border-left: 3px solid var(--swc-brand);
	border-radius: var(--swc-radius);
	background: var(--swc-surface);
	font-size: 0.8rem;
}
.swc-page[hidden] { display: none; }

/* ------------------------------------------------- suggested answers */
/* The one card with a button that changes something, so it says plainly what
 * is there now and what would replace it, row by row. */

.swc-suggestion { border-color: var(--swc-brand); }

.swc-suggestion-table { width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-size: 0.8rem; }
.swc-suggestion-table th, .swc-suggestion-table td {
	text-align: left;
	vertical-align: top;
	padding: 4px 6px;
	border-top: 1px solid var(--swc-line);
}
.swc-suggestion-table thead th { border-top: none; font-weight: 600; color: var(--text-muted, #6c7680); }
.swc-suggestion-table tbody th { font-weight: 500; }

.swc-suggestion-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 0; }
.swc-applied { color: #2e7d32; font-weight: 600; }
.swc-apply-error { color: var(--p-red, #c62828); font-size: 0.78rem; }

/* ------------------------------------------------------- the opening screen */

.swc-welcome-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.4em; }
.swc-welcome-notice,
.swc-welcome .swc-person { font-size: 0.8rem; color: var(--text-muted, #6c7680); }

/* In the panel, a new conversation sits in the middle of the empty space
 * rather than hugging the top, and its suggestions are full-width rows -
 * easier to scan, and easier to hit, than wrapped pills. Centred with auto
 * margins, not justify-content: in a phone's shorter popup the welcome is
 * taller than the log, and centring with justify-content pushes its top
 * above the scroll area where nothing can reach it. Auto margins centre only
 * while there is room. */
.swa-body .swc-welcome:only-child { margin-block: auto; }
.swa-body .swc-welcome { text-align: center; padding: 0 6px; }
.swa-body .swc-welcome::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(62, 64, 149, 0.08)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e4095' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.9L19 9.7l-5.2 1.8L12 16.5l-1.8-5L5 9.7l5.2-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E")
		center / 22px no-repeat;
}
.swa-body .swc-chips { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 14px; }
/* A tint of the brand, not the page ground: on the desk the ground is near
 * white and the rows read as plain text rather than as things to press. */
.swa-body .swc-chip {
	border-radius: 10px;
	padding: 9px 12px;
	text-align: left;
	background: rgba(62, 64, 149, 0.06);
	border-color: transparent;
	color: var(--swc-ink);
	line-height: 1.35;
}
.swa-body .swc-chip:hover { border-color: var(--swc-brand); background: rgba(62, 64, 149, 0.1); color: var(--swc-ink); }
.swa-body .swc-chip:focus-visible { outline: 2px solid var(--swc-brand); outline-offset: 1px; }

/* ------------------------------------------------ figures in a narrow column */

/* The conversation knows its own width, not the window's: the same card is
 * drawn in a 400px panel and on the full-width desk page. */
.swc { container-type: inline-size; }

/* Three tiles of "GYD 2,972,000.00" do not fit side by side in a panel and
 * broke mid-number. Narrow, each figure is a row: label left, amount right,
 * tone carried by the amount's colour instead of the tile's border. */
@container (max-width: 520px) {
	.swc-figures { flex-direction: column; gap: 0; }
	.swc-figure {
		flex: none;
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 6px 0;
		border: none;
		border-top: 1px solid var(--swc-line);
		border-radius: 0;
		background: transparent;
	}
	.swc-figure:first-child { border-top: none; }
	/* The tile's coloured border would otherwise become a coloured divider. */
	.swc-figure.is-warn,
	.swc-figure.is-bad,
	.swc-figure.is-ok { border-color: var(--swc-line); }
	.swc-figure-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
	.swc-figure-label { font-size: 0.8rem; }
	.swc-figure.is-warn .swc-figure-value { color: #a86100; }
	.swc-figure.is-bad .swc-figure-value { color: var(--p-red, #c62828); }
	.swc-figure.is-ok .swc-figure-value { color: #1f7a45; }
}

/* An application number is one thing; "EVAL-" and "UI/0001/2026" on two lines
 * reads as two. */
.swc-page strong { white-space: nowrap; }