/* Macrolyx — Crowd Sentiment widgets. */

.mlx-sent { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.mlx-sent-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 0 10px;
}
.mlx-sent-ranges { display: flex; gap: 6px; }


.mlx-sent-ccount { color: var(--mlx-accent); }

.mlx-sent-cwrap { position: relative; }
.mlx-sent-cpop {
	display: none;
	position: fixed;
	z-index: 1200;
	background: var(--mlx-bg2);
	border: 1px solid var(--mlx-border);
	border-radius: 10px;
	padding: 8px 10px;
	z-index: 20;
	max-height: 260px;
	overflow-y: auto;
	min-width: 150px;
	scrollbar-width: thin;
}
.mlx-sent-cpop.is-open { display: block; }

.mlx-sent-copt {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--mlx-text);
	padding: 3px 2px;
	cursor: pointer;
	white-space: nowrap;
}
.mlx-sent-call {
	border-bottom: 1px solid var(--mlx-border);
	padding-bottom: 6px;
	margin-bottom: 5px;
	color: var(--mlx-muted);
}

.mlx-sent-chart {
	flex: 1;
	min-height: 220px;
}

/* ---------------- History popup (draggable) ---------------- */

.mlx-pop {
	display: none;
	position: fixed;
	left: 50%;
	top: 16%;
	transform: translateX(-50%);
	width: min(580px, 94vw);
	background: var(--mlx-bg2);
	z-index: 990;
	padding: 0;
	flex-direction: column;
}
.mlx-pop.is-open { display: flex !important; }
.mlx-pop:not(.is-open) { display: none !important; }

.mlx-pop-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mlx-border);
	cursor: grab;
	user-select: none;
	touch-action: none;
}
.mlx-pop-head:active { cursor: grabbing; }
.mlx-pop-title { font-size: 14px; color: var(--mlx-text); }
.mlx-pop-ranges { display: flex; gap: 6px; margin-inline-start: auto; }
.mlx-pop-close {
	background: transparent;
	border: 0;
	color: var(--mlx-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 6px;
}
.mlx-pop-close:hover { color: var(--mlx-accent); }

.mlx-pop-chart { width: 100%; height: 300px; }

.mlx-pop-foot {
	padding: 8px 14px 12px;
	font-size: 12px;
	color: var(--mlx-muted);
	border-top: 1px solid var(--mlx-border);
	font-variant-numeric: tabular-nums;
}