/* FloatingActionButton — estados pequeno/expandido (CSS puro)
 *
 * Estado padrão: círculo translúcido com backdrop-blur, ícone (e contador).
 * Estado expandido (hover ou foco): fundo sólido + rótulo; a bolinha cresce
 * de verdade para a esquerda (ancorada à direita pelo dock) em ~320ms.
 * A largura anima via `max-width` + margens — propriedades interpoláveis.
 * `width: 0 → auto` não anima: era por isso que o pill "piscava" aberto.
 */

[data-floating-wrapper] {
	position: relative;
	display: inline-block;
}

[data-floating-action] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem;
	min-width: 3.5rem;
	border-radius: 9999px;
}

.fa-bg-layer,
.fa-expanded-layer {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
}

/* Fundo translúcido do estado padrão. */
.fa-bg-layer {
	z-index: 0;
	background-color: var(--fa-soft);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.2s ease;
}

/* Fundo sólido do estado expandido. */
.fa-expanded-layer {
	z-index: 1;
	background-color: var(--fa-base);
	opacity: 0;
	transition:
		opacity 0.2s ease,
		background-color 0.2s ease;
}

.fa-icon-layer {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* Colapsado: 180ms (snappy). O valor de expansão vive nas regras
	   :hover/:focus-visible — o after-change style decide a duração. */
	transition: margin-left var(--dur-2) var(--ease-standard);
}

.fa-icon-inner {
	display: inline-flex;
	color: var(--fa-icon);
	transition: color 0.2s ease;
}

.fa-label {
	position: relative;
	z-index: 10;
	display: block;
	/* `max-width` é o que anima (0 → 12rem). Como é flex-item do botão,
	   width auto = conteúdo, limitado pelo max-width em cada frame. */
	max-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 700;
	color: rgb(var(--brand-ink, 6 18 26));
	opacity: 0;
	/* Estado colapsado (i.e. ao soltar o hover, este é o after-change): */
	transition:
		max-width var(--dur-2) var(--ease-standard),
		margin var(--dur-2) var(--ease-standard),
		opacity var(--dur-1) var(--ease-standard);
}

.fa-counter {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	z-index: 20;
	min-width: 1.25rem;
	padding: 0.1rem 0.4rem;
	border-radius: 9999px;
	background-color: var(--fa-counter-bg);
	color: var(--fa-counter-text);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.fa-counter[hidden] {
	display: none;
}

/* ------------------------------------------ hover (ponteiro fino) --- */
/* Spec 03 §4: em telas de toque o rótulo NUNCA expande — o toque deixa o
   botão focado e o :focus-within segurava o estado aberto. Expansão só com
   hover real; teclado continua via :focus-visible. */

@media (hover: hover) and (pointer: fine) {
	[data-floating-action]:hover .fa-expanded-layer {
		opacity: 1;
		background-color: var(--fa-hover);
	}

	/* Expansão: margens + max-width animam juntas — a bolinha abre em
	   ~320ms para a esquerda e o ícone cavalga a borda que se move.
	   O respiro simétrico (1rem/1rem) mora nas margens do ícone e do
	   rótulo, não em padding no botão: o botão carrega as classes
	   `transition` do Tailwind, que não incluem padding — o animador
	   seria sobrescrito no cascata. */
	[data-floating-action]:hover .fa-icon-layer {
		margin-left: 1rem;
		transition: margin-left var(--dur-4) var(--ease-standard);
	}

	[data-floating-action]:hover .fa-label {
		max-width: 12rem;
		margin-left: 0.5rem;
		margin-right: 1rem;
		opacity: 1;
		transition:
			max-width var(--dur-4) var(--ease-standard),
			margin var(--dur-4) var(--ease-standard),
			opacity var(--dur-2) var(--ease-standard) 80ms;
	}
}

/* Foco por teclado: expansão com a cor primária — mesma animação do hover. */
[data-floating-action]:focus-visible .fa-icon-layer {
	margin-left: 1rem;
	transition: margin-left var(--dur-4) var(--ease-standard);
}

[data-floating-action]:focus-visible .fa-expanded-layer {
	opacity: 1;
	background-color: var(--fa-base);
}

[data-floating-action]:focus-visible .fa-label {
	max-width: 12rem;
	margin-left: 0.5rem;
	margin-right: 1rem;
	opacity: 1;
	transition:
		max-width var(--dur-4) var(--ease-standard),
		margin var(--dur-4) var(--ease-standard),
		opacity var(--dur-2) var(--ease-standard) 80ms;
}

/* Expandido, o fundo é sólido: ícone e contador invertem para
   legibilidade (brand-ink sobre brand). */
@media (hover: hover) and (pointer: fine) {
	[data-floating-action]:hover .fa-icon-inner {
		color: rgb(var(--brand-ink, 6 18 26));
	}
}
[data-floating-action]:focus-visible .fa-icon-inner {
	color: rgb(var(--brand-ink, 6 18 26));
}

/* --------------------------------------------------- mobile ------- */

/* Abaixo de 480px a bolinha pequena cobre menos conteúdo. */
@media (max-width: 480px) {
	[data-floating-wrapper] [data-floating-action] {
		height: 3rem;
		min-width: 3rem;
	}
}