ChatPanel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	font-family: Poppins;
	color: #eef2ff;
	pointer-events: all;

	.chat-shell {
		width: 760px;
		height: 620px;
		padding: 24px;
		gap: 16px;
		flex-direction: column;
		background-color: rgba(12, 17, 29, 0.94);
		border: 1px solid rgba(148, 163, 184, 0.28);
		border-radius: 14px;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	}

	.header {
		flex-shrink: 0;
		justify-content: space-between;
		align-items: center;
		gap: 18px;
	}

	.heading {
		flex-direction: column;
	}

	.title {
		font-size: 28px;
		font-weight: 700;
		color: #f8fafc;
	}

	.subtitle {
		font-size: 13px;
		color: #94a3b8;
	}

	.model-status {
		max-width: 330px;
		padding: 8px 12px;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 600;
		text-align: right;
		background-color: rgba(148, 163, 184, 0.12);
		color: #cbd5e1;

		&.ready {
			background-color: rgba(34, 197, 94, 0.14);
			color: #86efac;
		}

		&.loading {
			background-color: rgba(59, 130, 246, 0.16);
			color: #93c5fd;
		}

		&.not-ready {
			background-color: rgba(245, 158, 11, 0.15);
			color: #fcd34d;
		}

		&.error {
			background-color: rgba(220, 38, 38, 0.18);
			color: #fca5a5;
		}
	}

	.conversation {
		flex-grow: 1;
		flex-direction: column;
		gap: 10px;
		padding: 14px;
		overflow: scroll;
		background-color: rgba(2, 6, 23, 0.72);
		border-radius: 10px;
	}

	.message {
		flex-shrink: 0;
		flex-direction: column;
		gap: 4px;
		max-width: 82%;
		padding: 10px 12px;
		border-radius: 9px;
		background-color: rgba(51, 65, 85, 0.65);

		.role {
			font-size: 11px;
			font-weight: 700;
			color: #94a3b8;
			text-transform: uppercase;
		}

		.text {
			font-size: 15px;
			color: #e2e8f0;
			white-space: normal;
		}

		&.user {
			align-self: flex-end;
			background-color: rgba(37, 99, 235, 0.72);
		}

		&.assistant {
			align-self: flex-start;
			background-color: rgba(71, 85, 105, 0.72);
		}

		&.system {
			align-self: stretch;
			max-width: 100%;
			background-color: rgba(124, 58, 237, 0.18);
			border: 1px solid rgba(167, 139, 250, 0.24);
		}

		&.generating {
			opacity: 0.72;
		}
	}

	.error-status {
		flex-shrink: 0;
		padding: 8px 10px;
		border-radius: 7px;
		background-color: rgba(220, 38, 38, 0.18);
		color: #fca5a5;
		font-size: 12px;
	}

	.input-row {
		flex-shrink: 0;
		gap: 10px;

		.prompt-input {
			flex-grow: 1;
			height: 48px;
			padding: 0 14px;
			border-radius: 8px;
			border: 1px solid rgba(148, 163, 184, 0.32);
			background-color: rgba(15, 23, 42, 0.95);
			color: #f8fafc;
			font-size: 15px;
		}

		.send-button {
			width: 120px;
			height: 48px;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			background-color: #2563eb;
			color: white;
			font-size: 15px;
			font-weight: 700;

			&:hover {
				background-color: #3b82f6;
			}

			&.disabled {
				background-color: #334155;
				color: #94a3b8;
				opacity: 0.72;
			}
		}
	}

	.milestone-note {
		flex-shrink: 0;
		font-size: 11px;
		color: #94a3b8;
		text-align: center;
	}
}