* { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  background: radial-gradient(circle at 30% 20%, #fce7f3, #fbcfe8 40%, #f9a8d4 100%);
  background-attachment: fixed;
}
.phone-frame { border: 4px solid rgba(255,255,255,0.4); }
.font-mono, .font-mono * { font-family: 'JetBrains Mono', monospace; }

.chat-bg {
  background-color: #eef1f5;
  background-image:
    radial-gradient(rgba(236,72,153,0.06) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Message enter animation */
.msg-in { animation: msgIn 0.28s cubic-bezier(0.22,1,0.36,1); }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Typing dots */
.typing-dot { animation: typing 1s infinite ease-in-out; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Notification badge pop */
.notif-pop { animation: notifPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes notifPop {
  0% { transform: scale(0); }
  70% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Push notification slide down */
.push-in { animation: pushIn 0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes pushIn {
  from { opacity: 0; transform: translateY(-120%); }
  to { opacity: 1; transform: translateY(0); }
}

/* Bottom sheet slide up */
.sheet-up { animation: sheetUp 0.35s cubic-bezier(0.22,1,0.36,1); }
@keyframes sheetUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pop-in { animation: popIn 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes popIn {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.float-anim { animation: float 3s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Confetti */
.confetti {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Hide scrollbars but keep scroll */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: rgba(236,72,153,0.3); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }
</parameter>