/*
	Sidepanel page layout: how this page composes the shared components from components.css.
	Reusable component styling lives in components.css; design tokens in tokens.css. This file holds
	only sidepanel-specific arrangement (the app shell, toolbar, input area, history view).
*/

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: system-ui, sans-serif;
	font-size: var(--font-size-base);
	margin: 0;
	padding: 0;
}

/* The hidden attribute must beat an explicit display (e.g. .app-shell's flex), which otherwise wins
   on specificity and leaves a "hidden" element visible. */
[hidden] {
	display: none !important;
}

.app-shell {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* Pre-chat sign-in screen: a blank screen showing only a plain-text status (and, on failure, a retry
   button) while chat is not yet possible. Shown while .app-shell is hidden. */
.sign-in {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	height: 100vh;
	justify-content: center;
	padding: var(--space-5);
}

.sign-in__message {
	color: var(--color-text-muted);
	margin: 0;
	text-align: center;
}

/* Elements the sidepanel composes inside the toolbar. They are independent elements, not parts of the
   toolbar component, so they are styled here by the page that places them. */
.panel-title {
	font-weight: 600;
}

.cr-id {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	margin-left: var(--space-3);
}

.action-group {
	display: flex;
	gap: var(--space-2);
}

.history-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.history-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.state-banner:not([hidden]) {
	border-top: 1px solid var(--color-border);
	padding: var(--space-5);
}

.input-area {
	border-top: 1px solid var(--color-border);
	padding: var(--space-5);
	position: relative;
}

.input-buttons {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.status-area {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* The message input is a .field; the sidepanel pins it full-height and non-resizable. */
.message-input {
	resize: none;
}

/* The autocomplete list is a shared component; the sidepanel positions it over the input. */
.autocomplete-list {
	bottom: calc(100% - var(--space-5));
	left: var(--space-5);
	position: absolute;
	right: var(--space-5);
}

.rewind-banner:not([hidden]) {
	align-items: center;
	color: var(--color-text-muted);
	display: flex;
	font-size: var(--font-size-small);
	gap: var(--space-3);
	justify-content: space-between;
	padding-bottom: var(--space-3);
}