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

html,
body {
	height: 100%;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
	background: radial-gradient(circle at top, #f9fafb 0, #e5e7eb 40%, #e5e7eb 100%);
	color: #111827;
}

.app-shell {
	max-width: 960px;
	margin: 0 auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 16px;
	gap: 12px;
}

.app-header {
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(148, 163, 184, 0.4);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
	padding: 10px 16px;
}

.app-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.app-title-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.app-logo-circle {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: linear-gradient(135deg, #1d4ed8, #22c55e);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.app-title {
	font-size: 16px;
	font-weight: 600;
}

.app-subtitle {
	font-size: 12px;
	color: #6b7280;
}

.app-status {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #ecfdf3;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

.app-status.busy {
	background: #eff6ff;
	color: #1d4ed8;
	border-color: #bfdbfe;
}

.chat-main {
	flex: 1;
	min-height: 0;
}

.chat-container {
	height: calc(100vh - 210px);
	max-height: 780px;
	border-radius: 24px;
	background: rgba(15, 23, 42, 0.96);
	background-image: radial-gradient(circle at top left, rgba(59, 130, 246, 0.3), transparent 55%),
		radial-gradient(circle at bottom right, rgba(22, 163, 74, 0.35), transparent 55%);
	padding: 18px 16px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.75);
}

.message-row {
	display: flex;
	gap: 10px;
	width: 100%;
	align-items: flex-start;
}

.message-row.user {
	flex-direction: row-reverse;
}

.avatar {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.message-row.assistant .avatar {
	background: linear-gradient(135deg, #22c55e, #4ade80);
	color: #022c22;
}

.message-row.user .avatar {
	background: #0f172a;
	color: #e5e7eb;
}

.message-bubble {
	max-width: 80%;
	border-radius: 18px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.message-row.assistant .message-bubble {
	background: rgba(15, 23, 42, 0.88);
	border: 1px solid rgba(148, 163, 184, 0.55);
	color: #e5e7eb;
}

.message-row.user .message-bubble {
	background: #4f46e5;
	color: white;
	margin-right: 4px;
}

.message-meta {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

.message-row.assistant .message-meta {
	color: #a5b4fc;
}

.message-row.user .message-meta {
	color: rgba(226, 232, 240, 0.85);
}

.message-text {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.input-bar {
	position: sticky;
	bottom: 0;
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.input-inner {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 10px 8px 14px;
	border-radius: 18px;
	background: rgba(15, 23, 42, 0.95);
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(148, 163, 184, 0.7);
}

.input-textarea {
	flex: 1;
	resize: none;
	border: none;
	outline: none;
	background: transparent;
	color: #e5e7eb;
	font-family: inherit;
	font-size: 14px;
	max-height: 160px;
}

.input-textarea::placeholder {
	color: #6b7280;
}

.send-button {
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #4f46e5, #22c55e);
	color: white;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	box-shadow: 0 10px 30px rgba(79, 70, 229, 0.5);
	transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
	white-space: nowrap;
}

.send-button:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 14px 34px rgba(79, 70, 229, 0.65);
	filter: brightness(1.02);
}

.send-button:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 8px 20px rgba(79, 70, 229, 0.45);
}

.send-button:disabled {
	opacity: 0.6;
	cursor: default;
	box-shadow: none;
}

.input-hint {
	font-size: 11px;
	color: #6b7280;
	padding-left: 8px;
}

@media (max-width: 640px) {
	.app-shell {
		padding: 10px;
	}

	.chat-container {
		height: calc(100vh - 190px);
		border-radius: 18px;
		padding: 14px 10px;
	}

	.message-bubble {
		max-width: 90%;
	}
}