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

/* ── base: desktop (>= 768px) ── */
body {
	background: #070707;
	font-family: 'Consolas', 'Courier New', 'Lucida Console', 'DejaVu Sans Mono', monospace;
	font-size: 14px;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	overflow: hidden;
}

#appWrap {
	display: flex;
	align-items: stretch;
	gap: 0;
	height: 80vh;
	min-height: 50vh;
}

#voiceLineL,
#voiceLineR {
	width: 44px;
	display: block;
	pointer-events: none;
}

#container {
	width: 720px;
	max-width: 93vw;
	display: flex;
	flex-direction: column;
	border: 1px solid #1a1a1a;
	background: #0b0b0b;
	min-height: 0;
	height: 80vh;
}

/* ── title bar ── */
#titleBar {
	background: #070707;
	padding: 5px 10px;
	border-bottom: 1px solid #1a1a1a;
	font-size: 11px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	user-select: none;
}

#progressWrap {
	flex: 1;
	height: 2px;
	background: #1a1a1a;
	overflow: hidden;
}

#progressBar {
	height: 100%;
	width: 0%;
	background: #333;
	transition: width 0.15s linear;
}

#modelInfo {
	font-size: 10px;
	color: #444;
	flex-shrink: 0;
}

/* ── screen (terminal output area) ── */
#screen {
	background: #070707;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	scrollbar-width: none;
}

#screen::-webkit-scrollbar {
	display: none;
}

/* ── history (past messages) ── */
#history {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── message lines ── */
.msg {
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	padding: 0;
}

.msg.user {
	color: #b0b0b0;
}

.msg.user::before {
	content: '$ ';
	color: #4a3095;
}

.msg.assistant {
	color: #7d7d7d;
	margin-bottom: 4px;
}

.msg.assistant::before {
	content: 'Antrax: ';
	color: #555;
}

/* ── current input line (terminal prompt) ── */
#currentLine {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 1.5;
	position: relative;
}

#currentLine::before {
	content: '> ';
	color: #555;
	white-space: pre;
}

.inputText {
	color: #b0b0b0;
	white-space: pre;
}

.cursor {
	display: inline-block;
	width: 7px;
	height: 1.5em;
	background: #777;
	margin-left: 1px;
	line-height: 1.5;
	animation: blink 1s step-end infinite;
	flex-shrink: 0;
}

/* ── hidden mobile input to trigger soft keyboard ── */
#mobileInput {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
	left: -9999px;
	font-size: 16px; /* prevent iOS zoom */
}

.cursor.disabled {
	background: transparent;
	animation: none;
}

@keyframes blink {
  0%, 100% { background: #777; }
  50% { background: transparent; }
}

/* ── version label ── */
#versionLabel {
	position: fixed;
	bottom: 7px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	color: #1e1e1e;
	pointer-events: none;
	letter-spacing: 0.5px;
}

/* ────────────────────────────────
   PHONE / TABLET (<= 767px)
   ──────────────────────────────── */
@media (max-width: 767px) {

	body {
		font-size: 16px;          /* big jump from 14px desktop */
		align-items: stretch;     /* container fills top-to-bottom */
	}

	#appWrap {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
	}

	/* shrink voice wave canvases on small screens */
	#voiceLineL,
	#voiceLineR {
		width: 20px;
	}

	#container {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		border: none;             /* edge-to-edge on phone */
	}

	#titleBar {
		font-size: 12px;
		padding: 6px 12px;
	}

	#modelInfo {
		font-size: 11px;
	}

	#screen {
		padding: 8px 12px;
		flex: 1;
	}

	.msg {
		line-height: 1.55;
	}

	#currentLine {
		line-height: 1.55;
	}

	.cursor {
		width: 8px;
	}

	#mobileInput {
		font-size: 16px;          /* 16px = no iOS zoom */
	}

	#versionLabel {
		font-size: 11px;
		bottom: 10px;
		color: #222;
	}
}

/* ── extra small phones (<= 390px, e.g. iPhone SE) ── */
@media (max-width: 390px) {
	body {
		font-size: 17px;
	}

	#titleBar {
		font-size: 13px;
		padding: 7px 12px;
	}

	#screen {
		padding: 8px 12px;
	}

	.msg {
		line-height: 1.6;
	}

	#currentLine {
		line-height: 1.6;
	}
}