.james-scene,
.james-conversation,
.james-message-scroll,
.james-message-list,
.james-composer-shell {
	box-sizing: border-box;
}

.james-scene {
	--james-sidebar-background: var(--appbar-background, #150726);
	--james-sidebar-foreground: var(--app-primary-foreground, #fff);
	--james-sidebar-muted: color-mix(in srgb, var(--james-sidebar-foreground) 66%, transparent);
	--james-sidebar-hover: #37364e63;
	--james-sidebar-active: #7069d33b;
	--james-soft-primary: color-mix(in srgb, var(--boxed-background, #f9f9f9) 88%, var(--app-primary-color, #844bff) 12%);
	--james-content-width: 820px;
	/* Quiet secondary text (chat state, the line under the composer): readable on the
	   boxed background in both color schemes (about 5:1). */
	--james-muted-foreground: color-mix(in srgb, var(--content-font-color, #202020) 64%, transparent);
	font-family: var(--primary-font, "Roboto", sans-serif);
}

.james-chat-sidebar,
.james-chat-sidebar-header,
.james-chat-sidebar-footer,
.james-chat-list {
	background: var(--james-sidebar-background) !important;
}

.james-chat-sidebar {
	border-color: var(--appbar-border-color, #281545) !important;
	color: var(--james-sidebar-foreground) !important;
}

.james-conversation {
	overflow: hidden;
}

.james-sidebar-secondary-button button,
.james-chat-row button,
.james-load-earlier-button button,
.james-header-action button {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.james-sidebar-secondary-button button,
.james-chat-row button {
	color: var(--james-sidebar-foreground) !important;
}

.james-header-action button,
.james-load-earlier-button button {
	color: var(--content-font-color, #20242a) !important;
}

/* "New chat": a full-width primary button in the MJ style, content centered. */
.james-new-chat-button button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 0 14px;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--primary-color, #4c1d95) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	transition: background-color 120ms ease, transform 120ms ease;
}

.james-new-chat-button button:hover {
	background: color-mix(in srgb, var(--primary-color, #4c1d95) 85%, #fff) !important;
}

.james-new-chat-button button:active {
	transform: translateY(1px);
}

.james-load-earlier-button button:hover,
.james-header-action button:hover {
	background: color-mix(in srgb, var(--content-font-color, #20242a) 7%, transparent) !important;
}

.james-sidebar-secondary-button button:hover,
.james-chat-row button:hover {
	background: var(--james-sidebar-hover) !important;
}

.james-new-chat-button .btn-icon {
	margin: 0;
	font-size: 15px;
}

.james-chat-row.has-status-icon .btn-icon,
.james-sidebar-secondary-button .btn-icon {
	margin-right: 11px;
}

.james-chat-row.has-status-icon .btn-icon {
	min-width: 18px;
	margin-left: 2px;
	font-size: 15px;
	text-align: center;
}

.james-chat-row.has-topic-icon .btn-icon {
	min-width: 18px;
	margin-left: 2px;
	margin-right: 11px;
	font-size: 14px;
	text-align: center;
	opacity: 0.72;
}

.james-chat-row.is-active.has-topic-icon .btn-icon {
	opacity: 1;
}

.james-chat-row:not(.has-status-icon):not(.has-topic-icon) .btn-icon {
	display: none;
}

/* The list grows with its rows and scrolls; rows and headings keep their height
   instead of being squeezed into the visible area once there are many chats. */
.james-chat-list > .VOwnerControlInnerPanel {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: auto;
	min-height: 100%;
}

.james-chat-list > .VOwnerControlInnerPanel > .vcontrol {
	flex-shrink: 0;
}

/* Same slim scrollbar as the menus of the other VWC sidebars (vwc.css: VSideBar .items). */
.james-chat-list::-webkit-scrollbar {
	width: 5px;
	height: 2px;
}

.james-chat-list::-webkit-scrollbar-track {
	background: transparent;
}

.james-chat-list::-webkit-scrollbar-thumb {
	border: none;
	border-radius: 4px;
	background-color: #606060;
}

@supports (-moz-appearance: none) {
	.james-chat-list {
		scrollbar-width: thin;
		scrollbar-color: #606060 transparent;
	}
}

.james-chat-row button {
	padding: 5px 16px !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
}

.james-chat-row.is-active button {
	border-color: #ffffff0d !important;
	background: var(--james-sidebar-active) !important;
	font-weight: 500;
}

.james-chat-row .fa-spinner,
.james-chat-row .fa-circle-question,
.james-chat-row .fa-shield-halved,
.james-chat-row .fa-coins {
	color: var(--james-sidebar-foreground);
}

.james-chat-list-heading {
	color: var(--james-sidebar-muted) !important;
}

.james-sidebar-secondary-button button,
.james-load-earlier-button button {
	border-radius: 8px !important;
	font-size: 12px;
}

.james-chat-row button:focus-visible,
.james-new-chat-button button:focus-visible,
.james-header-action button:focus-visible,
.james-composer-action button:focus-visible,
.james-message-renderer button:focus-visible,
.james-message-renderer a:focus-visible,
.james-artifact-preview-overlay button:focus-visible,
.james-message-renderer summary:focus-visible {
	outline: 3px solid var(--app-primary-color, #6d4dd3);
	outline-offset: 2px;
}

.james-message-list > .VOwnerControlInnerPanel {
	display: flex;
	flex-direction: column;
	gap: 22px;
	width: 100%;
}

.james-message-list,
.james-load-earlier-button,
.james-welcome {
	width: 100% !important;
	max-width: var(--james-content-width);
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Welcome of a new chat: hat, personal greeting, a short hint and two example prompts,
   centered in the free space; when it does not fit, it scrolls instead of being cut off. */
.james-welcome > .VOwnerControlInnerPanel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: safe center;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 24px 8px 6%;
}

/* Example prompts of the welcome screen: grey boxes in two columns; a click sends the
   full prompt behind the short caption. "/all" shows every prompt, grouped by app. */
.james-example-prompts > .VOwnerControlInnerPanel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.james-example-prompts > .VOwnerControlInnerPanel > .vcontrol {
	width: auto !important;
	margin: 0 !important;
}

.james-example-prompts-heading {
	grid-column: 1 / -1;
	padding-top: 10px;
	box-sizing: border-box;
}

.james-example-prompts-heading.is-title .ut-lbl {
	font-size: 15px !important;
	color: var(--content-font-color, #202020) !important;
}

.james-example-prompt button {
	display: flex !important;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 10px 14px !important;
	border: 1px solid color-mix(in srgb, var(--content-font-color, #202020) 9%, transparent) !important;
	border-radius: 14px !important;
	background: color-mix(in srgb, var(--content-font-color, #202020) 5%, var(--boxed-background, #f9f9f9)) !important;
	color: var(--content-font-color, #202020) !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	text-align: left;
	white-space: normal !important;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.james-example-prompt button:hover {
	border-color: color-mix(in srgb, var(--app-primary-color, #844bff) 30%, transparent) !important;
	background: color-mix(in srgb, var(--content-font-color, #202020) 9%, var(--boxed-background, #f9f9f9)) !important;
	box-shadow: 0 6px 18px rgba(20, 24, 32, 0.08) !important;
	transform: translateY(-1px);
}

.james-example-prompt button:active {
	transform: translateY(0);
}

.james-example-prompt button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--app-primary-color, #844bff) 55%, transparent);
	outline-offset: 2px;
}

.james-example-prompt button .btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 !important;
	border-radius: 50%;
	background: color-mix(in srgb, var(--content-font-color, #202020) 8%, transparent);
	color: var(--james-muted-foreground);
	font-size: 13px;
	transition: background-color 140ms ease, color 140ms ease;
}

.james-example-prompt button:hover .btn-icon {
	background: color-mix(in srgb, var(--app-primary-color, #844bff) 14%, transparent);
	color: var(--app-primary-color, #844bff);
}

.james-example-prompt button .dropdown-icon {
	display: none;
}

/* The caption keeps at most two lines. */
.james-example-prompt button > span:last-child {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* "/all": the list replaces greeting and examples and scrolls. */
.james-welcome.is-all-examples > .VOwnerControlInnerPanel {
	justify-content: flex-start;
	overflow-y: auto;
}

.james-welcome.is-all-examples .james-welcome-hat,
.james-welcome.is-all-examples .james-welcome-greeting,
.james-welcome.is-all-examples .james-welcome-hint {
	display: none !important;
}

.james-scene.is-undocked .james-example-prompts > .VOwnerControlInnerPanel {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.james-scene.is-undocked .james-example-prompts:not(.is-all) {
	margin-top: 18px !important;
}

/* One column in the small window and on phones: slimmer boxes, still two lines. */
.james-scene.is-undocked .james-example-prompt {
	height: 56px !important;
}

.james-scene.is-undocked .james-example-prompt button {
	padding: 8px 12px !important;
}

@media (max-width: 559px) {
	.james-example-prompts > .VOwnerControlInnerPanel {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.james-example-prompt {
		height: 56px !important;
	}

	.james-example-prompt button {
		padding: 8px 12px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.james-example-prompt button,
	.james-example-prompt button .btn-icon {
		transition: none;
	}

	.james-example-prompt button:hover {
		transform: none;
	}
}

/* The hat is a black image; in the dark theme it turns white with its pink brim kept. */
.color-scheme-dark .james-welcome-hat img {
	filter: invert(1) hue-rotate(180deg);
}

.james-message-renderer {
	align-self: flex-start;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	padding: 5px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--content-font-color, #20242a);
	box-shadow: none;
	font-size: 15px;
	overflow-wrap: anywhere;
}

.james-message-renderer[data-message-role="user"] {
	align-self: flex-end;
	width: auto;
	max-width: min(72%, 620px);
	padding: 11px 16px;
	border-radius: 18px;
	background: var(--james-soft-primary);
}

.james-block.is-streaming {
	border-color: color-mix(in srgb, var(--app-primary-color, #6d4dd3) 45%, var(--main-border-color, #d7dbe0));
}

.james-message-renderer[data-state="invalid"] {
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, #b91c1c 35%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, #b91c1c 6%, var(--content-background, #fff));
	color: #991b1b;
}

.james-block.is-failed,
.james-message-renderer .james-render-error {
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, #b91c1c 30%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, #b91c1c 5%, var(--content-background, #fff));
	color: #991b1b;
}

.james-block + .james-block {
	margin-top: 16px;
}

.james-block-entity-card,
.james-block-draft,
.james-block-table,
.james-block-chart,
.james-block-image,
.james-block-file,
.james-block-approval,
.james-block-action-status,
.james-block-sources {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 85%, transparent);
	border-radius: 14px;
	background: var(--content-background, #fff);
	box-shadow: 0 1px 2px rgba(20, 24, 32, 0.04);
}

/* Status cards: a quiet caption on top, the question or detail is the content. */
.james-block-action-status .james-action-caption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--main-font-color, #2b2f36) 55%, transparent);
	white-space: normal;
}

.james-block-action-status .james-action-state-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--main-font-color, #2b2f36) 35%, transparent);
}

.james-block-action-status[data-action-state="waiting_for_input"] .james-action-state-dot,
.james-block-action-status[data-action-state="waiting_for_approval"] .james-action-state-dot,
.james-block-action-status[data-action-state="waiting_for_credits"] .james-action-state-dot {
	background: var(--primary-color, #4c1d95);
}

.james-block-action-status[data-action-state="failed"] .james-action-caption,
.james-block-action-status[data-action-state="uncertain"] .james-action-caption {
	color: #b42318;
}

.james-block-action-status[data-action-state="failed"] .james-action-state-dot,
.james-block-action-status[data-action-state="uncertain"] .james-action-state-dot {
	background: #b42318;
}

.james-block-action-status[data-action-state="executed"] .james-action-state-dot {
	background: #1a7f37;
}

.james-block-action-status h3 {
	margin: 0 0 10px 0;
	font-size: 15px;
	font-weight: 600;
}

.james-block-action-status .james-action-detail {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
}

.james-text-content,
.james-card-summary,
.james-approval-summary,
.james-action-detail {
	line-height: 1.55;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.james-text-content {
	line-height: 1.62;
}

/* Question and answer texts can be selected and copied in parts: the VWC stage
   (body.utalic-stage in vwc.css) disables text selection for the whole app. */
.james-message-renderer .james-text-content,
.james-message-renderer .james-text-content *,
.james-message-renderer .james-action-detail,
.james-message-renderer .james-card-summary,
.james-message-renderer .james-approval-summary {
	-webkit-user-select: text;
	user-select: text;
	-webkit-touch-callout: default;
	cursor: text;
}

.james-message-renderer .james-text-content a,
.james-message-renderer .james-text-content button,
.james-message-renderer .james-text-content .james-table-export,
.james-message-renderer .james-text-content .james-table-export * {
	cursor: pointer;
}

.james-message-renderer .james-text-content button,
.james-message-renderer .james-text-content .james-table-export,
.james-message-renderer .james-text-content .james-table-export * {
	-webkit-user-select: none;
	user-select: none;
}

.james-text-content.is-plain-text,
.james-card-summary,
.james-approval-summary,
.james-action-detail {
	white-space: pre-wrap;
}

.james-text-content.is-markdown {
	white-space: normal;
}

.james-text-content.is-markdown > :first-child {
	margin-top: 0;
}

.james-text-content.is-markdown > :last-child {
	margin-bottom: 0;
}

.james-text-content.is-markdown p,
.james-text-content.is-markdown ul,
.james-text-content.is-markdown ol,
.james-text-content.is-markdown blockquote,
.james-text-content.is-markdown pre,
.james-text-content.is-markdown table {
	margin: 0 0 0.9em;
}

.james-text-content.is-markdown h1,
.james-text-content.is-markdown h2,
.james-text-content.is-markdown h3,
.james-text-content.is-markdown h4,
.james-text-content.is-markdown h5,
.james-text-content.is-markdown h6 {
	margin: 1.1em 0 0.45em;
	color: var(--heading-font-color, var(--content-font-color, #20242a));
	line-height: 1.25;
}

.james-text-content.is-markdown h1 { font-size: 1.4em; }
.james-text-content.is-markdown h2 { font-size: 1.25em; }
.james-text-content.is-markdown h3 { font-size: 1.12em; }
.james-text-content.is-markdown h4,
.james-text-content.is-markdown h5,
.james-text-content.is-markdown h6 { font-size: 1em; }

.james-text-content.is-markdown ul,
.james-text-content.is-markdown ol {
	padding-left: 1.55em;
}

.james-text-content.is-markdown li + li {
	margin-top: 0.25em;
}

.james-text-content.is-markdown blockquote {
	padding: 0.2em 0 0.2em 0.9em;
	border-left: 3px solid color-mix(in srgb, var(--app-primary-color, #6d4dd3) 42%, transparent);
	color: var(--secondary-font-color, #667085);
}

.james-text-content.is-markdown a {
	color: var(--app-primary-color, #6d4dd3);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.james-text-content.is-markdown code {
	padding: 0.12em 0.35em;
	border-radius: 5px;
	background: color-mix(in srgb, var(--content-font-color, #20242a) 8%, transparent);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.james-text-content.is-markdown pre {
	box-sizing: border-box;
	max-width: 100%;
	max-height: 32rem;
	padding: 12px 14px;
	border-radius: 10px;
	background: #1f2937;
	color: #f8fafc;
	overflow: auto;
}

.james-text-content.is-markdown pre code {
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: 13px;
	white-space: pre;
}

.james-text-content.is-markdown table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.94em;
}

.james-text-content.is-markdown th,
.james-text-content.is-markdown td {
	padding: 8px 10px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	text-align: left;
	vertical-align: top;
}

.james-text-content.is-markdown th {
	background: color-mix(in srgb, var(--content-font-color, #20242a) 6%, transparent);
	font-weight: 600;
}

.james-text-content.is-markdown hr {
	margin: 1.2em 0;
	border: 0;
	border-top: 1px solid var(--main-border-color, #d7dbe0);
}

.james-message-renderer .james-streaming-status {
	margin: 8px 0 0;
}

/* Progress log: what James is doing, typed line by line while the reply streams;
   collapsed under a toggle once the answer is there. */
/* The lines look like the answer text itself: same font, size and colour, no bullets. */
.james-progress {
	margin: 4px 0 2px;
	color: inherit;
	font: inherit;
	line-height: inherit;
}

.james-progress-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* One line per paragraph, spaced like the paragraphs of the answer text. */
.james-progress-line {
	display: block;
	margin: 0 0 0.9em;
	padding: 0;
	overflow-wrap: anywhere;
}

.james-progress-line:last-child {
	margin-bottom: 0;
}

.james-progress-text {
	white-space: pre-wrap;
}

.james-progress-cursor {
	display: inline-block;
	margin-left: 1px;
	font-weight: 300;
	color: var(--app-primary-color, #6d4dd3);
	animation: james-waiting-cursor 900ms steps(1) infinite;
}

.james-progress.is-complete {
	margin-top: 10px;
}

/* The lines that led to an approval card or a question stay above it, like the
   paragraphs of an answer before its card. */
.james-progress.is-settled {
	margin-bottom: 16px;
}

.james-progress-summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	font-size: 12.5px;
	color: var(--content-font-color-light, #667085);
	user-select: none;
}

.james-progress-summary::-webkit-details-marker { display: none; }

.james-progress-summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform 120ms ease-out;
}

.james-progress[open] .james-progress-summary::before {
	transform: rotate(90deg);
}

.james-progress.is-complete .james-progress-list {
	margin-top: 4px;
	padding-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.james-progress-cursor { animation: none; }
	.james-progress-summary::before { transition: none; }
}

/* The answer as it is being written: the growing text with a cursor at its end. */
.james-live-text .james-text-content {
	display: inline;
}

/* Rendered markdown ends in a block; the last paragraph flows inline so the cursor follows its last character. */
.james-live-text .james-text-content.is-markdown > p:last-child,
.james-live-text .james-text-content.is-markdown > h1:last-child,
.james-live-text .james-text-content.is-markdown > h2:last-child,
.james-live-text .james-text-content.is-markdown > h3:last-child {
	display: inline;
}

.james-live-cursor {
	display: inline-block;
	margin-left: 1px;
	font-weight: 300;
	color: var(--app-primary-color, #6d4dd3);
	animation: james-waiting-cursor 900ms steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.james-live-cursor { animation: none; }
}

/* Waiting bubble: a phrase typed with a cursor, then WhatsApp-style typing dots. */
.james-waiting {
	display: flex;
	margin: 6px 0 0;
}

.james-waiting-bubble {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	max-width: min(92%, 620px);
	padding: 10px 14px;
	border-radius: 18px 18px 18px 6px;
	background: color-mix(in srgb, var(--secondary-font-color, #667085) 9%, var(--content-background, #fff));
	color: var(--main-font-color, #1f2933);
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	animation: james-waiting-in 180ms ease-out;
}

.james-waiting-text {
	white-space: pre-wrap;
}

.james-waiting-cursor {
	display: inline-block;
	margin-left: 1px;
	font-weight: 300;
	color: var(--app-primary-color, #6d4dd3);
	animation: james-waiting-cursor 900ms steps(1) infinite;
}

.james-waiting-dots {
	display: none;
	align-items: flex-end;
	gap: 4px;
	height: 14px;
	margin-left: 10px;
}

.james-waiting-dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--secondary-font-color, #667085) 70%, transparent);
	animation: james-waiting-dot 1.2s ease-in-out infinite;
}

.james-waiting-dots i:nth-child(2) { animation-delay: 0.15s; }
.james-waiting-dots i:nth-child(3) { animation-delay: 0.3s; }

.james-waiting.is-idle .james-waiting-cursor { display: none; }
.james-waiting.is-intro .james-waiting-dots { margin-left: 0; }
.james-waiting.is-idle .james-waiting-dots { display: inline-flex; }

.james-waiting-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes james-waiting-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

@keyframes james-waiting-cursor {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes james-waiting-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
	30% { transform: translateY(-5px); opacity: 1; }
}

.james-attachment-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0 6px 6px 0;
	padding: 4px 10px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 999px;
	background: var(--content-background, #fff);
	color: var(--main-font-color, #1f2937);
	font-size: 12px;
}

.james-attachment-chip i {
	color: var(--app-primary-color, #6d28d9);
}

.james-attachment-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.james-composer-attachments {
	display: flex;
	gap: 6px;
	align-items: center;
	overflow-x: auto;
	white-space: nowrap;
}

.james-composer-attachments .james-attachment-chip {
	margin: 0;
	padding: 1px 4px 1px 8px;
}

.james-composer-attachments .james-attachment-chip button {
	border: 0;
	background: transparent;
	color: var(--secondary-font-color, #667085);
	cursor: pointer;
	padding: 0 4px;
}

/* Footer under a finished message: a tiny copy icon and, for answers, the credits. */
.james-message-renderer .james-message-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	/* Copy button and credits appear only while the pointer is over the message;
	   the footer is part of the message, so moving down onto the button keeps it. */
	opacity: 0;
	transition: opacity 0.15s ease;
}

.james-message-renderer:hover .james-message-footer,
.james-message-renderer:focus-within .james-message-footer,
.james-message-renderer .james-message-footer:hover,
.james-message-renderer .james-message-footer:focus-within {
	opacity: 1;
}

/* Without a pointer (touch) there is nothing to hover: keep the footer visible. */
@media (hover: none) {
	.james-message-renderer .james-message-footer {
		opacity: 1;
	}
}

.james-message-renderer .james-message-footer .james-message-credits {
	margin-top: 0;
}

.james-message-renderer .james-copy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--secondary-font-color, #667085);
	font-size: 11px;
	line-height: 1;
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.james-message-renderer .james-copy-button:hover,
.james-message-renderer .james-copy-button:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--secondary-font-color, #667085) 12%, transparent);
	outline: none;
}

.james-message-renderer .james-copy-button.is-copied {
	opacity: 1;
	color: #16a34a;
}

/* Small Excel icon right under every table James shows: downloads that table as .xlsx. */
.james-message-renderer .james-table-export {
	display: flex;
	gap: 2px;
	margin: 2px 0 10px;
}

.james-text-content.is-markdown table.has-table-export {
	margin-bottom: 0;
}

.james-message-renderer .james-data-table + .james-table-export {
	margin-top: -6px;
}

.james-message-renderer .james-table-export-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--secondary-font-color, #667085);
	font-size: 13px;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.james-message-renderer .james-table-export-button:hover,
.james-message-renderer .james-table-export-button:focus-visible {
	opacity: 1;
	color: #16a34a;
	background: rgba(22, 163, 74, 0.12);
	outline: none;
}

.james-message-renderer .james-table-export-pdf:hover,
.james-message-renderer .james-table-export-pdf:focus-visible {
	color: #dc2626;
	background: rgba(220, 38, 38, 0.12);
}

.james-message-renderer .james-table-export-button:disabled {
	cursor: progress;
}

.james-message-renderer .james-table-export-button.is-failed {
	opacity: 1;
	color: var(--app-cancelling-color, #dc2626);
}

/* Under the user's bubble, right-aligned and outside of it. */
.james-message-renderer[data-message-role="user"] {
	position: relative;
	margin-bottom: 22px;
}

.james-message-renderer[data-message-role="user"] > .james-message-footer {
	position: absolute;
	top: 100%;
	right: 4px;
	margin-top: 2px;
}

.james-message-credits {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	color: var(--secondary-font-color, #667085);
	font-size: 11px;
	opacity: 0.75;
	user-select: none;
}

.james-message-credits i {
	font-size: 10px;
}

/* Postcard order approval: front and back side next to each other (2:1 postcards), stacked on phones. */
.james-message-renderer .james-postcard-previews {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	width: 490px;
	max-width: 100%;
	margin: 10px 0 12px 0;
}

.james-message-renderer .james-postcard-preview {
	min-width: 0;
	margin: 0;
}

@media (max-width: 559px) {
	.james-message-renderer .james-postcard-previews {
		grid-template-columns: minmax(0, 1fr);
	}
}

.james-message-renderer .james-postcard-preview img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 70%, transparent);
	background: #ffffff;
}

.james-message-renderer .james-postcard-preview figcaption {
	margin-top: 4px;
	color: var(--secondary-font-color, #667085);
	font-size: 12px;
}

/* "Valid until" of an approval: small, muted and set apart from the plan text.
   Paragraph rules need the renderer prefix: VWC resets margin and padding of every
   p inside a control (.vcontrol p), which is more specific than a single class. */
.james-message-renderer .james-approval-expiry {
	margin: 18px 0 0 0;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 60%, transparent);
	color: var(--secondary-font-color, #667085);
	font-size: 12px;
	line-height: 1.4;
}

.james-conversation-header {
	border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 50%, transparent);
}

.james-header-action button {
	border-radius: 999px !important;
}

/* Phones: back to the chat list, styled like the MJ back button of a menu bar on smartphones (tinted,
   bordered, chevron alone); the color tokens come from the shared .v-back-button rule in vwc.css. */
.james-back-button button {
	padding: 0 !important;
	border: 1px solid var(--v-ribbon-item-border) !important;
	border-radius: var(--v-ribbon-item-radius, 7px) !important;
	background: var(--v-ribbon-item-background) !important;
	color: var(--v-ribbon-icon-color) !important;
	box-shadow: none !important;
	font-size: 13px;
	line-height: 30px;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--v-ribbon-ease, ease);
}

.james-back-button button .btn-icon {
	margin: 0;
	font-size: 13px;
	transition: transform 180ms var(--v-ribbon-ease, ease);
}

.james-back-button button:hover {
	border-color: var(--v-ribbon-item-hover-border) !important;
	background: var(--v-ribbon-item-hover) !important;
	color: var(--app-primary-color) !important;
}

.james-back-button button:hover .btn-icon {
	transform: translateX(-2px);
}

.james-back-button button:active {
	transform: scale(0.97);
}

.james-back-button button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--app-primary-color) 45%, transparent);
	outline-offset: 2px;
}

/* Pin state: a loose, tilted pin when not pinned; an upright pin in the primary color when pinned. */
.james-pin-button .btn-icon {
	display: inline-block;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.james-pin-button.is-pinned .btn-icon {
	transform: none;
}

.james-pin-button.is-pinned button,
.james-pin-button.is-pinned button:hover {
	background: color-mix(in srgb, var(--app-primary-color, #844bff) 14%, transparent) !important;
	color: var(--app-primary-color, #844bff) !important;
}

.james-destructive-action button:hover {
	background: color-mix(in srgb, #b91c1c 10%, transparent) !important;
	color: #b91c1c !important;
}

.james-composer {
	background: linear-gradient(to bottom, transparent, var(--boxed-background, #f9f9f9) 26%) !important;
}

.james-composer-shell {
	right: auto !important;
	left: 50% !important;
	width: min(calc(100% - 48px), var(--james-content-width)) !important;
	transform: translateX(-50%);
	border-color: color-mix(in srgb, var(--main-input-border-color, #cfd3d8) 85%, transparent) !important;
	box-shadow: 0 8px 28px rgba(20, 24, 32, 0.10), 0 1px 2px rgba(20, 24, 32, 0.08);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.james-composer-shell:focus-within {
	border-color: color-mix(in srgb, var(--app-primary-color, #6d4dd3) 48%, var(--main-input-border-color, #cfd3d8)) !important;
	box-shadow: 0 8px 30px rgba(20, 24, 32, 0.12), 0 0 0 1px color-mix(in srgb, var(--app-primary-color, #6d4dd3) 18%, transparent);
}

.james-message-input,
.james-message-input.focussed,
.james-composer-shell .vcontrol.james-message-input.focussed[data-utalic-class="VMultilineEdit"] {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* Same size with and without focus: the VWC rule for the multiline edit's textarea
   (font-size: inherit, line-height: inherit) is more specific than a class alone and won
   while the field was not focused (13px blurred, 15px focused). */
.utalic-stage .vcontrol.james-message-input textarea,
.utalic-stage .vcontrol.james-message-input textarea:focus,
.utalic-stage .vcontrol.james-message-input textarea:focus-visible {
	box-sizing: border-box;
	padding: 12px 10px 12px 14px !important;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: inherit;
	font-size: 15px;
	line-height: 1.45;
	resize: none;
}

/* Readable placeholder (about 3.7:1 light, 4.6:1 dark); the global VWC placeholder
   color (#d4d4d4 !important) is too pale for the main input of James. */
.utalic-stage .vcontrol.james-message-input textarea::placeholder {
	color: color-mix(in srgb, var(--content-font-color, #202020) 55%, transparent) !important;
	opacity: 1;
}

/* The mode switch under the message field (james/chatmode.js): a subtle text button that
   names the current level; the levels themselves open in a popup menu. */
.james-composer-shell .james-mode-button {
	display: flex;
	justify-content: flex-end;
}

.james-composer-shell .james-mode-button button {
	justify-content: flex-end;
	width: auto;
	max-width: 100%;
	padding: 0 10px !important;
	text-align: right;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--james-muted-foreground, #6b7280) !important;
	box-shadow: none !important;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease;
}

.james-composer-shell .james-mode-button button:hover,
.james-composer-shell .james-mode-button button:focus-visible {
	background: color-mix(in srgb, var(--content-font-color, #20242a) 8%, transparent) !important;
	color: var(--content-font-color, #20242a) !important;
}

.james-composer-action button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	line-height: 1;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--content-font-color, #20242a) !important;
	color: var(--content-background, #fff) !important;
	box-shadow: none !important;
}

/* Icon-only round buttons: the icon sits exactly in the middle of the circle. */
.james-composer-action button .btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-size: 15px;
	line-height: 1;
	vertical-align: middle;
}

.james-composer-action.disabled button {
	opacity: 0.35;
}

.james-stop-action button {
	background: color-mix(in srgb, var(--content-font-color, #20242a) 88%, transparent) !important;
}

.james-primary-action button {
	padding: 0 14px;
	font-size: 13px;
	font-weight: 600;
}

.james-composer-state {
	text-align: center;
	transition: opacity 450ms ease;
}

/* The line under the composer alternates softly (JamesComposerHint); VWC writes an
   inline opacity on every control. */
.james-composer-state.is-hint-hidden {
	opacity: 0 !important;
}

.james-composer-state > .hl {
	width: 100%;
	text-align: center;
}

.james-code-toolbar,
.james-card-actions,
.james-chart-actions,
.james-pagination,
.james-artifact-preview-navigation {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.james-code-toolbar {
	justify-content: flex-end;
	padding: 7px 10px;
	border-radius: 8px 8px 0 0;
	background: #1f2937;
	color: #f8fafc;
}

.james-code-language {
	margin-right: auto;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.james-code-toolbar button,
.james-card-actions button,
.james-chart-actions button,
.james-pagination button,
.james-artifact-preview-overlay button,
.james-source-open {
	min-height: 34px;
	padding: 6px 10px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 7px;
	background: var(--standard-button-background-color, #f4f5f7);
	color: var(--standard-button-foreground-color, #20242a);
	cursor: pointer;
}

.james-code-scroll,
.james-artifact-preview-text {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 14px;
	overflow: auto;
	border-radius: 0 0 8px 8px;
	background: #111827;
	color: #f8fafc;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
}

/* Elements toggled with the hidden attribute (e.g. the chart data table) must really disappear,
   even when their own rule sets a display value. */
.james-message-renderer [hidden] {
	display: none !important;
}

/* Short note under a chart (example data, only part of the data). */
.james-message-renderer .james-chart-note {
	margin: 8px 0 0 0;
	color: var(--secondary-font-color, #667085);
	font-size: 12px;
	line-height: 1.4;
}

.james-data-table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 10px 0;
	overflow-x: auto;
	border-collapse: collapse;
	white-space: nowrap;
}

.james-data-table th,
.james-data-table td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--main-border-color, #d7dbe0);
	text-align: left;
}

.james-data-table th {
	font-weight: 600;
	background: color-mix(in srgb, var(--content-font-color, #20242a) 6%, transparent);
}

.james-fields {
	display: grid;
	grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
	gap: 7px 12px;
}

.james-fields dt,
.james-fields dd {
	margin: 0;
}

.james-field-label {
	font-weight: 600;
}

.james-draft-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	background: #fef3c7;
	color: #92400e;
	font-size: 12px;
	font-weight: 600;
}

.james-block-credits {
	padding: 14px;
	border: 1px solid color-mix(in srgb, var(--app-primary-color, #6d4dd3) 35%, var(--main-border-color, #d7dbe0));
	border-radius: 10px;
	background: color-mix(in srgb, var(--app-primary-color, #6d4dd3) 6%, var(--content-background, #fff));
}

.james-credit-current {
	font-weight: 600;
}

.james-credit-permission-help {
	flex-basis: 100%;
	margin: 0;
	color: var(--secondary-font-color, #667085);
	font-size: 13px;
	line-height: 1.45;
}

.james-chart-canvas {
	position: relative;
	min-height: 300px;
	margin-top: 10px;
}

.james-artifact-metadata,
.james-artifact-state,
.james-data-period,
.james-data-source,
.james-action-feedback,
.james-streaming-status,
.james-preview-truncated {
	color: var(--secondary-font-color, #667085);
	font-size: 12px;
}

.james-artifact-inline-image-frame {
	margin: 10px 0;
	max-width: 100%;
}

.james-artifact-inline-image {
	display: block;
	max-width: 100%;
	max-height: 70vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 8px;
	background: #eef1f5;
}

.james-artifact-inline-image-status {
	margin: 0;
	color: var(--secondary-font-color, #667085);
	font-size: 12px;
}

.james-source-list {
	padding-left: 22px;
}

.james-source {
	margin-bottom: 12px;
}

.james-source-excerpt {
	margin: 7px 0;
	padding-left: 12px;
	border-left: 3px solid var(--main-border-color, #d7dbe0);
}

.james-artifact-preview-overlay {
	position: fixed;
	inset: 3vh 3vw;
	z-index: 10030;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 12px;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 14px;
	background: var(--content-background, #fff);
	color: var(--content-font-color, #20242a);
	box-shadow: 0 24px 100px rgba(0, 0, 0, 0.45);
}

.james-artifact-preview-content {
	grid-column: 1 / -1;
	overflow: auto;
}

.james-artifact-zoom-controls,
.james-sheet-selector-label {
	display: flex;
	align-items: center;
	gap: 8px;
}

.james-artifact-preview-viewer {
	box-sizing: border-box;
	width: 100%;
	min-height: 240px;
	margin-top: 10px;
	overflow: auto;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 8px;
	background: #eef1f5;
}

.james-artifact-preview-image,
.james-artifact-preview-pdf {
	display: block;
	max-width: none;
	margin: 0 auto;
}

.james-artifact-preview-pdf {
	width: 100%;
	min-height: 60vh;
}

.james-sheet-selector {
	min-height: 34px;
	padding: 5px 8px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 7px;
	background: var(--content-background, #fff);
	color: var(--content-font-color, #20242a);
}

.james-slide-thumbnails {
	display: flex;
	grid-column: 1 / -1;
	gap: 8px;
	width: 100%;
	padding: 6px 0;
	overflow-x: auto;
}

.james-slide-thumbnail {
	flex: 0 0 auto;
	min-width: 88px;
	padding: 6px;
	border: 1px solid var(--main-border-color, #d7dbe0);
	border-radius: 7px;
	background: var(--content-background, #fff);
	cursor: pointer;
}

.james-slide-thumbnail[aria-current="page"] {
	border-color: var(--app-primary-color, #6d4dd3);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-primary-color, #6d4dd3) 25%, transparent);
}

.james-slide-thumbnail-image {
	display: block;
	max-width: 120px;
	max-height: 84px;
	margin: 4px auto 0;
}

.james-artifact-preview-navigation {
	grid-column: 1 / -1;
}

@media (max-width: 859px) {
	.james-conversation {
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		border-radius: 0 !important;
	}

	.james-message-scroll {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.james-message-renderer {
		width: 100%;
		padding: 5px 0;
		border-radius: 0;
	}

	.james-message-renderer[data-message-role="user"] {
		width: auto;
		max-width: 90%;
		padding: 10px 14px;
		border-radius: 17px;
	}

	.james-composer-shell {
		width: calc(100% - 24px) !important;
	}

	.james-composer-state {
		right: 12px !important;
		left: 12px !important;
		font-size: 11px !important;
	}

	.james-block-entity-card,
	.james-block-draft,
	.james-block-table,
	.james-block-chart,
	.james-block-image,
	.james-block-file,
	.james-block-approval,
	.james-block-action-status,
	.james-block-sources {
		padding: 13px;
	}

	.james-fields {
		grid-template-columns: 1fr;
	}

	.james-field-value {
		margin-bottom: 8px !important;
	}

	.james-artifact-preview-overlay {
		inset: 0 !important;
		border-radius: 0;
	}

	.james-artifact-preview-overlay {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: 12px !important;
	}

	.james-artifact-preview-overlay > h3 {
		grid-column: 1 / -1;
	}

	.james-chart-canvas {
		min-height: 240px;
	}

	.james-welcome-hat {
		width: 112px !important;
		height: 68px !important;
		margin-bottom: 22px !important;
	}

	.james-welcome-greeting span {
		font-size: 27px !important;
		line-height: 36px !important;
	}

	.james-welcome-hint span {
		font-size: 15px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.james-chat-row .fa-spin {
		animation-duration: 1.6s;
	}

	.james-waiting-bubble,
	.james-waiting-cursor,
	.james-waiting-dots i {
		animation: none !important;
	}

	.james-welcome .animate__animated {
		animation: none !important;
	}
}

/* ---------- Outputs sidebar: everything James created in this chat ---------- */
.james-outputs-panel {
	--james-output-card-background: var(--content-background, #fff);
	--james-output-thumb-background: color-mix(in srgb, var(--boxed-background, #f6f7f9) 70%, var(--content-font-color, #20242a) 4%);
	--james-output-line: color-mix(in srgb, var(--content-font-color, #20242a) 10%, transparent);
	overflow: hidden;
	box-sizing: border-box;
	color: var(--content-font-color, #20242a);
}

.james-outputs-panel.is-overlay {
	z-index: 20;
	box-shadow: 0 18px 48px rgba(17, 12, 46, 0.18), 0 2px 8px rgba(17, 12, 46, 0.08);
	animation: james-outputs-slide-in 180ms ease-out;
}

@keyframes james-outputs-slide-in {
	from { opacity: 0; transform: translateX(16px); }
	to { opacity: 1; transform: none; }
}

.james-outputs-header {
	border-bottom: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 50%, transparent);
}

.james-outputs-toggle.is-open button {
	background: color-mix(in srgb, var(--app-primary-color, #6d4dd3) 14%, transparent) !important;
	color: var(--app-primary-color, #6d4dd3) !important;
}

/* A small dot tells that something new arrived while the sidebar was closed. */
.james-outputs-toggle button {
	position: relative;
}

.james-outputs-toggle.has-new-outputs button::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--app-primary-color, #6d4dd3);
	box-shadow: 0 0 0 2px var(--boxed-background, #fff);
}

.james-outputs-list,
.james-outputs-list > .VOwnerControlInnerPanel {
	width: 100% !important;
	box-sizing: border-box;
}

.james-outputs-list > .VOwnerControlInnerPanel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.james-output-card {
	--james-output-accent: #6d4dd3;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: var(--james-output-card-background);
	border: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 55%, transparent);
	box-shadow: 0 1px 2px rgba(17, 12, 46, 0.06), 0 4px 14px rgba(17, 12, 46, 0.07);
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
	animation: james-output-card-in 220ms ease-out both;
}

@keyframes james-output-card-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

.james-output-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--james-output-accent);
	z-index: 1;
}

.james-output-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--james-output-accent) 35%, transparent);
	box-shadow: 0 2px 4px rgba(17, 12, 46, 0.06), 0 10px 26px rgba(17, 12, 46, 0.12);
}

.james-output-card:focus-visible {
	outline: 3px solid var(--app-primary-color, #6d4dd3);
	outline-offset: 2px;
}

.james-output-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	overflow: hidden;
	background: var(--james-output-thumb-background);
	border-bottom: 1px solid var(--james-output-line);
}

.james-output-thumb.is-icon {
	height: 64px;
	background: color-mix(in srgb, var(--james-output-accent) 9%, var(--james-output-card-background));
}

.james-output-thumb.is-icon > i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--james-output-accent);
	color: #fff;
	font-size: 17px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--james-output-accent) 35%, transparent);
}

.james-output-thumb.has-image {
	height: 148px;
	background: #fff;
}

.james-output-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.is-chart .james-output-image {
	object-fit: contain;
	padding: 8px 10px;
	box-sizing: border-box;
}

.james-output-minichart {
	width: 72%;
	height: 70%;
	fill: var(--james-output-accent);
	opacity: 0.85;
}

.james-output-minitable {
	width: calc(100% - 24px);
	border-collapse: collapse;
	font-size: 10.5px;
	line-height: 1.35;
	table-layout: fixed;
	background: var(--james-output-card-background);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(17, 12, 46, 0.08);
}

.james-output-minitable th,
.james-output-minitable td {
	padding: 3px 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	border-bottom: 1px solid var(--james-output-line);
}

.james-output-minitable th {
	background: color-mix(in srgb, var(--james-output-accent) 14%, var(--james-output-card-background));
	color: color-mix(in srgb, var(--james-output-accent) 70%, var(--content-font-color, #20242a));
	font-weight: 600;
}

.james-output-minitable td.is-number {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.james-output-minitable tr:last-child td {
	border-bottom: 0;
}

/* A sheet of paper peeking out of the card: letters, offers, mails, print products. */
.james-output-thumb.is-paper {
	align-items: flex-end;
	height: 120px;
	background: color-mix(in srgb, var(--james-output-accent) 8%, var(--james-output-card-background));
}

.james-output-paper {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 62%;
	height: 104px;
	padding: 12px 12px 0;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
	background: #fff;
	color: #20242a;
	box-shadow: 0 -1px 0 rgba(17, 12, 46, 0.04), 0 6px 18px rgba(17, 12, 46, 0.12);
	transform: rotate(-2deg) translateY(6px);
	transition: transform 160ms ease;
}

.james-output-card:hover .james-output-paper {
	transform: rotate(0deg) translateY(2px);
}

.james-output-paper-band {
	width: 34%;
	height: 4px;
	border-radius: 2px;
	background: var(--james-output-accent);
}

.james-output-paper-title {
	font-size: 9.5px;
	font-weight: 700;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.james-output-paper-line {
	font-size: 8.5px;
	line-height: 1.2;
	color: #5b6170;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.james-output-paper-rule {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: #e7e9ee;
}

.james-output-paper-rule:nth-of-type(2n) {
	width: 78%;
}

/* Real looks of created records: the top of the document page, the rendered e-mail. */
.james-output-thumb.has-page,
.james-output-thumb.has-mail {
	align-items: flex-end;
	height: 156px;
	background: color-mix(in srgb, var(--james-output-accent) 8%, var(--james-output-card-background));
}

.james-output-page {
	display: block;
	width: 234px;
	height: 142px;
	object-fit: cover;
	object-position: top center;
	border-radius: 6px 6px 0 0;
	background: #fff;
	box-shadow: 0 6px 18px rgba(17, 12, 46, 0.14);
	transition: transform 160ms ease;
}

.james-output-mail {
	position: relative;
	width: 234px;
	height: 142px;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
	background: #fff;
	box-shadow: 0 6px 18px rgba(17, 12, 46, 0.14);
	transition: transform 160ms ease;
}

/* A 640px wide e-mail scaled to the card; the frame never takes clicks or focus. */
.james-output-mail iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 640px;
	height: 390px;
	border: 0;
	transform: scale(0.365625);
	transform-origin: 0 0;
	pointer-events: none;
	background: #fff;
}

.james-output-card:hover .james-output-page,
.james-output-card:hover .james-output-mail {
	transform: translateY(-3px);
}

.james-output-thumb.is-avatar {
	height: 76px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--james-output-accent) 16%, var(--james-output-card-background)), color-mix(in srgb, var(--james-output-accent) 4%, var(--james-output-card-background)));
}

.james-output-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--james-output-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 0 0 3px var(--james-output-card-background), 0 6px 14px color-mix(in srgb, var(--james-output-accent) 35%, transparent);
}

.james-output-body {
	padding: 11px 14px 13px 16px;
	min-width: 0;
}

.james-output-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--james-output-accent);
}

.james-output-meta > i {
	font-size: 11px;
}

.james-output-time {
	margin-left: auto;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--secondary-font-color, #6b7280);
}

.james-output-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--content-font-color, #20242a);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.james-output-detail {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--secondary-font-color, #6b7280);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.james-outputs-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 48px 18px;
	text-align: center;
	color: var(--secondary-font-color, #6b7280);
}

.james-outputs-empty > i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	font-size: 22px;
	color: var(--app-primary-color, #6d4dd3);
	background: color-mix(in srgb, var(--app-primary-color, #6d4dd3) 12%, transparent);
}

.james-outputs-empty p {
	margin: 0;
	max-width: 220px;
	font-size: 13px;
	line-height: 1.45;
}

/* The block the user jumped to glows briefly in the conversation. */
.james-output-highlight {
	border-radius: 12px;
	animation: james-output-highlight 2.2s ease-out;
}

@keyframes james-output-highlight {
	0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color, #6d4dd3) 55%, transparent), 0 0 0 9px color-mix(in srgb, var(--app-primary-color, #6d4dd3) 14%, transparent); }
	100% { box-shadow: 0 0 0 3px transparent, 0 0 0 9px transparent; }
}

.color-scheme-dark .james-output-card {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.james-output-card,
	.james-outputs-panel.is-overlay,
	.james-output-highlight {
		animation: none !important;
	}

	.james-output-card,
	.james-output-paper,
	.james-output-page,
	.james-output-mail {
		transition: none !important;
	}

	.james-output-highlight {
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary-color, #6d4dd3) 55%, transparent);
	}
}

/* ---------- Generated social media posts: image grid with selection ---------- */
.james-social-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 4px 0 12px;
}

@media (max-width: 720px) {
	.james-social-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.james-social-tile {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: color-mix(in srgb, var(--content-font-color, #20242a) 6%, var(--boxed-background, #fff));
	box-shadow: 0 1px 2px rgba(17, 12, 46, 0.08), 0 4px 12px rgba(17, 12, 46, 0.08);
	transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.james-social-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(17, 12, 46, 0.08), 0 10px 24px rgba(17, 12, 46, 0.14);
}

.james-social-tile:not(.is-selected) {
	opacity: 0.55;
}

.james-social-tile.is-open {
	outline: 3px solid var(--app-primary-color, #6d4dd3);
	outline-offset: 2px;
}

.james-social-open {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.james-social-open:focus-visible {
	outline: 3px solid var(--app-primary-color, #6d4dd3);
	outline-offset: -3px;
}

.james-social-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.james-social-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 12px;
	box-sizing: border-box;
	font-size: 13px;
	text-align: center;
	color: var(--secondary-font-color, #6b7280);
}

.james-social-number {
	position: absolute;
	right: 8px;
	bottom: 8px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 11px;
	background: rgba(17, 12, 46, 0.72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
}

.james-social-check {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--app-primary-color, #6d4dd3);
	cursor: pointer;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.james-social-detail {
	margin: 0 0 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--content-background, #fff);
	border: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 60%, transparent);
	box-shadow: 0 4px 14px rgba(17, 12, 46, 0.07);
}

.james-social-detail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.james-social-detail-header h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.james-social-detail-text {
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 1.5;
}

.james-social-actions .james-social-adopt {
	font-weight: 600;
}

/* Outputs sidebar: a set of posts as a small picture grid. */
.james-output-thumb.has-grid {
	height: auto;
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4px;
	align-items: stretch;
	background: color-mix(in srgb, var(--james-output-accent) 8%, var(--james-output-card-background));
}

.james-output-grid-cell {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.james-output-grid-cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.james-output-grid-more {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 12, 46, 0.55);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.james-social-tile {
		transition: none !important;
	}
}

.james-social-detail-close {
	flex: 0 0 auto;
	padding: 4px 12px;
	border: 1px solid color-mix(in srgb, var(--main-border-color, #d7dbe0) 80%, transparent);
	border-radius: 999px;
	background: transparent;
	color: var(--content-font-color, #20242a);
	font-size: 13px;
	cursor: pointer;
}

.james-social-detail-close:hover {
	background: color-mix(in srgb, var(--content-font-color, #20242a) 6%, transparent);
}

/* James voice conversation (GPT-Live) ------------------------------------------ */

/* Composer: the voice button is a quieter outline circle next to send. */
.james-voice-action button {
	background: transparent !important;
	color: var(--content-font-color, #20242a) !important;
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--content-font-color, #20242a) 22%, transparent) !important;
}

.james-voice-action button:hover {
	background: color-mix(in srgb, var(--app-primary-color, #6200ee) 10%, transparent) !important;
}

.james-voice-action.is-live button {
	background: var(--app-primary-color, #6200ee) !important;
	color: #fff !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-primary-color, #6200ee) 22%, transparent) !important;
}

/* Spoken turns in the chat: plain text with a small microphone/speaker marker. */
.james-block-voice-turn {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.james-block-voice-turn .james-voice-turn-icon {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: 0.55;
}

.james-block-voice-turn .james-text-content {
	min-width: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.james-block-voice-turn.is-spoken-by-james {
	color: var(--secondary-font-color, #667085);
	font-size: 14px;
}

.james-voice-turn-interrupted {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--secondary-font-color, #667085);
	font-style: italic;
}

/* Voice scene: a small window docked bottom right; drag it anywhere by its content. */
.james-voice-scene {
	overflow: hidden;
}

.is-moved-by-content > .james-voice-scene {
	cursor: grab;
}

.ui-draggable-dragging > .james-voice-scene {
	cursor: grabbing;
}

/* Phones show every popup full screen: there the voice window becomes a call
   screen – a large orb in the middle, the state below it, the buttons centered at
   the bottom. Desktop and tablet keep the small window. VWC places child controls
   inside the owner's .VOwnerControlInnerPanel. */
.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-orb {
	top: calc(40% - 150px) !important;
	left: calc(50% - 100px) !important;
	width: 200px !important;
	height: 200px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-status,
.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-chat-title,
.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-caption {
	left: 24px !important;
	right: 24px !important;
	text-align: center !important;
}

/* VLabel sets its font on the inner .hl > .ut-lbl span. */
.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-status {
	top: calc(40% + 74px) !important;
	height: 32px !important;
}

.device-mode-mobile .james-voice-status .ut-lbl {
	font-size: 22px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-chat-title {
	top: calc(40% + 112px) !important;
	height: 22px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-caption {
	top: calc(40% + 112px) !important;
	height: 66px !important;
}

.device-mode-mobile .james-voice-chat-title .ut-lbl,
.device-mode-mobile .james-voice-caption .ut-lbl {
	font-size: 15px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-confirm {
	top: calc(40% + 70px) !important;
	left: 20px !important;
	right: 20px !important;
	height: 108px !important;
}

.device-mode-mobile .james-voice-confirm-title .ut-lbl {
	font-size: 15px !important;
}

.device-mode-mobile .james-voice-confirm > .VOwnerControlInnerPanel > .james-voice-secondary-button,
.device-mode-mobile .james-voice-confirm > .VOwnerControlInnerPanel > .james-voice-primary-button {
	width: calc(50% - 18px) !important;
	height: 40px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-hide {
	top: 16px !important;
	right: 16px !important;
}

.device-mode-mobile .james-voice-scene > .VOwnerControlInnerPanel > .james-voice-controls {
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
	width: auto !important;
	height: 60px !important;
}

.device-mode-mobile .james-voice-controls > .VOwnerControlInnerPanel {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
}

.device-mode-mobile .james-voice-controls > .VOwnerControlInnerPanel > .vcontrol {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	flex: 0 0 auto;
}

.device-mode-mobile .james-voice-controls > .VOwnerControlInnerPanel > .james-voice-round-button {
	width: 56px !important;
	height: 56px !important;
}

.device-mode-mobile .james-voice-controls .james-voice-round-button button .btn-icon {
	font-size: 20px;
}

.device-mode-mobile .james-voice-controls > .VOwnerControlInnerPanel > .james-voice-retry {
	order: 1;
	height: 52px !important;
}

.device-mode-mobile .james-voice-controls > .VOwnerControlInnerPanel > .james-voice-end-button {
	order: 2;
	width: 128px !important;
	height: 52px !important;
}

.james-voice-status > .hl,
.james-voice-status {
	letter-spacing: -0.01em;
}

.james-voice-caption {
	transition: color 160ms ease;
}

.james-voice-caption.is-error {
	color: var(--app-cancelling-color, #c62828) !important;
}

.james-voice-confirm {
	border-radius: 14px;
	background: color-mix(in srgb, var(--content-font-color, #20242a) 5%, transparent);
}

.james-voice-confirm {
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--app-primary-color, #6200ee) 45%, transparent);
}

.james-voice-round-button button,
.james-voice-icon-button button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0 !important;
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--content-font-color, #20242a) 8%, transparent) !important;
	color: var(--content-font-color, #20242a) !important;
	box-shadow: none !important;
}

.james-voice-round-button button .btn-icon,
.james-voice-icon-button button .btn-icon {
	margin: 0;
	font-size: 17px;
}

.james-voice-icon-button button {
	background: transparent !important;
}

.james-voice-round-button.is-active button {
	background: var(--content-font-color, #20242a) !important;
	color: var(--content-background, #fff) !important;
}

.james-voice-end-button button {
	width: 100%;
	height: 100%;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--app-cancelling-color, #d93025) !important;
	color: #fff !important;
	font-weight: 600;
}

.james-voice-primary-button button,
.james-voice-secondary-button button {
	width: 100%;
	height: 100%;
	border-radius: 999px !important;
	font-weight: 600;
}

.james-voice-primary-button button {
	border: 0 !important;
	background: var(--app-primary-color, #6200ee) !important;
	color: #fff !important;
}

.james-voice-secondary-button button {
	border: 1.5px solid color-mix(in srgb, var(--content-font-color, #20242a) 20%, transparent) !important;
	background: transparent !important;
	color: var(--content-font-color, #20242a) !important;
}

/* Decline keeps the cancelling colours set on the control instead of the neutral secondary look. */
.james-voice-secondary-button.james-voice-decline-button button {
	border: 0 !important;
	background: var(--app-cancelling-color) !important;
	color: var(--app-cancelling-foreground) !important;
}

/* end James voice conversation */

/* Social post lightbox: one post large with its text and selection. */
.james-social-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	box-sizing: border-box;
	animation: james-social-lightbox-in 160ms ease-out;
}

@keyframes james-social-lightbox-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.james-social-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 8, 30, 0.78);
	backdrop-filter: blur(3px);
}

.james-social-lightbox-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	width: min(1180px, 100%);
	max-height: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: var(--boxed-background, #fff);
	color: var(--content-font-color, #20242a);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}

.james-social-lightbox-media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	background: #0f0b1f;
}

.james-social-lightbox-image {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 64px);
	object-fit: contain;
}

.james-social-lightbox-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 26px 24px;
	overflow-y: auto;
	max-height: calc(100vh - 64px);
	box-sizing: border-box;
}

.james-social-lightbox-counter {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--secondary-font-color, #6b7280);
}

.james-social-lightbox-info h3 {
	margin: 0;
	padding-right: 32px;
	font-size: 19px;
	line-height: 1.3;
}

.james-social-lightbox-select {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.james-social-lightbox-select input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--app-primary-color, #6d4dd3);
}

.james-social-lightbox-text {
	white-space: pre-wrap;
	font-size: 15px;
	line-height: 1.55;
}

.james-social-lightbox-close,
.james-social-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #20242a;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.james-social-lightbox-close {
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	font-size: 22px;
	line-height: 1;
}

.james-social-lightbox-nav {
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	font-size: 30px;
	line-height: 1;
}

.james-social-lightbox-nav.is-previous {
	left: 14px;
}

.james-social-lightbox-nav.is-next {
	right: 374px;
}

.james-social-lightbox-close:focus-visible,
.james-social-lightbox-nav:focus-visible {
	outline: 3px solid var(--app-primary-color, #6d4dd3);
	outline-offset: 2px;
}

@media (max-width: 860px) {
	.james-social-lightbox {
		padding: 12px;
	}

	.james-social-lightbox-panel {
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.james-social-lightbox-image {
		max-height: 60vh;
	}

	.james-social-lightbox-info {
		max-height: none;
	}

	.james-social-lightbox-nav {
		top: 30vh;
	}

	.james-social-lightbox-nav.is-next {
		right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.james-social-lightbox {
		animation: none !important;
	}
}

/* Posts that are already in the post planner: marked, not selectable again. */
.james-social-tile.is-in-planner {
	opacity: 1;
}

.james-social-tile.is-in-planner .james-social-media {
	filter: saturate(0.75) brightness(0.92);
}

.james-social-badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 52px);
	padding: 3px 8px;
	border-radius: 999px;
	background: #16a34a;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.james-social-badge[hidden] {
	display: none;
}

.james-social-lightbox-select.is-in-planner {
	color: #15803d;
	font-weight: 600;
	cursor: default;
}

.james-social-lightbox-done {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 12px;
}


/* Outputs: a Builder app drawn as a small app window. */
.james-output-thumb.is-app {
	height: 112px;
	align-items: flex-end;
	padding: 12px 14px 0;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--james-output-accent) 9%, var(--james-output-card-background));
}

.james-output-app {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 8px 8px 0 0;
	background: var(--james-output-card-background);
	box-shadow: 0 1px 3px rgba(17, 12, 46, 0.1);
	overflow: hidden;
	font-size: 9.5px;
	line-height: 1.3;
}

.james-output-app-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 5px 8px;
	background: var(--james-output-accent);
	color: #fff;
}

.james-output-app-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
}

.james-output-app-title {
	margin-left: 6px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.james-output-app-body {
	display: flex;
	flex: 1;
	min-height: 0;
}

.james-output-app-nav {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 22px;
	padding: 7px 5px;
	background: color-mix(in srgb, var(--james-output-accent) 10%, var(--james-output-card-background));
}

.james-output-app-navitem {
	display: block;
	height: 4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--james-output-accent) 35%, transparent);
}

.james-output-app-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 7px 8px;
	min-width: 0;
}

.james-output-app-line {
	display: block;
	color: var(--content-font-color, #20242a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.james-output-app-rule {
	display: block;
	height: 4px;
	width: 70%;
	border-radius: 2px;
	background: var(--james-output-line);
}

/* ---------- Undocked chat window: one light surface without the popup heading ----------
   The chat header carries the title and the popup's close button; the window moves by
   its header, its welcome screen and the frame around the composer (moveByContent). */
.vcontrol[data-utalic-class="VScenePopup"]:has(> .james-scene.is-undocked) {
	border: 1px solid color-mix(in srgb, var(--content-font-color, #202020) 12%, transparent);
	box-shadow: 0 22px 54px rgba(21, 7, 38, 0.28), 0 3px 12px rgba(21, 7, 38, 0.14);
}

.vcontrol[data-utalic-class="VScenePopup"] > .james-scene.is-undocked {
	border-radius: 15px;
	container-type: size;
}

.vcontrol[data-utalic-class="VScenePopup"]:has(> .james-scene.is-undocked) > .close {
	top: 14px;
	right: 14px;
}

.is-moved-by-content > .james-scene.is-undocked .james-conversation-header {
	cursor: grab;
}

.ui-draggable-dragging > .james-scene.is-undocked,
.ui-draggable-dragging > .james-scene.is-undocked * {
	cursor: grabbing !important;
}

.james-scene.is-undocked .james-message-scroll {
	padding-right: 14px !important;
	padding-left: 14px !important;
}

.james-scene.is-undocked .james-message-renderer[data-message-role="user"] {
	max-width: 88%;
}

.james-scene.is-undocked .james-composer-shell {
	width: calc(100% - 24px) !important;
}

.james-scene.is-undocked .james-composer-state {
	right: 12px !important;
	left: 12px !important;
}

/* Welcome screen sized for the small window. */
.james-scene.is-undocked .james-welcome > .VOwnerControlInnerPanel {
	padding: 4px 4px 12px;
}

.james-scene.is-undocked .james-welcome-hat {
	width: 96px !important;
	height: 58px !important;
	margin-bottom: 18px !important;
}

.james-scene.is-undocked .james-welcome-greeting span {
	font-size: 24px !important;
	line-height: 32px !important;
}

.james-scene.is-undocked .james-welcome-hint {
	margin-top: 12px !important;
}

.james-scene.is-undocked .james-welcome-hint span {
	font-size: 14px !important;
	line-height: 21px !important;
}

/* A low window drops the hat first, so the greeting and the hint stay in view. */
@container (max-height: 560px) {
	.james-scene.is-undocked .james-welcome-hat {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.james-composer-state {
		transition-duration: 1ms;
	}
}