body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #e5ddd5;
	margin: 0; padding: 0;
	display: flex; justify-content: center; align-items: center;
	height: 100vh;
}
.chat-container {
	background: #fff; width: 100%; max-width: 450px; height: 90vh;
	display: flex; flex-direction: column; border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15); overflow: hidden;
}
.chat-header {
	background-color: #075e54; color: white; padding: 15px;
	display: flex; justify-content: space-between; align-items: center;
	font-weight: bold;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.disconnected-dot { background-color: #ff3b30; }
.connected-dot { background-color: #4cd964; }

.setup-bar {
	background: #f0f0f0; padding: 10px 15px;
	display: flex; flex-direction: column; gap: 8px;
	border-bottom: 1px solid #ddd;
}
.setup-row { display: flex; gap: 10px; align-items: center; }
.setup-row label { font-size: 0.9em; font-weight: bold; color: #555; width: 60px; }
.setup-row input { flex: 1; padding: 6px 12px; border: 1px solid #ccc; border-radius: 15px; outline: none; }
.connect-btn {
	background-color: #128c7e; color: white; border: none;
	padding: 6px 15px; border-radius: 15px; font-weight: bold; cursor: pointer;
}

.chat-messages {
	flex: 1; padding: 20px; overflow-y: auto;
	background-color: #e5ddd5; display: flex; flex-direction: column; gap: 10px;
}
.message { max-width: 75%; padding: 8px 14px; border-radius: 8px; font-size: 0.95em; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.message .meta { font-size: 0.75em; color: #888; margin-bottom: 3px; font-weight: bold; }
.message .time { font-size: 0.65em; color: #999; float: right; margin-top: 5px; margin-left: 10px; }
.message.sent { background-color: #dcf8c6; align-self: flex-end; border-top-right-radius: 0; }
.message.received { background-color: #fff; align-self: flex-start; border-top-left-radius: 0; }
.message.system { background-color: #fff3cd; color: #856404; align-self: center; font-size: 0.8em; max-width: 90%; text-align: center; border-radius: 4px; }

.chat-input-area { background: #f0f0f0; padding: 10px 15px; display: flex; gap: 10px; align-items: center; }
.chat-input-area input { flex: 1; padding: 12px; border: none; border-radius: 25px; outline: none; font-size: 1em; padding-left: 20px; }
.chat-input-area button { background-color: #075e54; color: white; border: none; padding: 12px 20px; border-radius: 25px; font-weight: bold; cursor: pointer; }
.chat-input-area button:disabled { background-color: #ccc; cursor: not-allowed; }