/* ══════════════════════════════════════════════════════════════════════════════
   THE ASK DOCK — a floating launcher and the panel it opens.

   Its own file rather than an addition to site.css, which is regenerated from the
   comp; anything written there is lost on the next pass.

   Every colour below is semantic (--paper, --surf, --edge, --acc, --acc-text) or
   a color-mix off --acc, which is the prayer-times.css pattern, so both worlds are
   correct from one declaration. Where a shadow cannot be expressed that way it is
   written twice — once for the archive, once for html[data-world="manuscript"],
   where a deep black shadow reads as dirt on cream.

   No :focus-visible is declared. site.css:92 already gives every focusable an
   outline in --acc; re-declaring it here would only risk diverging from it.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── the launcher ──────────────────────────────────────────────────────────── */
/* Bottom + inset-inline-end: the trailing corner, away from the reading edge, in
   both scripts. In Arabic that resolves bottom-left; under html[data-lang="en"]
   it mirrors to bottom-right, which is where a reader of either script expects it.

   z-index 80 sits above the pocket pill (.jnav, 70) and the strip painted under it
   (body::after, 69), and below every surface that should cover it: .scrim2/.drawer
   (85/86), .sheet (88), .search (90), .soul (95), .netbar (120). */
.askdock{
  position:fixed;
  z-index:80;
  bottom:clamp(20px,3vw,32px);
  inset-inline-end:clamp(16px,2.4vw,28px);
}
.askdock[hidden]{display:none}

.askdock__btn{
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--acc) 34%,var(--edge));
  background:var(--paper);
  color:var(--acc-text);
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.06);
  transition:transform 200ms var(--paper-ease),border-color 200ms,box-shadow 200ms,background 200ms;
}
html[data-world="manuscript"] .askdock__btn{
  box-shadow:0 12px 26px rgba(90,70,30,.16),inset 0 1px rgba(255,255,255,.7);
}
.askdock__btn:hover{
  transform:translateY(-3px);
  border-color:var(--acc);
  box-shadow:var(--gold-glow),0 20px 44px rgba(0,0,0,.5);
}
html[data-world="manuscript"] .askdock__btn:hover{
  box-shadow:0 0 0 1px rgba(156,122,52,.35),0 18px 36px rgba(90,70,30,.2);
}
.askdock__btn:active{transform:scale(.94)}
.askdock__btn[aria-expanded="true"]{
  border-color:var(--acc);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 10%,transparent),transparent);
}
.askdock__btn .nav__icon{pointer-events:none}

/* Below 768px the pocket pill owns the bottom of the screen. --mobile-dock is
   declared by site.css only inside that same query, so the 0px fallback covers
   every wider viewport. The reading room hides .jnav entirely, so the offset must
   not survive there or the button floats ~78px too high. */
@media(max-width:767px){
  .askdock{bottom:calc(var(--mobile-dock,0px) + 14px);inset-inline-end:14px}
  .askdock__btn{width:54px;height:54px}
  body[data-page="read"] .askdock{bottom:20px}
}

/* While the drawer is open the launcher would sit on top of it. */
body.menu-open .askdock{opacity:0;pointer-events:none}

/* ── the panel ─────────────────────────────────────────────────────────────── */
/* The `visibility 0s linear var(--slow)` delay is site.css's own trick (1218): it
   keeps a closing panel unclickable for the length of its fade instead of
   swallowing the click that follows. */
.askpanel{
  position:fixed;
  z-index:83;
  display:flex;flex-direction:column;
  inset-inline-end:clamp(16px,2.4vw,28px);
  bottom:calc(clamp(20px,3vw,32px) + 58px + 14px);
  width:min(420px,calc(100vw - 40px));
  max-height:min(620px,calc(100svh - 150px));
  background:var(--surf);
  border:1px solid color-mix(in srgb,var(--acc) 30%,var(--edge));
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--base) var(--ease),
             transform var(--base) var(--paper-ease),
             visibility 0s linear var(--slow);
}
html[data-world="manuscript"] .askpanel{box-shadow:0 34px 74px rgba(90,70,30,.22)}
.askpanel.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.askpanel[hidden]{display:none}

.askpanel__scrim{
  position:fixed;inset:0;z-index:82;
  background:rgba(3,3,3,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--base),visibility 0s linear var(--slow);
}
html[data-world="manuscript"] .askpanel__scrim{background:rgba(60,48,24,.4)}
.askpanel__scrim.open{opacity:1;visibility:visible;transition-delay:0s}

/* ── head ──────────────────────────────────────────────────────────────────── */
.askpanel__head{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px 0;
}
.askpanel__heading{flex:1;min-width:0}
.askpanel__eyebrow{
  display:block;
  font-family:var(--font-ui);font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--acc-text);
}
.askpanel__head h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,1.05rem+.7vw,1.6rem);
  line-height:1.25;margin-top:4px;
}
.askpanel__x{flex:none}
.askpanel__rule{margin:14px 20px 0}

.askpanel__note{
  margin:12px 20px 0;
  font-family:var(--font-ui);font-size:11.5px;line-height:1.75;
  color:var(--mut);
}

/* ── thread ────────────────────────────────────────────────────────────────── */
/* overscroll-behavior:contain stops a flick inside the thread from chaining to the
   page underneath, which is the whole reason the body lock alone is not enough. */
.askpanel__thread{
  flex:1;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  margin:14px 0 0;padding:0 20px;
  list-style:none;
  display:flex;flex-direction:column;gap:12px;
}
.askpanel__empty{
  font-family:var(--font-ui);font-size:12px;line-height:1.85;
  color:var(--mut);
  padding:14px 16px;
  border:1px dashed color-mix(in srgb,var(--acc) 22%,var(--edge));
  border-radius:var(--r-md);
}
/* A sent question, as the reader's own words. Aligned to the inline-start edge —
   there is no second speaker to sit opposite. */
.askpanel__msg{
  align-self:flex-start;max-width:92%;
  padding:12px 15px;
  border:1px solid color-mix(in srgb,var(--acc) 26%,var(--edge));
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--acc) 5%,var(--paper));
  font-family:var(--font-naskh);font-size:14.5px;line-height:1.9;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.askpanel__chip{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:8px;
  font-family:var(--font-ui);font-size:10px;letter-spacing:.1em;
  color:var(--acc-text);
}
.askpanel__chip::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--acc);flex:none;
}
/* A system receipt — a rate-limit notice, a failure. Never a message bubble: it is
   the archive speaking about the transaction, not a party to the conversation. */
.askpanel__sys{
  align-self:stretch;
  font-family:var(--font-ui);font-size:11.5px;line-height:1.8;
  color:var(--mut);
  padding:10px 14px;
  border-inline-start:2px solid color-mix(in srgb,var(--acc) 45%,transparent);
  background:color-mix(in srgb,var(--acc) 4%,transparent);
  border-radius:0 var(--r-sm,8px) var(--r-sm,8px) 0;
}

/* ── composer ──────────────────────────────────────────────────────────────── */
.askpanel__composer{
  padding:14px 20px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid color-mix(in srgb,var(--acc) 18%,var(--edge));
  background:color-mix(in srgb,var(--paper) 55%,transparent);
}
.askpanel__lbl{
  display:block;
  font-family:var(--font-ui);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin-bottom:6px;
}
.askpanel textarea,
.askpanel input{
  width:100%;
  background:transparent;
  border:1px solid var(--edge);
  border-radius:var(--r-md);
  padding:11px 13px;
  color:var(--txt);
  font-family:var(--font-naskh);font-size:14.5px;line-height:1.85;
}
.askpanel textarea{min-height:84px;resize:vertical}
.askpanel textarea:focus,
.askpanel input:focus{border-color:color-mix(in srgb,var(--acc) 55%,var(--edge))}
.askpanel [aria-invalid="true"]{border-color:var(--bad,#c46a6a)}

.askpanel__more{margin-top:12px}
.askpanel__more>summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-ui);font-size:11.5px;
  color:var(--acc-text);padding:4px 0;
}
.askpanel__more>summary::-webkit-details-marker{display:none}
.askpanel__more>summary::before{content:"+ ";opacity:.7}
.askpanel__more[open]>summary::before{content:"\2212 "}
.askpanel__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.askpanel__privacy{
  margin-top:10px;
  font-family:var(--font-ui);font-size:10.5px;line-height:1.75;color:var(--mut);
}

/* The honeypot. site.css scopes its rule to `.ask .hp`, so the panel needs its own
   or the field would be visible here — which would both look broken and destroy
   the trap. Unreachable to people AND to assistive technology, present in the DOM
   for a bot to fill. */
.askpanel .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.askpanel__err{
  margin-top:12px;
  font-family:var(--font-ui);font-size:12px;line-height:1.7;
  color:var(--bad,#c46a6a);
}
.askpanel__err[hidden]{display:none}

.askpanel__send{width:100%;margin-top:14px}
.askpanel__send[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ── the pocket edition ────────────────────────────────────────────────────── */
/* A full-height chamber, in .sheet's vocabulary. dvh so the on-screen keyboard
   does not push the send button under the fold. */
@media(max-width:767px){
  .askpanel{
    inset-inline:0;bottom:0;
    top:max(44px,env(safe-area-inset-top));
    width:auto;max-height:none;height:auto;
    border-radius:26px 26px 0 0;
    border-inline:0;border-bottom:0;
    transform:translateY(16px);
  }
  @supports(height:100dvh){
    .askpanel{max-height:100dvh}
  }
  /* iOS zooms the page for any input under 16px. site.css forces 16px only on
     `.ask` fields, so the panel must say so itself. */
  .askpanel textarea,.askpanel input{font-size:16px}
  .askpanel__grid{grid-template-columns:1fr}
}

/* ── scroll lock ───────────────────────────────────────────────────────────── */
/* site.css locks the body for the drawer only inside @media(max-width:767px), so
   the desktop page scrolls behind an open drawer. Do not inherit that here. */
body.ask-open{overflow:hidden}

/* ── reduced motion, print, forced colours ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .askpanel,.askpanel.open{transform:none}
  .askdock__btn{transition:none}
  .askdock__btn:hover{transform:none}
}
@media print{.askdock,.askpanel,.askpanel__scrim{display:none!important}}
@media(forced-colors:active){
  .askdock__btn,.askpanel{border:1px solid CanvasText}
  .askpanel__msg,.askpanel__empty{border:1px solid CanvasText}
}