/**
 * Static Site Gen — the desktop designer.
 *
 * Loaded on top of account.css, which styles the chat and the image picker;
 * this is only the workspace around them: the frame filling the left, and
 * the tools stacked above the chat down the right. Same tokens, same restraint inside somebody
 * else's theme.
 *
 * The workspace is a desktop thing. Below the breakpoint - the same number as
 * SSG_Designer::MIN_WIDTH - it is put away and the note takes its place.
 */

/**
 * The workspace fills the window less the theme's header and this page's
 * own heading, and never less than the min height - but that is a floor,
 * not a ceiling. The right column is what needs the room: a theme with big
 * buttons and generous type makes the tools tall, and a chat squeezed into
 * whatever is left is no chat at all. So the column is allowed to set the
 * height when it needs more than the window gives, the thread is promised
 * a minimum of its own, and a short window gets a page that scrolls.
 */
.ssg-designer {
	--ssg-designer-chat: 26rem;
	--ssg-designer-gap: 1rem;
	--ssg-designer-height: calc( 100vh - 11rem );
	--ssg-designer-min-height: 44rem;
	--ssg-designer-thread-min: 20rem;
	--ssg-designer-thread-max: 60vh;
}

.ssg-designer-heading {
	margin: 0 0 1rem;
}

/* The narrow note is for phones and squeezed windows, never a wide one. */
.ssg-designer-narrow {
	display: none;
}

.ssg-designer.is-mobile .ssg-designer-narrow {
	display: block;
}

.ssg-designer-gate {
	max-width: 40rem;
}

/* -- The workspace ---------------------------------------------------- */

.ssg-designer-workspace {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --ssg-designer-chat );
	gap: var( --ssg-designer-gap );
	align-items: stretch;
	min-height: max( var( --ssg-designer-min-height ), var( --ssg-designer-height ) );
}

.ssg-designer-stage {
	display: flex;
	flex-direction: column;
	gap: var( --ssg-designer-gap );
	min-width: 0;
	min-height: 0;
}

/* -- The right column ------------------------------------------------- */

.ssg-designer-side {
	display: flex;
	flex-direction: column;
	gap: var( --ssg-designer-gap );
	min-width: 0;
	min-height: 0;
}

/* -- The tools -------------------------------------------------------- */

/* Stacked, one tool under the next, in the column above the chat. */
.ssg-designer-tools {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	border: 1px solid var( --ssg-border );
	border-radius: 8px;
	background: var( --ssg-surface );
}

.ssg-designer-tool {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var( --ssg-border );
}

.ssg-designer-tool:last-child {
	border-bottom: 0;
}

.ssg-designer-tool-title {
	margin: 0;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ssg-muted );
}

.ssg-designer-tool-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.ssg-designer-tool-hint {
	margin: 0;
	font-size: 0.8125em;
	color: var( --ssg-muted );
}

.ssg-designer-open {
	font-size: 0.875em;
}

/**
 * The picker is the account page's, restyled to sit in a panel: no top
 * padding of its own, and tighter gaps between its parts.
 */
.ssg-designer-tool .ssg-chat-uploads {
	padding: 0;
}

.ssg-designer-tool .ssg-chat-upload-list {
	margin-bottom: 0.4rem;
}

.ssg-designer-tool .ssg-chat-upload-hint {
	margin-top: 0.4rem;
}

/* -- The preview ------------------------------------------------------ */

/**
 * The whole left side, top to bottom.
 *
 * The desktop frame is held at or above the width where a generated page
 * shows its row menu - the template sets --ssg-nav-breakpoint from the same
 * constant the generator prompts with - so what it shows is the desktop
 * page even when the column is narrower than that. The stage scrolls
 * sideways in that case rather than the page collapsing to a hamburger.
 */
.ssg-designer-preview {
	flex: 1 1 auto;
	min-height: 0;
	border: 1px solid var( --ssg-border );
	border-radius: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	background: #fff;
}

.ssg-designer-frame {
	display: block;
	width: 100%;
	min-width: var( --ssg-nav-breakpoint, 768px );
	height: 100%;
	border: 0;
}

/**
 * The mobile view: the frame narrowed to a phone and centred on a darker
 * stage, so the edge of the page is where a phone's would be. The width is a
 * common phone's CSS width, not a particular model's.
 */
.ssg-designer-preview.is-mobile-view {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
	background: var( --ssg-mine );
}

.ssg-designer-preview.is-mobile-view .ssg-designer-frame {
	width: 390px;
	min-width: 0;
	max-width: 100%;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 0 0 1px var( --ssg-border );
}

/* The two width buttons, as a segmented control. */
.ssg-designer-views {
	display: inline-flex;
	align-self: flex-start;
	border: 1px solid var( --ssg-border );
	border-radius: 999px;
	overflow: hidden;
}

.ssg-designer-view {
	margin: 0;
	padding: 0.3rem 0.9rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8125em;
	line-height: 1.4;
	cursor: pointer;
}

.ssg-designer-view + .ssg-designer-view {
	border-left: 1px solid var( --ssg-border );
}

.ssg-designer-view:hover {
	background: var( --ssg-surface );
}

.ssg-designer-view.is-active {
	background: var( --ssg-mine );
	font-weight: 600;
}

.ssg-designer-view:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.ssg-designer-no-preview {
	margin: 1.5rem;
}

/* -- The chat --------------------------------------------------------- */

/* Whatever the tools leave of the column. */
.ssg-designer-chat {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.ssg-designer-chat .ssg-chat {
	flex: 1 1 auto;
	min-height: 0;
}

/**
 * The thread takes whatever the column has left after the tools, but never
 * less than a few messages' worth: below that the column grows and the page
 * scrolls instead. The max keeps a long transcript from making the column
 * - and the preview beside it - as tall as the whole conversation.
 */
.ssg-designer-chat .ssg-chat-thread {
	flex: 1 1 auto;
	min-height: var( --ssg-designer-thread-min );
	max-height: var( --ssg-designer-thread-max );
}

.ssg-designer-chat .ssg-chat-hint {
	margin: 0;
	padding: 0 1rem 0.75rem;
}

/* -- Too narrow ------------------------------------------------------- */

@media ( max-width: 1023px ) {
	.ssg-designer-narrow {
		display: block;
	}

	.ssg-designer-workspace {
		display: none;
	}
}