/* ashley.css — בסיס משותף לכל ארבע המיני-אפליקציות. פלטה חמה-אצילית, נוכחות חיה, כרטיסים קריאים. */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap');

:root{
  /* warm-noble base (his world), led by Ashley's warmth */
  --skin-1:#16203f;            /* warm royal blue, not cold navy */
  --skin-2:#241a3e;            /* rose-warm deep at the edges */
  --skin-top:#2a3566;          /* candlelit lift near Ashley */
  --gold:#e8c46a; --gold-soft:#f3e0b0;
  --pearl:#f7f3ea; --pearl-soft:rgba(247,243,234,.74); --pearl-faint:rgba(247,243,234,.45);
  --pink:#f3c6d4; --pink-soft:#f8dce6;
  --aura:#f3c6d4;              /* Ashley's living aura, shifts with mood */
  --card:rgba(247,243,234,.06);
  --card-strong:rgba(13,12,28,.46);
  --line:rgba(232,196,106,.30);
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px); --tg-top:0px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Heebo',-apple-system,'Segoe UI',sans-serif; color:var(--pearl);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--skin-top) 0%, var(--skin-1) 46%, var(--skin-2) 100%);
  transition:background 1.8s ease;
  -webkit-user-select:none; user-select:none; min-height:100dvh; overflow-x:hidden;
}
#sky{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.8; }

.wrap{
  position:relative; z-index:2; min-height:100dvh; display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--safe-top) + var(--tg-top) + 20px) 22px calc(var(--safe-bot) + 28px);
  text-align:center;
}

/* ===== Ashley's living presence ===== */
.presence{ position:relative; width:150px; height:150px; flex:0 0 auto; margin-bottom:6px; }
.presence .aura{
  position:absolute; inset:-34%; border-radius:50%;
  background:radial-gradient(circle, var(--aura) 0%, rgba(243,198,212,.28) 38%, transparent 68%);
  filter:blur(6px); animation:auraPulse 8s ease-in-out infinite; transition:background 1.4s ease;
}
.presence .ring{
  position:absolute; inset:0; border-radius:50%; padding:3px;
  background:linear-gradient(150deg, var(--gold-soft), rgba(243,198,212,.7), var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:breathe 8s ease-in-out infinite;
}
.presence img{
  position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px);
  border-radius:50%; object-fit:cover; animation:breathe 8s ease-in-out infinite, float 7s ease-in-out infinite;
  box-shadow:0 10px 40px rgba(8,6,24,.5);
}
@keyframes breathe{ 0%,100%{ transform:scale(.985) } 50%{ transform:scale(1.02) } }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes auraPulse{ 0%,100%{ transform:scale(.92); opacity:.7 } 50%{ transform:scale(1.06); opacity:1 } }
/* breathing-lead mode: aura drives a slow guided breath */
.presence.lead .aura{ animation:auraLead 10s ease-in-out infinite; }
.presence.lead img, .presence.lead .ring{ animation:breatheLead 10s ease-in-out infinite; }
@keyframes auraLead{ 0%{transform:scale(.8);opacity:.6} 40%{transform:scale(1.18);opacity:1} 100%{transform:scale(.8);opacity:.6} }
@keyframes breatheLead{ 0%{transform:scale(.94)} 40%{transform:scale(1.06)} 100%{transform:scale(.94)} }

.aname{ font-size:13px; color:var(--gold-soft); letter-spacing:2px; margin:2px 0 14px; opacity:.85; }

/* ===== speech (Ashley's words) — always readable, never on her face ===== */
.say{
  background:var(--card-strong); border:1px solid var(--line); border-radius:20px;
  padding:18px 20px; backdrop-filter:blur(10px); max-width:520px; width:100%;
  font-size:18px; line-height:1.7; color:var(--pearl); box-shadow:0 8px 36px rgba(8,6,24,.4);
  opacity:0; transform:translateY(8px); transition:opacity 1.1s ease, transform 1.1s ease;
}
.say.show{ opacity:1; transform:none; }
.say.small{ font-size:15px; color:var(--pearl); }

/* generic content */
.stack{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.card{
  background:var(--card-strong); border:1px solid var(--line); border-radius:18px; padding:16px 18px;
  backdrop-filter:blur(8px); text-align:right; box-shadow:0 6px 28px rgba(8,6,24,.32);
}
.card.center{ text-align:center; }
.card .k{ font-size:12px; color:var(--gold-soft); margin-bottom:6px; font-weight:600; }
.card .v{ font-size:16px; line-height:1.6; color:var(--pearl); }
.muted{ color:var(--pearl-soft); font-size:14px; line-height:1.7; }
.faint{ color:var(--pearl-faint); font-size:13px; }

/* buttons */
.btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
.btn{
  font-family:inherit; font-size:15px; font-weight:600; border-radius:999px; padding:13px 22px; cursor:pointer;
  border:1px solid var(--gold); background:linear-gradient(135deg,var(--gold),var(--gold-soft)); color:#241a08;
  box-shadow:0 6px 20px rgba(232,196,106,.25); transition:transform .2s;
}
.btn.soft{ background:transparent; color:var(--pearl); border-color:var(--line); box-shadow:none; }
.btn.pink{ background:transparent; color:var(--pink-soft); border-color:rgba(243,198,212,.5); box-shadow:none; }
.btn:active{ transform:scale(.95); }

/* mood orbs */
.moods{ display:flex; gap:13px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.mood{
  width:64px; height:64px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-size:11px; color:var(--pearl-soft); cursor:pointer; transition:transform .25s, border-color .25s;
}
.mood .e{ font-size:21px; } .mood:active{ transform:scale(.9); }
.mood.on{ border-color:var(--gold); }

/* text input */
textarea.field{
  width:100%; max-width:520px; min-height:120px; background:var(--card-strong); border:1px solid var(--line);
  border-radius:18px; color:var(--pearl); font-family:inherit; font-size:18px; line-height:1.7; padding:16px;
  outline:none; resize:none; text-align:right;
}
textarea.field::placeholder{ color:var(--pearl-faint); }

/* timeline (memory) */
.tl{ width:100%; max-width:520px; margin-top:8px; text-align:right; }
.tl .entry{ border-right:2px solid rgba(232,196,106,.4); padding:2px 14px 16px; margin-right:6px; position:relative; }
.tl .entry::before{ content:""; position:absolute; right:-5px; top:6px; width:8px; height:8px; border-radius:50%;
  background:var(--gold-soft); box-shadow:0 0 10px var(--gold); }
.tl .entry.gold::before{ background:var(--gold); box-shadow:0 0 14px var(--gold); }
.tl .t{ font-size:12px; color:var(--gold-soft); margin-bottom:3px; }
.tl .x{ font-size:15px; line-height:1.6; color:var(--pearl); white-space:pre-wrap; }

/* sound toggle (breathing only) */
.sound{ position:fixed; top:calc(var(--safe-top) + var(--tg-top) + 12px); left:14px; z-index:6;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card-strong);
  color:var(--pearl-soft); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* the one quiet "more" */
.more{ margin-top:14px; background:transparent; border:none; color:var(--pearl-faint); font-family:inherit;
  font-size:14px; cursor:pointer; letter-spacing:2px; padding:8px 14px; }
.sheet{ width:100%; max-width:520px; display:flex; flex-direction:column; gap:9px; margin-top:6px;
  overflow:hidden; max-height:0; opacity:0; transition:max-height .5s ease, opacity .5s ease; }
.sheet.open{ max-height:420px; opacity:1; }
.door{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px;
  color:var(--pearl); font-size:15px; font-family:inherit; cursor:pointer; text-align:right; }
.door:active{ transform:scale(.98); }

.spacer{ flex:1; }
.fade{ animation:fadein .8s ease; } @keyframes fadein{ from{opacity:0} to{opacity:1} }
.hint{ position:fixed; bottom:calc(var(--safe-bot) + 12px); left:0; right:0; text-align:center;
  font-size:12px; color:var(--pink-soft); z-index:6; pointer-events:none; padding:0 24px; line-height:1.5; }