/* =========================================================
   WS CONNECTION QUALITY — isolated module styles
   ========================================================= */
.ws-connection-quality{
	width:100%;
	margin-top:5px;
	padding-top:8px;
	border-top:1px solid rgba(255,255,255,.07);
	font-family:"Segoe UI",Arial,sans-serif;
	font-variant-numeric:tabular-nums;
}

.ws-connection-quality-meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
}

.ws-connection-quality-head{
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

.ws-connection-quality-title{
	font-size:11px;
	font-weight:600;
	line-height:1.2;
	color:#94a3b8;
	white-space:normal;
	text-align:center;
}

.ws-connection-quality-meta{
	margin-top:3px;
}

.ws-connection-quality-state,
.ws-connection-quality-latency{
	font-size:10px;
	font-weight:700;
	line-height:1.2;
}

.ws-connection-quality-state{
	color:#cbd5e1;
}

.ws-connection-quality-latency{
	color:#94a3b8;
	white-space:nowrap;
}

.ws-connection-quality-bars{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:3px;
	margin-top:7px;
}

.ws-connection-segment{
	display:block;
	height:5px;
	border-radius:4px;
	background:#334155;
	box-shadow:none;
	transition:background .2s ease,box-shadow .2s ease;
}

.ws-connection-segment.is-good{
	background:#22c55e;
	box-shadow:0 0 5px rgba(34,197,94,.35);
}

.ws-connection-segment.is-warn{
	background:#facc15;
	box-shadow:0 0 5px rgba(250,204,21,.30);
}

.ws-connection-segment.is-bad{
	background:#ef4444;
	box-shadow:0 0 5px rgba(239,68,68,.30);
}

.ws-connection-segment.is-empty{
	background:#334155;
	opacity:.55;
}

.ws-connection-quality-caption{
	margin-top:5px;
	font-size:9px;
	font-weight:600;
	line-height:1.35;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	flex-wrap:wrap;
}

.ws-quality-legend-item{
	white-space:nowrap;
}

.ws-quality-legend-item{
	color:#94a3b8;
}

.ws-connection-quality.is-good .ws-connection-quality-state{
	color:#22c55e;
}

.ws-connection-quality.is-warn .ws-connection-quality-state{
	color:#facc15;
}

.ws-connection-quality.is-bad .ws-connection-quality-state{
	color:#ef4444;
}

@media(max-width:900px){
	.ws-connection-quality{
		max-width:260px;
		margin-left:auto;
		margin-right:auto;
	}
}

@media(max-width:430px){
	.ws-connection-quality-title{font-size:10px;}
	.ws-connection-quality-state,
	.ws-connection-quality-latency{font-size:9px;}
	.ws-connection-quality-caption{gap:6px;font-size:8px;}
}