/* ===========================================================
   style.css
   Combined stylesheet for index.html and room.html
   =========================================================== */

/* ---------- Hub theme (index.html) ---------- */
html, body { height: 100%; }

/* Global scrollbar — match the app's dark theme instead of the OS default */
html { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #334155; border-radius: 999px; border: 2px solid #020617; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #475569; }
html[data-theme="light"] { scrollbar-color: #cbd5e1 transparent; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-color: #f8fafc; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

html[data-theme="light"] body { background-color: #f1f5f9; color: #0f172a; }
html[data-theme="light"] .bg-slate-950 { background-color: #f8fafc !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] .bg-slate-900 { background-color: #ffffff !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] .border-slate-800, html[data-theme="light"] .border-slate-800\/50 { border-color: #cbd5e1 !important; }
html[data-theme="light"] .text-slate-100, html[data-theme="light"] .text-slate-200, html[data-theme="light"] .text-white { color: #0f172a !important; }
html[data-theme="light"] .text-slate-400 { color: #475569 !important; }
html[data-theme="light"] .text-slate-500 { color: #64748b !important; }
html[data-theme="light"] .bg-slate-800 { background-color: #e2e8f0 !important; color: #0f172a !important; }
html[data-theme="light"] .bg-slate-900\/95 { background-color: rgba(255,255,255,0.85) !important; }
html[data-theme="light"] input { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html[data-theme="light"] #actionBtn.text-white { color: #ffffff !important; }
html[data-theme="light"] #themeBtn { color: #475569 !important; }
html[data-theme="light"] .bg-gradient-to-r { background-image: linear-gradient(to right, #4f46e5, #c026d3) !important; }
html[data-theme="light"] .hub-made-by { background-color: rgba(255,255,255,0.75) !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] #topBar { background-color: rgba(255,255,255,0.5) !important; border-color: #e2e8f0 !important; }
html[data-theme="light"] .hub-made-by span { color: #64748b !important; }

/* Smooth cross-fade on theme swap */
body, .bg-slate-950, .bg-slate-900, .bg-slate-800, .border-slate-800, .border-slate-800\/50,
input, #madeByBadge, #madeByBadge span, #topBar, .text-slate-100, .text-slate-200, .text-slate-400,
.text-slate-500, .text-white, .bg-gradient-to-r, #themeBtn {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, background-image 0.45s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } }
@keyframes badgeInHub { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes badgeFloatHub { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Theme toggle wash circle — expands from the button, reveals new theme, fades out.
   Used by both index.html (#themeBtn) and room.html (.theme-btn).
   index uses #f1f5f9 for light wash, room uses #e7ebf1 (its actual muted bg). */
.theme-wash {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 70;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease 0.35s;
    opacity: 0.96;
}
.theme-wash-active { transform: translate(-50%, -50%) scale(1); opacity: 0; }

/* Spin animation on click — covers both index (#themeBtn) and room (.theme-btn) */
#themeBtn { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.45s ease; }
.theme-btn { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.45s ease; }

/* Password field reveal */
#passwordContainer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
}
#passwordContainer.pw-open { grid-template-rows: 1fr; opacity: 1; }
#passwordContainer > div { overflow: hidden; }

/* Curtain-raise intro */
#introOverlay { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
.curtain-panel {
    position: absolute; inset-block: 0; width: 50%; top: 0; bottom: 0;
    background-image:
        repeating-linear-gradient(90deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 3px, transparent 3px, transparent 26px),
        linear-gradient(160deg, #4c1d95 0%, #312e81 55%, #1e1b4b 100%);
    transition: transform 1.15s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}
#curtainLeft { left: 0; box-shadow: inset -50px 0 70px -30px rgba(0,0,0,0.65); }
#curtainRight { right: 0; box-shadow: inset 50px 0 70px -30px rgba(0,0,0,0.65); }
#curtainLeft.curtain-open { transform: translateX(-101%); }
#curtainRight.curtain-open { transform: translateX(101%); }

#curtainValance {
    position: absolute; top: 0; left: 0; right: 0; height: 10px; z-index: 3;
    background: linear-gradient(90deg, #92400e, #fbbf24 25%, #fef3c7 50%, #fbbf24 75%, #92400e);
    background-size: 200% auto;
    animation: gradientDrift 6s ease-in-out infinite;
    opacity: 0.9;
}

.film-strip {
    position: absolute; left: 0; right: 0; height: 16px; z-index: 3; opacity: 0.5; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.55) 0 8px, transparent 8px 26px);
    background-position: center;
}
.film-strip-top { top: 14px; }
.film-strip-bottom { bottom: 14px; }

.film-grain {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: flicker 0.4s steps(2) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 0.045; } 50% { opacity: 0.07; } }

@keyframes introLineIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.intro-logo { opacity: 0; animation: introLineIn 0.55s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; }
.intro-eyebrow { opacity: 0; animation: introLineIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.65s forwards; }
.intro-dedication { opacity: 0; animation: introLineIn 0.6s cubic-bezier(0.16,1,0.3,1) 1.05s forwards; font-family: Georgia, 'Times New Roman', serif; }
.intro-wish { opacity: 0; animation: introLineIn 0.55s cubic-bezier(0.16,1,0.3,1) 1.55s forwards; }
.intro-rule { opacity: 0; width: 0; animation: introRuleIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.8s forwards; }
@keyframes introRuleIn { from { opacity: 0; width: 0; } to { opacity: 1; width: 40px; } }
.intro-skip {
    opacity: 0; animation: introLineIn 0.55s cubic-bezier(0.16,1,0.3,1) 2.0s forwards;
    transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.intro-skip:hover { transform: translateY(-1px); }

#introContent { transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 1, 1); }
#introContent.intro-content-out { opacity: 0; transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
    .curtain-panel { transition: none !important; }
    .intro-logo, .intro-eyebrow, .intro-dedication, .intro-wish, .intro-skip, #curtainValance, .film-grain {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .intro-rule { animation: none !important; opacity: 1 !important; transform: none !important; width: 40px !important; }
    #introContent, #introContent.intro-content-out { transition: none !important; opacity: 1 !important; transform: none !important; }
    /* Disable wash + spin for both index and room theme buttons */
    .theme-wash, #themeBtn, .theme-btn { transition: none !important; }
}

@keyframes gradientDrift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.animate-gradient-text {
    background-size: 220% auto;
    opacity: 0;
    animation-name: fadeIn, gradientDrift;
    animation-duration: 0.5s, 5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-in-out;
    animation-delay: 0.06s, 0.5s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}

@keyframes sweep { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }
#actionBtn { position: relative; overflow: hidden; }
#actionBtn .btn-sweep {
    position: absolute; top: 0; left: 0; width: 35%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
}
#actionBtn:hover:not(:disabled) .btn-sweep { animation: sweep 0.85s ease forwards; }

.entrance { opacity: 0; animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
#panelWrapper { position: relative; overflow: hidden; transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
#actionBtnLabel { display: inline-block; transition: opacity 0.15s ease, transform 0.15s ease; }
#tabIndicator { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

.animate-fade-in { animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-toast { animation: toastIn 0.25s ease-out forwards; }
.animate-pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }
.hub-made-by {
    opacity: 0;
    animation: badgeInHub 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards,
               badgeFloatHub 3.5s ease-in-out 1.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .entrance, .animate-fade-in, .animate-pulse-glow, .animate-gradient-text,
    #actionBtn .btn-sweep, #madeByBadge, #tabIndicator, #panelWrapper, #actionBtnLabel {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #passwordContainer { transition: none !important; }
}

.icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; flex-shrink: 0; }

.glass-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 25px 50px -12px rgba(0,0,0,0.5);
}
html[data-theme="light"] .glass-card {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 25px 50px -12px rgba(15,23,42,0.12);
}

/* ---------- Room page (room.html) ---------- */

@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Softer muted light theme for the room page */
html[data-theme="light"] body { background-color: #e7ebf1; color: #1e293b; }
html[data-theme="light"] .bg-slate-950 { background-color: #eef1f6 !important; border-color: #d7dee8 !important; }
html[data-theme="light"] .bg-slate-900 { background-color: #f8fafc !important; border-color: #d7dee8 !important; }
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-900,
html[data-theme="light"] .border-slate-700 { border-color: #cbd2dd !important; }
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-white { color: #1e293b !important; }
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400,
html[data-theme="light"] .text-slate-500 { color: #5b6b82 !important; }
html[data-theme="light"] .text-slate-600 { color: #7c8aa0 !important; }
html[data-theme="light"] .bg-slate-800 { background-color: #e2e8f0 !important; color: #1e293b !important; }
html[data-theme="light"] .bg-slate-900\/20,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-950\/40,
html[data-theme="light"] .bg-slate-950\/60 { background-color: rgba(248,250,252,0.85) !important; }
html[data-theme="light"] .bg-slate-950\/95,
html[data-theme="light"] .bg-slate-950\/90,
html[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(231,235,241,0.94) !important; }
html[data-theme="light"] .text-indigo-400 { color: #4f46e5 !important; }
html[data-theme="light"] .text-emerald-400 { color: #047857 !important; }
html[data-theme="light"] .bg-emerald-950\/30 { background-color: #d1fae5 !important; }
html[data-theme="light"] .border-emerald-500\/30 { border-color: #6ee7b7 !important; }
html[data-theme="light"] .text-rose-400 { color: #be123c !important; }
html[data-theme="light"] .bg-rose-950\/30 { background-color: #ffe4e6 !important; }
html[data-theme="light"] .border-rose-500\/30 { border-color: #fda4af !important; }
html[data-theme="light"] input,
html[data-theme="light"] select { background-color: #f8fafc !important; color: #1e293b !important; border-color: #cbd2dd !important; }
html[data-theme="light"] .room-made-by { background-color: rgba(248,250,252,0.9) !important; border-color: #dfe3ee !important; box-shadow: 0 4px 14px rgba(79,70,229,0.10) !important; }
html[data-theme="light"] .room-made-by span { color: #5b6b82 !important; }
html[data-theme="light"] .shadow-2xl,
html[data-theme="light"] .shadow-xl,
html[data-theme="light"] .shadow-lg,
html[data-theme="light"] .shadow-md { box-shadow: 0 4px 16px rgba(30,41,59,0.08) !important; }
html[data-theme="light"] .bg-black\/20 { background-color: rgba(148,163,184,0.14) !important; }

/* Smooth crossfade on theme flip */
body, header, main, form, input, select, button,
.bg-slate-950, .bg-slate-900, .bg-slate-800,
.border-slate-800, .border-slate-900,
#chatMessageLog, #usersPaneWrapper, #madeByBadge {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* Suppress browser default cross-fade on old snapshot only */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { mix-blend-mode: normal; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    10% { opacity: 1; transform: translateY(-30px) scale(1.1); }
    100% { transform: translateY(-500px) scale(1); opacity: 0; }
}
.floating-emoji { position: absolute; bottom: 20px; pointer-events: none; animation: floatUp 2.5s cubic-bezier(0.08, 0.82, 0.17, 1) forwards; font-size: 2.5rem; z-index: 50; }

@keyframes slideInChat { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.chat-anim { animation: slideInChat 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pulse-dot { animation: pulseDot 1.4s ease-in-out infinite; }

@keyframes badgeInRoom { from { opacity: 0; transform: translateY(14px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes badgeFloatRoom { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.room-made-by {
    opacity: 0;
    animation: badgeInRoom 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards,
               badgeFloatRoom 3s ease-in-out 1.6s infinite;
}
#madeByBadge .badge-dot { animation: pulseDot 1.6s ease-in-out infinite; }

.drag-active { border-color: rgb(99 102 241) !important; background: rgba(99,102,241,0.08) !important; }

#chatMessageLog::-webkit-scrollbar, #usersPaneWrapper::-webkit-scrollbar { width: 6px; }
#chatMessageLog::-webkit-scrollbar-thumb, #usersPaneWrapper::-webkit-scrollbar-thumb { background: #334155; border-radius: 999px; }
#chatMessageLog::-webkit-scrollbar-track, #usersPaneWrapper::-webkit-scrollbar-track { background: transparent; }

.system-msg { text-align: center; font-size: 11px; color: #64748b; font-style: italic; padding: 4px 0; }
.sticker-img { max-width: 100%; height: auto; max-height: 90px; border-radius: 8px; margin-top: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

@keyframes pickerPopIn { from { opacity: 0; transform: scale(0.94) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.picker-pop-in { animation: pickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }

.quick-react-btn { transition: transform 0.12s ease; }
.quick-react-btn:hover { transform: scale(1.25); }

#videoStage.pannable { cursor: grab; touch-action: none; }
#videoStage:fullscreen, #ytStage:fullscreen { background: #000; display: flex; align-items: center; justify-content: center; }
#videoStage:fullscreen video, #ytStage:fullscreen #ytIframe, #ytStage:fullscreen iframe { width: 100%; height: 100%; }
#videoStage:-webkit-full-screen, #ytStage:-webkit-full-screen { background: #000; display: flex; align-items: center; justify-content: center; }
#videoStage:-webkit-full-screen video, #ytStage:-webkit-full-screen #ytIframe, #ytStage:-webkit-full-screen iframe { width: 100%; height: 100%; }

.emoji-100 { display: inline-block !important; transform: scaleY(1) !important; }
.emoji-100:hover { transform: scaleY(1.2) !important; }

.typing-indicator { display: flex; gap: 4px; align-items: center; height: 16px; }
.typing-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #64748b; animation: bounce 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; } 30% { transform: translateY(-8px); opacity: 1; } }

.call-video { width: 100%; height: 160px; object-fit: cover; background: #000; border-radius: 0.5rem; }
.call-video-mini { width: 84px; height: 64px; object-fit: cover; background: #1e293b; border-radius: 8px; border: 2px solid #334155; }

button {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
button:not(:disabled):hover {
    filter: brightness(1.08);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
}
button:not(:disabled):active {
    transform: scale(0.93);
    filter: brightness(0.97);
    box-shadow: none;
}
button:disabled { filter: none; box-shadow: none; }

.quick-react-btn:active, #gridEmojis button:active, #gridStickers button:active {
    transform: scale(1.35) !important;
}

@keyframes paneSlideIn {
    from { opacity: 0; transform: translateX(calc(var(--pane-dir, 1) * 18px)); }
    to { opacity: 1; transform: translateX(0); }
}
.pane-anim-in { animation: paneSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 1023px) {
    main { grid-template-rows: minmax(140px, 32vh) minmax(0, 1fr); }
}

body.input-focused #madeByBadge { opacity: 0 !important; pointer-events: none; }

#uploadContainer { transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; }
#uploadContainer.drag-active {
    border-color: rgb(99 102 241 / 0.8) !important;
    background-color: rgb(99 102 241 / 0.08) !important;
    transform: scale(1.015);
}

#pollCard.poll-minimized { max-width: 180px; padding: 8px 12px; }
#pollCard.poll-minimized #pollOptions { display: none; }
#pollCard.poll-minimized #pollQuestion { display: none; }
#pollCard.poll-minimized #pollMinimizedLabel { display: block; }
#pollCard.poll-minimized #pollMinimizeBtn svg { transform: rotate(180deg); }

/* --- Reusable popup modal (Contact, FAQ, and any future ones) --- */
@keyframes modalPopIn {
    0%   { opacity: 0; transform: scale(0.7) translateY(10px); }
    60%  { opacity: 1; transform: scale(1.04) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modalPopOut {
    0%   { opacity: 1; transform: scale(1) translateY(0); }
    100% { opacity: 0; transform: scale(0.85) translateY(8px); }
}
@keyframes modalBackdropOut { from { opacity: 1; } to { opacity: 0; } }

.modal-overlay:not(.hidden) { animation: fadeIn 0.15s ease-out forwards; }
.modal-overlay:not(.hidden) .modal-pop-card { animation: modalPopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.modal-overlay.closing { animation: modalBackdropOut 0.22s ease-in forwards; }
.modal-overlay.closing .modal-pop-card { animation: modalPopOut 0.22s cubic-bezier(0.4, 0, 1, 1) forwards; }

/* --- Contact modal icon --- */
@keyframes contactIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.35); }
    50%      { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(129, 140, 248, 0); }
}
.contact-icon-wrap { animation: contactIconPulse 2.4s ease-in-out infinite; }

.contact-icon-wrap { position: relative; }
.contact-icon-wrap::before, .contact-icon-wrap::after {
    content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(135deg, #a5b4fc, #f9a8d4); opacity: 0;
    animation: contactSparkle 2.4s ease-in-out infinite;
}
.contact-icon-wrap::before { top: -6px; right: 2px; animation-delay: 0.3s; }
.contact-icon-wrap::after  { bottom: -4px; left: -2px; animation-delay: 1.1s; }
@keyframes contactSparkle {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
    50%      { opacity: 1; transform: translateY(-8px) scale(1); }
}

@keyframes supportPillGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0); }
    50%      { box-shadow: 0 0 14px 1px rgba(244, 114, 182, 0.28); }
}
#supportPill { animation: supportPillGlow 3.5s ease-in-out infinite; }
#supportPill:hover { animation-play-state: paused; }