/*
 * MedVinci mobile hex FAB + molecular menu + chat panel.
 *
 * Mobile-only. Desktop keeps the existing header navigation.
 */

.hex-fab-dock,
.hex-fab-root,
.hex-fab-blur-overlay {
	display: none;
}

@media (max-width: 782px) {
	.hex-fab-dock {
		position: fixed;
		top: 80vh;
		right: 20px;
		z-index: 99981;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		padding: 0;
		margin: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		touch-action: none;
		filter: drop-shadow(0 9px 22px rgba(77, 208, 225, 0.45));
		transition: transform 180ms ease, filter 180ms ease;
	}

	body.mvst-hex-menu-open .hex-fab-dock {
		top: auto;
		bottom: calc(108px + env(safe-area-inset-bottom, 0px));
		opacity: 0.78;
		filter: drop-shadow(0 8px 20px rgba(77, 208, 225, 0.34));
	}

	.hex-fab-dock:hover,
	.hex-fab-dock:focus-visible {
		outline: none;
		transform: scale(1.06);
		filter: drop-shadow(0 12px 28px rgba(77, 208, 225, 0.70));
	}

	.hex-fab-trigger-hex {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.hex-fab-logo {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #dffaff;
		filter: drop-shadow(0 0 9px rgba(77, 208, 225, 0.75));
		pointer-events: none;
	}

	.mvst-hex-brand-img {
		display: block;
		width: 34px;
		height: 34px;
		object-fit: contain;
		border-radius: 999px;
	}

	.hex-fab-center-logo .mvst-hex-brand-img {
		width: 48px;
		height: 48px;
	}

	.hex-fab-chat-badge {
		position: absolute;
		top: -4px;
		right: -4px;
		z-index: 2;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		background: #ef4444;
		color: #ffffff;
		border: 2px solid #132033;
		border-radius: 999px;
		font-size: 10px;
		font-weight: 800;
		line-height: 14px;
		text-align: center;
	}

	.hex-fab-blur-overlay {
		position: fixed;
		inset: 0;
		z-index: 99978;
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		background:
			radial-gradient(circle at 50% 34%, rgba(6, 145, 250, 0.18), transparent 35%),
			linear-gradient(180deg, rgba(12, 38, 64, 0.42), rgba(4, 16, 29, 0.78) 18%, rgba(5, 18, 31, 0.90) 100%);
		backdrop-filter: blur(14px) saturate(1.15);
		-webkit-backdrop-filter: blur(14px) saturate(1.15);
		transition: opacity 260ms ease, visibility 260ms ease;
	}

	body.mvst-hex-menu-open .hex-fab-blur-overlay,
	.hex-fab-blur-overlay--active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.hex-fab-root {
		position: fixed;
		inset: 0;
		z-index: 99979;
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 260ms ease, visibility 260ms ease;
	}

	.hex-fab-root.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.hex-fab-backdrop {
		position: absolute;
		inset: 0;
	}

	.hex-fab-system {
		position: absolute;
		left: 50%;
		top: 38%;
		width: min(98vw, 470px);
		height: 456px;
		transform: translate(-50%, -50%) scale(0.92);
		transform-origin: center center;
	}

	.hex-fab-bonds {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}

	.hex-fab-bond {
		opacity: 0;
		stroke-dasharray: 360;
		stroke-dashoffset: 360;
		filter: drop-shadow(0 0 5px rgba(77, 208, 225, 0.46));
		transition:
			stroke-dashoffset 520ms cubic-bezier(0.16, 1, 0.3, 1),
			opacity 300ms ease;
		transition-delay: calc(60ms + var(--mvst-i, 0) * 24ms);
	}

	.hex-fab-root.is-open .hex-fab-bond {
		opacity: 1;
		stroke-dashoffset: 0;
	}

	.hex-fab-center,
	.satellite-node {
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.hex-fab-center {
		z-index: 4;
		width: 78px;
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(-50%, -50%) scale(0.62);
		opacity: 0;
		filter: drop-shadow(0 0 20px rgba(141, 183, 255, 0.55));
		transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease;
	}

	.hex-fab-root.is-open .hex-fab-center {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	.hex-fab-center-hex {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.hex-fab-center-logo {
		position: relative;
		z-index: 1;
		color: #8db7ff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		filter: drop-shadow(0 0 12px rgba(0, 206, 255, 0.60));
	}

	.hex-fab-satellites {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.satellite-node {
		z-index: 5;
		transform: translate(-50%, -50%) translate(0, 0) scale(0.35);
		opacity: 0;
		transition:
			transform 460ms cubic-bezier(0.16, 1, 0.3, 1),
			opacity 280ms ease;
		transition-delay: calc(80ms + var(--mvst-i, 0) * 22ms);
	}

	.hex-fab-root.is-open .satellite-node {
		transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(1);
		opacity: 1;
	}

	.hex-fab-satellite-btn {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 60px;
		height: 68px;
		color: #4dd0e1;
		text-decoration: none;
	}

	.hex-fab-satellite-btn.is-disabled {
		cursor: not-allowed;
		opacity: 0.62;
		filter: grayscale(0.35);
		pointer-events: none;
	}

	.satellite-disabled .hex-fab-satellite-icon {
		color: #94a3b8;
	}

	.satellite-disabled .hex-fab-satellite-label {
		background: rgba(15, 23, 42, 0.44);
		color: rgba(203, 213, 225, 0.76);
		text-shadow: none;
	}

	.satellite-primary .hex-fab-satellite-btn {
		width: 66px;
		height: 76px;
	}

	.hex-fab-satellite-btn:focus-visible {
		outline: none;
		filter: drop-shadow(0 0 14px rgba(77, 208, 225, 0.75));
	}

	.hex-fab-satellite-hex {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		filter: drop-shadow(0 5px 12px rgba(2, 8, 17, 0.30));
	}

	.hex-fab-satellite-icon {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: currentColor;
	}

	.satellite-sub .hex-fab-satellite-icon {
		color: #0677d8;
	}

	.hex-fab-satellite-label {
		position: absolute;
		top: calc(100% + 3px);
		left: 50%;
		transform: translateX(-50%);
		color: rgba(8, 23, 38, 0.84);
		font-family: var(--pci-font-body, "DM Sans", sans-serif);
		padding: 2px 5px;
		border-radius: 999px;
		background: rgba(4, 14, 25, 0.24);
		color: rgba(242, 249, 255, 0.92);
		font-size: 9.5px;
		font-weight: 900;
		letter-spacing: 0.11em;
		text-transform: uppercase;
		white-space: nowrap;
		text-shadow:
			0 1px 3px rgba(0, 0, 0, 0.72),
			0 0 10px rgba(77, 208, 225, 0.26);
	}

	.satellite-node--home .hex-fab-satellite-label {
		top: auto;
		bottom: calc(100% + 3px);
	}

	[data-theme="dark"] .hex-fab-satellite-label {
		color: rgba(244, 250, 255, 0.94);
		background: rgba(3, 12, 22, 0.30);
	}

	.hex-fab-chat-slot {
		position: absolute;
		left: 8px;
		right: 8px;
		bottom: calc(36px + env(safe-area-inset-bottom, 0px));
		z-index: 4;
		transform: translateY(18px);
		opacity: 0;
		transition: opacity 260ms ease 150ms, transform 320ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
		pointer-events: none;
	}

	.hex-fab-root.is-open .hex-fab-chat-slot {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.gc-chat-panel {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
		height: 44px;
		min-height: 44px;
		background: rgba(8, 24, 39, 0.96);
		border: 1px solid rgba(0, 206, 255, 0.22);
		border-radius: 16px;
		box-shadow:
			0 12px 34px rgba(0, 0, 0, 0.38),
			0 0 28px rgba(0, 206, 255, 0.20);
		display: block;
		color: #f7fbff;
		font-family: var(--pci-font-body, "DM Sans", sans-serif);
	}

	.gc-chat-panel *,
	.gc-chat-panel *::before,
	.gc-chat-panel *::after {
		box-sizing: border-box;
	}

	.gc-chat-messages,
	.gc-chat-composer {
		display: none;
	}

	.gc-chat-launcher {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		height: 100%;
		min-width: 0;
		padding: 0 9px 0 13px;
		border: 0;
		background: rgba(7, 26, 43, 0.94);
		color: inherit;
		text-align: left;
		cursor: pointer;
		font: inherit;
	}

	.gc-chat-launcher:focus-visible {
		outline: 2px solid rgba(0, 206, 255, 0.45);
		outline-offset: -3px;
	}

	.gc-chat-header-title {
		color: #f7fbff;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		font-weight: 800;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gc-chat-header-spacer {
		flex: 0 0 2px;
	}

	.gc-chat-presence {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		flex: 0 1 auto;
		min-width: 0;
		color: rgba(223, 250, 255, 0.74);
		font-size: 10px;
		font-weight: 700;
	}

	.gc-chat-presence-dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #00ceff;
		box-shadow: 0 0 8px rgba(0, 206, 255, 0.50);
	}

	.gc-chat-presence-label {
		max-width: 96px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.gc-chat-presence[data-state="offline"] .gc-chat-presence-dot {
		background: #8db7ff;
		box-shadow: 0 0 8px rgba(141, 183, 255, 0.42);
	}

	.gc-chat-launcher-icon {
		flex: 0 0 24px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		color: rgba(223, 250, 255, 0.78);
	}

	.gc-chat-messages {
		overflow: auto;
		padding: 18px 22px 12px;
	}

	.gc-chat-bubble {
		max-width: 92%;
	}

	.gc-chat-bubble-body {
		display: block;
		color: #f7fbff;
		font-size: 16px;
		font-weight: 760;
		line-height: 1.28;
		letter-spacing: 0;
	}

	.gc-chat-bubble--visitor {
		margin-left: auto;
		padding: 10px 12px;
		background: rgba(6, 145, 250, 0.22);
		border-radius: 14px 14px 4px 14px;
	}

	.gc-chat-bubble--visitor .gc-chat-bubble-body {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.35;
	}

	.gc-chat-bubble-time {
		display: block;
		margin-top: 6px;
		color: rgba(223, 250, 255, 0.52);
		font-size: 11px;
		font-weight: 700;
	}

	.gc-chat-composer {
		display: grid;
		grid-template-columns: 1fr 42px;
		align-items: center;
		gap: 9px;
		padding: 8px 12px 10px;
		border-top: 1px solid rgba(0, 206, 255, 0.14);
		background: rgba(7, 26, 43, 0.96);
	}

	.gc-chat-composer-input {
		min-height: 38px;
		max-height: 96px;
		padding: 8px 13px;
		border: 2px solid rgba(0, 206, 255, 0.38);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.08);
		color: #f7fbff;
		font: inherit;
		font-size: 14px;
		overflow-y: auto;
		resize: none;
		outline: none;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.gc-chat-composer-input::-webkit-scrollbar {
		display: none;
	}

	.gc-chat-composer-input::placeholder {
		color: rgba(223, 250, 255, 0.48);
	}

	.gc-chat-composer-send {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(0, 206, 255, 0.18);
		color: #ffffff;
		transition: transform 160ms ease, background 160ms ease;
	}

	.gc-chat-composer-send:not(:disabled) {
		background: #0691fa;
		cursor: pointer;
	}

	.gc-chat-composer-send:disabled {
		opacity: 0.72;
		cursor: not-allowed;
	}

	.gc-chat-composer-send:not(:disabled):hover,
	.gc-chat-composer-send:not(:disabled):focus-visible {
		transform: scale(1.05);
		background: #00aeea;
		outline: none;
	}
}

@media (max-width: 380px) {
	.hex-fab-system {
		top: 37%;
		transform: translate(-50%, -50%) scale(0.86);
	}
	.gc-chat-bubble-body {
		font-size: 15px;
	}
	.gc-chat-presence-label {
		max-width: 74px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hex-fab-dock,
	.hex-fab-root,
	.hex-fab-blur-overlay,
	.hex-fab-bond,
	.hex-fab-center,
	.satellite-node,
	.hex-fab-chat-slot {
		transition: opacity 120ms ease !important;
	}
}