/* Optional Drytis Studio presentation shell. Standalone layout remains the default. */

.studio-demo-shell,
.studio-tool-workspace {
	display: contents;
}

.studio-host-rail,
.studio-context,
.studio-context-resizer,
.studio-tool-header {
	display: none;
}

html[data-qase-layout="studio-mock"] {
	--studio-host-canvas: #f5f6f8;
	--studio-host-surface: #f8f9fb;
	--studio-host-workspace: #fff;
	--studio-host-text: #171717;
	--studio-host-muted: #60646c;
	--studio-host-border: #e3e5e8;
	--studio-host-action: #315ee8;
	--studio-context-width: 280px;
	color-scheme: light;
}

html[data-theme="dark"][data-qase-layout="studio-mock"] {
	--studio-host-canvas: #0d0f12;
	--studio-host-surface: #1b1f25;
	--studio-host-workspace: #15181d;
	--studio-host-text: #f5f5f5;
	--studio-host-muted: #a8adb7;
	--studio-host-border: #2b3038;
	--studio-host-action: #7c9cff;
	color-scheme: dark;
}

html[data-qase-layout="studio-mock"] body {
	min-width: 0;
	overflow: hidden;
	background: var(--studio-host-canvas);
	color: var(--studio-host-text);
}

html[data-qase-layout="studio-mock"] .studio-demo-shell {
	display: grid;
	grid-template-columns: 64px var(--studio-context-width) 7px minmax(0, 1fr);
	width: 100%;
	height: 100dvh;
	min-width: 0;
	background: var(--studio-host-canvas);
}

html[data-qase-layout="studio-mock"] .studio-host-rail {
	display: flex;
	min-height: 0;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 14px 10px;
	border-right: 1px solid var(--studio-host-border);
	background: var(--studio-host-workspace);
}

.studio-host-mark,
.studio-host-avatar,
.studio-tool-glyph {
	display: grid;
	place-items: center;
	font-weight: 700;
}

.studio-host-mark {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--studio-host-text);
	color: var(--studio-host-workspace);
	font-size: 16px;
}

.studio-host-nav {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
}

.studio-host-item {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--studio-host-muted);
	font: 600 15px/1 Geist, sans-serif;
}

.studio-host-item.is-active {
	border-color: color-mix(in srgb, var(--studio-host-action) 28%, transparent);
	background: color-mix(in srgb, var(--studio-host-action) 10%, transparent);
	color: var(--studio-host-action);
}

.studio-host-avatar {
	width: 32px;
	height: 32px;
	border: 1px solid var(--studio-host-border);
	border-radius: 50%;
	background: var(--studio-host-surface);
	color: var(--studio-host-muted);
	font-size: 10px;
}

html[data-qase-layout="studio-mock"] .studio-context {
	display: flex;
	min-width: 0;
	min-height: 0;
	flex-direction: column;
	gap: 16px;
	padding: 16px 14px;
	overflow-y: auto;
	border-right: 1px solid var(--studio-host-border);
	background: var(--studio-host-surface);
	color: var(--studio-host-text);
}

html[data-qase-layout="studio-mock"] .studio-context-resizer {
	position: relative;
	display: grid;
	min-width: 7px;
	min-height: 0;
	place-items: center;
	background: var(--studio-host-surface);
	cursor: col-resize;
	touch-action: none;
}

html[data-qase-layout="studio-mock"] .studio-context-resizer::before {
	content: "";
	width: 1px;
	height: 100%;
	background: var(--studio-host-border);
}

html[data-qase-layout="studio-mock"] .studio-context-resizer > span {
	position: absolute;
	width: 3px;
	height: 42px;
	border-radius: 999px;
	background: transparent;
}

html[data-qase-layout="studio-mock"] .studio-context-resizer:hover > span,
html[data-qase-layout="studio-mock"] .studio-context-resizer:focus-visible > span,
html[data-studio-resizing="true"][data-qase-layout="studio-mock"] .studio-context-resizer > span {
	background: var(--studio-host-action);
}

html[data-qase-layout="studio-mock"] .studio-context-resizer:focus-visible {
	outline: 2px solid var(--studio-host-action);
	outline-offset: -2px;
}

html[data-studio-resizing="true"][data-qase-layout="studio-mock"],
html[data-studio-resizing="true"][data-qase-layout="studio-mock"] body {
	cursor: col-resize;
	user-select: none;
}

.studio-context-head,
.studio-tool-identity {
	display: flex;
	align-items: center;
	gap: 10px;
}

.studio-context-head > div,
.studio-tool-identity > span:last-child {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.studio-context-head strong,
.studio-tool-identity strong {
	font-size: 13px;
	line-height: 1.2;
}

.studio-context-head span,
.studio-tool-identity small,
.studio-context-note {
	color: var(--studio-host-muted);
	font-size: 11px;
	line-height: 1.45;
}

.studio-context-mark {
	color: var(--studio-host-action);
}

.studio-project-card {
	display: grid;
	gap: 6px;
	padding: 12px;
	border: 1px solid var(--studio-host-border);
	border-radius: 9px;
	background: var(--studio-host-workspace);
}

.studio-context-label {
	color: var(--studio-host-muted);
	font-size: 11px;
}

.studio-project-card strong {
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.studio-project-card a {
	min-width: 0;
	overflow: hidden;
	color: var(--studio-host-action);
	font-size: 12px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

.studio-project-card a:focus-visible,
.studio-context-toggle:focus-visible {
	outline: 2px solid var(--studio-host-action);
	outline-offset: 2px;
}

.studio-context-thread {
	display: grid;
	gap: 10px;
	font-size: 12px;
	line-height: 1.5;
}

.studio-context-thread p {
	margin: 0;
	padding: 10px 11px;
	border-radius: 9px;
	overflow-wrap: anywhere;
}

.studio-context-user {
	margin-left: 18px !important;
	background: color-mix(in srgb, var(--studio-host-action) 10%, transparent);
}

.studio-context-agent {
	margin-right: 12px !important;
	border: 1px solid var(--studio-host-border);
	background: var(--studio-host-workspace);
}

.studio-context-note {
	margin: auto 2px 0;
}

html[data-qase-layout="studio-mock"] .studio-tool-workspace {
	display: grid;
	grid-column: 4;
	grid-template-rows: 48px minmax(0, 1fr);
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--studio-host-workspace);
}

/* The host already owns its context resizer. Product pane resizers are
   reserved for standalone Qase where the full viewport can absorb the change. */
html[data-qase-layout="studio-mock"] body.studio-workspace .pane-resizer {
	display: none;
}

html[data-qase-layout="studio-mock"] .studio-tool-header {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 12px;
	padding: 0 14px;
	border-bottom: 1px solid var(--studio-host-border);
	background: var(--studio-host-workspace);
	color: var(--studio-host-text);
}

.studio-tool-glyph {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: var(--studio-host-action);
	color: #fff;
	font-size: 13px;
}

.studio-demo-badge {
	margin-left: auto;
	padding: 4px 7px;
	border: 1px solid var(--studio-host-border);
	border-radius: 999px;
	color: var(--studio-host-muted);
	font-size: 11px;
}

.studio-theme-control {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--studio-host-muted);
	font-size: 11px;
}

.studio-theme-control select {
	min-height: 32px;
	padding: 5px 28px 5px 9px;
	border: 1px solid var(--studio-host-border);
	border-radius: 7px;
	background-color: var(--studio-host-surface);
	color: var(--studio-host-text);
	cursor: pointer;
	font: inherit;
	touch-action: manipulation;
}

.studio-theme-control select:hover {
	border-color: color-mix(in srgb, var(--studio-host-action) 55%, var(--studio-host-border));
}

.studio-theme-control select:focus-visible {
	outline: 2px solid var(--studio-host-action);
	outline-offset: 2px;
}

.studio-context-toggle {
	display: grid;
	width: 32px;
	height: 32px;
	padding: 0;
	place-items: center;
	border: 1px solid var(--studio-host-border);
	border-radius: 7px;
	background: var(--studio-host-surface);
	color: var(--studio-host-text);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	touch-action: manipulation;
}

.studio-context-toggle svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.studio-context-toggle:hover {
	border-color: color-mix(in srgb, var(--studio-host-action) 55%, var(--studio-host-border));
}

html[data-qase-layout="studio-mock"] .app,
html[data-qase-layout="studio-mock"] .bugs-view {
	grid-row: 2;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	margin: 0;
}

html[data-qase-layout="studio-mock"] .app {
	grid-template-columns: minmax(184px, 0.55fr) minmax(280px, 0.82fr) minmax(420px, 1.4fr) 66px;
	padding-top: 5px;
}

html[data-qase-layout="studio-mock"] .workspace-chrome {
	display: none;
}

html[data-qase-layout="studio-mock"] .runs .brand-lockup,
html[data-qase-layout="studio-mock"] .runs #model-badge {
	display: none;
}

html[data-qase-layout="studio-mock"] .runs .brand {
	justify-content: flex-end;
}

html[data-qase-layout="studio-mock"] .panel-foot #open-profile,
html[data-qase-layout="studio-mock"] .panel-foot #sign-out,
html[data-qase-layout="studio-mock"] .panel-foot .theme-control {
	display: none;
}

html[data-qase-layout="studio-mock"] .feature-dock > .feature-device {
	display: none;
}

html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] .app {
	grid-template-columns: 56px minmax(280px, 0.82fr) minmax(420px, 1.4fr) 66px;
}

html[data-studio-context="collapsed"][data-qase-layout="studio-mock"] .studio-demo-shell {
	grid-template-columns: 64px 0 0 minmax(0, 1fr);
}

html[data-studio-context="collapsed"][data-qase-layout="studio-mock"] .studio-context,
html[data-studio-context="collapsed"][data-qase-layout="studio-mock"] .studio-context-resizer {
	display: none;
}

html[data-studio-context="collapsed"][data-qase-layout="studio-mock"] .studio-context-toggle svg {
	transform: scaleX(-1);
}

@media (max-width: 1280px) {
	html[data-qase-layout="studio-mock"] .studio-demo-shell {
		grid-template-columns: 56px var(--studio-context-width) 6px minmax(0, 1fr);
	}

	html[data-studio-context="collapsed"][data-qase-layout="studio-mock"] .studio-demo-shell {
		grid-template-columns: 56px 0 0 minmax(0, 1fr);
	}

	html[data-qase-layout="studio-mock"] .app {
		grid-template-columns: minmax(168px, 0.5fr) minmax(250px, 0.8fr) minmax(360px, 1.35fr) 62px;
		gap: 4px;
		padding: 5px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] .app {
		grid-template-columns: 56px minmax(250px, 0.8fr) minmax(360px, 1.35fr) 62px;
	}
}

@media (max-width: 1100px) {
	html[data-qase-layout="studio-mock"] .studio-demo-shell {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	html[data-studio-context][data-qase-layout="studio-mock"] .studio-demo-shell {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	html[data-qase-layout="studio-mock"] .studio-context,
	html[data-qase-layout="studio-mock"] .studio-context-resizer {
		display: none;
	}

	html[data-qase-layout="studio-mock"] .studio-tool-workspace {
		grid-column: 2;
		overflow-y: auto;
	}

	html[data-qase-layout="studio-mock"] .studio-context-toggle {
		display: none;
	}

	html[data-qase-layout="studio-mock"] .app {
		grid-template-columns: 184px minmax(0, 1fr);
		height: auto;
		min-height: calc(100dvh - 48px);
		padding-top: 5px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] .app {
		grid-template-columns: 56px minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	html[data-qase-layout="studio-mock"] body {
		overflow: auto;
	}

	html[data-qase-layout="studio-mock"] .studio-demo-shell {
		display: block;
		height: auto;
		min-height: 100dvh;
	}

	html[data-qase-layout="studio-mock"] .studio-host-rail,
	html[data-qase-layout="studio-mock"] .studio-context {
		display: none;
	}

	html[data-qase-layout="studio-mock"] .studio-tool-workspace {
		display: grid;
		min-height: 100dvh;
		grid-template-rows: 48px auto;
		overflow: visible;
	}

	html[data-qase-layout="studio-mock"] .studio-tool-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	html[data-qase-layout="studio-mock"] .studio-demo-badge {
		display: none;
	}

	html[data-qase-layout="studio-mock"] .studio-theme-control > span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	html[data-qase-layout="studio-mock"] .app {
		grid-template-columns: minmax(0, 1fr);
		height: auto;
		min-height: calc(100dvh - 48px);
	}
}

/* Compact panel navigation applies to both standalone and embedded Studio. */
@media (max-width: 720px) {
  body.studio-workspace .workspace-mobile-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-row: 1;
    grid-column: 1;
    gap: 4px;
    padding: 6px 10px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
  }
  .workspace-mobile-nav button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: 500 13px var(--font-ui);
    cursor: pointer;
    touch-action: manipulation;
  }
  .workspace-mobile-nav button:hover { background: var(--surface-hover); }
  .workspace-mobile-nav button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
  .workspace-mobile-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  html body.studio-workspace { padding-bottom: 0; }
  html body.studio-workspace[data-workspace-view] .app {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 57px minmax(0, 1fr) 68px;
    padding: 0;
    gap: 0;
  }
  html[data-qase-layout="studio-mock"] body.studio-workspace[data-workspace-view] .app { height: calc(100dvh - 48px); }
  html[data-qase-layout="studio-mock"] .studio-tool-workspace { min-height: 0; grid-template-rows: 48px minmax(0, 1fr); }
  html body.studio-workspace .app > :is(.runs, .chat, .viewer) {
    display: none;
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-height: none;
    height: 100%;
  }
  html body.studio-workspace[data-workspace-view="runs"] .app > .runs { display: flex; }
  html body.studio-workspace[data-workspace-view="agent"] .app > .chat { display: grid; }
  html body.studio-workspace:is([data-workspace-view="browser"], [data-workspace-view="results"]) .app > .viewer { display: grid; }
  html body.studio-workspace[data-workspace-view="results"] .viewer { grid-template-rows: auto 44px minmax(0, 1fr); }
  html body.studio-workspace[data-workspace-view="results"] .viewer > .stage { display: none; }
  html body.studio-workspace[data-workspace-view="results"] .viewer .preview-toggle { display: none; }
  html body.studio-workspace[data-workspace-view="results"] .viewer > .tabs { grid-row: 2; }
  html body.studio-workspace[data-workspace-view="results"] .viewer > .tab-body { grid-row: 3; }
  html body.studio-workspace[data-workspace-view="browser"] .viewer { grid-template-rows: auto minmax(0, 1fr); }
  html body.studio-workspace[data-workspace-view="browser"] .viewer > :is(.tabs, .tab-body) { display: none; }
  html body.studio-workspace .feature-dock { grid-row: 3; grid-column: 1; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  body.studio-workspace .feature-dock > .feature-device { display: none; }
  body.studio-workspace .runs .run-list { max-height: none; }
  body.studio-workspace .tabs .tab { min-height: 44px; }
  body.studio-workspace .finding-head { padding-left: 42px; flex-wrap: wrap; }
  body.studio-workspace .finding-title { min-width: 0; flex: 1 1 140px; white-space: normal; overflow-wrap: anywhere; }
}

@media (min-width: 1281px) {
	html[data-qase-layout="studio-mock"] body[data-run-status="running"] .app {
		grid-template-columns: minmax(184px, 0.45fr) minmax(250px, 0.65fr) minmax(480px, 1.75fr) 66px;
	}

	html[data-qase-layout="studio-mock"] body[data-run-status="done"] .app {
		grid-template-columns: minmax(184px, 0.45fr) minmax(240px, 0.6fr) minmax(500px, 1.8fr) 66px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] body[data-run-status="running"] .app {
		grid-template-columns: 56px minmax(250px, 0.65fr) minmax(480px, 1.75fr) 66px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] body[data-run-status="done"] .app {
		grid-template-columns: 56px minmax(240px, 0.6fr) minmax(500px, 1.8fr) 66px;
	}
}

@media (min-width: 1101px) and (max-width: 1280px) {
	html[data-qase-layout="studio-mock"] body[data-run-status="running"] .app {
		grid-template-columns: minmax(168px, 0.45fr) minmax(230px, 0.65fr) minmax(400px, 1.7fr) 62px;
	}

	html[data-qase-layout="studio-mock"] body[data-run-status="done"] .app {
		grid-template-columns: minmax(168px, 0.45fr) minmax(210px, 0.58fr) minmax(420px, 1.8fr) 62px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] body[data-run-status="running"] .app {
		grid-template-columns: 56px minmax(230px, 0.65fr) minmax(400px, 1.7fr) 62px;
	}

	html[data-qase-layout="studio-mock"][data-qase-sidebar="collapsed"] body[data-run-status="done"] .app {
		grid-template-columns: 56px minmax(210px, 0.58fr) minmax(420px, 1.8fr) 62px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.studio-demo-shell *,
	.studio-demo-shell *::before,
	.studio-demo-shell *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* A routed results page still fits inside the optional Studio host header. */
html[data-qase-layout="studio-mock"] body.studio-workspace[data-page="results"] .app {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: 100%;
	padding: 0;
}
html[data-qase-layout="studio-mock"] body.studio-workspace[data-page="results"] .viewer {
	grid-column: 1;
	height: 100%;
}

@media (max-width: 720px) {
	html body.studio-workspace[data-page="results"][data-workspace-view="results"] .app {
		grid-template-rows: minmax(0, 1fr);
	}
	html body.studio-workspace[data-page="results"][data-workspace-view="results"] .app > .viewer {
		display: grid;
		grid-row: 1;
		grid-template-rows: auto 50px minmax(0, 1fr);
	}
	html body.studio-workspace[data-page="results"][data-workspace-view="results"] .viewer > .stage {
		display: flex;
	}
	html body.studio-workspace[data-page="results"][data-workspace-view="results"] .viewer > .tabs { grid-row: 2; }
	html body.studio-workspace[data-page="results"][data-workspace-view="results"] .viewer > .tab-body { grid-row: 3; }
}