/* Public beta notice (beta_badge.js) - floating pill + explainer, and the
   inline BETA chip used next to the logo in headers/nav/sidebar. */

.tt-beta {
	position: fixed;
	left: max(12px, env(safe-area-inset-left, 0px));
	bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + var(--tt-beta-offset, 0px));
	/* Below Bootstrap modal backdrops (1050) and SweetAlert (1060): dialogs dim it rather than compete with it. */
	z-index: 1045;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	pointer-events: none;
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tt-beta > * { pointer-events: auto; }

.tt-beta-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tt-beta-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(239, 68, 68, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); }
.tt-beta-pill:active { transform: translateY(0); }
.tt-beta-pill:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.5); outline-offset: 2px; }
.tt-beta-pill-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	animation: tt-beta-pulse 2.2s ease-out infinite;
}
@keyframes tt-beta-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
	70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { .tt-beta-pill-dot { animation: none; } }

.tt-beta-pop {
	width: min(320px, calc(100vw - 24px));
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--cd-card, #fff);
	color: var(--cd-ink, #0f172a);
	border: 1px solid var(--cd-line, rgba(15, 23, 42, 0.12));
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.tt-beta-pop.is-open { opacity: 1; transform: none; }
.tt-beta-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.tt-beta-pop p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--cd-muted, #475569); }
.tt-beta-pop-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tt-beta-pop-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--tt-primary, #1173d4);
	text-decoration: none;
	margin-right: auto;
}
.tt-beta-pop-link:hover { text-decoration: underline; }
.tt-beta-pop-close {
	border: 0;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	background: var(--tt-primary, #1173d4);
	color: #fff;
	cursor: pointer;
}

/* Inline chip next to the wordmark (component.BetaChip) and in the popover. */
.tt-beta-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f59e0b, #ef4444);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: middle;
	flex-shrink: 0;
	white-space: nowrap;
}
.tt-beta-chip-brand { margin-left: 6px; align-self: center; }
.sidebar-brand .tt-beta-chip-brand { margin-left: 8px; }
@media (max-width: 576px) { .sidebar-brand .tt-beta-chip-brand { display: none; } }

@media print { .tt-beta { display: none; } }