:root {
	--bg: #f4f2ee;
	--surface: #ffffff;
	--ink: #1d2523;
	--muted: #6b7471;
	--line: #e3dfd8;
	--accent: #0f5c57;
	--accent-ink: #ffffff;
	--mine: #0f5c57;
	--mine-ink: #ffffff;
	--theirs: #ffffff;
	--theirs-ink: #1d2523;
	--shadow: 0 1px 2px rgba(0, 0, 0, .06);
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121615;
		--surface: #1b2120;
		--ink: #e8ecea;
		--muted: #93a09c;
		--line: #2a3331;
		--accent: #3fb5a8;
		--accent-ink: #0b1312;
		--mine: #1f6f68;
		--mine-ink: #f1fbf9;
		--theirs: #232b2a;
		--theirs-ink: #e8ecea;
		--shadow: none;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	-webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.cm-app {
	height: 100dvh;
	display: flex;
	flex-direction: column;
	max-width: 820px;
	margin: 0 auto;
	position: relative;
}

/* Header */
.cm-top {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: 8px 8px 8px 16px;
	padding-top: max(8px, env(safe-area-inset-top));
}
.cm-top-row { display: flex; align-items: center; gap: 2px; }
.cm-top-main { flex: 1; min-width: 0; }
.cm-title {
	font-size: 17px;
	font-weight: 650;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cm-me { font-size: 13px; color: var(--muted); }
.cm-icon {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	border: 0;
	background: transparent;
	display: grid;
	place-items: center;
	cursor: pointer;
	fill: var(--accent);
}
.cm-icon:hover { background: var(--bg); }
.cm-icon .off { display: none; }
.cm-icon[aria-pressed="true"] { fill: var(--muted); }
.cm-icon[aria-pressed="true"] .off { display: inline; }

/* People in the room */
.cm-people {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	margin-top: 6px;
	padding-right: 8px;
}
.cm-people:empty { display: none; }
.cm-people::-webkit-scrollbar { display: none; }
.cm-person {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 13px;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
}
.cm-person.on { color: var(--ink); }
.cm-person i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d93025;
	flex: none;
}
.cm-person.on i { background: #1e9e4a; box-shadow: 0 0 0 3px color-mix(in srgb, #1e9e4a 22%, transparent); }

/* Install banner */
.cm-install {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 16px;
	background: color-mix(in srgb, var(--accent) 12%, var(--surface));
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.cm-install span { flex: 1; }
.cm-install-btn {
	border: 0;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
}
.cm-install-x {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	width: 32px;
	height: 32px;
	color: var(--muted);
	cursor: pointer;
}

/* Shake on new message */
@keyframes cm-shake {
	0%, 100% { transform: translateX(0); }
	15% { transform: translateX(-7px) rotate(-.4deg); }
	30% { transform: translateX(6px) rotate(.4deg); }
	45% { transform: translateX(-5px); }
	60% { transform: translateX(4px); }
	75% { transform: translateX(-2px); }
}
.cm-app.cm-shake { animation: cm-shake .45s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
	.cm-app.cm-shake { animation-duration: .2s; }
}

/* Λίστα μηνυμάτων */
.cm-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 12px 8px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.cm-empty {
	text-align: center;
	color: var(--muted);
	margin-top: 30vh;
	font-size: 15px;
}
.cm-day {
	text-align: center;
	margin: 14px 0 8px;
	font-size: 12px;
	color: var(--muted);
}
.cm-day span {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 2px 10px;
	border-radius: 999px;
}
.cm-msg {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 10px;
}
.cm-msg.cont { margin-top: 2px; }
.cm-msg.mine { align-items: flex-end; }
.cm-name {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	margin: 0 10px 2px;
}
.cm-msg.cont .cm-name, .cm-msg.mine .cm-name { display: none; }
.cm-bubble {
	max-width: 100%;
	min-width: 0;
	padding: 7px 11px;
	border-radius: 16px;
	background: var(--theirs);
	color: var(--theirs-ink);
	box-shadow: var(--shadow);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.cm-msg.mine .cm-bubble {
	background: var(--mine);
	color: var(--mine-ink);
}
.cm-bubble a { color: inherit; text-decoration: underline; }
.cm-msg.fresh .cm-bubble { animation: cm-in .18s ease-out; }
@keyframes cm-in { from { transform: translateY(6px); opacity: 0; } }

.cm-newpill {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 78px;
	border: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Σύνθεση */
.cm-compose {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 10px;
	padding-bottom: max(8px, env(safe-area-inset-bottom));
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.cm-compose textarea {
	flex: 1;
	resize: none;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink);
	border-radius: 20px;
	padding: 9px 14px;
	font: inherit;
	max-height: 160px;
	min-height: 42px;
	outline: none;
}
.cm-compose textarea:focus { border-color: var(--accent); }
.cm-send {
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	border: 0;
	background: var(--accent);
	fill: var(--accent-ink);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.cm-send:disabled { opacity: .45; cursor: default; }

/* Παράθυρα */
.cm-overlay, .cm-gone {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(3px);
	z-index: 10;
}
.cm-card {
	width: min(380px, 100%);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.cm-card h1, .cm-card h2 { margin: 0 0 14px; font-size: 19px; }
.cm-card p { margin: 0; color: var(--muted); }
.cm-card label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.cm-card input {
	width: 100%;
	font: inherit;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg);
	color: var(--ink);
	outline: none;
}
.cm-card input:focus { border-color: var(--accent); }
.cm-btn {
	width: 100%;
	margin-top: 12px;
	padding: 11px;
	border: 0;
	border-radius: 10px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	cursor: pointer;
}

.cm-toast {
	position: absolute;
	left: 50%;
	top: 100px;
	transform: translateX(-50%);
	background: #b3261e;
	color: #fff;
	padding: 7px 14px;
	border-radius: 10px;
	font-size: 14px;
	z-index: 20;
	max-width: calc(100% - 32px);
	text-align: center;
}

.cm-err { color: #b3261e !important; font-size: 14px; margin: 8px 0 0 !important; }
.cm-hint { font-size: 13px; margin: 8px 0 0 !important; }
.cm-btn:disabled { opacity: .6; }

/* Message line: bubble + discreet time beside it */
.cm-line {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	max-width: min(84%, 600px);
}
.cm-msg.mine .cm-line { flex-direction: row-reverse; }
.cm-time {
	flex: none;
	font-size: 10px;
	line-height: 1;
	color: var(--muted);
	opacity: .55;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cm-msg:hover .cm-time, .cm-msg.sel .cm-time { opacity: .9; }

/* Presence dot next to names */
.cm-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #d93025;
	flex: none;
	display: inline-block;
}
.cm-dot.on { background: #1e9e4a; }

/* Mentions */
.cm-at { font-weight: 600; color: var(--accent); }
.cm-msg.mine .cm-at { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cm-at.me { background: color-mix(in srgb, #f2b705 35%, transparent); border-radius: 4px; padding: 0 2px; color: inherit; }
.cm-msg.atme .cm-bubble { box-shadow: 0 0 0 2px color-mix(in srgb, #f2b705 70%, transparent); }

/* Quoted message inside a reply */
.cm-quote {
	border-left: 3px solid var(--accent);
	background: color-mix(in srgb, var(--ink) 6%, transparent);
	border-radius: 8px;
	padding: 4px 8px;
	margin: 1px 0 5px;
	cursor: pointer;
	font-size: 13.5px;
	max-width: 100%;
}
.cm-msg.mine .cm-quote { border-left-color: currentColor; background: rgba(255, 255, 255, .14); }
.cm-quote-who { font-weight: 600; font-size: 12.5px; }
.cm-msg.mine .cm-quote-who { color: inherit !important; }
.cm-quote-text {
	opacity: .85;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: pre-wrap;
}
.cm-quote-text.del { font-style: italic; }

/* Deleted message */
.cm-bubble.del {
	font-style: italic;
	color: var(--muted);
	background: transparent;
	border: 1px dashed var(--line);
	box-shadow: none;
}
.cm-msg.mine .cm-bubble.del { background: transparent; color: var(--muted); }

/* Tap actions */
.cm-bubble { cursor: pointer; -webkit-touch-callout: none; }
.cm-msg.deleted .cm-bubble { cursor: default; }
.cm-acts { display: none; gap: 6px; margin-top: 4px; }
.cm-msg.sel .cm-acts { display: flex; }
.cm-act {
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
	padding: 4px 12px;
	border-radius: 999px;
	cursor: pointer;
}
.cm-del { color: #b3261e; }
.cm-msg.sel .cm-bubble { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
@keyframes cm-flash { from { background: color-mix(in srgb, #f2b705 30%, transparent); } }
.cm-msg.flash { animation: cm-flash 1.4s ease-out; border-radius: 12px; }

/* Composer: field with paste button, reply bar, mention list */
.cm-field { flex: 1; position: relative; display: flex; min-width: 0; }
.cm-field textarea { width: 100%; padding-right: 44px; }
.cm-paste {
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	fill: var(--muted);
	display: grid;
	place-items: center;
	cursor: pointer;
}
.cm-paste:hover { fill: var(--accent); background: var(--surface); }
.cm-field textarea:not(:placeholder-shown) ~ .cm-paste { fill: color-mix(in srgb, var(--muted) 70%, transparent); }

.cm-replybar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 12px;
	background: var(--surface);
	border-top: 1px solid var(--line);
}
.cm-replybar-main {
	flex: 1;
	min-width: 0;
	border-left: 3px solid var(--accent);
	padding-left: 8px;
}
.cm-replybar-who { font-size: 12.5px; font-weight: 600; }
.cm-replybar-text { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-replybar-x {
	border: 0; background: none; font-size: 22px; width: 34px; height: 34px; color: var(--muted); cursor: pointer;
}

.cm-mentions {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-top: 1px solid var(--line);
	max-height: 40vh;
	overflow-y: auto;
}
.cm-mention {
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	border: 0;
	background: none;
	padding: 10px 16px;
	font-size: 15px;
	cursor: pointer;
}
.cm-mention.act, .cm-mention:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }