/* ظلّ — the companion light: a small golden glow on the right that floats, breathes and speaks in words.
   Only light: no wings, no eyes, no face, no solid body. Everything here belongs to it alone. */

:root {
  --ff-rgb: 240 196 92;            /* the gold of the glow */
  --ff-hot: 255 240 206;           /* the warm light round its heart */
  --ff-core: 255 252 242;          /* its heart: a warm white, so the gold never shouts on a black and white site */
  --ff-ease-out: cubic-bezier(.16, 1, .3, 1);       /* long, calm settle: nothing overshoots */
  --ff-ease-in: cubic-bezier(.55, 0, .75, .2);
  --ff-pop: cubic-bezier(.3, 1.32, .5, 1);          /* a soft spring: opens a hair past its size and settles back */
}
:root[data-tone="light"] { --ff-rgb: 206 142 18; --ff-hot: 255 214 110; --ff-core: 255 236 180; }

/* ---------- the light ---------- */
.ff { position: fixed; left: 0; top: 0; z-index: 27; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  opacity: 0; transition: opacity 1.6s ease; }
.ff.on { opacity: 1; }
.ff.dim { opacity: .5; }
.ff.over { z-index: 46; }                             /* above the misbaha's sheet, which it keeps company */
.ff i, .ff canvas { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.ff i { border-radius: 50%; }
.ff:focus-visible { outline: 1.5px solid rgb(var(--ff-rgb) / .6); outline-offset: 4px; }

/* no body and no edge: a small warm-white heart, a gold glow round it and a faint wide halo.
   It does not pulse like a lamp: it blinks the way a firefly does, bright for a moment and then low for a few
   seconds, never on the same beat twice. --b (0 to 1) is that blink, set by firefly.js. */
/* the motes of light are drawn by firefly.js on this canvas, larger than the button so the swarm can trail freely */
.ff canvas { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
/* a ring of light released by a touch or a count, once, then gone */
.ff .r { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--ff-rgb) / .45), 0 0 8px rgb(var(--ff-rgb) / .25); opacity: 0; }
.ff.flare .r { animation: ffRing 1.2s var(--ff-ease-out); }
@keyframes ffGlow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes ffRing { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(4.6); } }

/* ---------- what it says, and the small card that asks a name ----------
   One fine thread of the firefly's own gold all round, and where the thread faces the firefly it is touched
   by its light: a short bright stretch that melts back into the thread. Above the words, a small tag that names
   the moment. The sheet opens from that touched point, toward the left. */
.ff-say, .ff-ask { --ty: 26px; position: fixed; z-index: 27; right: 54px; top: 0; pointer-events: auto; text-align: right; color: var(--ink);
  border-radius: 20px; isolation: isolate; }
/* the sheet: the same flat ground as the dhikr cards, drawn behind the words so that it alone can spring open
   from the firefly's side; the words themselves never move, so they are sharp from their first frame */
.ff-say::before, .ff-ask::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: var(--surface); transform-origin: 100% var(--ty); animation: ffSheetIn .62s var(--ff-pop) both; }
.ff-say::after, .ff-ask::after { transform-origin: 100% var(--ty); animation: ffSheetIn .62s var(--ff-pop) both; }
.ff-head { animation: ffWord .4s ease-out .16s both; }
/* the thread: one fine line of gold that follows every curve of the card; where it faces the firefly it is lit,
   and the light fades along the line itself, so it bends with the corner and never stands out like a bar */
.ff-say::after, .ff-ask::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(64px 52px at 100% var(--ty), rgb(var(--ff-hot) / .9), rgb(var(--ff-rgb) / .42) 45%, transparent 100%) no-repeat,
    linear-gradient(rgb(var(--ff-rgb) / .2), rgb(var(--ff-rgb) / .2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
:root[data-tone="light"] .ff-say::after, :root[data-tone="light"] .ff-ask::after {
  background: radial-gradient(64px 52px at 100% var(--ty), rgb(var(--ff-rgb) / .85), rgb(var(--ff-rgb) / .45) 45%, transparent 100%) no-repeat,
    linear-gradient(rgb(var(--ff-rgb) / .3), rgb(var(--ff-rgb) / .3)); }
.ff-say.over, .ff-ask.over { z-index: 46; }
.ff-say.out, .ff-ask.out { animation: ffSayOut .32s ease-in both; }
.ff-say.out::before, .ff-ask.out::before, .ff-say.out::after, .ff-ask.out::after { animation: ffSheetOut .32s ease-in both; }
/* it springs out of the firefly's side: small and close to it, then open, settling with the faintest give.
   Only the sheet and its thread scale; the text fades in after it, still. */
@keyframes ffSheetIn { from { opacity: 0; transform: scale(.55, .7); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ffSheetOut { to { opacity: 0; transform: scale(.9, .94); } }
@keyframes ffSayOut { to { opacity: 0; } }

/* the head: a small point of the firefly's light, and the name of the moment, on a line of its own */
.ff-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ff-head b { width: 4px; height: 4px; border-radius: 50%; flex: none; background: rgb(var(--ff-core));
  box-shadow: 0 0 5px 1.5px rgb(var(--ff-rgb) / .65); animation: ffGlow 4.4s ease-in-out infinite; }
.ff-head span { font: 500 .74rem/1 var(--ui); color: color-mix(in oklab, rgb(var(--ff-rgb)) 70%, var(--muted)); }

/* its words in the adhkar's own script, a size below the dhikr itself */
.ff-say { width: max-content; min-width: 200px; max-width: min(320px, calc(100vw - 74px)); padding: 16px 22px 18px; cursor: default; font: 400 1.16rem/2.05 var(--text); }
.ff-say p { margin: 0; position: relative; text-wrap: pretty; }
/* the words come one after another: each rises a little and clears from a soft blur */
.ff-say .w { display: inline-block; white-space: pre; opacity: 0; animation: ffWord .7s var(--ff-ease-out) both; animation-delay: calc(var(--i) * 52ms + 220ms); }
@keyframes ffWord { from { opacity: 0; } to { opacity: 1; } }

/* replies to tap: soft pills of light that grow into the bubble after the words have settled */
.ff-replies { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ff-ease-out); }
.ff-replies.is-open { grid-template-rows: 1fr; }
.ff-replies > div { overflow: hidden; display: flex; flex-wrap: wrap; gap: 8px; }
.ff-replies.is-open > div { padding-top: 12px; }
/* the replies take the shape of the cards' count pill: a quiet capsule on a hairline */
.ff-replies button, .ff-chip { min-height: 40px; padding: 0 16px; border-radius: 999px; font: 500 .84rem var(--ui); color: var(--ink);
  background: none; box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .35s, box-shadow .35s, transform .5s var(--ff-ease-out), opacity .5s var(--ff-ease-out); }
.ff-replies button { opacity: 0; }
.ff-replies.is-open button { opacity: 1; transform: none; }
.ff-replies.is-open button:nth-child(2) { transition-delay: 0s, 0s, .09s, .09s; }
.ff-replies.is-open button:nth-child(3) { transition-delay: 0s, 0s, .18s, .18s; }
.ff-replies.is-open button:nth-child(4) { transition-delay: 0s, 0s, .27s, .27s; }
.ff-replies button:hover, .ff-chip:hover { background: rgb(var(--ff-rgb) / .06); box-shadow: inset 0 0 0 1px rgb(var(--ff-rgb) / .45); }
.ff-replies button:active, .ff-chip:active { transform: scale(.96); transition-duration: .35s, .35s, .15s, .5s; }
.ff-replies button:focus-visible, .ff-ask button:focus-visible { outline: 1.5px solid rgb(var(--ff-rgb) / .65); outline-offset: 3px; }

/* the small card: a name if you like, and how to be spoken to; one tap says no */
.ff-ask { width: min(320px, calc(100vw - 74px)); padding: 16px 20px 16px; overflow: hidden; transition: height .55s var(--ff-ease-out); }
.ff-step { position: relative; display: grid; gap: 12px; }
.ff-step.leave { animation: ffStepOut .26s ease-in both; }
.ff-step.enter > * { animation: ffWord .62s var(--ff-ease-out) both; }
.ff-step.enter > :nth-child(2) { animation-delay: .07s; }
.ff-step.enter > :nth-child(3) { animation-delay: .14s; }
.ff-step.enter > :nth-child(4) { animation-delay: .21s; }
@keyframes ffStepOut { to { opacity: 0; } }
.ff-step p { margin: 0; font: 400 1.08rem/1.95 var(--text); color: var(--ink); }
.ff-step input { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: 14px; outline: 0; font: 500 .95rem var(--ui); color: var(--ink);
  background: color-mix(in oklab, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, background .3s; }
.ff-step input::placeholder { color: var(--muted); opacity: .8; }
.ff-step input:focus { box-shadow: inset 0 0 0 1.5px rgb(var(--ff-rgb) / .6); background: rgb(var(--ff-rgb) / .05); }
.ff-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ff-chip.main { background: color-mix(in oklab, var(--ink) 8%, transparent); }
.ff-no { min-height: 40px; margin-inline-start: auto; padding: 0 8px; border-radius: 10px; font: 400 .84rem var(--ui); color: var(--muted); transition: color .25s; }
.ff-no:hover { color: var(--ink); }

/* its rows in the colours panel */
.pref.ff-pref small { display: block; font-size: .76rem; color: var(--muted); font-weight: 400; }
.ff-rename { justify-self: start; min-height: 40px; padding: 0 12px; border-radius: 10px; font: 400 .82rem var(--ui); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.ff-rename:hover { color: var(--ink); }

@media (max-width: 560px) {
  .ff-say, .ff-ask { right: 42px; }
  .ff-say { min-width: 180px; font-size: 1.08rem; padding: 15px 18px 16px; }
  .ff-ask { width: calc(100vw - 58px); }
}
/* who asked for less motion: the light stays still and only glows; words appear without travelling */
@media (prefers-reduced-motion: reduce) {
  .ff.flare .r { animation: none; }
  .ff-say, .ff-ask, .ff-say.out, .ff-ask.out, .ff-say .w, .ff-step.enter > *, .ff-step.leave, .ff-head,
  .ff-say::before, .ff-ask::before, .ff-say::after, .ff-ask::after { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .ff-head b { animation: none; }
  .ff-replies, .ff-ask { transition: none; }
}