#chatTagger {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	color: rgb(50, 50, 50);
	text-rendering: geometricPrecision;

	> sidebar {
		width: 100%;
	}

	pages {
		display: grid;
		height: 100% !important;
	}

	#pageTag {
		grid-template-rows: min-content 1fr 0px;

		> app-head {
			display: grid;
			grid-auto-flow: row;
			position: relative;
			box-sizing: border-box;
			z-index: 999999999999;
			box-shadow: 0px -1.5px 3.25px 1px rgba(0, 0, 0, .4);
			align-items: center;
			padding: 0px;
			justify-content: stretch;

			> efficacy {
				position: absolute;
				display: flex;
				height: 50px;
				width: 70px;
				background: var(--bg_color);
				outline: 4px solid var(--bg_color);
				right: 15px;
				top: 15px;
				border-radius: 12px;
				box-sizing: border-box;
				color: var(--color);
				justify-content: center;
				font-size: 25px;
				font-weight: 700;
				line-height: 40px;
				letter-spacing: -1px;
			}

			> app-title {
				display: flex;
				align-items: center;
				border-radius: 3px;
				min-height: 50px;
				margin: 15px;
				padding: 5px;
				margin-right: 130px;
				box-sizing: border-box;
				width: fit-content;
				position: relative;
				white-space: pre-wrap;
			}

			> app-title:focus-within {
				outline: var(--focus-outline);
				outline-offset: 0px;
			}

			> app-title[edit]:not(:focus-within):hover:after {
				content: "􀈊";
				font-family: 'SF-Pro';
				opacity: .2;
				margin: 3px;
				position: absolute;
				right: 0px;
				bottom: 0px;
				translate: 40px 0px;
			}

			> app-infos {
				font-size: 12px;
				display: flex;
				gap: 20px;				/* padding: 5px 0px; */

				/* background: rgba(0, 0, 0, .03); */
				border-top: .5px solid rgba(0, 0, 0, 0.1);
				margin-left: 20px;
				height: 26px;
				align-items: center;
			}

		}

		> app-body {
			display: grid;
			interpolate-size: allow-keywords;
			transition: 125ms;
			grid-template-columns: auto 1fr;
		}

		> app-body:has(app-section-head[expanded]) {
			grid-template-columns: 10px 1fr;
		}

	}

	app-title[h1] {
		font-size: 30px;
		font-weight: 500;
	}

	app-title[h4] {
		font-size: 16px;
		font-weight: 600;
		color: rgba(0, 0, 0, .5);
		letter-spacing: .1px;
	}

}

#chatTagger sidebar-wrapper {
	display: grid;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	justify-content: end;
	background-image: linear-gradient(to left, rgba(0, 0, 0, .15) 0px, rgba(0, 0, 0, .05) 1px, transparent 2px), linear-gradient(#f6f6f6, #f6f6f6);

	> * {
		width: 100%;
	}

	sidebar {
		width: 200px;
	}

	sidebar-wrapper-foot {
		display: flex;
		padding: 10px 10px;
		box-sizing: border-box;
		border-top: var(--edge);
		flex-direction: row;
		align-items: center;
		row-gap: 5px;
		justify-content: center;
	}

	sidebar-wrapper-body {
		position: relative;
	}

	sidebar-wrapper-head {
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		grid-template-columns: 1fr auto;
		flex-direction: column;
		row-gap: 10px;
		height: fit-content;
		position: relative;
		box-shadow: 0px -1.5px 3.25px 1px rgba(0, 0, 0, .4);
		z-index: 2;
	}

	#sidebarPages {
		display: flex;
		flex-direction: column;
		border-radius: 6px;
		overflow: hidden;
		gap: 1px;
	}

	sidebar-wrapper-head sidebar-section-item {
		border-radius: 0px;
	}

	sidebar-wrapper-head sidebar-section-item:not([selected]) {
		background: rgba(0, 0, 0, .033);
	}

	sidebar-wrapper-head sidebar-section-item:before {
		content: attr(icon);
	}

	sidebar-section-item:before {
		justify-content: center !important;
		display: inline-flex;
	}

}

#chatTagger app-section#tag app-section-title:before {
	content: 'AI Tag';
}

#chatTagger app-section#jobs app-section-title:before {
	content: 'AI Responses';
}

#chatTagger:has(sidebar-section-item[key='tags']:not([selected])) sidebar-section [selected] {
	background: rgba(0, 0, 0, .33);
}

#chatTagger #pageTag {
	#tag app-section-body {
		padding: 0px 20px;
		display: flex;
		flex-direction: column;
		overflow: scroll;

		field-set {
			display: flex;
			flex-direction: column;
			row-gap: 10px;
			position: relative;
			padding: 15px 0px;

			+
			field-set {
				border-top: var(--edge);
			}

			textarea {
				border: none;
				padding: 0px;
				font-size: 15px;
				font-weight: 300;
				opacity: .70;
				border-radius: .1px;
				outline-offset: 4px;
				text-rendering: geometricPrecision;
				line-height: 1.25em;
				field-sizing: content;
				max-height: 150px;
			}

			sub {
				font-style: italic;
				opacity: .70;
			}

		}

		field-label {
			font-size: 16px;
			font-weight: 600;
			display: flex;
			align-items: center;
		}

	}

	app-head {
	}

	app-body {
		app-section + app-section {
			border-left: var(--edge);
		}

		app-section#tag {
			width: 400px;

			#sendToAI {
			}

		}

		app-section {
			display: grid;
			grid-template-rows: auto 1fr;

			app-section-head {
				height: 50px;
				display: flex;
				align-items: center;
				padding: 0px 20px;
				box-sizing: border-box;
				font-size: 16px;
				font-weight: 700;
				color: rgba(0, 0, 0, .5);
				letter-spacing: .1px;
				border-bottom: var(--edge);
				column-gap: 10px;
				justify-content: space-between;

				app-section-title {
				}

			}

		}

	}

}

#chatTagger #jobs app-section-body {
	position: relative;
	padding: 0px;
}

#chatTagger page {
	app-head {
		app-title {
			font-size: 30px;
			font-weight: 500;
			display: flex;
			align-items: center;
			border-radius: 3px;
			box-sizing: border-box;
			width: fit-content;
			position: relative;
			white-space: pre-wrap;
		}

		display: grid;
		grid-auto-flow: column;
		position: relative;
		box-sizing: border-box;
		z-index: 999999;
		box-shadow: 0px -1.5px 3.25px 1px rgba(0, 0, 0, .4);
		align-items: center;
		padding-bottom: 0px;
		justify-content: space-between;
		padding: 20px;
	}

	app-body {
		display: grid;
		grid-template-columns: auto auto 1fr;
	}

	app-foot {
	}

}

#chatTagger {
	#pageTranscripts, & #pageMetrics, & #pageTag {
		display: grid;
		grid-template-rows: auto 1fr auto;

		gallery {
			width: 320px;
			grid-template-rows: auto 1fr auto;
			position: relative;

			gallery-item[selected] {
				background: var(--gallery-selection-focus-background);
				color: var(--gallery-selection-focus-color);
			}

			input[icon='search'] {
				background-color: white;
				box-shadow: none;
				margin-bottom: 10px;

				&:focus-within {
					outline: var(--focus-outline);
				}

			}

		}

	}

}

#chatTagger app-section#jobs {
	background: white;
	position: relative;
	z-index: 3;

	scrollbox-inner[empty]:empty:before {
		white-space: pre-wrap;
	}

	slide-list-item {
		display: flex;
		flex-direction: column;
		padding: 16px 20px;
		row-gap: 7px;
		padding-right: 40px;
		--t_color: gray;
	}

	slide-list-item[today]:has(+:not([today])) {
		border-bottom: .5px solid rgba(0, 0, 0, 0.1);
	}

	[today] + slide-list-item:not([today]), & slide-list-item[today]:first-of-type {
		margin-top: 40px;
		contain: none;
	}

	[today] + slide-list-item:not([today]):after, slide-list-item[today]:first-of-type:after {
		content: 'Today';
		display: block;
		position: absolute;
		top: -10px;
		font-size: 14px;
		font-weight: 600;
		translate: 0px -100%;
		color: black;
	}

	[today] + slide-list-item:not([today]):after {
		content: 'Yesterday & Older';
	}

	slide-list-item:is(:focus, :focus-within) {
		--t_color: white;
	}

	slide-list-item:before {
		right: 10px;
	}

	slide-list-item text {
		font-size: 15px;
		font-weight: 400;
		letter-spacing: .2px;
		text-align: justify;
		display: flex;
		align-items: end;
		justify-content: space-between;
		color: var(--t_color);
	}

	slide-list-item subtext {
		font-size: 12px;
		color: var(--t_color);
		letter-spacing: .02em;
		white-space: pre;
		margin-top: -4px;
		white-space: break-spaces;
	}

	app-section-item-head {
		display: flex;
		justify-content: center;
	}

	app-section-item-body {
		display: flex;
		flex-direction: column;
		text-rendering: geometricPrecision;
		gap: 10px;
	}

	slide-list-item text:after {
		content: attr(percent);
		font-size: 20px;
		font-weight: 600;
		color: var(--color);
	}

	slide-list-item[status="error"] {
		--color: red;
	}

	slide-list-item[status="error"] text:after {
		font-family: 'SF Pro';
		content: '􀁟';
		background: radial-gradient(white 50%, transparent 50%);
	}

	progress:not([torus])::-webkit-progress-value {
		background: var(--color);
	}

}

#chatTagger {
	inline {
		display: inline-block;
		border-radius: 10px;
		font-size: 11px;
		font-weight: 500;
		letter-spacing: .02em;
		color: #999;
		text-transform: capitalize;
	}

	inline:before {
		content: attr(label) ':';
		font-weight: 700;
		margin-right: 2px;
		display: inline-block;
		white-space: pre;
	}

	efficacy:after {
		content: '%';
		font-size: 12px !important;
		font-weight: bolder;
		display: inline-flex;
		width: 10px;
		translate: 1px -3px;
	}

	efficacy[quarter='0'] {
		font-size: 0px !important;
	}

	efficacy[quarter='0']:after {
		content: '–';
	}

	efficacy:before {
		content: 'efficacy';
		font-size: 8px !important;
		display: block;
		position: absolute;
		bottom: 11px;
		line-height: 0px;
		text-transform: uppercase;
		letter-spacing: .5px;
		font-weight: 900;
	}

}

#chatTagger sidebar-section {
	position: relative;
}

/*#chatTagger:has(sidebar-section-title:hover) sidebar-section-title-icon,*/
#chatTagger sidebar-section-title-icon:hover {
	opacity: 1;
}

#chatTagger sidebar-section-title-icon {
	position: absolute;
	top: 0px;
	right: 20px;
	font-family: 'SF-Pro';
	font-size: 14px;
	font-weight: 400;
	cursor: pointer !important;
	z-index: 99;
	opacity: 0;
	color: rgb(182 182 182);
	transition: opacity .1s linear;	/* user-select: none; */

	/* pointer-events: none; */
}

#chatTagger sidebar-wrapper-body[wait]:before, #chatTagger sidebar-wrapper-body[wait]:after {
	width: 36px;
}

#chatTagger sidebar-section-item:before {
	content: '􀋡';
}

#chatTagger {
	gallery-item-subtitle, gallery-item-title {
		white-space: pre-wrap;
		overflow: initial;
		text-overflow: initial;
		height: auto;
		min-height: 13px;
		text-indent: 0px;
		padding-left: 15px;
	}

}

#JobDialog {
	width: 400px;

	dialog-body wrapper {
		display: block;
		overflow: auto;
		position: absolute;
		height: 100%;
		width: 100%;
		background: white;
		border: var(--edge);
		border-radius: 10px;
	}

	dialog-body {
		display: grid;
		position: relative;
		min-height: 300px;
	}

	dialog-body wrapper gallery {
		width: 100%;
		text-align: left;
	}

	gallery-head {
		flex-direction: column;
		justify-content: center;
		align-items: start;
		height: 50px;
		row-gap: 2px;
	}

	gallery-body {
		padding: 0px;
	}

	gallery-item {
		border-radius: 0px;
		outline-offset: -4px;
	}

	gallery-head-subtitle {
		opacity: .6;
	}

}

#chatTagger {
	#pageTranscripts {
		gallery-body:has(> gallery-item[hits]):after {
			content: 'No matches';
			display: flex;
			justify-content: center;
			height: 50px;
			align-items: center;
			opacity: .5;
		}

		gallery-body:has(> gallery-item:not([hits='0'])):after {
			display: none;
		}

		gallery-item[hits='-']:before {
			display: none !important;
		}

		gallery-item[hits='0'] {
			display: none !important;
		}

		gallery-item[hits]:before {
			content: attr(hits);
			position: absolute;
			top: 10px;
			right: 10px;
			--hw: 18px;
			height: var(--hw);
			min-width: var(--hw);
			box-sizing: border-box;
			padding: 0px 5px;
			font-weight: 700;
			background: hsl(0 0% 60% / 1);
			font-size: 11px;
			border-radius: 100px;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			text-indent: 0px;
		}

	}

}

#chatTagger #jobs {
	slide-cover-head:after {
		content: attr(percent);
		color: var(--color);
		font-weight: 700;
		font-size: 20px;
		padding: 4px 8px;
		border-radius: 5px;
	}

	slide-cover-head {
		display: flex;
		justify-content: space-between;
		background: var(--bg_color);
	}

	drawer- {
	}

	drawer-::part(face) {
		cursor: pointer;
		font-size: 16px;
		font-weight: 600;
		padding-left: 60px;
		user-select: none;
	}

	drawer-::part(face):focus-within {
		outline: var(--focus-outline);
		outline-offset: -4px;
	}

	drawer-::part(face):before {
		content: '􀆊';
		font-family: 'SF-Pro';
		font-weight: 600;
		font-size: 14px;
		opacity: .5;
		left: 20px;
	}

	drawer-body-contents {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20px;
		padding-top: 0px;
		box-sizing: border-box;
		box-shadow: inset 0px -.5px 0px 0px rgba(0, 0, 0, .1);
	}

	table-custom-header-row[colspan="2"] {
		grid-template-columns: repeat(calc(var(--columns) / 2), 1fr);
	}

}

#chatTagger #jobAnswers {
	--legend-color--true: color(srgb .9 .9 .9 / 1);
	--legend-color--false: color(srgb 1 .75 .05 / 1);
	--reveal-header-shadow: inset 0px 3px 3px -3px rgba(0, 0, 0, .2);

	#jobActionRerun {
		margin-left: auto;
		white-space: nowrap;
	}

	table-custom-row[hidden] {
		display: none;
	}

	:is(table-custom-header-cell, table-custom-cell):has(table-custom-cell-reveal) {
		display: grid;
		grid-template-rows: 30px 1fr;
		grid-template-columns: 1fr;
	}

	table-custom-cell table-custom-cell-value[key] {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 30px;
	}

	drawer-body-contents {
		gap: 10px;

		options {
			display: flex;
			gap: 20px;
			align-items: center;
		}

	}

	table-wrapper {
		overflow: scroll;
		width: 100%;		/* resize: vertical; */
	}

	table-custom-cell-value[role="truth"] {
		height: 100%;
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	chart-partition [label='true'] {
		--legend-color: var(--legend-color--true) !important;
	}

	chart-partition [label='false'] {
		--legend-color: var(--legend-color--false) !important;
	}

	table-custom-cell-value[disagree] {
		font-weight: bold;
		background: #ff00000d;
	}

	table-custom-cell-value[key="answererValue"][disagree] {

		/* background: color-mix(in srgb, var(--legend-color--false), transparent 80%); */
	}

	table-custom-cell-value[key="reviewerValue"][disagree] {

		/* background: color-mix(in srgb, var(--legend-color--true), transparent 80%); */
		background: #2196f30f;
	}

	chart-wrapper:has(> #resultsBreakout) {
		border-bottom: var(--edge);
	}

	#resultsBreakout {
		background: rgba(0, 0, 0, 0.03);
		padding: 10px;
		border-radius: 14px;
		border: var(--edge);
		margin-bottom: 20px;

		chart-partition-legend-item {
			text-transform: capitalize;
		}

	}

	table-custom table-custom-row {
		position: relative;
		height: 30px;
		interpolate-size: allow-keywords;
		transition: height .125s linear;
	}

	table-custom table-custom-row[open] {
		height: auto;
	}

	table-custom table-custom-row[open]:before, table-custom table-custom-row:hover:before {
		content: '􀆈';
		position: absolute;
		font-family: 'SF-Pro';
		font-size: 12px;
		font-weight: 500;
		height: 30px;
		display: flex;
		top: 0px;
		left: 10px;
		z-index: 99999;
		align-items: center;
		transition:;
		opacity: .5;
	}

	table-custom table-custom-row[open]:before {
		scale: 1 -1;
	}

	table-custom-cell-reveal {
		background: rgba(0, 0, 0, .03);
		padding: 10px;
		box-shadow: var(--reveal-header-shadow);
	}

	table-custom-cell-value[key="truth"] {
		max-height: 30px;
		--w: calc(var(--validator-col-width) * 1ch);
		width: calc(var(--w) + 30px);

		&[assumed] {
			font-style: italic;
			color: gray;
		}

	}

	table-custom-header-cell:has(>[key="sessionId"]), table-custom-cell-value[key="sessionId"] {
		min-width: 300px;
	}

	table-custom-cell:has(table-custom-cell-value[key="reviewerValue"]), table-custom-cell:has(table-custom-cell-value[key="answererValue"]) {
		width: 200px;
	}

	table-custom-cell-reveal[key="transcript"] {
		padding: 0px .5px .5px 0px !important;
		box-sizing: border-box;
		min-height: 100%;
		height: 100%;
		align-content: center;
		min-width: 300px;
		width: -webkit-fill-available;

		transcript-box {
			box-shadow: var(--reveal-header-shadow);
			min-height: 200px;
		}

	}

	[above]:before {
		content: attr(above);
		position: absolute;
		display: flex;
		left: 0px;
		top: 0px;
		width: 200%;
		height: 30px;
		justify-content: center;
		align-items: center;
		translate: 0px -100%;
		white-space: nowrap;
		padding: 0px 8px;
		box-sizing: border-box;
		box-shadow: var(--header-vertical-divider);
	}

	table-custom-header-cell[above] {
		position: relative;
	}

	table-custom:has([above]) {
		padding-top: 30px;
		width: fit-content;
		grid-template-columns: repeat(var(--columns), min-content);
		max-height: 400px;
		overflow: auto;
		resize: vertical;
	}

	table-wrapper[wait2]{
		pointer-events: none;
		filter: brightness(0.95);
	}

	table-custom table-custom-header-row {
		box-shadow: 0px -30px 0px 0px white;
		border-top: var(--edge);
		border-radius: 0px;
		z-index: 99999999;
	}

	table-custom table-custom-header-cell {
		min-height: 30px;
	}

	table-custom-head:before {
		content: '';
		height: 30px;
		position: absolute;
		width: 100%;
		top: 0px;
		left: 0px;
		box-shadow: var(--table-custom-horizontal-line);
	}

}

#chatTagger #jobPromptSummary {
	#jobPromptActionDiff {
		width: fit-content;
		margin-left: auto;
	}

	drawer-body-contents:has(#jobPromptSummaryTable) {
		row-gap: 10px;
		padding-top: 5px;
	}

	#jobPromptSummaryTable {
		grid-template-columns: auto 1fr;

		table-custom-cell-value:has(diff-text) {
			flex-direction: column;
			align-items: start;
			row-gap: 4px;
		}

		table-custom-cell-reveal:has(diff-text) {
			padding: 8px 8px;
			margin: 0px -8px -4px;
			width: 100%;
			background: rgb(5 170 245 / 5%);
		}

		table-custom-cell-reveal {
			display: block;
		}

		table-custom-cell-reveal > diff-text {
			font-family: 'SF-Pro-Display';
			font-size: 11px;

			&[none] {
				color: gray;
				font-style: italic;
			}

			diff-text-line {
				padding-left: 0px;
			}

			diff-text-line:before {
				display: none;
			}

		}

	}

	table-custom-header-cell {
		font-weight: bold;

		table-custom-cell-value {
			justify-content: end;
		}

	}

}

#chatTagger #jobs {
	slide-cover:has([status="error"]) slide-cover-head {
		--bg_color: #ff00000f;
	}

	slide-cover-body[status="error"]:before {
		content: 'Errors';
		display: block;
		font-weight: 700;
		font-size: 16px;
		margin-bottom: 15px;
	}

	slide-cover-body[status="error"] {
		padding: 20px;
	}

	#jobAnswersResults {
		width: max-content;
	}

}

#chatTagger sidebar[show] {
	sidebar-section-item {
		text-overflow: revert;
	}

	width: fit-content;
}