/* VIVU Flying FAB - GRP/Shadcn 2026 */
:root {
  --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%; --secondary-foreground: 222.2 84% 4.9%;
  --ring: 221.2 83.2% 53.3%; --radius: 0.5rem;
}

#vivu-fab-container {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 1rem;
  animation: flyIn 1s cubic-bezier(0.25,0.46,0.45,0.94) both;
}

@keyframes flyIn { from { transform: translateY(100vh) rotate(180deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } }

.vivu-fab {
  width: 4rem; height: 4rem; border: none; border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary)/0.8));
  color: hsl(var(--primary-foreground)); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 40px hsl(var(--primary)/0.4); backdrop-filter: blur(20px);
  cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  animation: pulseFloat 3s infinite ease-in-out;
}

.vivu-fab:hover { transform: scale(1.1) rotate(10deg); box-shadow: 0 20px 60px hsl(var(--primary)/0.5); }

@keyframes pulseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.vivu-fab-sub {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground)); text-decoration: none; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; box-shadow: 0 8px 32px hsla(0,0%,0%,0.2);
  opacity: 0; transform: translateY(2rem); transition: all 0.3s ease;
}

.vivu-fab-sub:hover { transform: scale(1.05); background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.vivu-fab-group .sub-open { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) { #vivu-fab-container { bottom: 1rem; right: 1rem; } .vivu-fab { width: 3.5rem; height: 3.5rem; } }