tinai

/* Shared viewer page (shared.php / shared.js): standalone read-only page
   chrome, the viewer's zoom/theme/costs settings, and the edit chrome the
   app renderers emit that the viewer hides. Reuses the app stylesheets. */

.div-shared-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: var(--BG-base);
	color: var(--FG-base);
}

.div-shared-header {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-h);
	flex-wrap: wrap;
	padding: var(--DM-margin-h) var(--DM-margin);
	border-bottom: 1pt solid var(--BD-panel-l);
	background-color: var(--BG-panel);
}

.div-shared-brand {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.div-shared-title {
	flex: 1;
	min-width: 8em;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.div-shared-settings {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-h);
	flex-wrap: wrap;
}

.div-shared-settings select {
	width: auto;
	max-width: 11em;
}

.div-shared-settings input[type="range"] {
	width: 8em;
}

#id-span-shared-zoom-value {
	min-width: 3.5em;
	font-size: 0.9em;
	color: var(--FG-muted);
}

.label-shared-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-size: 0.9em;
	cursor: pointer;
	white-space: nowrap;
}

.div-shared-status {
	margin: var(--DM-margin);
	padding: var(--DM-margin-h);
	border: 1pt solid var(--TX-status-error);
	border-radius: var(--DM-margin-q);
	color: var(--TX-status-error);
}

.div-shared-scroll {
	flex: 1;
	min-height: 0;
}

/* Per-turn cost tables stay hidden until the viewer's Statistics setting is
   enabled (shared.js toggles the body class). */
.shared-viewer:not(.show-costs) .div-cost-summary-container {
	display: none;
}

/* Thought-process blocks stay hidden until the viewer's Show Thinking
   setting is enabled (shared.js toggles the body class). */
.shared-viewer:not(.show-thinking) .div-thinking-content {
	display: none;
}

/* Per-turn copy buttons hover with the content they copy: parked in the
   response content's top-right corner by shared.js and revealed on hover.
   The app's button look comes from .div-structure-chat-container button,
   which this page does not have, so the border and background live here. */
.shared-viewer .div-response-content {
	position: relative;
}

.shared-viewer .div-response-content .btn-copy-response,
.shared-viewer .div-response-content .btn-copy-scratchpad {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	background-color: var(--BG-panel);
	border: 1pt solid var(--AC-btn);
	border-radius: var(--DM-margin-q);
	padding: 2px 8px;
	cursor: pointer;
}

.shared-viewer .div-response-content:hover .btn-copy-response,
.shared-viewer .div-response-content:hover .btn-copy-scratchpad {
	display: inline-block;
}

/* No cost-incurring actions on the shared page: the code overlay's Analyze
   button and its side panel are hidden. */
.shared-viewer #btn-code-overlay-analyze {
	display: none;
}

/* Edit chrome emitted by the app renderers that a read-only view must not
   offer: editor toolbars, item controls, drag grippers, insert rows and
   per-note actions. */
.shared-viewer .div-notes-sticky,
.shared-viewer .div-notes-note-actions,
.shared-viewer .div-notes-select,
.shared-viewer .div-notes-tag-menu,
.shared-viewer .div-notes-note .span-document-gripper,
.shared-viewer .div-document-item-controls,
.shared-viewer .div-document-insert,
.shared-viewer .div-notes-items-empty,
.shared-viewer .div-document-item .span-document-gripper {
	display: none;
}