/*
	Reusable component classes shared across every page (sidepanel, settings, dev harness).
	Loaded after tokens.css by all entrypoints. Each class owns one component's complete identity;
	pages compose these and may override only the delta in their own page-layout stylesheet.

	What belongs here: anything that appears, or could appear, on more than one page, or that represents
	a reusable visual unit (buttons, fields, headings, panels, cards, badges, bubbles, messages).
	What does NOT belong here: page layout — how a specific page arranges its components. That lives in
	the page's own stylesheet.
*/

/* --- headings --- */
.h1 {
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: 0 0 var(--space-6);
}

.h2 {
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.h3 {
	font-size: var(--font-size-base);
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

/* --- buttons --- */
.btn {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
	color: var(--color-text);
	cursor: pointer;
	font-size: var(--font-size-small);
	font-weight: 600;
	padding: var(--space-3) var(--space-5);
}

.btn:hover {
	border-color: var(--color-border-strong);
}

.btn:disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.btn--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
}

.btn--primary:hover {
	border-color: var(--color-accent);
	filter: brightness(1.1);
}

.btn--icon {
	align-items: center;
	background: none;
	border: none;
	border-radius: var(--radius-small);
	color: var(--color-text);
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: var(--space-3);
}

.btn--icon svg {
	height: 18px;
	width: 18px;
}

.btn--icon:hover {
	background: var(--color-bg-elevated);
}

.btn--rewind {
	align-items: center;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 50%;
	color: var(--color-text-muted);
	cursor: pointer;
	display: flex;
	height: 24px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: absolute;
	right: var(--space-3);
	top: var(--space-3);
	width: 24px;
}

.btn--rewind::before {
	background-color: currentColor;
	content: "";
	height: 14px;
	mask-image: url("images/icons/rewind.svg");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 14px;
	-webkit-mask-image: url("images/icons/rewind.svg");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.btn--rewind:hover {
	color: var(--color-text);
}

/* --- text fields --- */
.field {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-bubble);
	color: var(--color-text);
	font-family: inherit;
	font-size: var(--font-size-base);
	padding: var(--space-3);
	width: 100%;
}

.field::placeholder {
	color: var(--color-text-muted);
}

.field:focus {
	border-color: var(--color-border-strong);
	outline: none;
}

/* --- panels & surfaces --- */
.panel {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}

.scroll-pane {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-5);
}

.card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-bubble);
	padding: var(--space-5);
}

/* --- badges --- */
.badge {
	border-radius: var(--radius-small);
	display: inline-block;
	font-size: var(--font-size-small);
	padding: var(--space-2) var(--space-4);
}

.badge--approved,
.badge--complete,
.badge--in_progress {
	background: var(--color-success);
	color: var(--color-accent-contrast);
}

.badge--ignored {
	background: var(--color-neutral);
	color: #aaa;
}

.badge--outdated {
	background: var(--color-warning);
	color: var(--color-accent-contrast);
}

/* --- bubbles --- */
.bubble {
	border-radius: var(--radius-bubble);
	margin-bottom: var(--space-3);
	padding: var(--space-4) var(--space-5);
}

.bubble--action {
	background: var(--color-accent-bg);
	border: 1px solid var(--color-accent-border);
	position: relative;
}

.bubble--user {
	background: var(--color-bg-user);
	border: 1px solid var(--color-border-muted);
	margin-bottom: var(--space-5);
	position: relative;
}

.bubble--collapsed {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	cursor: pointer;
	display: -webkit-box;
	overflow: hidden;
}

.bubble--orchestration-error,
.bubble--scope-override-active {
	background: var(--color-error-bg);
	border: 1px solid var(--color-error-border);
}

.bubble--scope-override-ignored {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
}

.bubble--pending-discard {
	opacity: 0.4;
}

.bubble--action:hover .btn--rewind,
.bubble--user:hover .btn--rewind {
	opacity: 1;
}

.bubble__content {
	margin: 0 0 var(--space-3);
}

.bubble--user .bubble__content:last-child {
	margin-bottom: 0;
}

.bubble__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

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

.bubble__preamble {
	font-weight: 600;
	margin: 0 0 var(--space-3);
}

.bubble__help-row {
	margin-bottom: var(--space-1);
}

.bubble__help-row:last-child {
	margin-bottom: 0;
}

.bubble__help-command {
	color: var(--color-text);
	font-weight: 500;
}

/* --- clarifying questions --- */
.clarifying__question {
	border: none;
	margin: 0 0 var(--space-5);
	padding: 0;
}

/* The legend is an .h3; reset the element's default padding only. */
.clarifying__legend {
	padding: 0;
}

.clarifying__option {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.clarifying__reason {
	color: var(--color-text-muted);
}

.clarifying__answer {
	color: var(--color-text);
	margin: var(--space-3) 0 0;
}

.clarifying__other-text {
	border-radius: var(--radius-small);
	margin-top: var(--space-3);
	resize: vertical;
}

.clarifying__other-text[hidden] {
	display: none;
}

/* --- messages --- */
.message--info,
.message--warning,
.message--error,
.message--success,
.message--reasoning,
.message--platform {
	display: flex;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}

.message__dot {
	background: var(--color-text);
	border-radius: 50%;
	flex-shrink: 0;
	height: 10px;
	margin-top: 5px;
	width: 10px;
}

.message__dot--transient {
	animation: dot-pulse 2s ease-in-out infinite;
}

.message__dot--warning {
	background: var(--color-warning);
}

.message__dot--error {
	background: var(--color-error);
}

.message__dot--success {
	background: var(--color-success);
}

.message__body {
	flex: 1;
	line-height: 1.6;
	min-width: 0;
}

.message__text--transient {
	background: linear-gradient(90deg, var(--color-text) 40%, var(--color-text-muted) 50%, var(--color-text) 60%);
	background-size: 400% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: text-shimmer 2s linear infinite;
}

.message__ellipsis {
	display: inline-flex;
	font-size: calc(var(--font-size-base) + 1px);
	gap: 1.2px;
}

.message__ellipsis span {
	animation: ellipsis-bounce 2s ease-in-out infinite;
	display: inline-block;
}

.message__ellipsis span:nth-child(2) {
	animation-delay: 0.2s;
}

.message__ellipsis span:nth-child(3) {
	animation-delay: 0.4s;
}

/* --- autocomplete --- */
.autocomplete-list {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-bubble);
	z-index: 10;
}

.autocomplete__item {
	cursor: pointer;
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
}

.autocomplete__item:first-child {
	border-radius: var(--radius-bubble) var(--radius-bubble) 0 0;
}

.autocomplete__item:last-child {
	border-radius: 0 0 var(--radius-bubble) var(--radius-bubble);
}

.autocomplete__item:only-child {
	border-radius: var(--radius-bubble);
}

.autocomplete__item:hover,
.autocomplete__item--active {
	background: var(--color-accent-bg);
}

.autocomplete__command {
	color: var(--color-text);
	font-size: var(--font-size-small);
	font-weight: 600;
	white-space: nowrap;
}

.autocomplete__description {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- history entries --- */
.history-entry {
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-bubble);
	cursor: pointer;
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-5);
}

.history-entry:hover {
	background: var(--color-bg-elevated);
}

.history-entry__title {
	flex: 1;
}

.history-entry__crid {
	color: var(--color-text-muted);
	font-family: monospace;
	font-size: var(--font-size-small);
}

.history-entry__user {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

/* --- toolbar --- */
/* Container only: a flex bar with its two ends pushed apart. Knows nothing about what sits inside it. */
.toolbar {
	align-items: center;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	padding: var(--space-3) var(--space-5);
}

/* --- shared keyframes --- */
@keyframes dot-pulse {
	0%   { opacity: 1; }
	25%  { opacity: 0.25; }
	50%  { opacity: 1; }
	100% { opacity: 1; }
}

@keyframes text-shimmer {
	0%   { background-position: 140% center; }
	100% { background-position: -40% center; }
}

@keyframes ellipsis-bounce {
	0%, 100% { opacity: 0.4; transform: translateY(0); }
	50%       { opacity: 1; transform: translateY(-4px); }
}

@keyframes fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

.fade-out {
	animation: fade-out 0.5s ease forwards;
}