/* ===== خطوط وأساسيات ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');
:root { --ink: #4f46e5; }
* { font-family: 'Cairo', system-ui, sans-serif; }
html { scroll-behavior: smooth; }
::selection { background: var(--ink); color: #fff; }

#chat-messages::-webkit-scrollbar, .scroll-y::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb { background: #c7c9d9; border-radius: 99px; }
.dark #chat-messages::-webkit-scrollbar-thumb, .dark .scroll-y::-webkit-scrollbar-thumb { background: #334155; }

/* ===== خلفية متحركة ===== */
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg::before, .hero-bg::after {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(90px); opacity: .55; animation: drift 14s ease-in-out infinite;
}
.hero-bg::before { background: radial-gradient(circle, #6366f1, transparent 70%); top: -120px; right: -80px; }
.hero-bg::after { background: radial-gradient(circle, #d946ef, transparent 70%); bottom: -140px; left: -60px; animation-delay: -7s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.15); } }

/* ===== ظهور عند التمرير ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ===== بطاقة عائمة ===== */
.floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }

/* ===== لمعان الأزرار ===== */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); animation: shine 3.5s infinite;
}
@keyframes shine { 0% { left: -120%; } 60%,100% { left: 130%; } }

/* ===== نبض واتساب ===== */
.pulse-ring { position: relative; }
.pulse-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .55; z-index: -1; animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(1.8); opacity: 0; } }

/* ===== بطاقة المنتج ===== */
.product-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -18px rgba(79,70,229,.45); }
.product-card .thumb { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.product-card:hover .thumb { transform: scale(1.12) rotate(-4deg); }

/* ===== بطاقة خدمة ===== */
.service-card { transition: transform .35s ease, background .35s ease; }
.service-card:hover { transform: translateY(-6px); }
.service-card .ico { transition: transform .4s ease; }
.service-card:hover .ico { transform: scale(1.2) rotate(8deg); }

/* ===== دردشة ===== */
#chat-panel { transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.chat-hidden { opacity: 0; transform: scale(.9) translateY(10px); pointer-events: none; }
.bubble { max-width: 80%; padding: .55rem .8rem; border-radius: 1rem; line-height: 1.5; animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
.bubble.bot { background: #fff; border: 1px solid #e2e8f0; border-bottom-right-radius: .25rem; }
.dark .bubble.bot { background: #1e293b; border-color: #334155; }
.bubble.me { background: linear-gradient(135deg,#4f46e5,#d946ef); color:#fff; margin-inline-start:auto; border-bottom-left-radius:.25rem; }
.typing span { display:inline-block; width:6px; height:6px; margin:0 1px; border-radius:50%; background:#94a3b8; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }

/* ===== نوافذ منبثقة ===== */
.modal-card { animation: pop .3s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}