/* CyclingBase — schermfeedback-widget v1.0.0 */

.cbfb-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 100000;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--brand, #c6f24e);
	color: #0b0f0e;
	border: 0;
	box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,.4));
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	transition: transform 150ms ease, background 150ms ease;
}
.cbfb-fab:hover { transform: scale(1.06); }
.cbfb-fab--active { background: #e55353; color: #fff; }
.cbfb-fab-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e55353;
	color: #fff;
	font: 700 11px/20px var(--font, sans-serif);
	text-align: center;
	display: none;
}

body.cbfb-placing { cursor: crosshair !important; }
body.cbfb-placing * { cursor: crosshair !important; }

.cbfb-pins { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 99998; pointer-events: none; }
.cbfb-pin {
	position: absolute;
	transform: translate(-50%, -100%);
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 4px;
	background: var(--brand, #c6f24e);
	color: #0b0f0e;
	border: 2px solid #0b0f0e;
	font: 800 12px/1 var(--font, sans-serif);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	z-index: 99999;
	box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.cbfb-pin--resolved { background: #607d8b; color: #fff; opacity: .55; }

.cbfb-composer,
.cbfb-detail,
.cbfb-allpanel {
	position: absolute;
	z-index: 100001;
	background: var(--bg-card, #141a18);
	border: 1px solid var(--border-card, rgba(255,255,255,.08));
	border-radius: var(--radius, 10px);
	box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,.4));
	color: var(--text, #e8f0ed);
	font-family: var(--font, sans-serif);
	padding: 12px;
	width: 280px;
}
.cbfb-composer-head { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--brand, #c6f24e); }
.cbfb-textarea {
	width: 100%;
	background: var(--bg-input, #1e2a27);
	border: 1px solid var(--border, rgba(255,255,255,.06));
	border-radius: var(--radius-sm, 6px);
	color: var(--text, #e8f0ed);
	font: inherit;
	font-size: 13px;
	padding: 8px;
	resize: vertical;
	box-sizing: border-box;
}
.cbfb-composer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.cbfb-btn {
	background: transparent;
	border: 1px solid var(--border-card, rgba(255,255,255,.08));
	color: var(--text, #e8f0ed);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 12px;
	font: 600 12px var(--font, sans-serif);
	cursor: pointer;
}
.cbfb-btn--primary { background: var(--brand, #c6f24e); color: #0b0f0e; border-color: transparent; }
.cbfb-btn:disabled { opacity: .5; cursor: default; }

.cbfb-detail { width: 260px; }
.cbfb-detail-meta { font-size: 11px; color: var(--text-muted, #7a9990); margin-bottom: 6px; }
.cbfb-detail-body { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.cbfb-detail-resolved { margin-top: 8px; font-size: 11px; color: var(--green, #4caf50); }

.cbfb-allpanel {
	position: fixed;
	right: 20px;
	bottom: 84px;
	left: auto;
	top: auto;
	width: 380px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
}
.cbfb-allpanel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cbfb-allpanel-head h3 { margin: 0; font-size: 14px; color: var(--brand, #c6f24e); }
.cbfb-allpanel-list { overflow-y: auto; flex: 1; }
.cbfb-allpanel-empty { font-size: 13px; color: var(--text-muted, #7a9990); padding: 12px 0; }
.cbfb-allpanel-group { margin-bottom: 14px; }
.cbfb-allpanel-route {
	font-size: 12px;
	font-weight: 700;
	color: var(--text, #e8f0ed);
	background: var(--bg-card-2, #1a2320);
	border-radius: var(--radius-sm, 6px);
	padding: 6px 8px;
	margin-bottom: 6px;
	cursor: pointer;
}
.cbfb-allpanel-route:hover { background: var(--bg-input, #1e2a27); }
.cbfb-allpanel-row { padding: 6px 8px; border-left: 2px solid var(--brand, #c6f24e); margin-bottom: 4px; }
.cbfb-allpanel-row--resolved { border-left-color: var(--grey, #607d8b); opacity: .6; }
.cbfb-allpanel-row-body { font-size: 12px; line-height: 1.4; }
.cbfb-allpanel-row-meta { font-size: 10px; color: var(--text-muted, #7a9990); margin-top: 2px; }

@media (max-width: 640px) {
	.cbfb-allpanel { left: 12px; right: 12px; width: auto; }
}