/* ══════════ اقتراح الدخول (components/AuthPrompt.jsx) ══════════
   الجوال: ورقة تصعد من أسفل الشاشة بارتداد خفيف، فوق حافّة الأمان السفلية. الشاشة العريضة: بطاقة في الوسط تكبر وتستقرّ.
   الشعار يقفز ويدور، حلقة تتّسع خلفه مرّة واحدة وثلاث شرارات تنطلق منه، ثم العنوان والأزرار تصعد واحداً بعد الآخر.
   كل الحركة transform وopacity فقط (لا ظلال ولا تمويه متحرّك)، ولا شيء يتكرّر بلا نهاية. */
.ap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.ap-scrim { position: absolute; inset: 0; background: var(--scrim); touch-action: none; animation: ap-fade .3s ease-out both; }
.ap-panel {
  --ap-pad: var(--s-5);
  position: relative; display: flex; flex-direction: column; gap: var(--s-5);
  width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-2) var(--ap-pad) calc(var(--ap-pad) + env(safe-area-inset-bottom));
  padding-inline: calc(var(--ap-pad) + env(safe-area-inset-left)) calc(var(--ap-pad) + env(safe-area-inset-right));
  background: var(--surface); color: var(--text); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-3);
  outline: none; transition: transform .38s cubic-bezier(.16, 1, .3, 1);
  animation: ap-sheet-in .56s cubic-bezier(.16, 1, .3, 1) both;
}
/* Safari < 15.4 بلا dvh */
@supports not (height: 100dvh) { .ap-panel { max-height: calc(100vh - 24px); } }
.ap-panel:focus-visible { box-shadow: var(--shadow-3); }
.ap[data-dragging] .ap-panel { animation: none; }
.ap[data-leaving] .ap-scrim { animation: ap-fade-out .28s ease-in both; }
.ap[data-leaving] .ap-panel { animation: ap-sheet-out .28s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }

.ap-grab { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; touch-action: none; }
.ap-handle { width: 40px; height: 5px; margin-bottom: var(--s-2); border-radius: 3px; background: var(--border-strong); }
.ap-close { position: absolute; top: 0; inset-inline-end: calc(-1 * var(--s-2)); }

.ap-art { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin-bottom: var(--s-2); }
.ap-art::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0, transparent 70%); }
.ap-mark { --bm: 64px; }
.ap-mark .bm-svg { animation: ap-mark-in .7s var(--ease-back, cubic-bezier(.34, 1.45, .64, 1)) .08s both; }
.ap-mark .bm-bolt { animation-delay: .3s, .72s; }
.ap-mark .bm-plus { animation-delay: .78s; }
.ap-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--brand-teal); opacity: 0; animation: ap-ring .9s cubic-bezier(.16, 1, .3, 1) .28s both; }
.ap-spark { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--brand-amber); opacity: 0;
  animation: ap-spark .8s cubic-bezier(.16, 1, .3, 1) .5s both; }
.ap-spark-1 { --sx: -46px; --sy: -30px; }
.ap-spark-2 { --sx: 48px; --sy: -22px; background: var(--brand-teal); animation-delay: .56s; }
.ap-spark-3 { --sx: 34px; --sy: 40px; width: 6px; height: 6px; margin: -3px; background: var(--brand-red); animation-delay: .62s; }

.ap-title { font: var(--t-title-1); color: var(--text); animation: ap-rise .5s cubic-bezier(.16, 1, .3, 1) .16s both; }
.ap-text { max-width: 34ch; font: var(--t-body); color: var(--text-2); animation: ap-rise .5s cubic-bezier(.16, 1, .3, 1) .22s both; }
.ap-email { padding: 2px var(--s-3); border-radius: var(--r-full); background: var(--surface-3); font: var(--t-callout-strong); color: var(--text); unicode-bidi: isolate;
  overflow-wrap: anywhere; animation: ap-rise .5s cubic-bezier(.16, 1, .3, 1) .26s both; }

.ap-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.ap-act { gap: var(--s-2); animation: ap-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
.ap-act:nth-child(1) { animation-delay: .26s; }
.ap-act:nth-child(2) { animation-delay: .32s; }
.ap-act:nth-child(3) { animation-delay: .38s; }
.ap-act:nth-child(4) { animation-delay: .44s; }
.ap-act > svg { width: 20px; height: 20px; }
.ap-google > svg { width: 18px; height: 18px; }
.ap-guest { color: var(--text-2); }
@media (hover: hover) { .ap-guest:hover:not(:disabled) { color: var(--text); background: var(--surface-3); } }

/* الشاشة العريضة: بطاقة في الوسط */
@media (min-width: 640px) {
  .ap { align-items: center; padding: var(--s-6); }
  .ap-panel { --ap-pad: var(--s-8); width: min(440px, 100%); max-height: calc(100dvh - 48px); padding: var(--s-6) var(--ap-pad) var(--ap-pad);
    border-radius: 28px; animation-name: ap-card-in; animation-duration: .6s; animation-timing-function: var(--ease-back, cubic-bezier(.34, 1.45, .64, 1)); }
  @supports not (height: 100dvh) { .ap-panel { max-height: calc(100vh - 48px); } }
  .ap[data-leaving] .ap-panel { animation-name: ap-card-out; animation-duration: .22s; }
  .ap-handle { display: none; }
  .ap-grab { touch-action: auto; }
  .ap-close { top: calc(-1 * var(--s-2)); inset-inline-end: calc(-1 * var(--s-4)); }
}
@media (max-width: 359.98px) {
  .ap-panel { --ap-pad: var(--s-4); gap: var(--s-4); }
  .ap-art { width: 80px; height: 80px; }
  .ap-mark { --bm: 56px; }
}
/* شاشة قصيرة (هاتف بالعرض): الرسم يصغر والمحتوى يتمرّر داخل الورقة */
@media (max-height: 560px) {
  .ap-art { width: 64px; height: 64px; margin-bottom: 0; }
  .ap-mark { --bm: 44px; }
  .ap-panel { gap: var(--s-3); }
}

@keyframes ap-fade { from { opacity: 0; } }
@keyframes ap-fade-out { to { opacity: 0; } }
@keyframes ap-sheet-in { from { transform: translate3d(0, 100%, 0); } }
@keyframes ap-sheet-out { to { transform: translate3d(0, 105%, 0); } }
@keyframes ap-card-in { from { opacity: 0; transform: translate3d(0, 32px, 0) scale(.86); } }
@keyframes ap-card-out { to { opacity: 0; transform: translate3d(0, 16px, 0) scale(.94); } }
@keyframes ap-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
@keyframes ap-mark-in { 0% { opacity: 0; transform: scale(.3) rotate(-24deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes ap-ring { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes ap-spark { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ap-scrim, .ap-panel, .ap-title, .ap-text, .ap-email, .ap-act, .ap-mark .bm-svg, .ap-mark .bm-bolt, .ap-mark .bm-plus { animation-duration: 1ms !important; animation-delay: 0s !important; }
  .ap-ring, .ap-spark { display: none; }
  .ap-panel { transition: none; }
}