/* ==========================================================================
VISUAL FAB — Premium Floating Action Buttons & Popups
Part of mobile visual polish layer
==========================================================================
HTML CHANGES NEEDED:
────────────────────
1. Add to after mobile.css:
3. Download popup — wrap format buttons in styled cards:
4. Preset popup — add header:
========================================================================== */
/* ──────────────────────────────────────────────────────────────────────────
FAB GROUP — Layout & Stagger
────────────────────────────────────────────────────────────────────────── */
.m-fab-group {
gap: 12px;
}
/* Staggered entrance — driven by JS _restartFabAnim() for deterministic timing.
Page-load: preset → cost
After loadPresentation: share → download → slideNav → fullscreen */
@keyframes vfab-pop-out {
0% {
opacity: 0;
transform: scale(0.2) translateY(20px);
}
60% {
opacity: 1;
transform: scale(1.08) translateY(-2px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ──────────────────────────────────────────────────────────────────────────
CHAT FAB — Hero Button
Accent-colored with animated glow ring. Morphs to X on open.
────────────────────────────────────────────────────────────────────────── */
.m-fab-chat {
background: linear-gradient(135deg, #0071e3 0%, #2997ff 100%);
border: none;
box-shadow:
0 4px 16px rgba(0, 113, 227, 0.35),
0 1px 4px rgba(0, 113, 227, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
width: 56px;
height: 56px;
animation: vfab-chat-entrance 0.6s var(--ease-spring) both;
}
@keyframes vfab-chat-entrance {
0% {
opacity: 0;
transform: scale(0) rotate(-30deg);
}
60% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
.m-fab-chat:hover {
box-shadow:
0 6px 24px rgba(41, 151, 255, 0.40),
0 2px 8px rgba(41, 151, 255, 0.20),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transform: scale(1.04);
}
.m-fab-chat:active {
transform: scale(0.94);
box-shadow:
0 2px 8px rgba(41, 151, 255, 0.30),
0 1px 3px rgba(41, 151, 255, 0.15);
}
/* Chat FAB icons — contrasting on accent */
.m-fab-chat .m-fab-chat-icon,
.m-fab-chat .m-fab-chat-close-icon {
color: var(--canvas);
}
.m-fab-chat .m-fab-chat-icon {
width: 26px;
height: 26px;
}
.m-fab-chat .m-fab-chat-close-icon {
width: 18px;
height: 18px;
}
/* Subtle pulsing glow ring behind Chat FAB */
.m-fab-chat-ring {
position: absolute;
inset: -4px;
border-radius: 16px;
background: transparent;
border: 2px solid rgba(41, 151, 255, 0.25);
animation: vfab-ring-pulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes vfab-ring-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.6;
border-color: var(--accent-glow);
}
50% {
transform: scale(1.12);
opacity: 0;
border-color: transparent;
}
}
/* When chat is open — morph to close (X) state, match glass treatment */
.m-fab-chat.open {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 0.5px 1px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.06);
}
.m-fab-chat.open .m-fab-chat-icon,
.m-fab-chat.open .m-fab-chat-close-icon {
color: var(--text-0);
}
.m-fab-chat.open .m-fab-chat-ring {
animation: none;
opacity: 0;
}
/* Dark theme: chat FAB — same gradient, deeper glow */
[data-theme="dark"] .m-fab-chat {
background: linear-gradient(135deg, #0071e3 0%, #2997ff 100%);
box-shadow:
0 4px 20px rgba(41, 151, 255, 0.40),
0 1px 4px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .m-fab-chat .m-fab-chat-icon,
[data-theme="dark"] .m-fab-chat .m-fab-chat-close-icon {
color: #ffffff;
}
[data-theme="dark"] .m-fab-chat:hover {
box-shadow:
0 6px 28px rgba(41, 151, 255, 0.50),
0 2px 8px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
[data-theme="dark"] .m-fab-chat-ring {
border-color: rgba(41, 151, 255, 0.25);
}
[data-theme="dark"] .m-fab-chat.open {
background: rgba(50, 50, 58, 0.65);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 0.5px 1px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.20);
}
/* ──────────────────────────────────────────────────────────────────────────
SECONDARY FABs — Glassmorphic, elegant
────────────────────────────────────────────────────────────────────────── */
.m-fab-secondary {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
box-shadow:
0 0.5px 1px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.06);
width: 40px;
height: 40px;
}
.m-fab-secondary svg {
width: 17px;
height: 17px;
color: var(--text-1);
transition: color 0.2s var(--ease);
}
.m-fab-secondary:hover {
background: rgba(255, 255, 255, 0.88);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 14px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
.m-fab-secondary:hover svg {
color: var(--text-1);
}
.m-fab-secondary:active {
transform: scale(0.94) translateY(0);
transition-duration: 0.1s;
box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.06);
}
/* Active/selected state for secondary FABs (when popup is open) */
.m-fab-secondary.active {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(0, 0, 0, 0.10);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.06),
0 4px 14px rgba(0, 0, 0, 0.08);
}
.m-fab-secondary.active svg {
color: var(--accent-blue);
}
/* Dark theme — secondary FABs */
[data-theme="dark"] .m-fab-secondary {
background: rgba(50, 50, 58, 0.65);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 0.5px 1px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.20);
}
[data-theme="dark"] .m-fab-secondary svg {
color: var(--text-1);
}
[data-theme="dark"] .m-fab-secondary:hover {
background: rgba(60, 60, 68, 0.80);
}
[data-theme="dark"] .m-fab-secondary:hover svg {
color: var(--text-1);
}
[data-theme="dark"] .m-fab-secondary.active {
background: rgba(60, 60, 68, 0.85);
border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .m-fab-secondary.active svg {
color: var(--accent-blue);
}
/* ──────────────────────────────────────────────────────────────────────────
CHAT-OPEN STATE — hide entire FAB group (chat header has its own close btn).
Previously only hid secondary FABs, leaving Chat FAB X overlapping send button.
────────────────────────────────────────────────────────────────────────── */
.m-fab-group.chat-open {
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.25s var(--ease), visibility 0s 0.25s;
}
/* Desktop: keep ALL FABs visible when chat is open (chat opens to the left, no overlap) */
@media (min-width: 768px) {
.m-fab-group.chat-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition: none;
}
}
/* ──────────────────────────────────────────────────────────────────────────
FAB BADGE — Notification dot on chat FAB
────────────────────────────────────────────────────────────────────────── */
.m-fab-badge {
width: 20px;
height: 20px;
font-size: 11px;
font-weight: 800;
background: linear-gradient(135deg, #ef4444, #dc2626);
border: 2.5px solid #fff;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.40);
top: -3px;
right: -3px;
z-index: 1;
}
.m-fab-badge.visible {
animation: vfab-badge-pop 0.4s var(--ease-spring) both;
}
@keyframes vfab-badge-pop {
0% {
transform: scale(0);
}
60% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
[data-theme="dark"] .m-fab-badge {
border-color: var(--canvas);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.50);
}
/* ──────────────────────────────────────────────────────────────────────────
FAB LABELS — Glass pill tooltips
────────────────────────────────────────────────────────────────────────── */
.m-fab-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--m-fab-bg);
border: 1px solid var(--border);
padding: 5px 14px;
border-radius: 24px;
box-shadow: var(--shadow-sm);
color: var(--text-0);
}
.m-fab-label.visible {
animation: vfab-label-in 0.3s var(--ease-spring) both;
}
@keyframes vfab-label-in {
0% {
opacity: 0;
transform: translateY(-50%) scale(0.7) translateX(8px);
}
100% {
opacity: 1;
transform: translateY(-50%) scale(1) translateX(0);
}
}
/* ──────────────────────────────────────────────────────────────────────────
POPUP CONTAINERS — Glassmorphic floating cards
Scale from FAB with spring animation
────────────────────────────────────────────────────────────────────────── */
.m-fab-popup {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
padding: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
transform-origin: right center;
}
.m-fab-popup.visible {
animation: vfab-popup-in 0.35s var(--ease-spring) both;
}
@keyframes vfab-popup-in {
0% {
opacity: 0;
transform: translateY(-50%) scale(0.5) translateX(8px);
}
100% {
opacity: 1;
transform: translateY(-50%) scale(1) translateX(0);
}
}
/* Dark theme — popups */
[data-theme="dark"] .m-fab-popup {
background: #2a2a31;
border-color: rgba(255, 255, 255, 0.10);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
}
/* ──────────────────────────────────────────────────────────────────────────
POPUP HEADER — Section title inside popup
────────────────────────────────────────────────────────────────────────── */
.m-fab-popup-header {
padding: 4px 8px 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-2);
user-select: none;
text-align: left;
}
/* ──────────────────────────────────────────────────────────────────────────
POPUP BUTTONS — Polished action cards
────────────────────────────────────────────────────────────────────────── */
.m-fab-popup-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 10px 14px;
border: none;
border-radius: 12px;
background: transparent;
color: var(--text-0);
text-align: left;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s var(--ease), transform 0.15s var(--ease);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
min-height: 44px;
min-width: 44px;
position: relative;
}
.m-fab-popup-btn:hover {
background: var(--bg-input);
}
.m-fab-popup-btn:active {
background: var(--accent-subtle);
transform: scale(0.97);
}
/* Icon wrapper inside popup buttons — now uses file-type SVG icons */
.m-fab-popup-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
}
.m-fab-popup-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.m-fab-popup-btn-label {
font-weight: 600;
font-size: 14px;
}
/* ──────────────────────────────────────────────────────────────────────────
DOWNLOAD POPUP — Horizontal format cards
────────────────────────────────────────────────────────────────────────── */
.m-fab-popup.m-download-popup {
flex-direction: column;
gap: 2px;
min-width: 160px;
}
/* ──────────────────────────────────────────────────────────────────────────
PRESET POPUP — Brand picker with selection states
────────────────────────────────────────────────────────────────────────── */
.m-fab-popup.m-preset-popup {
flex-direction: column;
gap: 2px;
min-width: 200px;
max-height: 280px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
.m-fab-popup.m-preset-popup::-webkit-scrollbar {
display: none;
}
/* Brand items in preset popup */
.m-fab-popup.m-preset-popup .m-fab-popup-btn {
padding: 8px 12px;
min-height: 40px;
border-radius: 10px;
}
/* Brand color dot */
.m-brand-dot {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .m-brand-dot {
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
/* Selected brand — highlight */
.m-fab-popup.m-preset-popup .m-fab-popup-btn.active {
background: var(--accent-subtle);
}
.m-fab-popup.m-preset-popup .m-fab-popup-btn.active .m-brand-dot {
box-shadow:
0 0 0 2px var(--accent-blue),
0 1px 3px rgba(0, 0, 0, 0.10);
}
[data-theme="dark"] .m-fab-popup.m-preset-popup .m-fab-popup-btn.active {
background: var(--accent-subtle);
}
/* ──────────────────────────────────────────────────────────────────────────
BREAKPOINT OVERRIDES (small phones)
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.m-fab-chat {
width: 56px;
height: 56px;
}
.m-fab-chat .m-fab-chat-icon {
width: 24px;
height: 24px;
}
.m-fab-popup {
right: calc(100% + 8px);
min-width: unset;
}
.m-fab-popup.m-preset-popup {
min-width: 180px;
max-height: 240px;
}
}
/* ──────────────────────────────────────────────────────────────────────────
REDUCED MOTION — disable animations for accessibility
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.m-fab-chat,
.m-fab-preset-wrap,
.m-fab-cost-wrap,
.m-fab-share-wrap,
.m-fab-download-wrap,
.m-fab-fullscreen-wrap,
.m-slide-nav,
.m-fab-badge,
.m-fab-label,
.m-fab-popup,
.m-fab-chat-ring {
animation: none !important;
}
/* Override initial invisible state when animations are disabled */
.m-fab-preset-wrap,
.m-fab-cost-wrap,
.m-fab-share-wrap,
.m-fab-download-wrap,
.m-fab-fullscreen-wrap,
.m-slide-nav {
opacity: 1 !important;
transform: none !important;
}
.m-fab-chat-ring {
display: none;
}
}
/* ──────────────────────────────────────────────────────────────────────────
SLIDE NAV PILL — Visual polish (flat theme override)
────────────────────────────────────────────────────────────────────────── */
.m-slide-nav {
box-shadow: none;
}
/* ──────────────────────────────────────────────────────────────────────────
DESKTOP BREAKPOINTS — FABs
Repositioned for desktop viewport, hover states
────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
.m-fab-group {
right: 24px;
bottom: 24px;
gap: 14px;
}
/* Hover effects (pointer devices) */
.m-fab-secondary:hover {
transform: translateY(-1px);
}
/* Popups: ensure enough space */
.m-fab-popup {
min-width: 180px;
}
.m-fab-popup.m-preset-popup {
min-width: 220px;
max-height: 320px;
}
/* Labels: always on left */
.m-fab-label {
right: calc(100% + 12px);
}
}
@media (min-width: 1024px) {
.m-fab-group {
right: 28px;
bottom: 28px;
}
}