/* Zoozah — the Assistant drawer (web)
 *
 * WHAT: the rail button (partials/head.ejs, under the bell) and the chat
 * drawer public/js/assistant.js builds on the body: a slide-over from the
 * right on a ruled panel, the person's turns and the assistant's answers,
 * the tool status line, the citation chips, the proposal card with its
 * two buttons, the report card with Download / Verify, the ruled composer.
 * Loaded AFTER /css/fonts.css and /css/style.css on every app-layout page,
 * so every token below (--nest --beak --terra --linen --leaf --bg --card
 * --rule --rule-soft --red --amber --chrome-*) is already defined for
 * light and dark mode; nothing here names a colour or a font family.
 *
 * WHY: the assistant is on every page, so it costs nothing until opened
 * and reads as the rail's own control; the drawer is a ruled sheet, not a
 * floating card (docs: the ruled-grid UI, 2026-09-25).
 * INVARIANT: the brand rules the web suites pin (tests/assistantWeb.test.js,
 * the notifications.css contract): elevation is surface colour with a
 * hairline, never a shadow; the title and every figure sit in the display
 * face; labels are tracked caps in the text face, 11–13px; nothing under
 * 11px; colours only via tokens (#FFFFFF is the one literal, for text on a
 * Beak fill); the composer is ruled — an underline only, Beak on focus;
 * focus outlines are never removed; one column at 375px (the drawer is
 * the whole viewport there). Every class is prefixed .za- (the drawer),
 * .sidebar-assistant (the rail) or .nav-icon-assistant.
 */

/* ── The rail button ────────────────────────────────────────────────── */
.sidebar-assistant { display: flex; justify-content: center; padding: 4px 12px 0; }
.sidebar-assistant[hidden] { display: none; }
.sidebar-assistant__btn {
  position: relative; width: 46px; height: 46px; border-radius: 12px; padding: 0; border: none;
  background: transparent; color: var(--nest); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
  transition: color 0.15s, background 0.15s;
}
.sidebar-assistant__btn[hidden] { display: none; }
.sidebar-assistant__btn .nav-icon {
  display: inline-block; width: 24px; height: 24px; background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* The question mark (Question_NestBlack.svg, 2026-09-27) — drawn in the suite's
   manner; the Zhub mark it replaces read as a backwards Z on the rail. */
.nav-icon-assistant { -webkit-mask-image: url('/assets/icons/svg/Question_NestBlack.svg'); mask-image: url('/assets/icons/svg/Question_NestBlack.svg'); }
.sidebar-assistant__btn:hover, .sidebar-assistant__btn[aria-expanded="true"] { color: var(--beak); background: var(--chrome-hover-bg); }
.sidebar-assistant__btn:focus-visible { outline: 2px solid var(--beak); outline-offset: 2px; }

/* ── The drawer: a scrim and a ruled sheet from the right ───────────── */
.za-drawer { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; }
.za-drawer[hidden] { display: none !important; }
.za-drawer [hidden] { display: none !important; }
.za-scrim { position: absolute; inset: 0; background: var(--chrome-hover-bg); }
.za-panel {
  position: relative; width: min(520px, 100%); height: 100%; display: flex; flex-direction: column; min-width: 0;
  /* The brand's paper white (--card, #FAFAF7 in light, its dark twin in
     dark), not the page ground: the drawer reads as a sheet laid over the
     page (2026-09-27, the founder). */
  background: var(--card); border-left: 1px solid var(--rule); color: var(--nest);
}
.za-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 14px 16px 12px; border-bottom: 1px solid var(--rule); }
.za-head__main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.za-title {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: var(--lh-section); letter-spacing: 0;
  color: var(--nest); font-feature-settings: var(--font-display-features); margin: 0;
}
.za-label {
  display: block; font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.2;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--terra);
}
.za-head__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Buttons: the platform pill (text face, caps, tracked), compact. */
.za-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-size: 12px; font-weight: 400; line-height: 1.2;
  text-transform: uppercase; letter-spacing: var(--track-caps); text-decoration: none;
  padding: 6px 11px; min-height: 30px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linen); background: var(--card); color: var(--nest);
  transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap;
}
.za-btn:hover { border-color: var(--terra); }
.za-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.za-btn:focus-visible { outline: 2px solid var(--beak); outline-offset: 2px; }
.za-btn--primary { background: var(--beak); border-color: var(--beak); color: #FFFFFF; }
.za-btn--primary:hover { background: var(--nest); border-color: var(--nest); color: var(--card); }
.za-btn--ghost { background: transparent; border-color: transparent; color: var(--beak); padding-left: 6px; padding-right: 6px; }
.za-btn--ghost:hover { border-color: transparent; text-decoration: underline; }

/* The conversation picker: ruled, an underline only. */
.za-select {
  max-width: 180px; font: inherit; font-size: 13px; color: var(--nest); background: transparent;
  border: none; border-bottom: 1px solid var(--rule-soft); border-radius: 0; padding: 6px 2px;
}
.za-select:focus { border-bottom-color: var(--beak); }

/* ── The log ────────────────────────────────────────────────────────── */
.za-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.za-empty { margin: auto; text-align: center; max-width: 34ch; font-size: 14px; line-height: var(--lh-body); color: var(--terra); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.za-empty p { margin: 0; }
.za-illo { width: 96px; height: 96px; margin: 0; }
.za-turn { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.za-turn--user { align-items: flex-end; }
.za-turn--assistant { align-items: flex-start; }
.za-turn--system { align-items: center; }
.za-bubble {
  max-width: 92%; padding: 10px 12px; font-size: 14px; line-height: var(--lh-body); color: var(--nest);
  background: var(--card); border: 1px solid var(--rule-soft); overflow-wrap: anywhere;
}
.za-turn--user .za-bubble { background: var(--bg-soft); border-color: var(--rule-soft); }
/* The assistant's own turns read as prose, not a card (2026-09-27, the
   founder: no border, no fill, like Claude); the person's turns keep
   their soft bubble so the two voices stay told apart. */
/* The answer's light markdown (assistant.js inlineMd / blocksMd): a list sits
   as its own block with the brand's rhythm; bold is the face's medium. */
.za-bubble .za-list { margin: 6px 0 6px 20px; padding: 0; }
.za-bubble .za-list li { margin: 2px 0; }
.za-bubble strong { font-weight: 500; }
.za-turn--assistant .za-bubble { background: transparent; border: none; padding: 4px 0; max-width: 100%; }
.za-when { font-size: 11px; color: var(--terra); font-variant-numeric: tabular-nums; }
.za-system { font-size: 12px; color: var(--terra); text-align: center; padding: 2px 0; }
.za-muted { font-size: 12px; color: var(--terra); margin: 4px 0 0; }
.za-error { font-size: 13px; color: var(--red); }
.za-thinking { color: var(--terra); }

/* Tool status: one small caps chip per read. */
.za-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.za-tool { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--terra); padding: 3px 8px; border: 1px solid var(--rule-soft); border-radius: 999px; }
.za-tool--refused { color: var(--amber); border-color: var(--amber); }

/* Citations: chips that go to the record's page. */
.za-cites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.za-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; color: var(--beak);
  padding: 3px 9px; border: 1px solid var(--linen); border-radius: 999px; text-decoration: none; background: var(--card);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.za-chip:hover, .za-chip:focus-visible { border-color: var(--beak); }
.za-chip--plain { color: var(--nest); cursor: default; }
.za-chip__draft { font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--amber); }

/* A proposal: a ruled card with two buttons — never a silent write. */
.za-proposal, .za-report { align-self: stretch; padding: 10px 12px; border: 1px solid var(--rule); background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.za-proposal--confirmed { border-color: var(--leaf); }
.za-proposal--declined, .za-proposal--expired { border-color: var(--rule-soft); color: var(--terra); }
.za-proposal--failed { border-color: var(--red); }
.za-proposal__text { margin: 0; font-size: 14px; line-height: var(--lh-body); overflow-wrap: anywhere; }
.za-proposal__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.za-proposal__secret { padding-top: 6px; border-top: 1px solid var(--rule-soft); }
.za-secret { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--nest); overflow-wrap: anywhere; user-select: all; }

/* ── The composer: ruled, an underline only ─────────────────────────── */
.za-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 16px; border-top: 1px solid var(--rule); }
/* One line tall, so the caret sits on the rule; it grows a line at a time
   as the message does (field-sizing, with a script fallback in
   assistant.js) up to about six lines, then scrolls (2026-09-27). */
.za-input {
  width: 100%; min-height: 0; resize: none; font: inherit; font-size: 14px; line-height: var(--lh-body); color: var(--nest);
  background: transparent; border: none; border-bottom: 1px solid var(--rule-soft); border-radius: 0; padding: 8px 2px;
  field-sizing: content; max-height: 140px; overflow-y: auto;
}
.za-input::placeholder { color: var(--terra); }
.za-input:focus { border-bottom-color: var(--beak); }
.za-foot { margin: 0; padding: 0 16px 12px; font-size: 11px; line-height: 1.4; color: var(--terra); }

/* ── The other surfaces: e-mail and Slack (a closed panel by default) ── */
.za-connect { border-top: 1px solid var(--rule); padding: 8px 16px 10px; }
.za-connect__summary { cursor: pointer; font-size: 12px; line-height: 1.4; color: var(--beak); list-style: none; }
.za-connect__summary::-webkit-details-marker { display: none; }
.za-connect__summary::before { content: '+ '; }
.za-connect[open] .za-connect__summary::before { content: '− '; }
.za-connect__body { display: flex; flex-direction: column; }
.za-connect__row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 8px; border-bottom: 1px solid var(--rule-soft); }
.za-connect__row:last-child { border-bottom: none; }
.za-connect__row .za-muted { margin: 0; }
.za-connect__code { padding: 4px 0; }
.za-connect__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.za-connect__form { display: grid; gap: 6px; }
.za-connect__input { min-height: 32px; resize: none; }

/* One column at phone width: the drawer is the viewport; the picker wraps. */
@media (max-width: 639px) {
  .za-panel { width: 100%; border-left: none; }
  .za-head { padding: 12px 16px 10px; }
  .za-head__actions { width: 100%; }
  .za-select { max-width: 100%; flex: 1 1 100%; }
  .za-bubble { max-width: 100%; }
  .za-composer { grid-template-columns: 1fr; }
}

/* The typing caret (2026-09-27): a thin Beak bar riding the end of the
   reply while it types out (public/js/assistant.js createPacer), blinking
   softly. Gone once the answer settles. */
.za-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.18em;
  background: var(--beak); animation: zaCaretBlink 1.05s ease-in-out infinite;
}
@keyframes zaCaretBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .za-caret { animation: none; } }