@font-face {
	font-family: 'Berkeley Mono V2';
	src: url('../../../fonts/TX-02-Variable.woff2') format('woff2-variations');
	font-style: normal;
	size-adjust: 95%;
	font-display: swap;
}

@font-face {
	font-family: 'Berkeley Mono V2';
	src: url('../../../fonts/TX-02-Variable.woff2') format('woff2-variations');
	font-style: italic;
	size-adjust: 95%;
	font-display: swap;
}

html:has(.app-shell),
body:has(.app-shell) {
	margin: 0;
	padding: 0;
	overflow: hidden;
	overscroll-behavior: none;
}

html:has(.app-shell),
.app-shell {
	--app-shell-background: light-dark(oklch(92.971% 0.01478 132.48), #0b0d0b);
	--app-surface-background: light-dark(oklch(99% 0.01 131.32), #0c1516);
	--font-mono: 'Berkeley Mono V2', monospace;
}

.app-shell {
	--app-transcript-background: var(--app-shell-background);
	--app-transcript-shadow-color: color-mix(
		in srgb,
		var(--app-transcript-background) 65%,
		transparent
	);
	--agent-ui-activity-group-fade-background: var(--app-transcript-background);
	--agent-ui-activity-group-shadow-color: var(--app-transcript-shadow-color);
	--color-foreground: var(--foreground);
	--sidebar-foreground: var(--foreground);
	--sidebar-accent-foreground: var(--foreground);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	color: var(--foreground);
	overscroll-behavior: none;
}

.app-shell.app-shell-darwin,
body:has(.app-shell-darwin) {
	font-feature-settings:
		'ss07' 1,
		'ss06' 1;
}

@media (display-mode: standalone) and (min-width: 768px) {
	.app-shell {
		padding-top: 0 !important;
		padding-right: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 0.5rem;
	}

	.app-devman-desktop-panel {
		border-top: 1px solid var(--input-border);
	}
}

@media (display-mode: window-controls-overlay) {
	html:has(.app-shell),
	body:has(.app-shell),
	#app-container {
		background-color: var(--app-surface-background);
		--app-window-controls-title-bar-buffer: 4px;
		--app-window-controls-title-bar-height: max(
			calc(2.25rem + var(--app-window-controls-title-bar-buffer)),
			calc(env(titlebar-area-height, 2.25rem) + var(--app-window-controls-title-bar-buffer))
		);
	}

	@media (pointer: coarse) {
		#app-container {
			--app-window-controls-title-bar-height: max(
				calc(2.75rem + var(--app-window-controls-title-bar-buffer)),
				calc(
					env(titlebar-area-height, 2.75rem) + var(--app-window-controls-title-bar-buffer)
				)
			);
		}
	}

	.app-shell {
		background-color: var(--app-surface-background);
		padding: 0;
	}

	.app-frame {
		padding: 0;
	}

	.app-content-frame {
		border-radius: 0;
	}

	#app-container .app-devman-desktop-panel {
		border-top: 1px solid var(--input-border);
		margin-top: env(titlebar-area-height, 2.25rem);
	}

	#app-container .app-devman-desktop-panel::before {
		content: '';
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 100%;
		left: 0;
		height: env(titlebar-area-height, 2.25rem);
		-webkit-app-region: drag;
		app-region: drag;
	}

	.app-window-drag-region {
		position: absolute;
		z-index: 10;
		top: env(titlebar-area-y, 0px);
		left: env(titlebar-area-x, 0px);
		width: env(titlebar-area-width, 100%);
		height: env(titlebar-area-height, 2.25rem);
		pointer-events: none;
		-webkit-app-region: no-drag;
		app-region: no-drag;
	}

	#app-container :is(.sidebar-toolbar, .app-title-bar, .app-window-controls-title-bar) {
		position: relative;
		z-index: 20;
		height: var(--app-window-controls-title-bar-height);
		-webkit-app-region: drag;
		app-region: drag;
	}

	#app-container :is(.app-sidebar-logo, .sidebar-trigger-wrapper) {
		height: var(--app-window-controls-title-bar-height);
	}

	#app-container
		:is(.sidebar-toolbar, .app-title-bar, .app-window-controls-title-bar)
		:is(a, button, input, select, textarea, [role='button']),
	#app-container .app-sidebar-logo,
	#app-container .sidebar-trigger-wrapper,
	#app-container .sidebar-trigger-wrapper * {
		-webkit-app-region: no-drag;
		app-region: no-drag;
	}

	#app-container .app-title-bar {
		-webkit-app-region: no-drag;
		app-region: no-drag;
	}

	#app-container .app-title-bar > :first-child {
		-webkit-app-region: drag;
		app-region: drag;
	}

	#app-container
		.app-title-bar
		> :first-child
		:is(a, button, input, select, textarea, [role='button']) {
		-webkit-app-region: no-drag;
		app-region: no-drag;
	}

	/* Portaled overlays can overlap draggable titlebar regions in PWA window-controls mode. */
	:where(
		[role='dialog'],
		[role='listbox'],
		[role='menu'],
		[role='tooltip'],
		[data-slot='dialog-overlay'],
		[data-slot='dialog-content'],
		[data-slot='sheet-overlay'],
		[data-slot='sheet-content']
	),
	:where(
			[role='dialog'],
			[role='listbox'],
			[role='menu'],
			[role='tooltip'],
			[data-slot='dialog-overlay'],
			[data-slot='dialog-content'],
			[data-slot='sheet-overlay'],
			[data-slot='sheet-content']
		)
		* {
		-webkit-app-region: no-drag;
		app-region: no-drag;
	}
}

/* Thin, subtle scrollbars across the whole app shell that do not expand on hover. */
.app-shell,
.app-shell * {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent;
}

.app-shell::-webkit-scrollbar,
.app-shell *::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.app-shell::-webkit-scrollbar-track,
.app-shell *::-webkit-scrollbar-track {
	background: transparent;
}

.app-shell::-webkit-scrollbar-thumb,
.app-shell *::-webkit-scrollbar-thumb {
	background-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
	border-radius: 999px;
	border: 1px solid transparent;
	background-clip: padding-box;
}

.app-shell::-webkit-scrollbar-thumb:hover,
.app-shell *::-webkit-scrollbar-thumb:hover {
	background-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
}

html.dark .app-shell {
	--foreground: color-mix(in srgb, #eeeeea 90%, #0b0d0b);
}

@media (prefers-color-scheme: dark) {
	html:not(.light) .app-shell {
		--foreground: color-mix(in srgb, #eeeeea 90%, #0b0d0b);
	}
}

	:root,
	#app-container {
		--app-mobile-safe-area-inset-top: 0px;
		--app-mobile-safe-area-inset-right: 0px;
		--app-mobile-safe-area-inset-bottom: 0px;
		--app-mobile-safe-area-inset-left: 0px;
	}

	html:has(#app-container),
	body:has(#app-container) {
		margin: 0;
		padding: 0;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	#app-container {
		position: fixed;
		top: var(--app-shell-top, 0px);
		left: 0;
		right: 0;
		height: var(--app-shell-height, 100dvh);
		max-height: var(--app-shell-height, 100dvh);
		overflow: hidden;
		overscroll-behavior: none;
		touch-action: pan-x pan-y;
	}

	@supports (padding: env(safe-area-inset-bottom)) {
		:root,
		#app-container {
			--app-mobile-safe-area-inset-top: env(safe-area-inset-top);
			--app-mobile-safe-area-inset-right: env(safe-area-inset-right);
			--app-mobile-safe-area-inset-bottom: env(safe-area-inset-bottom);
			--app-mobile-safe-area-inset-left: env(safe-area-inset-left);
		}
	}

	@media (hover: none) and (pointer: coarse) {
		@supports (-webkit-touch-callout: none) {
			.app-shell {
				padding-top: max(0.5rem, var(--app-mobile-safe-area-inset-top));
				padding-right: max(0.5rem, env(safe-area-inset-right));
				padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
				padding-left: max(0.5rem, env(safe-area-inset-left));
			}

			/* Move the whole app below the iPad PWA status bar instead of flowing around it. */
			@media (display-mode: standalone) and (min-width: 768px) and (min-height: 768px) {
				#app-container {
					--app-ipad-standalone-status-bar-offset: max(2rem, env(safe-area-inset-top));
					top: calc(
						var(--app-shell-top, 0px) + var(--app-ipad-standalone-status-bar-offset)
					);
					height: calc(
						var(--app-shell-height, 100dvh) -
							var(--app-ipad-standalone-status-bar-offset)
					);
					max-height: calc(
						var(--app-shell-height, 100dvh) -
							var(--app-ipad-standalone-status-bar-offset)
					);
				}
			}

			@media (display-mode: standalone) {
				:root,
				#app-container {
					--app-mobile-safe-area-inset-bottom: 0px;
				}

				.app-shell {
					padding-bottom: 0;
				}
			}

			#app-container a,
			#app-container button,
			#app-container [role='button'] {
				-webkit-tap-highlight-color: transparent;
				-webkit-touch-callout: none;
				touch-action: manipulation;
			}
		}
	}