/* The Meryam conversation on the home page — the chat happens inside the
   lantern glade, the way it does in the app. Overrides the plain version in
   home.css. */
.meryam-phone { width: min(360px, 84vw); }
.meryam-phone.glow::before { inset: -26%; background: radial-gradient(closest-side, rgba(235,196,154,0.34), transparent 72%); }
.meryam-phone .chat-screen {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  padding: 0; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,16,12,0.72) 0%, rgba(10,16,12,0.35) 30%, rgba(10,16,12,0.55) 70%, rgba(10,16,12,0.9) 100%),
    url("img/worlds/glade-chat.webp") center 40% / cover no-repeat, #1b2a1e;
}
.chat-top { display: flex; align-items: center; gap: 12px; padding: 54px 18px 14px; border-bottom: 1px solid rgba(233,244,234,0.08); background: rgba(10,16,12,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.chat-avatar { position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.chat-avatar::before { content: ""; position: absolute; inset: -6px; border-radius: 16px; background: radial-gradient(closest-side, rgba(235,196,154,0.55), transparent); animation: halo 3.2s ease-in-out infinite; }
.chat-avatar img { position: relative; width: 38px; height: 38px; border-radius: 11px; }
@keyframes halo { 50% { opacity: .35; transform: scale(.92); } }
.meryam-phone .chat-head { position: static; text-align: left; margin: 0; font-size: 1.05rem; line-height: 1.2; }
.meryam-phone .chat-head small { display: flex; align-items: center; gap: 6px; margin-top: 3px; letter-spacing: .14em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--candle, #ebc49a); box-shadow: 0 0 10px var(--candle, #ebc49a); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .3; } }
.chat-flow { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px 14px 12px; font-size: .88rem; line-height: 1.5; }
.meryam-phone .bubble.me { background: rgba(233,244,234,0.12); border: 1px solid rgba(233,244,234,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.meryam-phone .bubble.her { background: rgba(20,30,22,0.72); border: 1px solid rgba(235,196,154,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hadith-card {
  margin: 2px 0; padding: 16px 14px 12px; border-radius: 18px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(235,196,154,0.22), rgba(20,30,22,0.8) 70%);
  border: 1px solid rgba(235,196,154,0.4);
  box-shadow: 0 0 34px rgba(235,196,154,0.18), inset 0 0 20px rgba(235,196,154,0.08);
}
.hadith-ar { font-family: var(--arabic, "Amiri", serif); font-size: 2rem; line-height: 1.5; color: var(--candle, #ebc49a); margin: 0; text-shadow: 0 0 22px rgba(235,196,154,0.45); }
.hadith-card blockquote { margin: 2px 0 8px; font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.12rem; color: #f4efe4; }
.hadith-card figcaption { font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--candle, #ebc49a); opacity: .85; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips span { font-size: .78rem; font-weight: 700; padding: 8px 12px; border-radius: 999px; color: #1b2a1e; background: var(--candle, #ebc49a); }
.chips span + span { background: transparent; color: var(--candle, #ebc49a); border: 1px solid rgba(235,196,154,0.5); }
.composer { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 14px; padding: 10px 10px 10px 16px; border-radius: 999px; background: rgba(233,244,234,0.08); border: 1px solid rgba(233,244,234,0.14); color: rgba(233,244,234,0.5); font-size: .85rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.composer i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--candle, #ebc49a); color: #1b2a1e; font-weight: 800; }

/* The conversation arrives the way it would: her words, then the hadith
   glowing into place, then the gentle close and the ways forward. */
.js .meryam-phone .hadith-card, .js .meryam-phone .chips { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .9s var(--ease, ease), transform .9s var(--ease, ease); }
.js .in .meryam-phone .bubble:nth-of-type(2) { transition-delay: 2.1s; }
.js .in .meryam-phone .hadith-card { opacity: 1; transform: none; transition-delay: 2.9s; }
.js .in .meryam-phone .bubble:nth-of-type(3) { transition-delay: 3.9s; }
.js .in .meryam-phone .chips { opacity: 1; transform: none; transition-delay: 4.6s; }
@media (prefers-reduced-motion: reduce) {
  .js .meryam-phone .hadith-card, .js .meryam-phone .chips { opacity: 1; transform: none; }
}