/* ═══════════════════════════════════════════════════════════════════
   Nerd Assistant panel.

   Mobile first: a sheet that rises from the bottom and stops short of
   the top, so the page behind stays visible and the gesture reads as
   "over" rather than "away". From 768px it becomes a right-hand panel,
   which is the same component in a different form factor (§9.1) — same
   markup, same class names, no reduced content.

   Tokens only. tokens.css is the one file allowed to define a colour.
   ═══════════════════════════════════════════════════════════════════ */

.asst{
  position:fixed;z-index:var(--z-drawer);
  left:0;right:0;bottom:0;
  max-height:88vh;
  display:flex;flex-direction:column;
  background:var(--surface);
  border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.asst[aria-hidden="false"]{transform:translateY(0);visibility:visible}

.asst-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--line);
  flex:none;
}
.asst-title{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:1.125rem;font-weight:700;color:var(--ink);margin:0;
}
/* §9.3 — an icon beside a heading is at least 26px, sized off the
   parent so the pair scales together. */
.asst-title .ico{width:1.45em;height:1.45em;color:var(--brand-ink)}

.asst-body{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.asst-lede{font-size:1rem;color:var(--ink-2);margin:0;max-width:60ch}

.asst-can{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.asst-can li{display:flex;gap:var(--sp-3);align-items:flex-start}
/* §9.3 — icon beside a body label, never below 22px. */
.asst-can .ico{width:26px;height:26px;flex:none;color:var(--brand-ink);margin-top:2px}
.asst-can b{display:block;font-size:var(--fs-pair-head);font-weight:700;color:var(--ink)}
.asst-can span{display:block;font-size:var(--fs-pair-sub);color:var(--ink-2);line-height:var(--lh-pair-sub)}

/* Says the Assistant is not answering yet. Not styled as an error and
   not styled as a boast — a plain note in a tinted box. */
.asst-status{
  margin:0;padding:var(--sp-3);
  background:var(--warm-tint);border:1px solid var(--line);border-radius:var(--r);
  font-size:1rem;color:var(--ink-2);
}

/* The final escalation. A rule above it and a heading of its own, so it
   reads as the next step down the ladder rather than a second option
   competing with the first. */
.asst-esc{border-top:1px solid var(--line);padding-top:var(--sp-4)}
.asst-esc h3{font-size:var(--fs-pair-head);font-weight:700;color:var(--ink);margin:0 0 var(--sp-1)}
.asst-esc p{font-size:var(--fs-pair-sub);color:var(--ink-2);margin:0 0 var(--sp-3)}
.asst-esc .ico{width:1.3em;height:1.3em}

@media (min-width: 768px){
  /* Same component, different form factor: a right-hand panel. */
  .asst{
    left:auto;top:0;bottom:0;width:min(420px, 92vw);
    max-height:none;border-radius:0;
    transform:translateX(100%);
  }
  .asst[aria-hidden="false"]{transform:translateX(0)}
}

@media (prefers-reduced-motion: reduce){
  .asst{transition:none}
}