/**
 * Floating Action Button — Work Activity Tracker.
 *
 * Fixed pill on the viewport corner. Expands on hover to show the
 * label; shrinks to just the icon at rest. Pulsing ring when the
 * user has an open work log.
 *
 * @package WorkActivityTracker
 */

.wat-fab {
	position: fixed;
	z-index: 99999;
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 14px;
	min-width: 56px;
	height: 56px;
	border-radius: 28px;
	background: linear-gradient(135deg, #2271b1, #135e96);
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(34, 113, 177, 0.45), 0 2px 4px rgba(0, 0, 0, 0.1);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 14px;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	transition: padding 0.2s ease, gap 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	box-sizing: border-box;
}

.wat-fab:hover,
.wat-fab:focus-visible {
	padding: 14px 20px 14px 14px;
	gap: 10px;
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(34, 113, 177, 0.5), 0 3px 6px rgba(0, 0, 0, 0.12);
	color: #fff !important;
	outline: none;
}

/* ── Icon ─────────────────────────────────────── */

.wat-fab__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

/* ── Label (hidden at rest, expands on hover) ── */

.wat-fab__label {
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width 0.25s ease, opacity 0.15s ease;
}

.wat-fab:hover .wat-fab__label,
.wat-fab:focus-visible .wat-fab__label {
	max-width: 200px;
	opacity: 1;
}

/* ── OPEN state (checked-in) ─ green with pulse ── */

.wat-fab--open {
	background: linear-gradient(135deg, #46b450, #2f8a37);
	box-shadow: 0 6px 20px rgba(70, 180, 80, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Auth (logged-out) — neutral slate tone */
.wat-fab--auth {
	background: linear-gradient(135deg, #4a5563, #1d2327);
	box-shadow: 0 6px 20px rgba(29, 35, 39, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wat-fab--auth:hover,
.wat-fab--auth:focus-visible {
	box-shadow: 0 10px 28px rgba(29, 35, 39, 0.5), 0 3px 6px rgba(0, 0, 0, 0.12);
}

.wat-fab--open:hover,
.wat-fab--open:focus-visible {
	box-shadow: 0 10px 28px rgba(70, 180, 80, 0.5), 0 3px 6px rgba(0, 0, 0, 0.12);
}

.wat-fab__pulse {
	position: absolute;
	inset: -4px;
	border-radius: 36px;
	border: 3px solid rgba(70, 180, 80, 0.55);
	pointer-events: none;
	animation: wat-fab-pulse 1.8s ease-out infinite;
}

@keyframes wat-fab-pulse {
	0%   { transform: scale(0.95); opacity: 0.8; }
	70%  { transform: scale(1.25); opacity: 0;   }
	100% { transform: scale(1.25); opacity: 0;   }
}

/* ── Positions ────────────────────────────────── */

.wat-fab--bottom-right { bottom: 24px; right: 24px; }
.wat-fab--bottom-left  { bottom: 24px; left: 24px; }
.wat-fab--top-right    { top: 24px; right: 24px; }
.wat-fab--top-left     { top: 24px; left: 24px; }

/* ── Mobile: always show a compact label ──────── */

@media (max-width: 540px) {
	.wat-fab {
		min-width: 52px;
		height: 52px;
		padding: 12px;
		border-radius: 26px;
	}

	.wat-fab--bottom-right,
	.wat-fab--bottom-left  { bottom: 16px; }
	.wat-fab--top-right,
	.wat-fab--top-left     { top: 16px; }

	.wat-fab--bottom-right,
	.wat-fab--top-right    { right: 16px; }
	.wat-fab--bottom-left,
	.wat-fab--top-left     { left: 16px; }
}