/**
 * EKhanS — three-party deal room.
 *
 * Loaded after components.css so it wins by order without !important. It adds
 * role badges, three bubble tints and read receipts to the existing .ek-msg
 * markup; it redefines nothing that components.css already sets except the
 * two rules noted below.
 *
 * THE ONE OVERRIDE WORTH KNOWING ABOUT
 * components.css aligns .ek-msg--out to the right and tints it with the accent
 * colour. That remains: "mine on the right" is a stronger convention than any
 * palette, so the party tints are applied as a LEFT BORDER and a background
 * that the --out rule may override, rather than fighting it. The result is
 * that every reader sees the same three colours on incoming messages, and
 * their own messages stay on the right where they expect them.
 */

/* --------------------------------------------------------------- role badge */

.ek-msg__who {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.ek-role {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.7;
}

.ek-role--buyer {
	border-color: rgba(16, 185, 129, 0.35);
	background: rgba(16, 185, 129, 0.14);
	color: #6ee7b7;
}

.ek-role--seller {
	border-color: rgba(167, 139, 250, 0.35);
	background: rgba(167, 139, 250, 0.14);
	color: #c4b5fd;
}

.ek-role--operator {
	border-color: rgba(34, 211, 238, 0.4);
	background: rgba(34, 211, 238, 0.14);
	color: #67e8f9;
}

/* ------------------------------------------------------- per-party bubbles */

.ek-msg--role-buyer {
	border-left: 3px solid rgba(16, 185, 129, 0.55);
	background: rgba(16, 185, 129, 0.07);
}

.ek-msg--role-seller {
	border-left: 3px solid rgba(167, 139, 250, 0.55);
	background: rgba(167, 139, 250, 0.07);
}

.ek-msg--role-operator {
	border-left: 3px solid rgba(34, 211, 238, 0.6);
	background: rgba(34, 211, 238, 0.09);
}

/* An operator message is support speaking to the room, not a third party in
   a two-party thread. Full width, centred, so it never reads as one side. */
.ek-msg--role-operator {
	align-self: stretch;
	max-width: 100%;
}

/* --------------------------------------------------------- read receipts */

.ek-msg__foot {
	align-items: center;
}

.ek-ticks {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	line-height: 1;
	letter-spacing: -2px;
	cursor: default;
}

.ek-ticks--sent { color: var(--ek-text-4, #6b7280); }
.ek-ticks--read { color: #22c55e; letter-spacing: -3px; }

/* ------------------------------------------------------------- presence */

.ek-presence {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	color: var(--ek-text-3, #9ca3af);
}

.ek-presence__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.ek-presence__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ek-text-4, #6b7280);
	flex: 0 0 auto;
}

.ek-presence__item.is-active .ek-presence__dot {
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.ek-presence__name { font-weight: 600; color: var(--ek-text-2, #d1d5db); }
.ek-presence__state { font-variant-numeric: tabular-nums; }

/* Sound toggle sits with the presence row, not in the composer: it is a
   property of the room, not of the message being written. */
.ek-chat__sound {
	margin-left: auto;
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	background: transparent;
	color: var(--ek-text-3, #9ca3af);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.ek-chat__sound[aria-pressed="true"] { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); }

@media (prefers-reduced-motion: no-preference) {
	.ek-msg--fresh { animation: ek-msg-in 0.22s ease-out both; }

	@keyframes ek-msg-in {
		from { opacity: 0; transform: translateY(6px); }
		to { opacity: 1; transform: none; }
	}
}