/* line-button.css — Floating LINE button */

/* Mobile-first: small screen defaults */
.line-float {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-line);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(6,199,85,0.3);
  z-index: var(--z-line-button);
  text-decoration: none;
  animation: bob 3.5s ease-in-out infinite;
  transition: transform var(--transition-base);
}

.line-float img {
  width: 24px;
  height: 24px;
}

/* 375px+: larger button with more spacing */
@media (min-width: 375px) {
  .line-float {
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 56px;
    height: 56px;
  }

  .line-float img {
    width: 28px;
    height: 28px;
  }
}

.line-float:hover {
  transform: scale(1.08);
}

.line-float:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* When cookie consent banner is visible, move LINE button up */
.cookie-consent--visible ~ .line-float,
body:has(.cookie-consent--visible) .line-float {
  bottom: 100px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .line-float {
    animation: none;
  }

  .line-float::after {
    animation: none;
    display: none;
  }
}