:root { color-scheme: light; }
* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* ---- animations ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseDot { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes blink { 0% { opacity:.2 } 20% { opacity:1 } 100% { opacity:.2 } }

.anim-fadeup { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.anim-fadein { animation: fadeIn .5s ease both; }
.anim-slidein { animation: slideIn .35s cubic-bezier(.2,.7,.2,1) both; }
.anim-pop { animation: popIn .3s cubic-bezier(.2,.9,.3,1.1) both; }
.d1 { animation-delay: .05s } .d2 { animation-delay: .12s } .d3 { animation-delay: .2s } .d4 { animation-delay: .28s } .d5 { animation-delay: .36s } .d6 { animation-delay: .44s }

/* ---- live dot ---- */
.live-dot { position: relative; }
.live-dot::before { content:''; position:absolute; inset:-4px; border-radius:9999px; background: currentColor; opacity:.25; animation: pulseDot 1.8s ease-in-out infinite; }

/* ---- chat ---- */
.chat-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius: 9999px; }
.typing span { display:inline-block; width:6px; height:6px; border-radius:9999px; background:#94a3b8; margin:0 1px; animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }

.wa-bg { background-color:#e6ddd3; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 18px 18px; }

/* ---- misc ---- */
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(30,41,59,.28); }
.tap { transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
.tap:active { transform: scale(.97); }
.rail-item { transition: background-color .15s ease, color .15s ease; }
.arb { direction: rtl; unicode-bidi: plaintext; }
.grad-hero { background: radial-gradient(1200px 500px at 15% -10%, #e0e7ff 0%, transparent 55%), radial-gradient(900px 500px at 95% 0%, #d1fae5 0%, transparent 50%); }