* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			font-family: "Segoe UI", Tahoma, sans-serif;
			background: #f4f6f8;
			color: #111827;
		}

		.app {
			max-width: 900px;
			height: 100vh;
			margin: 0 auto;
			display: grid;
			grid-template-rows: auto 1fr auto;
			background: #ffffff;
			border-left: 1px solid #e5e7eb;
			border-right: 1px solid #e5e7eb;
		}

		header {
			padding: 14px 16px;
			border-bottom: 1px solid #e5e7eb;
		}

		h1 {
			font-size: 1rem;
			margin: 0;
		}

		.meta {
			margin-top: 4px;
			font-size: 0.85rem;
			color: #6b7280;
		}

		.status-line {
			margin: 8px 0 0;
		}

		.status-badge {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 3px 10px;
			border-radius: 999px;
			font-size: 0.78rem;
			font-weight: 600;
			border: 1px solid transparent;
		}

		.status-badge::before {
			content: "";
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: currentColor;
		}

		.status-checking {
			background: #fef3c7;
			color: #92400e;
			border-color: #fcd34d;
		}

		.status-online {
			background: #dcfce7;
			color: #166534;
			border-color: #86efac;
		}

		.status-offline {
			background: #fee2e2;
			color: #991b1b;
			border-color: #fca5a5;
		}

		#messages {
			padding: 16px;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.msg {
			max-width: 80%;
			padding: 10px 12px;
			border-radius: 10px;
			line-height: 1.4;
		}

		.msg.user {
			margin-left: auto;
			background: #dbeafe;
		}

		.msg.assistant {
			margin-right: auto;
			background: #f3f4f6;
		}

		.msg.thinking::after {
			content: "...";
			display: inline-block;
			width: 1.2em;
			overflow: hidden;
			vertical-align: bottom;
			animation: dots 1s steps(4, end) infinite;
		}

		.msg.streaming::after {
			content: "";
			display: inline-block;
			width: 2px;
			height: 1em;
			margin-left: 3px;
			background: #6b7280;
			vertical-align: -0.12em;
			animation: blink 1s step-end infinite;
		}

		form {
			display: grid;
			grid-template-columns: 1fr auto auto;
			gap: 8px;
			padding: 12px;
			border-top: 1px solid #e5e7eb;
		}

		textarea,
		button {
			font: inherit;
		}

		textarea {
			resize: none;
			padding: 10px;
			border: 1px solid #d1d5db;
			border-radius: 8px;
		}

		button {
			border: none;
			padding: 0 14px;
			border-radius: 8px;
			cursor: pointer;
		}

		#sendBtn {
			background: #2563eb;
			color: white;
		}

		#clearBtn {
			background: #e5e7eb;
			color: #111827;
		}

		@media (max-width: 640px) {
			.app {
				height: 100dvh;
				border: none;
			}

			form {
				grid-template-columns: 1fr;
			}

			button {
				height: 42px;
			}
		}

		@keyframes dots {
			0% {
				width: 0;
			}
			100% {
				width: 1.2em;
			}
		}

		@keyframes blink {
			0%,
			49% {
				opacity: 1;
			}
			50%,
			100% {
				opacity: 0;
			}
		}