/*
 * Prompt editor: a transparent textarea over a highlight mirror. Both layers
 * share one box model (pe-layer) so the text lines up exactly; the mirror's
 * scroll follows the textarea's.
 */

.pe {
	position: relative;
	width: 100%;
}

/* Shared box model — keep these identical on both layers. */
.pe-layer {
	width: 100%;
	margin: 0;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	padding: 8px 12px;
	font: inherit;
	font-size: 13px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	tab-size: 4;
}

/* The mirror sits underneath, shows the highlight, and is not interactive. */
.pe-mirror {
	position: absolute;
	inset: 0;
	overflow: auto;
	background: var(--surface-2);
	color: var(--text);
	border-color: var(--border);
	pointer-events: none;
}

/* A known {variable}, boxed without changing the text width (shadow = padding). */
.pe-var {
	border-radius: 3px;
	background: var(--accent);
	box-shadow: 0 0 0 1.5px var(--accent);
	color: var(--accent-text);
}

/* The textarea on top: transparent text, visible caret, no background. */
.pe-input {
	position: relative;
	display: block;
	resize: vertical;
	background: transparent;
	color: transparent;
	caret-color: var(--text-strong);
	outline: none;
}

.pe-input::placeholder {
	color: transparent;
}

.pe-input:focus {
	border-color: var(--muted);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Keep a selection readable: the mirror's text shows through the textarea. */
.pe-input::selection {
	background: rgb(59 130 246 / 0.3);
	color: transparent;
}