/** @format */

:root {
	--shell-bg: #0f172a;
	--shell-card: #1e293b;
	--shell-border: #334155;
	--shell-text: #f1f5f9;
	--shell-muted: #94a3b8;
	--shell-primary: #6366f1;
	--shell-secondary: #8b5cf6;
	--shell-danger: #ef4444;
	--shell-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
	--shell-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--header-action-height-mobile: 2.65rem;
	--header-action-height-tablet: 2.75rem;
	--header-action-height-desktop: 2.9rem;
	--header-action-gap-mobile: 0.5rem;
	--header-action-gap-desktop: 0.7rem;
	--header-action-radius: 0.75rem;
	--header-control-min-width-mobile: 6.25rem;
	--header-control-min-width-desktop: 7rem;
}

body[data-shared-user-menu='true'] {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--shell-bg);
	color: var(--shell-text);
	overflow-x: hidden;
}

body[data-shared-user-menu='true'] header {
	width: 100%;
	position: relative;
	z-index: 100;
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-bottom: 1px solid var(--shell-border);
	padding: 1rem 0 0 !important;
	overflow: visible !important;
}

body[data-shared-user-menu='true'] header > .rainbow-border {
	margin-top: -1px;
}

body[data-shared-user-menu='true'] #header-content,
body[data-shared-user-menu='true'] .header-container {
	width: min(1400px, calc(100% - 2rem));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0;
}

body[data-shared-user-menu='true'] #header-content > *,
body[data-shared-user-menu='true'] .header-container > * {
	min-width: 0;
}

body[data-shared-user-menu='true'] #title-container {
	flex: 1 1 auto;
	min-width: 0;
}

body[data-shared-user-menu='true'] main {
	width: 100%;
	flex: 1 0 auto;
	min-width: 0;
}

body[data-shared-user-menu='true'] .site-footer {
	margin-top: auto;
	width: 100%;
}

body[data-shared-user-menu='true']:not([data-auth-state='resolved']) #login-btn,
body[data-shared-user-menu='true']:not([data-auth-state='resolved']) #user-menu {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

body[data-shared-user-menu='true'][data-auth-state='pending'] #login-btn,
body[data-shared-user-menu='true'][data-auth-state='pending'] #user-menu {
	visibility: hidden;
	pointer-events: none;
}

body[data-shared-user-menu='true']:not([data-authenticated='true']) #my-survey-button,
body[data-shared-user-menu='true']:not([data-authenticated='true']) #create-survey-btn,
body[data-shared-user-menu='true']:not([data-authenticated='true']) #new-survey-btn,
body[data-shared-user-menu='true']:not([data-authenticated='true']) #refresh-btn {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body[data-shared-user-menu='true'] .page-actions-shell,
body[data-shared-user-menu='true'] #page-actions {
	display: flex;
	align-items: center;
	gap: var(--header-action-gap-desktop);
	margin-left: auto;
	flex-wrap: wrap;
	min-width: 0;
	max-width: 100%;
}

body[data-shared-user-menu='true'] #page-actions > button,
body[data-shared-user-menu='true'] #page-actions > a.btn,
body[data-shared-user-menu='true'] #page-actions .btn-action,
body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
	min-height: var(--header-action-height-desktop);
	border-radius: var(--header-action-radius);
}

body[data-shared-user-menu='true'] #page-actions > button,
body[data-shared-user-menu='true'] #page-actions > a.btn {
	min-width: var(--header-control-min-width-desktop);
}

body[data-shared-user-menu='true'] #page-actions .search-container {
	width: min(21rem, 100%);
	max-width: 100%;
	min-width: 0;
}

body[data-shared-user-menu='true'] #page-actions .search-input {
	min-height: var(--header-action-height-desktop);
	border-radius: var(--header-action-radius);
}

body[data-shared-user-menu='true'] #page-actions .clear-search-btn,
body[data-shared-user-menu='true'] #page-actions .search-icon {
	top: 50%;
	transform: translateY(-50%);
}

body[data-page='chatroom'] #page-actions,
body[data-page='support-chat'] #page-actions,
body[data-page='support-chat-admin'] #page-actions {
	gap: 0.45rem;
}

body[data-page='chatroom'] #page-actions #user-menu {
	order: 99;
	flex: 1 1 100%;
	display: flex;
	justify-content: center;
}

body[data-page='chatroom'] #page-actions .btn-action,
body[data-page='support-chat'] #page-actions .btn-action,
body[data-page='support-chat-admin'] #page-actions .btn-action {
	min-height: var(--header-action-height-desktop);
	width: var(--header-action-height-desktop);
	padding: 0.45rem;
}

body[data-shared-user-menu='true'] .btn-primary,
body[data-shared-user-menu='true'] .btn-secondary,
body[data-shared-user-menu='true'] .btn-danger,
body[data-shared-user-menu='true'] .btn-back {
	padding: 0.75rem 1.5rem;
	border-radius: 0.75rem;
	border: none;
	font-weight: 600;
	cursor: pointer;
	transition: var(--shell-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.95rem;
}

body[data-shared-user-menu='true'] .btn-primary {
	background: linear-gradient(135deg, var(--shell-primary), var(--shell-secondary));
	color: white;
}

body[data-shared-user-menu='true'] .btn-back {
	background: rgba(15, 23, 42, 0.74);
	color: var(--shell-text);
	border: 1px solid rgba(148, 163, 184, 0.42);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

body[data-shared-user-menu='true'] .btn-secondary {
	background: var(--shell-card);
	color: var(--shell-text);
	border: 1px solid var(--shell-border);
}

body[data-shared-user-menu='true'] .btn-danger {
	background: linear-gradient(135deg, var(--shell-danger), #dc2626);
	color: white;
}

body[data-shared-user-menu='true'] .btn-primary:hover,
body[data-shared-user-menu='true'] .btn-secondary:hover,
body[data-shared-user-menu='true'] .btn-danger:hover,
body[data-shared-user-menu='true'] .btn-back:hover {
	transform: translateY(-2px);
	box-shadow: var(--shell-shadow);
}

body[data-shared-user-menu='true'] .btn-back:hover {
	border-color: rgba(96, 165, 250, 0.52);
	background: rgba(30, 41, 59, 0.94);
}

body[data-shared-user-menu='true'] .loading-container,
body[data-shared-user-menu='true'] .dashboard-container,
body[data-shared-user-menu='true'] .login-prompt,
body[data-shared-user-menu='true'] #login-prompt-container {
	width: min(1200px, calc(100% - 2rem));
	margin: 1rem auto 2rem;
}

body[data-shared-user-menu='true'] .dashboard-container > *,
body[data-shared-user-menu='true'] .login-prompt > *,
body[data-shared-user-menu='true'] #login-prompt-container > * {
	min-width: 0;
}

body[data-shared-user-menu='true'] .login-prompt,
body[data-shared-user-menu='true'] #login-prompt-container {
	display: grid;
	place-items: center;
	padding: 0 1rem;
	max-width: 100%;
	min-height: clamp(300px, 56vh, 560px);
}

body[data-shared-user-menu='true'] .login-card {
	width: min(100%, 34rem);
	max-width: 34rem;
	margin: 0 auto;
	min-width: 0;
}

body[data-shared-user-menu='true'] .loading-container {
	display: grid;
	place-items: center;
	gap: 0.9rem;
	min-height: clamp(280px, 52vh, 560px);
	padding: 1.25rem;
	text-align: center;
}

body[data-shared-user-menu='true'] .loading-container .spinner {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 999px;
	border: 4px solid rgba(148, 163, 184, 0.22);
	border-top-color: var(--shell-primary);
	border-right-color: var(--shell-secondary);
	box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08), 0 12px 30px rgba(2, 6, 23, 0.22);
	animation: shellSpin 0.9s linear infinite;
}

body[data-shared-user-menu='true'] .loading-container p {
	margin: 0;
	color: var(--shell-muted);
	font-size: 0.98rem;
}

@keyframes shellSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

body[data-shared-user-menu='true'] .login-card p,
body[data-shared-user-menu='true'] .login-card h3,
body[data-shared-user-menu='true'] .login-card .hint {
	overflow-wrap: anywhere;
}

body[data-shared-user-menu='true'] .login-card .btn-primary,
body[data-shared-user-menu='true'] .login-card .btn-secondary,
body[data-shared-user-menu='true'] .login-card .btn-danger {
	width: 100%;
	max-width: 100%;
}

body[data-shared-user-menu='true'] .page-state-shell {
	width: min(100%, 44rem);
	margin: 0 auto;
}

body[data-shared-user-menu='true'] .page-state-card {
	display: grid;
	gap: 1rem;
	justify-items: center;
	text-align: center;
	padding: 1.4rem 1.2rem;
	border-radius: 1rem;
	border: 1px solid var(--shell-border);
	background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
	box-shadow: var(--shell-shadow);
}

body[data-shared-user-menu='true'] .page-state-icon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	background: rgba(59, 130, 246, 0.12);
	color: #93c5fd;
	border: 1px solid rgba(59, 130, 246, 0.28);
}

body[data-shared-user-menu='true'] .page-state-shell--warning .page-state-icon {
	background: rgba(245, 158, 11, 0.14);
	color: #fcd34d;
	border-color: rgba(245, 158, 11, 0.3);
}

body[data-shared-user-menu='true'] .page-state-shell--error .page-state-icon {
	background: rgba(239, 68, 68, 0.14);
	color: #fca5a5;
	border-color: rgba(239, 68, 68, 0.3);
}

body[data-shared-user-menu='true'] .page-state-title {
	margin: 0;
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	line-height: 1.2;
}

body[data-shared-user-menu='true'] .page-state-message {
	margin: 0;
	color: var(--shell-muted);
	line-height: 1.6;
	max-width: 40rem;
	overflow-wrap: anywhere;
}

body[data-shared-user-menu='true'] .page-state-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
}

body[data-shared-user-menu='true'] .page-state-actions > * {
	min-width: min(100%, 12rem);
}

/* ------------------------------------------------------ */
/* MENU UTILISATEUR & DÉCONNEXION RESPONSIVE             */
/* ------------------------------------------------------ */
body[data-shared-user-menu='true'] .user-menu-container {
	display: block;
	position: relative;
	width: auto;
	flex: 0 0 auto;
}

@media (min-width: 768px) {
	body[data-shared-user-menu='true'] .user-menu-container {
		width: auto;
	}
}

body[data-shared-user-menu='true'] .user-menu-details {
	position: relative;
	width: 100%;
}

body[data-shared-user-menu='true'] .user-menu-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.32rem;
	padding: 0 0.62rem;
	border-radius: var(--header-action-radius);
	background: rgba(15, 23, 42, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.34);
	color: var(--shell-text);
	font-weight: 600;
	transition: var(--shell-transition);
	width: calc(var(--header-action-height-mobile) + 1.1rem);
	min-width: calc(var(--header-action-height-mobile) + 1.1rem);
	height: var(--header-action-height-mobile);
	justify-content: center;
	font-size: clamp(0.9rem, 2.5vw, 0.95rem);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
	body[data-shared-user-menu='true'] .user-menu-summary {
		width: calc(var(--header-action-height-desktop) + 1.2rem);
		min-width: calc(var(--header-action-height-desktop) + 1.2rem);
		height: var(--header-action-height-desktop);
		justify-content: center;
	}
}

body[data-shared-user-menu='true'] .user-menu-summary:hover {
	background: rgba(30, 41, 59, 0.96);
	border-color: rgba(129, 140, 248, 0.64);
	transform: translateY(-2px);
	box-shadow: var(--shell-shadow);
}

body[data-shared-user-menu='true'] .user-menu-summary::-webkit-details-marker {
	display: none;
}

body[data-shared-user-menu='true'] .user-icon {
	font-size: clamp(1.24rem, 3vw, 1.46rem);
	color: var(--shell-primary);
	transition: var(--shell-transition);
}

body[data-shared-user-menu='true'] .user-name-short {
	display: none !important;
}

body[data-shared-user-menu='true'] .user-name-short:empty {
	display: none;
}

body[data-shared-user-menu='true'] .chevron-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	color: var(--shell-muted);
	font-size: 0.82rem;
	transition:
		transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
		color 0.22s ease;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .user-menu-summary {
	border-bottom-color: transparent;
	border-radius: var(--header-action-radius) var(--header-action-radius) 0 0;
	background: rgba(30, 41, 59, 0.98);
}

body[data-shared-user-menu='true'] .user-menu-details[open] .chevron-icon {
	color: #bfdbfe;
	transform: rotate(180deg) translateY(1px);
}

body[data-shared-user-menu='true'] .user-menu-summary:hover .user-icon {
	color: var(--shell-secondary);
	transform: scale(1.1);
}

body[data-shared-user-menu='true'] .user-dropdown {
	position: absolute;
	top: calc(100% - 1px);
	left: 50%;
	right: auto;
	min-width: 260px;
	background: var(--shell-card);
	border: 1px solid rgba(129, 140, 248, 0.64);
	border-radius: 0 0 var(--header-action-radius) var(--header-action-radius);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
	z-index: 1000;
	animation: none;
	overflow: hidden;
	width: max-content;
	max-width: min(92vw, 360px);
	transform: translateX(-50%);
	transform-origin: top center;
	will-change: opacity, clip-path, filter;
}

@media (max-width: 767px) {
	body[data-shared-user-menu='true'] #header-content,
	body[data-shared-user-menu='true'] .header-container {
		width: calc(100% - 1rem);
		align-items: stretch;
		gap: 0.75rem;
	}

	body[data-shared-user-menu='true'] .user-dropdown {
		position: absolute;
		top: calc(100% - 1px);
		left: 50%;
		right: auto;
		width: min(92vw, 340px);
		min-width: 260px;
		border-radius: 0 0 var(--header-action-radius) var(--header-action-radius);
		animation: userMenuSlideDown 0.2s ease-out;
		max-height: 72vh;
		overflow-y: auto;
		transform: translateX(-50%);
	}

	body[data-shared-user-menu='true'] .page-actions-shell,
	body[data-shared-user-menu='true'] #page-actions {
		width: 100%;
		justify-content: center;
	}

	body[data-shared-user-menu='true'] .loading-container,
	body[data-shared-user-menu='true'] .dashboard-container,
	body[data-shared-user-menu='true'] .login-prompt,
	body[data-shared-user-menu='true'] #login-prompt-container {
		width: calc(100% - 1rem);
	}

	body[data-shared-user-menu='true'] .login-prompt,
	body[data-shared-user-menu='true'] #login-prompt-container {
		padding: 0 0.5rem;
		min-height: clamp(280px, 52vh, 460px);
	}

	body[data-shared-user-menu='true'] .login-card {
		padding: 1.35rem;
		border-radius: 1rem;
	}

	body[data-shared-user-menu='true'] .page-state-card {
		padding: 1.2rem 1rem;
	}

	body[data-shared-user-menu='true'] .page-state-actions {
		flex-direction: column;
	}

	body[data-shared-user-menu='true'] .page-state-actions > * {
		width: 100%;
		min-width: 0;
	}
}

@keyframes userMenuSlideDown {
	from {
		opacity: 0;
		transform: translateY(-15px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%) scale(0.95);
		opacity: 0;
	}
	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

body[data-shared-user-menu='true'] .dropdown-header {
	padding: 1.25rem;
	background: rgba(99, 102, 241, 0.05);
	border-bottom: 1px solid var(--shell-border);
}

body[data-shared-user-menu='true'] .user-info {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	justify-content: center;
	text-align: center;
}

body[data-shared-user-menu='true'] .user-avatar {
	font-size: clamp(2rem, 5vw, 2.5rem);
	color: var(--shell-primary);
	flex-shrink: 0;
	background: none !important;
	width: auto;
	height: auto;
}

body[data-shared-user-menu='true'] .user-details {
	flex: 1;
	min-width: 0;
	text-align: center;
}

body[data-shared-user-menu='true'] .user-name-full {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

body[data-shared-user-menu='true'] .user-name {
	font-weight: 700;
	color: var(--shell-text);
	font-size: clamp(0.95rem, 2.5vw, 1.1rem);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 150px;
}

body[data-shared-user-menu='true'] .user-name:empty {
	display: none;
}

body[data-shared-user-menu='true'] .edit-pseudo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.9rem;
	height: 1.9rem;
	border: 0;
	border-radius: 0.65rem;
	background: rgba(99, 102, 241, 0.12);
	color: var(--shell-primary);
	cursor: pointer;
	transition: var(--shell-transition);
}

body[data-shared-user-menu='true'] .edit-pseudo-btn:hover {
	background: rgba(99, 102, 241, 0.24);
	color: var(--shell-secondary);
	transform: translateY(-1px);
}

body[data-shared-user-menu='true'] .edit-pseudo-btn:focus-visible {
	outline: 2px solid rgba(99, 102, 241, 0.72);
	outline-offset: 2px;
}

body[data-shared-user-menu='true'] .edit-pseudo-btn i {
	font-size: 0.85rem;
}

body[data-shared-user-menu='true'] .pseudo-input {
	width: 100%;
	min-height: 2.9rem;
	border-radius: 0.9rem;
	border: 1px solid var(--shell-border);
	background: rgba(255, 255, 255, 0.96);
	color: #0f172a;
	caret-color: #0f172a;
	padding: 0.85rem 1rem;
	font-size: 1rem;
	font-weight: 600;
}

body[data-shared-user-menu='true'] .pseudo-input:focus {
	outline: none;
	border-color: rgba(99, 102, 241, 0.72);
	box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

body[data-shared-user-menu='true'] .pseudo-error {
	min-height: 1.25rem;
	margin-top: 0.55rem;
	color: var(--shell-danger);
	font-size: 0.9rem;
	font-weight: 700;
}

body[data-shared-user-menu='true'] .sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body[data-shared-user-menu='true'] .dropdown-divider {
	height: 1px;
	background: var(--shell-border);
	margin: 0.5rem 0;
	width: 100%;
}

body[data-shared-user-menu='true'] .dropdown-divider--actions {
	margin: 0.65rem 0;
}

body[data-shared-user-menu='true'] .user-menu-nav {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

body[data-shared-user-menu='true'] .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	color: var(--shell-text);
	text-decoration: none;
	transition: var(--shell-transition);
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-size: clamp(0.9rem, 2.5vw, 0.95rem);
}

body[data-shared-user-menu='true'] .dropdown-item:hover {
	background: rgba(51, 65, 85, 0.5);
	color: white;
}

body[data-shared-user-menu='true'] .dropdown-item[data-action='open-create-survey-modal'] {
	background: linear-gradient(
		135deg,
		rgba(99, 102, 241, 0.12),
		rgba(139, 92, 246, 0.1)
	);
	border: 1px solid rgba(99, 102, 241, 0.32);
}

body[data-shared-user-menu='true'] .dropdown-item[data-action='open-create-survey-modal']:hover {
	background: linear-gradient(
		135deg,
		rgba(99, 102, 241, 0.22),
		rgba(139, 92, 246, 0.18)
	);
	border-color: rgba(99, 102, 241, 0.48);
}

body[data-shared-user-menu='true'] .dropdown-item i {
	width: 20px;
	text-align: center;
	color: var(--shell-muted);
	font-size: 1rem;
	flex-shrink: 0;
}

body[data-shared-user-menu='true'] .logout-item {
	color: var(--shell-danger);
}

body[data-shared-user-menu='true'] .logout-item:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

body[data-shared-user-menu='true'] .hidden {
	display: none !important;
}

body[data-shared-user-menu='true'].modal-open {
	overflow: hidden;
}

@media (max-width: 900px) {
	body[data-shared-user-menu='true'] #header-content,
	body[data-shared-user-menu='true'] .header-container {
		width: calc(100% - 1rem);
	}

	body[data-shared-user-menu='true'] #page-actions,
	body[data-shared-user-menu='true'] .page-actions-shell {
		width: 100%;
		justify-content: center;
		gap: var(--header-action-gap-mobile);
	}

	body[data-shared-user-menu='true'] #page-actions > button,
	body[data-shared-user-menu='true'] #page-actions > a.btn,
	body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
		min-height: var(--header-action-height-tablet);
	}
}

@media (max-width: 640px) {
	body[data-shared-user-menu='true'] #page-actions > button,
	body[data-shared-user-menu='true'] #page-actions > a.btn {
		min-width: var(--header-control-min-width-mobile);
	}

	body[data-shared-user-menu='true'] #page-actions > button,
	body[data-shared-user-menu='true'] #page-actions > a.btn,
	body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
		min-height: var(--header-action-height-mobile);
	}

	body[data-shared-user-menu='true'] #page-actions .search-container {
		width: 100%;
	}

	body[data-page='chatroom'] #page-actions,
	body[data-page='support-chat'] #page-actions,
	body[data-page='support-chat-admin'] #page-actions {
		gap: 0.35rem;
	}
}

/* ------------------------------------------------------ */
/* Header/Page-Actions Visual Finish                      */
/* ------------------------------------------------------ */
body[data-shared-user-menu='true'] #header-content,
body[data-shared-user-menu='true'] .header-container {
	flex-wrap: nowrap;
}

body[data-shared-user-menu='true'] #title-container {
	min-width: 0;
	flex: 1 1 18rem;
}

body[data-shared-user-menu='true'] #title-container .dancing-script-title {
	font-size: clamp(1.45rem, 3.9vw, 2.45rem);
	line-height: 1.1;
}

/* ------------------------------------------------------ */
/* Header Back Button Unification                         */
/* ------------------------------------------------------ */
body header #header-content > .btn-back,
body header .header-container > .btn-back {
	padding: 0.75rem 1.5rem;
	min-width: 0;
	min-height: 50px;
	width: auto;
	flex: 0 0 auto;
	align-self: center;
	border-radius: 0.75rem;
	border: 1px solid rgba(148, 163, 184, 0.42);
	background: rgba(15, 23, 42, 0.74);
	color: var(--shell-text, #f1f5f9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: none;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

body header #header-content > .btn-back span,
body header .header-container > .btn-back span {
	display: inline;
}

body header #header-content > .btn-back:hover,
body header .header-container > .btn-back:hover {
	background: rgba(30, 41, 59, 0.94);
	border-color: rgba(148, 163, 184, 0.42);
	transform: translateX(-2px);
	box-shadow: none;
}

body[data-shared-user-menu='true'] #page-actions > * {
	flex: 0 1 auto;
}

body[data-shared-user-menu='true'] #page-actions > button,
body[data-shared-user-menu='true'] #page-actions > a.btn,
body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
	padding-inline: 1rem;
	white-space: nowrap;
}

body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
	padding-inline: 0.62rem;
	width: calc(var(--header-action-height-desktop) + 1.2rem);
	min-width: calc(var(--header-action-height-desktop) + 1.2rem);
	flex: 0 0 calc(var(--header-action-height-desktop) + 1.2rem);
}

/* Canonical user dropdown geometry, aligned with browse-surveys on every page. */
body[data-shared-user-menu='true'] .user-menu-container .user-dropdown,
body[data-page][data-shared-user-menu='true'] #page-actions .user-dropdown,
body[data-page][data-shared-user-menu='true'] .user-dropdown {
	position: absolute !important;
	top: calc(100% - 1px) !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: max-content !important;
	min-width: 260px !important;
	max-width: min(92vw, 360px) !important;
	transform: translateX(-50%) !important;
	animation: none !important;
	box-sizing: border-box !important;
}

body[data-shared-user-menu='true'] .user-dropdown .dropdown-header,
body[data-shared-user-menu='true'] .user-dropdown .user-info,
body[data-shared-user-menu='true'] .user-dropdown .user-details,
body[data-shared-user-menu='true'] .user-dropdown .user-name-full {
	text-align: center !important;
	justify-content: center !important;
}

body[data-shared-user-menu='true'] .user-dropdown .dropdown-item {
	width: 100%;
	box-sizing: border-box;
}

body[data-shared-user-menu='true'] .user-menu-details[open] > .user-dropdown {
	animation: userMenuPanelReveal 0.38s cubic-bezier(0.2, 0.9, 0.24, 1) both !important;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-header,
body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-divider,
body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-item {
	animation: userMenuItemReveal 0.34s cubic-bezier(0.2, 0.9, 0.24, 1) both;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-header {
	animation-delay: 40ms;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-item:nth-of-type(1) {
	animation-delay: 70ms;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-item:nth-of-type(2) {
	animation-delay: 95ms;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-item:nth-of-type(3) {
	animation-delay: 120ms;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .dropdown-item:nth-of-type(4) {
	animation-delay: 145ms;
}

@keyframes userMenuPanelReveal {
	from {
		opacity: 0;
		clip-path: inset(0 42% 100% 42% round var(--header-action-radius));
		filter: blur(8px);
	}
	55% {
		opacity: 1;
		clip-path: inset(0 0 0 0 round var(--header-action-radius));
		filter: blur(0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0 round 0.75rem);
		filter: blur(0);
	}
}

@keyframes userMenuItemReveal {
	from {
		opacity: 0;
		transform: translateY(-8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Page accessibility keeps the same header geometry as the legal/static pages. */
body[data-page='accessibility'][data-shared-user-menu='true'] #header-content,
body[data-page='accessibility'][data-shared-user-menu='true'] .header-container {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

body[data-page='accessibility'][data-shared-user-menu='true'] #back-btn {
	order: 1;
	align-self: center;
	margin: 0 auto;
}

body[data-page='accessibility'][data-shared-user-menu='true'] #title-container,
body[data-page='accessibility'][data-shared-user-menu='true'] .title-with-logo {
	order: 2;
	flex: 0 1 auto;
	text-align: center;
}

body[data-page='accessibility'] .site-footer .newsletter-form {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
	width: 100%;
}

body[data-page='accessibility'] .site-footer .footer-newsletter {
	width: 100%;
}

body[data-page='accessibility'] .site-footer .newsletter-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.9rem;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-size: clamp(0.85rem, 2.5vw, 0.9rem);
}

body[data-page='accessibility'] .site-footer .newsletter-btn {
	min-width: 44px;
	padding: 0.75rem 1.25rem;
	border-radius: 0.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 767px) {
	body[data-page='accessibility'] .site-footer .newsletter-form {
		flex-direction: column;
	}

	body[data-page='accessibility'] .site-footer .newsletter-btn {
		width: 100%;
	}
}

/* Force dropdown placement to avoid legacy fixed overlays from page CSS */
body[data-shared-user-menu='true'] .user-dropdown {
	position: absolute !important;
	top: calc(100% - 1px) !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: max-content !important;
	min-width: 260px !important;
	max-width: min(92vw, 360px) !important;
	transform: translateX(-50%) !important;
	animation: none !important;
}

body[data-shared-user-menu='true'] .user-menu-details[open] > .user-dropdown {
	animation: userMenuPanelReveal 0.4s cubic-bezier(0.2, 0.9, 0.24, 1) both !important;
}

body[data-page][data-shared-user-menu='true'] #page-actions .user-menu-details[open] > .user-dropdown,
body[data-page][data-shared-user-menu='true'] .user-menu-container .user-menu-details[open] > .user-dropdown {
	animation: userMenuPanelReveal 0.4s cubic-bezier(0.2, 0.9, 0.24, 1) both !important;
}

@media (max-width: 1024px) {
	body[data-shared-user-menu='true'] #header-content,
	body[data-shared-user-menu='true'] .header-container {
		flex-wrap: wrap;
		justify-content: center;
	}

	body[data-shared-user-menu='true'] #title-container {
		order: 2;
		flex-basis: 100%;
		text-align: center;
	}

	body[data-shared-user-menu='true'] #page-actions,
	body[data-shared-user-menu='true'] .page-actions-shell {
		order: 3;
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 767px) {
	body[data-shared-user-menu='true'] .user-dropdown {
		width: min(92vw, 340px) !important;
		min-width: 260px !important;
		max-width: 92vw !important;
		max-height: 72vh !important;
		overflow-y: auto !important;
	}

	body[data-page='chatroom'] #page-actions > button,
	body[data-page='support-chat'] #page-actions > button,
	body[data-page='support-chat-admin'] #page-actions > button {
		min-width: auto;
	}
}

@media (max-width: 560px) {
	body[data-shared-user-menu='true'] #page-actions > button,
	body[data-shared-user-menu='true'] #page-actions > a.btn,
	body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
		flex: 1 1 calc(50% - 0.5rem);
		min-width: 0;
	}

	body[data-shared-user-menu='true'] #page-actions .search-container {
		flex: 1 1 100%;
		width: 100%;
	}
}

body[data-shared-user-menu='true'] .site-footer .footer-section[data-auth-navigation='true'][hidden] {
	display: none !important;
}

body[data-shared-user-menu='true']:not([data-authenticated='true'])
	.site-footer
	.footer-section:has(.footer-links a[href='browse-surveys.html']),
body[data-shared-user-menu='true']:not([data-authenticated='true'])
	.site-footer
	.footer-section:has(.footer-links a[href='my-surveys.html']),
body[data-shared-user-menu='true']:not([data-authenticated='true'])
	.site-footer
	.footer-section:has(.footer-links a[href='create-survey.html']),
body[data-shared-user-menu='true']:not([data-authenticated='true'])
	.site-footer
	.footer-section:has(.footer-links a[href='create-survey-choices.html']),
body[data-shared-user-menu='true']:not([data-authenticated='true'])
	.site-footer
	.footer-section:has(.footer-links a[href='billing.html']) {
	display: none !important;
}

body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
	padding-inline: 0.62rem !important;
	width: calc(var(--header-action-height-desktop) + 1.2rem) !important;
	min-width: calc(var(--header-action-height-desktop) + 1.2rem) !important;
	max-width: calc(var(--header-action-height-desktop) + 1.2rem) !important;
	flex: 0 0 calc(var(--header-action-height-desktop) + 1.2rem) !important;
	border-radius: var(--header-action-radius) !important;
}

body[data-shared-user-menu='true'] #page-actions .user-menu-details[open] .user-menu-summary {
	border-radius: var(--header-action-radius) var(--header-action-radius) 0 0 !important;
}

@media (max-width: 767px) {
	body[data-shared-user-menu='true'] #page-actions .user-menu-summary {
		width: calc(var(--header-action-height-mobile) + 1.1rem) !important;
		min-width: calc(var(--header-action-height-mobile) + 1.1rem) !important;
		max-width: calc(var(--header-action-height-mobile) + 1.1rem) !important;
		flex-basis: calc(var(--header-action-height-mobile) + 1.1rem) !important;
	}
}

/* Fused CodePen-style user menu: the trigger is the first row of the same panel. */
body[data-shared-user-menu='true'] .user-menu-container,
body[data-shared-user-menu='true'] #page-actions .user-menu-container {
	--user-menu-panel-width: min(92vw, 340px);
	width: var(--user-menu-panel-width) !important;
	max-width: min(92vw, 340px) !important;
	flex: 0 0 var(--user-menu-panel-width) !important;
}

body[data-shared-user-menu='true'] .user-menu-details,
body[data-shared-user-menu='true'] #page-actions .user-menu-details {
	width: 100% !important;
	max-width: 100% !important;
	position: relative !important;
}

body[data-shared-user-menu='true'] #page-actions .user-menu-summary,
body[data-shared-user-menu='true'] .user-menu-summary {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	height: var(--header-action-height-desktop) !important;
	padding: 0 0.95rem !important;
	justify-content: center !important;
	gap: 0.6rem !important;
	border-radius: var(--header-action-radius) !important;
	border-color: rgba(129, 140, 248, 0.58) !important;
	background:
		linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.94)),
		rgba(15, 23, 42, 0.95) !important;
	box-shadow:
		0 14px 30px rgba(2, 6, 23, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .user-menu-summary,
body[data-shared-user-menu='true'] #page-actions .user-menu-details[open] .user-menu-summary {
	border-radius: var(--header-action-radius) var(--header-action-radius) 0 0 !important;
	border-bottom-color: transparent !important;
	background:
		linear-gradient(135deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 0.98)),
		rgba(15, 23, 42, 0.98) !important;
	transform: none !important;
}

body[data-shared-user-menu='true'] .user-menu-summary-icon {
	display: inline-grid;
	place-items: center;
	color: #c4b5fd;
	text-shadow: 0 0 12px rgba(139, 92, 246, 0.34);
}

body[data-shared-user-menu='true'] .user-menu-summary-user-icon {
	font-size: 1.38rem;
	line-height: 1;
}

body[data-shared-user-menu='true'] .user-menu-summary-arrow {
	font-size: 1rem;
	line-height: 1;
	transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.24, 1), color 0.2s ease;
}

body[data-shared-user-menu='true'] .user-menu-details[open] .user-menu-summary-arrow,
body[data-shared-user-menu='true'] .user-menu-summary-arrow.is-open {
	color: #a78bfa;
	transform: rotate(180deg);
}

body[data-shared-user-menu='true'] .user-dropdown,
body[data-shared-user-menu='true'] #page-actions .user-dropdown {
	position: absolute !important;
	top: calc(100% - 1px) !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	transform: none !important;
	border-radius: 0 0 var(--header-action-radius) var(--header-action-radius) !important;
	border-color: rgba(129, 140, 248, 0.58) !important;
	border-top-color: transparent !important;
	transform-origin: top center !important;
	overflow: hidden !important;
}

body[data-shared-user-menu='true'] .user-menu-details[open] > .user-dropdown,
body[data-page][data-shared-user-menu='true'] #page-actions .user-menu-details[open] > .user-dropdown,
body[data-page][data-shared-user-menu='true'] .user-menu-container .user-menu-details[open] > .user-dropdown {
	animation: userMenuCodepenUnfold 0.42s cubic-bezier(0.2, 0.9, 0.24, 1) both !important;
}

@keyframes userMenuCodepenUnfold {
	0% {
		opacity: 0;
		clip-path: inset(0 0 100% 0 round 0 0 var(--header-action-radius) var(--header-action-radius));
		transform: translateY(-1px) scaleY(0.62);
		filter: blur(8px);
	}
	58% {
		opacity: 1;
		clip-path: inset(0 0 0 0 round 0 0 var(--header-action-radius) var(--header-action-radius));
		transform: translateY(0) scaleY(1.02);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		clip-path: inset(0 0 0 0 round 0 0 var(--header-action-radius) var(--header-action-radius));
		transform: translateY(0) scaleY(1);
		filter: blur(0);
	}
}

@media (max-width: 767px) {
	body[data-shared-user-menu='true'] .user-menu-container,
	body[data-shared-user-menu='true'] #page-actions .user-menu-container {
		--user-menu-panel-width: min(92vw, 340px);
		flex-basis: var(--user-menu-panel-width) !important;
	}

	body[data-shared-user-menu='true'] #page-actions .user-menu-summary,
	body[data-shared-user-menu='true'] .user-menu-summary {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		flex-basis: auto !important;
		height: var(--header-action-height-mobile) !important;
	}
}