* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; background: #dff5ef; }

.no-scroll::-webkit-scrollbar { width: 0; height: 0; }
.no-scroll { scrollbar-width: none; }

/* iPhone frame */
.phone-frame {
  width: 390px; height: 844px; max-height: 96vh; max-width: 96vw;
  aspect-ratio: 390 / 844;
  border-radius: 54px;
  background: linear-gradient(160deg,#3a3a3c,#1c1c1e 40%,#0a0a0b);
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 0 2px rgba(255,255,255,0.3);
}
@media (max-width: 430px) {
  .phone-frame { width: 100vw; height: 100vh; max-height: 100vh; max-width: 100vw; border-radius: 0; padding: 0; box-shadow: none; }
  .phone-screen { border-radius: 0 !important; }
  .phone-notch { display: none; }
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 44px;
  background: #fff;
  overflow: hidden;
}
.phone-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 34px; background: #000; border-radius: 20px; z-index: 50;
}

/* Animations */
@keyframes msgIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.animate-msg-in { animation: msgIn 0.28s cubic-bezier(0.2,0.8,0.2,1); }

@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.animate-slide-in { animation: slideIn 0.3s ease both; }

@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.32s cubic-bezier(0.2,0.8,0.2,1); }

@keyframes notifDrop { from { opacity: 0; transform: translateY(-24px) scale(0.95); } to { opacity: 1; transform: none; } }
.animate-notif-drop { animation: notifDrop 0.45s cubic-bezier(0.2,1,0.3,1); }

@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.animate-typing { animation: typing 1.1s infinite; }

@keyframes wave { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.3); } }
.animate-wave { animation: wave 0.5s ease-in-out infinite; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
a { text-decoration: none; }
input { font-size: 16px; }