/* /srv/chatbot/web/themes/ios.css: Apple iMessage look; follows the system light/dark setting */

[data-theme="ios"] {
	--ios-bg: #ffffff;
	--ios-bar: rgba(246, 246, 246, 0.92);
	--ios-separator: rgba(60, 60, 67, 0.29);
	--ios-text: #000000;
	--ios-secondary: #8e8e93;
	--ios-blue: #0a84ff;
	--ios-sent: #1f8bff;
	--ios-received: #e9e9eb;
	--ios-received-text: #000000;
	--ios-field-border: #c7c7cc;
	--ios-avatar-top: #a5abb8;
	--ios-avatar-bottom: #858994;
	--ios-error: #ff3b30;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	[data-theme="ios"] {
		--ios-bg: #000000;
		--ios-bar: rgba(29, 29, 31, 0.92);
		--ios-separator: rgba(84, 84, 88, 0.6);
		--ios-text: #ffffff;
		--ios-secondary: #8e8e93;
		--ios-blue: #0a84ff;
		--ios-sent: #0a84ff;
		--ios-received: #262628;
		--ios-received-text: #ffffff;
		--ios-field-border: #3a3a3c;
		--ios-avatar-top: #6c6f78;
		--ios-avatar-bottom: #4d5058;
		--ios-error: #ff453a;
		color-scheme: dark;
	}
}

[data-theme="ios"] body {
	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: var(--ios-bg);
	color: var(--ios-text);
	-webkit-font-smoothing: antialiased;
}

[data-theme="ios"] .header {
	position: relative;
	justify-content: center;
	padding: 0.6rem 1rem 0.5rem;
	padding-top: max(0.6rem, env(safe-area-inset-top));
	background: var(--ios-bar);
	border-bottom: 0.5px solid var(--ios-separator);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

[data-theme="ios"] .header-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

[data-theme="ios"] .avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(var(--ios-avatar-top), var(--ios-avatar-bottom));
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 0.5px;
}

[data-theme="ios"] .header h1 {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--ios-text);
}

[data-theme="ios"] .header h1::after {
	content: ' \203A';
	color: var(--ios-secondary);
}

[data-theme="ios"] .header p {
	display: none;
}

[data-theme="ios"] .theme-picker {
	position: absolute;
	top: max(0.6rem, env(safe-area-inset-top));
	right: 1rem;
}

[data-theme="ios"] .theme-picker label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

[data-theme="ios"] #theme {
	font: inherit;
	font-size: 1rem;
	color: var(--ios-blue);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: right;
}

[data-theme="ios"] #chatContainer {
	padding: 0.75rem 1rem;
	background: var(--ios-bg);
	gap: 2px;
}

[data-theme="ios"] .message {
	max-width: 75%;
	animation: iosPop 0.25s ease-out;
}

@keyframes iosPop {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

[data-theme="ios"] .message.user {
	transform-origin: bottom right;
}

[data-theme="ios"] .message.bot {
	transform-origin: bottom left;
}

/* Extra space where the speaker changes, as iMessage groups runs */
[data-theme="ios"] .message.user + .message.bot,
[data-theme="ios"] .message.bot + .message.user {
	margin-top: 0.6rem;
}

[data-theme="ios"] .message-label {
	display: none;
}

[data-theme="ios"] .message-content {
	position: relative;
	padding: 0.45rem 0.8rem;
	border-radius: 18px;
	font-size: 1.0625rem;
	line-height: 1.3;
}

[data-theme="ios"] .message.user .message-content {
	background: var(--ios-sent);
	color: #ffffff;
}

[data-theme="ios"] .message.bot .message-content {
	background: var(--ios-received);
	color: var(--ios-received-text);
}

/* Bubble tails: only on the last bubble of a run */
[data-theme="ios"] .message-content::before,
[data-theme="ios"] .message-content::after {
	content: '';
	position: absolute;
	bottom: 0;
	height: 20px;
}

[data-theme="ios"] .message.user .message-content::before {
	right: -7px;
	width: 20px;
	background: var(--ios-sent);
	border-bottom-left-radius: 16px 14px;
}

[data-theme="ios"] .message.user .message-content::after {
	right: -26px;
	width: 26px;
	background: var(--ios-bg);
	border-bottom-left-radius: 10px;
}

[data-theme="ios"] .message.bot .message-content::before {
	left: -7px;
	width: 20px;
	background: var(--ios-received);
	border-bottom-right-radius: 16px 14px;
}

[data-theme="ios"] .message.bot .message-content::after {
	left: -26px;
	width: 26px;
	background: var(--ios-bg);
	border-bottom-right-radius: 10px;
}

[data-theme="ios"] .message.user:has(+ .message.user) .message-content::before,
[data-theme="ios"] .message.user:has(+ .message.user) .message-content::after,
[data-theme="ios"] .message.bot:has(+ .message.bot) .message-content::before,
[data-theme="ios"] .message.bot:has(+ .message.bot) .message-content::after {
	display: none;
}

[data-theme="ios"] .message.error .message-content {
	color: var(--ios-error);
}

/* Typing bubble: three pulsing dots instead of "Processing..." */
[data-theme="ios"] .message.typing .typing-text,
[data-theme="ios"] .message.typing .typing-indicator {
	display: none;
}

[data-theme="ios"] .message.typing .typing-dots {
	display: flex;
	gap: 4px;
	padding: 0.35rem 0.1rem;
}

[data-theme="ios"] .typing-dots span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ios-secondary);
	animation: iosTyping 1.2s ease-in-out infinite;
}

[data-theme="ios"] .typing-dots span:nth-child(2) {
	animation-delay: 0.2s;
}

[data-theme="ios"] .typing-dots span:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes iosTyping {
	0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
	30% { opacity: 1; transform: translateY(-2px); }
}

[data-theme="ios"] .input-area {
	position: relative;
	align-items: flex-end;
	padding: 0.5rem 0.75rem;
	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
	background: var(--ios-bar);
	border-top: 0.5px solid var(--ios-separator);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

[data-theme="ios"] #q {
	height: 36px;
	padding: 0 2.6rem 0 0.9rem;
	font: inherit;
	font-size: 1.0625rem;
	background: var(--ios-bg);
	color: var(--ios-text);
	border: 1px solid var(--ios-field-border);
	border-radius: 18px;
}

[data-theme="ios"] #q::placeholder {
	color: var(--ios-secondary);
}

/* Round send arrow that sits inside the end of the field */
[data-theme="ios"] #go {
	position: absolute;
	right: calc(0.75rem + 4px);
	bottom: calc(max(0.5rem, env(safe-area-inset-bottom)) + 4px);
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: var(--ios-blue);
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
	transition: opacity 0.15s;
}

[data-theme="ios"] #go:disabled {
	opacity: 0.4;
}

[data-theme="ios"] .empty-state {
	align-self: center;
	max-width: 80%;
	margin: 0.5rem 0 1rem;
	text-align: center;
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--ios-secondary);
	white-space: pre-line;
}

/* Stats page (stats/) */
[data-theme="ios"] {
	--dash-panel: #f2f2f7;
	--dash-border: transparent;
	--dash-text: var(--ios-text);
	--dash-muted: #6c6c70;
	--dash-accent: var(--ios-blue);
	--dash-on-accent: #ffffff;
	--dash-good: #248a3d;
	--dash-bad: #d70015;
	--dash-on-status: #ffffff;
	--dash-grid: var(--ios-separator);
	--dash-radius: 12px;
	--dash-shadow: none;
}

@media (prefers-color-scheme: dark) {
	[data-theme="ios"] {
		--dash-panel: #1c1c1e;
		--dash-muted: #98989d;
		--dash-good: #30d158;
		--dash-bad: #ff453a;
		--dash-on-status: #000000;
	}
}

/* Stats link at the top left, where iOS puts the back button; theme menu stays top right */
[data-theme="ios"] .theme-picker {
	left: 1rem;
	justify-content: space-between;
	pointer-events: none;
}

[data-theme="ios"] .theme-picker > * {
	pointer-events: auto;
}

[data-theme="ios"] .theme-picker #theme {
	margin-left: auto;
}

[data-theme="ios"] .stats-link {
	font-size: 1rem;
	color: var(--ios-blue);
}