@import "tailwindcss";

/*
 * Design system — see DESIGN.md (source of truth). emdash-matched: flat near-black
 * neutral ramp, hairline borders, system font, refined-blue accent (not emdash's
 * jade). Dark is primary (:root); light is the supported override
 * (:root[data-theme="light"]). The Zustand theme toggle sets data-theme on <html>.
 */
@theme inline {
	--font-sans:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Helvetica Neue",
		sans-serif;
	/* Nerd Font stack (ported from yyork): the terminal reads --font-mono so
   * agent TUIs get powerline separators and file-type icons. These are
   * system-installed fonts — the app bundles none — and the browser picks the
   * first one present, falling back to plain monospace (no icon glyphs) if a
   * user has no Nerd Font. JetBrainsMono Nerd Font is the primary target. */
	--font-mono:
		"JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "FiraCode Nerd Font Mono", "FiraCode Nerd Font",
		"MesloLGS NF", "CaskaydiaCove Nerd Font Mono", "CaskaydiaCove Nerd Font", "Hack Nerd Font Mono", "Hack Nerd Font",
		"Symbols Nerd Font Mono", "Symbols Nerd Font", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;

	/* Surfaces */
	--color-background: var(--bg);
	--color-foreground: var(--fg);
	--color-surface: var(--bg-1);
	--color-card: var(--bg-1);
	--color-card-foreground: var(--fg);
	--color-raised: var(--bg-2);
	--color-overlay: var(--bg-3);
	--color-popover: var(--bg-1);
	--color-popover-foreground: var(--fg);
	/* shadcn input border uses border-input; map to our hairline border */
	--color-input: var(--border);
	--color-sidebar: var(--sidebar-bg);
	--color-sidebar-foreground: var(--fg-muted);
	--color-sidebar-primary: var(--accent);
	--color-sidebar-primary-foreground: var(--accent-fg);
	--color-sidebar-accent: var(--bg-2);
	--color-sidebar-accent-foreground: var(--fg);
	--color-sidebar-border: var(--border);
	--color-sidebar-ring: var(--accent);
	--color-terminal: var(--term-bg);

	/* Text */
	--color-muted: var(--bg-2);
	--color-muted-foreground: var(--fg-muted);
	--color-passive: var(--fg-passive);
	--color-secondary: var(--bg-2);
	--color-secondary-foreground: var(--fg-muted);

	/* Accent (refined blue) — primary buttons, active session, focus */
	--color-primary: var(--accent);
	--color-primary-foreground: var(--accent-fg);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-fg);
	--color-accent-weak: var(--accent-weak);
	--color-accent-dim: var(--accent-dim);
	--color-ring: var(--accent);

	/* Borders */
	--color-border: var(--border);
	--color-border-strong: var(--border-1);

	/* Status — map 1:1 to the daemon's derived statuses (agent-orchestrator
   * palette): working=orange, needs-you=amber, mergeable=green, fail=red. */
	--color-working: var(--orange);
	--color-success: var(--green);
	--color-success-strong: var(--green-strong);
	--color-warning: var(--amber);
	--color-error: var(--red);

	/* shadcn "destructive" → our error red (Button destructive, Alert, etc.) */
	--color-destructive: var(--red);
	--color-destructive-foreground: #ffffff;

	/* Theme-adaptive interactive surfaces (sidebar hovers, tabs, kanban chrome) */
	--color-interactive-hover: var(--interactive-hover);
	--color-interactive-active: var(--interactive-active);

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;

	--animate-status-pulse: status-pulse 1.8s ease-in-out infinite;
	--animate-overlay-in: overlay-in 150ms ease-out;
	--animate-modal-in: modal-in 150ms ease-out;
}

:root {
	/* Dark — cloned from the agent-orchestrator web app (packages/web). #0a0b0d
   * base, #15171b is the only bordered surface, hairline white-alpha lines,
   * blue accent, orange=working / amber=needs-you / green=mergeable / red=fail. */
	--bg: #0a0b0d;
	--bg-1: #15171b;
	--bg-2: #1b1d22;
	--bg-3: #212329;
	--fg: #f4f5f7;
	--fg-muted: #9ba1aa;
	--fg-passive: #646a73;
	--border: rgb(255 255 255 / 0.06);
	--border-1: rgb(255 255 255 / 0.1);
	--accent: #4d8dff;
	--accent-fg: #ffffff;
	--accent-weak: rgb(77 141 255 / 0.16);
	--accent-dim: #24406e;
	--orange: #f59f4c;
	--green: #74b98a;
	--green-strong: #74b98a;
	--amber: #e8c14a;
	--red: #ef6b6b;
	/* Terminal — dark palette (light override below). */
	--term-bg: #15171b;
	--term-fg: #d7d7d2;
	--term-green: #74b98a;
	--term-dim: #7c7c7c;
	--term-blue: #4d8dff;
	--term-amber: #e8c14a;
	--shadow: 0 1px 0 rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.5);
	/* Sidebar surface sits a step below --bg (cloned #08090b). */
	--sidebar-bg: #08090b;
	--interactive-hover: rgb(255 255 255 / 0.04);
	--interactive-active: rgb(255 255 255 / 0.07);
	--kanban-column-bg: rgb(255 255 255 / 0.018);
	--kanban-pending-glow: rgb(255 255 255 / 0.02);
}

:root[data-theme="light"] {
	/* Light — supported, not primary. */
	--bg: #fcfcfc;
	--bg-1: #ffffff;
	--bg-2: #ededee;
	--bg-3: #e4e4e6;
	--fg: #1a1a1a;
	--fg-muted: #666666;
	--fg-passive: #9a9a9a;
	--border: #e3e3e5;
	--border-1: #d4d4d6;
	--accent: #2563eb;
	--accent-fg: #ffffff;
	--accent-weak: rgb(37 99 235 / 0.12);
	--accent-dim: #bcd2f7;
	--sidebar-bg: var(--bg);
	--orange: #c2410c;
	--green: #1a7f37;
	--green-strong: #1a7f37;
	--amber: #9a6b00;
	--red: #c0392b;
	--interactive-hover: rgb(0 0 0 / 0.04);
	--interactive-active: rgb(0 0 0 / 0.07);
	--kanban-column-bg: rgb(0 0 0 / 0.02);
	--kanban-pending-glow: rgb(0 0 0 / 0.03);
	--term-bg: #fafafa;
	--term-fg: #24292f;
	--term-green: #1a7f37;
	--term-dim: #6b7280;
	--term-blue: #2563eb;
	--term-amber: #9a6b00;
	--shadow: 0 1px 0 rgb(0 0 0 / 0.03), 0 12px 30px rgb(20 30 50 / 0.1);
}

* {
	box-sizing: border-box;
}

html,
body,
#root {
	height: 100%;
}

body {
	margin: 0;
	overflow: hidden;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
	font: inherit;
}

:is(
		button,
		a[href],
		summary,
		select,
		[role="button"],
		[data-slot="select-trigger"],
		[data-slot="select-item"],
		[data-slot="dropdown-menu-item"],
		[data-sidebar="menu-button"],
		[data-sidebar="menu-sub-button"]
	):not(:disabled):not([aria-disabled="true"]) {
	cursor: pointer;
}

:is(
	button,
	select,
	[role="button"],
	[data-slot="select-trigger"],
	[data-slot="select-item"],
	[data-slot="dropdown-menu-item"],
	[data-sidebar="menu-button"],
	[data-sidebar="menu-sub-button"]
):disabled,
:is(
	button,
	select,
	[role="button"],
	[data-slot="select-trigger"],
	[data-slot="select-item"],
	[data-slot="dropdown-menu-item"],
	[data-sidebar="menu-button"],
	[data-sidebar="menu-sub-button"]
)[aria-disabled="true"] {
	cursor: not-allowed;
}

.xterm {
	height: 100%;
}

.terminal-pane-frame:fullscreen {
	background: var(--bg);
}

.terminal-toolbar {
	display: flex;
	height: 56px;
	flex: 0 0 56px;
	align-items: center;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	padding: 0 18px;
}

.terminal-toolbar__label {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
}

.terminal-toolbar__eyebrow {
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	color: var(--fg-muted);
}

.terminal-toolbar__session {
	min-width: 0;
	overflow: hidden;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-passive);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.terminal-toolbar__controls {
	display: flex;
	margin-left: auto;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	color: var(--fg-passive);
}

.terminal-toolbar__control {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--fg-passive);
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 1;
	transition:
		background 120ms ease,
		color 120ms ease,
		opacity 120ms ease;
}

.terminal-toolbar__control:hover {
	background: var(--interactive-hover);
	color: var(--fg);
}

.terminal-toolbar__control:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
	outline-offset: 1px;
}

.terminal-toolbar__control:disabled {
	cursor: default;
	opacity: 0.35;
}

.terminal-toolbar__control:disabled:hover {
	background: transparent;
	color: var(--fg-passive);
}

.terminal-toolbar__control--icon {
	margin-left: 6px;
}

.terminal-toolbar__font-size {
	width: 42px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-muted);
}

:root[data-theme="light"] .xterm .xterm-viewport::-webkit-scrollbar-thumb {
	background: rgb(0 0 0 / 0.12);
}

:root[data-theme="light"] .xterm .xterm-viewport:hover::-webkit-scrollbar-thumb {
	background: rgb(0 0 0 / 0.2);
}

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

@keyframes overlay-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes modal-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* ── Resizable panel handles (sidebar + inspector) ──────────────────────── */
.resize-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 7px;
	z-index: 5;
	cursor: col-resize;
	background: transparent;
	touch-action: none;
}

.resize-handle--right {
	right: -3px;
}

.resize-handle--left {
	left: -3px;
}

.resize-handle::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
	background: transparent;
	transition: background 0.12s ease;
}

.resize-handle:hover::after,
body.is-resizing-x .resize-handle::after {
	background: var(--border);
}

body.is-resizing-x {
	cursor: col-resize;
	user-select: none;
}

/* No width transition while actively dragging the sidebar resize handle
 * (shadcn's sidebar animates width for collapse/expand). */
body.is-resizing-x [data-slot="sidebar-gap"],
body.is-resizing-x [data-slot="sidebar-container"] {
	transition: none;
}

/* ── Shell topbar (agent-orchestrator .dashboard-app-header) ──────────────
 * One header for every screen (rendered by the shell layout), so one padding:
 * AO's session-topbar values. Upstream splits this into a 14px dashboard
 * header and a 16/14px session override; with the bar hoisted there is a
 * single frame and the crumb never shifts between views. The bar spans the
 * full window width with the sidebar pinned below it (approved divergence
 * 2026-06-12), so its bottom border runs edge-to-edge and the sidebar border
 * stops at the header instead of crossing the traffic-light strip. */
.dashboard-app-header {
	display: flex;
	height: 56px;
	flex-shrink: 0;
	align-items: center;
	gap: 13px;
	padding: 0 16px 0 14px;
	border-bottom: 1px solid var(--border);
	background: var(--bg);
	z-index: 10;
}

.dashboard-app-header__project {
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--fg);
	white-space: nowrap;
}

.topbar-project-line {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 6px;
}

.dashboard-app-header__spacer {
	flex: 1;
	min-width: 0;
}

.dashboard-app-header__actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
}

.dashboard-app-header__icon-btn {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 7px;
	color: var(--fg-muted);
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.dashboard-app-header__icon-btn:hover {
	background: var(--interactive-hover);
	color: var(--fg);
}

.dashboard-app-header__kill-btn {
	display: inline-flex;
	height: 30px;
	align-items: center;
	gap: 5px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--red) 58%, transparent);
	background: color-mix(in srgb, var(--red) 5%, transparent);
	padding: 0 10px;
	font-size: 12px;
	font-weight: 650;
	line-height: 1;
	color: var(--red);
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.dashboard-app-header__kill-btn:hover {
	background: color-mix(in srgb, var(--red) 12%, transparent);
	border-color: color-mix(in srgb, var(--red) 75%, transparent);
}

.dashboard-app-header__kill-confirm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dashboard-app-header__kill-confirm-btn {
	display: inline-flex;
	height: 34px;
	align-items: center;
	gap: 6px;
	border-radius: 7px;
	border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
	padding: 0 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--red);
	background: color-mix(in srgb, var(--red) 10%, transparent);
	transition: background 0.12s ease;
}

.dashboard-app-header__kill-confirm-btn:hover {
	background: color-mix(in srgb, var(--red) 16%, transparent);
}

.dashboard-app-header__kill-confirm-btn:disabled {
	opacity: 0.6;
}

.dashboard-app-header__kill-cancel-btn {
	display: inline-flex;
	height: 34px;
	align-items: center;
	border-radius: 7px;
	padding: 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--fg-muted);
	transition: color 0.12s ease;
}

.dashboard-app-header__kill-cancel-btn:hover {
	color: var(--fg);
}

.dashboard-app-header__kill-error {
	font-size: 11px;
	color: var(--red);
}

.dashboard-app-header__primary-btn {
	display: inline-flex;
	height: 34px;
	align-items: center;
	gap: 6px;
	border-radius: 7px;
	padding: 0 15px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	background: var(--accent);
	color: var(--accent-fg);
	transition: filter 0.12s ease;
}

.dashboard-app-header__primary-btn:hover {
	filter: brightness(1.08);
}

.dashboard-app-header__primary-btn:disabled {
	opacity: 0.6;
}

.dashboard-app-header__primary-btn--compact {
	height: 32px;
	border-radius: 7px;
	padding: 0 14px;
	font-size: 13px;
}

.dashboard-app-header__accent-btn {
	display: inline-flex;
	height: 34px;
	align-items: center;
	gap: 6px;
	border-radius: 7px;
	border: 1px solid var(--border);
	padding: 0 15px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	background: var(--raised);
	color: var(--fg-muted);
	transition: background 0.12s ease;
}

.dashboard-app-header__accent-btn:hover {
	background: var(--surface);
	color: var(--fg);
}

.session-topbar__lead {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 13px;
}

/* ── macOS titlebar cluster (TitlebarNav) ─────────────────────────────────
 * Fixed beside the traffic lights so the toggle/history buttons occupy the
 * exact same spot in both sidebar states. The 56px strip matches the
 * .dashboard-app-header height so the buttons share the topbar's center line
 * (y 28) with the project crumb / bell; the lights match via
 * trafficLightPosition y:20 in main.ts. Lights span x=14–66; the cluster
 * starts a 13px group gap after them (the .dashboard-app-header gap), so
 * the toggle reads as its own group rather than a fourth light. */
.titlebar-nav {
	position: fixed;
	top: 0;
	left: 79px;
	z-index: 20;
	display: flex;
	height: 56px;
	align-items: center;
	gap: 2px;
}

.titlebar-nav__btn {
	width: 28px;
	height: 28px;
}

/* macOS: the full-width header starts its content past the lights + fixed
 * cluster: cluster right edge 79 + 3×28 + 2×2 = 167px, + the header's 13px
 * group gap = 180px. */
.dashboard-app-header.is-under-titlebar-nav {
	padding-left: 180px;
}

.topbar-project-pills-group {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
}

.topbar-identity-sep {
	font-size: 12px;
	line-height: 1;
	color: var(--fg-passive);
}

.session-detail-mode-badge {
	display: inline-flex;
	height: 24px;
	align-items: center;
	gap: 4px;
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0 8px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
}

.session-detail-mode-badge--neutral {
	background: var(--surface);
	color: var(--fg-muted);
}

.session-topbar__identity {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 11px;
}

.session-topbar__branch {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 5px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	line-height: 1;
	color: var(--fg-passive);
}

/* ── Session inspector rail (agent-orchestrator SessionInspector) ───────── */
.session-inspector {
	container-type: inline-size;
	display: flex;
	height: 100%;
	min-height: 0;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg);
}

.session-inspector__tabs {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 47px;
	flex-shrink: 0;
	padding: 0 11px;
	border-bottom: 1px solid var(--border);
}

.session-inspector__tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	padding: 7px 6px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fg-passive);
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.session-inspector__tab:hover {
	background: var(--interactive-hover);
	color: var(--fg);
}

.session-inspector__tab.is-active {
	background: var(--interactive-active);
	color: var(--fg);
}

.session-inspector__tab-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.session-inspector__tab-icon svg {
	width: 14px;
	height: 14px;
}

.session-inspector__tab-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.session-inspector__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 18px 18px 40px;
}

/* Inspector resize handle (shadcn resizable separator, AO visual): a 7px
 * transparent grab strip whose centered 1px line lights accent on hover, drag
 * (rrp sets data-separator="active"), and keyboard focus. */
.session-inspector__resize-handle {
	width: 7px;
	cursor: col-resize;
	background: transparent;
	touch-action: none;
}

.session-inspector__resize-handle::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	transform: translateX(-50%);
	background: var(--border-1);
	transition: background 0.12s ease;
}

.session-inspector__resize-handle:hover::after,
.session-inspector__resize-handle:focus-visible::after,
.session-inspector__resize-handle[data-separator="active"]::after {
	background: var(--border);
}

.reviewer-terminal-header {
	display: flex;
	height: 36px;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--border);
	background: var(--term-bg);
	padding: 0 14px;
	font-family: var(--font-mono);
}

.reviewer-terminal-header__back {
	display: inline-flex;
	height: 24px;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--bg-1);
	padding: 0 8px;
	font-size: 11px;
	color: var(--fg-muted);
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.reviewer-terminal-header__back:hover {
	background: var(--interactive-hover);
	color: var(--fg);
}

.reviewer-terminal-header__back svg,
.reviewer-terminal-header__role svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.reviewer-terminal-header__role {
	display: inline-flex;
	height: 24px;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--green) 34%, transparent);
	background: color-mix(in srgb, var(--green) 9%, transparent);
	padding: 0 9px;
	font-size: 11px;
	font-weight: 700;
	color: #8bdc75;
	text-transform: uppercase;
}

:root[data-theme="light"] .reviewer-terminal-header__role {
	color: var(--green);
}

.reviewer-terminal-header__harness {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 650;
	color: var(--fg);
}

/* Collapse/expand animation for the inspector panel: rrp v4 drives panel
 * sizes via flex-grow, which is animatable. Suppress it while the separator
 * is actively dragged so resizing tracks the pointer 1:1. */
.session-split #inspector[data-panel] {
	transition: flex-grow 0.2s linear;
}

.session-split:has([data-separator="active"]) #inspector[data-panel] {
	transition: none;
}

.inspector-section {
	margin-bottom: 22px;
}

.inspector-section--separated {
	border-top: 1px solid var(--border);
	padding-top: 18px;
}

.inspector-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 11px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--fg-passive);
}

.inspector-section__link {
	font-size: 11px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--accent);
}

.inspector-section__link:hover {
	text-decoration: underline;
}

.inspector-empty {
	font-size: 12px;
	color: var(--fg-muted);
	line-height: 1.5;
}

.inspector-pr-summary {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
}

.inspector-pr-summary__title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--fg);
}

.inspector-pr-summary__state {
	margin-left: auto;
	flex-shrink: 0;
}

.reviewer-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.reviewer-kicker {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--fg);
}

.reviewer-kicker svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--fg-passive);
}

.reviewer-kicker span:first-of-type {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reviewer-kicker span:last-child {
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--fg-passive);
}

.reviewer-error {
	margin: 0;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
	background: color-mix(in srgb, var(--red) 8%, transparent);
	padding: 8px 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--red);
}

.reviewer-notice {
	margin: 0;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
	background: color-mix(in srgb, var(--green) 8%, transparent);
	padding: 8px 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--green);
}

.reviewer-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--bg-1);
	padding: 12px;
}

.reviewer-card--success {
	border-color: color-mix(in srgb, var(--green) 25%, var(--border));
}

.reviewer-card--danger {
	border-color: color-mix(in srgb, var(--red) 22%, var(--border));
}

.reviewer-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.reviewer-card__name {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fg);
}

.reviewer-card__name svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: var(--fg-passive);
}

.reviewer-card__name span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reviewer-card__identity {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.reviewer-card__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	font-weight: 650;
	color: var(--fg-muted);
}

.reviewer-status {
	display: inline-flex;
	height: 20px;
	max-width: 58%;
	flex-shrink: 0;
	align-items: center;
	gap: 5px;
	overflow: hidden;
	border-radius: 6px;
	padding: 0 8px;
	font-size: 10.5px;
	font-weight: 650;
	line-height: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.reviewer-status svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

.reviewer-status--neutral {
	background: var(--bg-2);
	color: var(--fg-muted);
}

.reviewer-status--running {
	background: color-mix(in srgb, var(--orange) 12%, transparent);
	color: var(--orange);
}

.reviewer-status--success {
	background: color-mix(in srgb, var(--green) 14%, transparent);
	color: var(--green);
}

.reviewer-status--danger {
	background: color-mix(in srgb, var(--red) 14%, transparent);
	color: var(--red);
}

.reviewer-card__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding-top: 4px;
}

.reviewer-card__actions:has(.reviewer-card__action:only-child) {
	grid-template-columns: 1fr;
}

.reviewer-card__action {
	display: inline-flex;
	height: 38px;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: 7px;
	overflow: hidden;
	border-radius: 7px;
	border: 1px solid var(--border);
	background: var(--bg-2);
	padding: 0 10px;
	font-size: 12px;
	font-weight: 650;
	color: var(--fg-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
	transition:
		background 0.12s ease,
		border-color 0.12s ease,
		color 0.12s ease;
}

.reviewer-card__action svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.reviewer-card__action:hover:not(:disabled) {
	background: var(--interactive-hover);
	color: var(--fg);
}

.reviewer-card__action:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.reviewer-card__action--primary {
	border-color: color-mix(in srgb, var(--green) 42%, transparent);
	background: color-mix(in srgb, var(--green) 10%, transparent);
	color: #8bdc75;
}

.reviewer-card__action--wide {
	width: 100%;
}

.reviewer-summary-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	border-radius: 7px;
	border: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg-0) 35%, transparent);
}

.reviewer-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--border);
	background: transparent;
	padding: 11px 12px;
	min-height: 52px;
}

.reviewer-row:last-child {
	border-bottom: 0;
}

.reviewer-row--success {
	border-color: var(--border);
}

.reviewer-row--danger {
	border-color: var(--border);
}

.reviewer-row__main {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
}

.reviewer-row__dot {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--fg-passive);
}

.reviewer-row__dot--running {
	background: var(--orange);
}

.reviewer-row__dot--success {
	background: var(--green);
}

.reviewer-row__dot--danger {
	background: var(--red);
}

.reviewer-row__copy {
	display: grid;
	grid-template-columns: auto auto;
	min-width: 0;
	align-items: baseline;
	column-gap: 6px;
	row-gap: 2px;
	font-size: 12px;
	font-weight: 650;
	color: var(--fg);
}

.reviewer-row__copy svg {
	display: none;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--fg-passive);
}

.reviewer-row__copy a {
	grid-column: 1 / -1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}

.reviewer-row__copy a:hover {
	text-decoration: underline;
}

.reviewer-row__number {
	grid-column: 1;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-passive);
}

.reviewer-row__verdict {
	white-space: nowrap;
	font-size: 11px;
	font-weight: 650;
	color: var(--fg-muted);
}

.reviewer-row__verdict--running {
	color: var(--orange);
}

.reviewer-row__verdict--success {
	color: var(--green);
}

.reviewer-row__verdict--danger {
	color: var(--red);
}

@media (max-width: 680px) {
	.reviewer-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

:root[data-theme="light"] .reviewer-card__action--primary {
	color: var(--green);
}

.inspector-empty--center {
	padding: 24px 8px;
	text-align: center;
}

.inspector-empty--browser {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 48px 18px;
	text-align: center;
}

.inspector-empty--browser svg {
	width: 30px;
	height: 30px;
	color: var(--fg-passive);
}

.inspector-empty--browser p {
	font-size: 12.5px;
	color: var(--fg-muted);
}

.inspector-empty--browser span {
	font-size: 11.5px;
	color: var(--fg-passive);
	line-height: 1.5;
}

.inspector-kv {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.inspector-kv__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 2px;
	font-size: 12.5px;
}

.inspector-kv__k {
	width: 74px;
	flex-shrink: 0;
	color: var(--fg-muted);
}

.inspector-kv__v {
	min-width: 0;
	color: var(--fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.inspector-kv__v--mono {
	font-family: var(--font-mono);
	font-size: 11.5px;
}

@container (max-width: 300px) {
	.session-inspector__body {
		padding-inline: 14px;
	}

	.inspector-pr-summary {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.inspector-pr-summary__state {
		margin-left: 22px;
	}

	.inspector-kv__row {
		align-items: flex-start;
		flex-direction: column;
		gap: 2px;
	}

	.inspector-kv__k {
		width: auto;
	}

	.inspector-kv__v {
		width: 100%;
	}

	.reviewer-card {
		gap: 12px;
		padding: 12px;
		overflow: hidden;
	}

	.reviewer-card__top {
		align-items: flex-start;
		flex-direction: column;
	}

	.reviewer-status {
		max-width: 100%;
	}

	.reviewer-card__actions {
		grid-template-columns: 1fr;
	}
}

.inspector-timeline {
	position: relative;
	padding-left: 20px;
}

.inspector-timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	bottom: 6px;
	width: 1px;
	background: var(--border);
}

.inspector-timeline__ev {
	position: relative;
	padding: 0 0 15px;
}

.inspector-timeline__ev:last-child {
	padding-bottom: 0;
}

.inspector-timeline__node {
	position: absolute;
	left: -18px;
	top: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--fg-passive);
	box-shadow: 0 0 0 3px var(--bg);
}

.inspector-timeline__ev--now .inspector-timeline__node {
	background: var(--orange);
	box-shadow:
		0 0 0 3px var(--bg),
		0 0 8px var(--orange);
}

.inspector-timeline__ev--good .inspector-timeline__node {
	background: var(--green);
}

.inspector-timeline__ev--warn .inspector-timeline__node {
	background: var(--amber);
}

.inspector-timeline__ev--bad .inspector-timeline__node {
	background: var(--red);
}

.inspector-timeline__et {
	font-size: 12px;
	color: var(--fg);
	line-height: 1.45;
}

.inspector-timeline__et b {
	font-weight: 600;
}

.inspector-timeline__badge {
	display: inline-flex;
	vertical-align: middle;
}

.inspector-timeline__detail {
	color: var(--fg-muted);
}

.inspector-timeline__ets {
	font-size: 10.5px;
	color: var(--fg-passive);
	font-family: var(--font-mono);
	margin-top: 2px;
}

.browser-panel {
	display: flex;
	height: 100%;
	min-height: 320px;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg);
}

.browser-panel__toolbar {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	min-width: 0;
	padding: 7px;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.browser-panel__url {
	position: relative;
	min-width: 0;
	flex: 1;
}

.browser-panel__url-icon {
	position: absolute;
	left: 9px;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translateY(-50%);
	color: var(--fg-passive);
	pointer-events: none;
}

.browser-panel__url-input {
	height: 29px;
	padding-left: 29px;
	font-family: var(--font-mono);
	font-size: 12px;
}

.browser-panel__content {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	background: var(--bg);
}

.browser-panel__slot {
	position: absolute;
	inset: 0;
	min-width: 1px;
	min-height: 1px;
}

.browser-panel__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--fg-passive);
	pointer-events: none;
}

.browser-panel__error {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
	border-radius: 7px;
	background: color-mix(in srgb, var(--red) 8%, var(--bg));
	color: var(--red);
	font-size: 12px;
}
