:root {
	--primary: #1565c0; /* blue accent */
	--bg: #0b1b2b;
	--card: #11263b;
	--text: #e6f0ff;
	--muted: #a8c1e6;
	--mine: #0e7ae6;
	--theirs: #1b3b5c;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: linear-gradient(180deg, var(--bg), #06111c);
	color: var(--text);
}

.chat-shell {
	height: 100svh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-width: 720px;
	margin: 0 auto;
}

.chat-header {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--card);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.chat-header .title { font-weight: 700; letter-spacing: 0.2px; }
.chat-header .user { opacity: 0.9; }
.chat-header .logout { color: var(--muted); text-decoration: none; border: 1px solid rgba(255,255,255,0.15); padding: 6px 10px; border-radius: 8px; }

.messages {
	padding: 16px;
	overflow-y: auto;
	background: radial-gradient(60% 60% at 50% 0%, rgba(21,101,192,0.15), rgba(0,0,0,0) 60%), transparent;
}

.msg {
	max-width: 75%;
	padding: 10px 12px;
	margin: 8px 0;
	border-radius: 12px;
	line-height: 1.35;
	word-wrap: break-word;
	white-space: pre-wrap;
}

.msg .meta { font-size: 11px; opacity: 0.7; margin-top: 4px; }

.msg.mine { margin-left: auto; background: var(--mine); color: #fff; }
.msg.theirs { margin-right: auto; background: var(--theirs); }

.composer { padding: 12px; background: var(--card); border-top: 1px solid rgba(255,255,255,0.08); }
#sendForm { display: flex; gap: 10px; }
#messageInput { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: var(--text); outline: none; }
#sendBtn { padding: 12px 16px; border: none; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; }

.msg img { display: block; max-width: 100%; border-radius: 10px; margin-top: 6px; }

#uploadBtn { background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 10px; padding: 0 12px; }

.typing { padding: 6px 12px; font-size: 12px; opacity: 0.8; }
.meta .ticks { margin-left: 6px; opacity: 0.85; }