/* =========================================================================
   Darkframe Onboarding Engine — Terminal overlay (windowed)
   =========================================================================
   The #dfoe-terminal-overlay is a backdrop. The terminal itself lives inside
   #dfoe-terminal-window, which is sized via CSS custom properties set by JS
   from the journey config (width / height).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Backdrop overlay
   ------------------------------------------------------------------------- */
#dfoe-terminal-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 280ms ease;
	pointer-events: none;
}

#dfoe-terminal-overlay.dfoe-is-open {
	opacity: 1;
	pointer-events: auto;
}

/* -------------------------------------------------------------------------
   Terminal window
   ------------------------------------------------------------------------- */
#dfoe-terminal-window {
	position: relative;
	display: flex;
	flex-direction: column;
	width: var(--dfoe-term-width, 860px);
	height: var(--dfoe-term-height, 620px);
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 48px);
	background: #020c02;
	border: 1px solid #1a3a1a;
	border-radius: 10px;
	overflow: hidden;
	box-shadow:
		0 28px 80px rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 255, 65, 0.06),
		inset 0 0 120px rgba(0, 0, 0, 0.3);
	font-family: var(--df-font-mono, 'Courier New', monospace);
	transform: scale(0.94) translateY(12px);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

#dfoe-terminal-overlay.dfoe-is-open #dfoe-terminal-window {
	transform: scale(1) translateY(0);
}

/* CRT scanline effect */
#dfoe-terminal-window::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 1px,
		rgba(0, 0, 0, 0.18) 1px,
		rgba(0, 0, 0, 0.18) 2px
	);
	pointer-events: none;
	z-index: 10;
	border-radius: 10px;
}

/* CRT vignette */
#dfoe-terminal-window::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
	z-index: 10;
	border-radius: 10px;
}

/* -------------------------------------------------------------------------
   Terminal title bar + traffic lights
   ------------------------------------------------------------------------- */
.dfoe-terminal-bar {
	display: flex;
	align-items: center;
	padding: 9px 14px;
	background: #010e01;
	border-bottom: 1px solid #0d260d;
	flex-shrink: 0;
	position: relative;
	z-index: 11;
	user-select: none;
}

.dfoe-terminal-dots {
	display: flex;
	gap: 7px;
	align-items: center;
	margin-right: 14px;
}

.dfoe-terminal-dot {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	cursor: default;
	border: none;
	padding: 0;
	outline: none;
	flex-shrink: 0;
	background: none;
}

.dfoe-terminal-dot--close {
	background: #ff5f57;
	box-shadow: 0 0 3px rgba(255, 95, 87, 0.5);
	cursor: pointer;
	transition: filter 120ms;
}

.dfoe-terminal-dot--close:hover,
.dfoe-terminal-dot--close:focus {
	filter: brightness(1.3);
	outline: none;
}

.dfoe-terminal-dot--min {
	background: #febc2e;
	box-shadow: 0 0 3px rgba(254, 188, 46, 0.35);
	opacity: 0.55;
}

.dfoe-terminal-dot--max {
	background: #28c840;
	box-shadow: 0 0 3px rgba(40, 200, 64, 0.35);
	opacity: 0.55;
}

.dfoe-terminal-bar-title {
	flex: 1;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #004d00;
	text-align: center;
	margin-left: -60px; /* visually centre between dots and status */
}

.dfoe-terminal-bar-status {
	font-size: 10px;
	color: #002800;
	letter-spacing: 0.06em;
	min-width: 60px;
	text-align: right;
}

/* -------------------------------------------------------------------------
   Output area
   ------------------------------------------------------------------------- */
.dfoe-terminal-output {
	flex: 1;
	overflow-y: auto;
	padding: 18px 24px 12px;
	position: relative;
	z-index: 3;
	scroll-behavior: smooth;
}

.dfoe-terminal-output::-webkit-scrollbar         { width: 4px; }
.dfoe-terminal-output::-webkit-scrollbar-track   { background: transparent; }
.dfoe-terminal-output::-webkit-scrollbar-thumb   { background: #002200; border-radius: 2px; }

.dfoe-terminal-line {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: #00ff41;
	font-weight: bold;
	white-space: pre-wrap;
	word-break: break-word;
	margin-bottom: 1px;
	text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
}

.dfoe-terminal-line--dim {
	color: #009922;
}

.dfoe-terminal-line--bright {
	color: #00ff41;
	text-shadow: 0 0 8px rgba(0, 255, 65, 0.55);
}

.dfoe-terminal-line--error {
	color: #ff3333;
	text-shadow: 0 0 5px rgba(255, 50, 50, 0.45);
}

.dfoe-terminal-line--loading {
	color: #00ff41;
	letter-spacing: 0.02em;
	text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
}

.dfoe-terminal-line--logo {
	color: #00ff41;
	font-size: 12px;
	line-height: 1.25;
	white-space: pre;
	text-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
}

.dfoe-terminal-line--prompt::before {
	content: '> ';
	color: #00ff41;
}

.dfoe-terminal-line--spacer {
	display: block;
	height: 0.8em;
	margin: 0;
}

.dfoe-terminal-cursor {
	display: inline-block;
	width: 9px;
	height: 1em;
	background: #00ff41;
	vertical-align: text-bottom;
	animation: dfoe-crt-blink 1s step-end infinite;
	box-shadow: 0 0 6px rgba(0, 255, 65, 0.8);
}

@keyframes dfoe-crt-blink {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0; }
}

/* -------------------------------------------------------------------------
   Input area
   ------------------------------------------------------------------------- */
.dfoe-terminal-input-row {
	display: flex;
	align-items: center;
	padding: 8px 24px 14px;
	border-top: 1px solid #0d260d;
	flex-shrink: 0;
	position: relative;
	z-index: 11;
	gap: 6px;
}

.dfoe-terminal-prompt-glyph {
	color: #00ff41;
	font-size: 13px;
	flex-shrink: 0;
	text-shadow: 0 0 4px rgba(0, 255, 65, 0.55);
}

.dfoe-terminal-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--df-font-mono, monospace);
	font-size: 13px;
	color: #00ff41;
	caret-color: #00ff41;
	text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
}

.dfoe-terminal-input::placeholder {
	color: #003300;
}

.dfoe-terminal-input[type="password"] {
	letter-spacing: 0.15em;
}

.dfoe-terminal-input-row.is-hidden {
	display: none;
}

/* -------------------------------------------------------------------------
   Inline input — rendered inside the output area like a real terminal line
   ------------------------------------------------------------------------- */
.dfoe-terminal-line--input-line {
	display: flex;
	align-items: center;
}

.dfoe-terminal-inline-prompt {
	color: #00ff41;
	font-size: 13px;
	font-weight: bold;
	flex-shrink: 0;
	text-shadow: 0 0 4px rgba(0, 255, 65, 0.55);
	white-space: pre;
	line-height: 1.45;
}

.dfoe-terminal-input--inline {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--df-font-mono, 'Courier New', monospace);
	font-size: 13px;
	font-weight: bold;
	color: #00ff41;
	caret-color: #00ff41;
	text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
	padding: 0;
	margin: 0;
	line-height: 1.45;
}

.dfoe-terminal-input--inline[type="password"] {
	letter-spacing: 0.15em;
}

.dfoe-terminal-input--inline::placeholder {
	color: #006600;
	font-weight: normal;
}

/* -------------------------------------------------------------------------
   Audio indicator (legacy bar — kept hidden, not used)
   ------------------------------------------------------------------------- */
.dfoe-terminal-audio-bar {
	display: none;
}

/* -------------------------------------------------------------------------
   Inline audio player — rendered inside the output stream
   -------------------------------------------------------------------------
   Layout: [▶] PLAY  ████████████░░░░░░░░░░░░░░░░░░  00:00 / 01:23
   Clicking anywhere on the line toggles play / pause.
   ------------------------------------------------------------------------- */
.dfoe-terminal-audio-player {
	display: flex;
	align-items: baseline;
	cursor: pointer;
	padding: 4px 0 2px;
}

.dfoe-terminal-audio-state {
	flex-shrink: 0;
	transition: text-shadow 120ms ease;
}

.dfoe-terminal-audio-player:hover .dfoe-terminal-audio-state {
	text-shadow: 0 0 12px rgba(0, 255, 65, 0.9);
}

.dfoe-terminal-audio-progress {
	flex-shrink: 0;
	letter-spacing: 0.5px;
}

.dfoe-terminal-audio-time {
	flex-shrink: 0;
	opacity: 0.65;
}

@keyframes dfoe-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* -------------------------------------------------------------------------
   Processing state
   ------------------------------------------------------------------------- */
.dfoe-terminal-processing {
	display: none;
	font-size: 11px;
	color: #005500;
	padding: 0 24px 10px;
	letter-spacing: 0.06em;
	position: relative;
	z-index: 11;
}

.dfoe-terminal-processing.is-visible {
	display: block;
}

/* -------------------------------------------------------------------------
   Responsive — near-full on small screens
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
	#dfoe-terminal-window {
		width: calc(100vw - 16px) !important;
		height: calc(100vh - 32px) !important;
		border-radius: 6px;
	}
}