/* AI assistant launcher and panel (static/assistant.js). Tokens come from app.css. Layers: z-index 60, above the page
   and below the guided tour (80 and up). Wide screens (1200px and up, DOCK in assistant.js) dock the panel and shift
   the page left by its width; narrower screens get a modal sheet (a right-hand drawer, full screen on phones). */
:root {
  --asst-w: 400px;
  --asst-mark-accent: #8fb1ff;       /* the logo's blue on the ink-coloured launcher */
  --asst-lift: 0 2px 6px rgba(18, 24, 28, .18), 0 10px 28px rgba(18, 24, 28, .22);  /* the launcher */
  --asst-lift-hover: 0 4px 10px rgba(18, 24, 28, .2), 0 16px 36px rgba(18, 24, 28, .26);
  --asst-panel-shadow: -16px 0 40px rgba(18, 24, 28, .1);
}
/* Dark theme (theme.js): screen only, like app.css, and monochrome. The launcher stays var(--ink), so it turns light.
   Claude's answers use app.css's --llm-* tokens, as the Plan screen's notes do. */
@media screen {
  :root[data-theme="dark"] {
    --asst-mark-accent: #6b6b6b;       /* grey on the light launcher: 4.5:1 */
    --asst-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 10px 28px rgba(0, 0, 0, .4);
    --asst-lift-hover: 0 4px 10px rgba(0, 0, 0, .5), 0 16px 36px rgba(0, 0, 0, .45);
    --asst-panel-shadow: -16px 0 40px rgba(0, 0, 0, .45);
  }
  /* a fallback answer's dot is hollow: Claude's dot (--llm-line) and the fallback's are both grey here */
  :root[data-theme="dark"] .is-fallback .asst-label-dot { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
}

/* ---------------------------------------------------------------- launcher */
.asst-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: grid; place-items: center;
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--on-ink);
  cursor: pointer; box-shadow: var(--asst-lift);
  transition: transform .15s, box-shadow .15s, opacity .2s; }
.asst-launcher:hover { transform: translateY(-2px); box-shadow: var(--asst-lift-hover); }
.asst-launcher:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 50%; }
.asst-launcher .asst-mark { width: 30px; height: 30px; margin-top: 2px; object-fit: contain; }
.asst-launcher.is-dodging:not(:focus-visible) { opacity: 0; pointer-events: none; }
.asst-ai { position: absolute; top: -4px; right: -6px; padding: 0 6px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font: 600 10.5px/1.6 var(--font-body); letter-spacing: .05em; box-shadow: 0 0 0 2px var(--bg); }
.asst-tip { position: absolute; right: calc(100% + 12px); top: 50%; padding: 6px 10px; border-radius: 8px;
  background: var(--tip-bg); color: var(--tip-ink); font-size: 13px; font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(4px, -50%); transition: opacity .15s, transform .15s; box-shadow: var(--shadow); }
.asst-launcher:hover .asst-tip, .asst-launcher:focus-visible .asst-tip { opacity: 1; transform: translate(0, -50%); }

/* ---------------------------------------------------------------- panel */
.asst-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-direction: column;
  width: var(--asst-w); max-width: 100%; background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--asst-panel-shadow); animation: asst-in .18s ease-out; }
body[data-assistant="docked"] { padding-right: var(--asst-w); }
body[data-assistant="docked"] .asst-panel { box-shadow: -1px 0 0 var(--line); animation: none; }
body[data-assistant="sheet"] { overflow: hidden; }  /* the page behind a sheet stays put (and is inert) */
.asst-backdrop { position: fixed; inset: 0; z-index: 59; background: var(--backdrop); }
@keyframes asst-in { from { transform: translateX(24px); opacity: 0; } }
@keyframes asst-up { from { transform: translateY(10px); opacity: 0; } }

.asst-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.asst-head-row { display: flex; align-items: center; gap: 10px; }
.asst-head-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px;
  background: var(--ink); }
.asst-head-mark .asst-mark { width: 22px; height: 22px; margin-top: 1px; object-fit: contain; }
.asst-title { flex: 1; min-width: 0; margin: 0; font: 400 23px/1.1 var(--font-display); letter-spacing: -0.02em; }
.asst-new { flex: none; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--blue);
  font-size: 13.5px; font-weight: 500; cursor: pointer; }
.asst-new:hover { background: var(--blue-soft); }
.asst-close { flex: none; width: 34px; height: 34px; font-size: 21px; }
.asst-close:hover, .asst-peek-close:hover { background: var(--surface-2); color: var(--ink); }
.asst-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }

.asst-scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 16px 18px 10px;
  overscroll-behavior: contain; }
.asst-scroll:focus-visible { outline-offset: -3px; }
.asst-welcome { padding: 2px 0 6px; font-size: 14.5px; color: var(--ink-2); }
.asst-welcome p { margin: 0 0 8px; }
.asst-welcome-lead { font: 400 21px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.asst-welcome-note { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3); }

/* messages */
.asst-log { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.asst-msg { min-width: 0; }
.asst-msg.is-user { justify-self: end; max-width: 86%; }
.asst-bubble { margin: 0; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: var(--on-accent);
  font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.asst-label { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 6px; font-size: 12px; font-weight: 500;
  line-height: 1.35; color: var(--ink-3); }
.asst-label-dot { width: 8px; height: 8px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--llm-line); }
.is-unchecked .asst-label-dot { background: var(--warn-solid); }
.is-fallback .asst-label-dot { background: var(--ink-3); }
.asst-text { margin: 0; padding: 10px 14px; border-left: 3px solid var(--llm-line); border-radius: 0 12px 12px 0;
  background: var(--llm-bg); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.is-unchecked .asst-text { border-left-color: var(--warn-solid); background: var(--surface-2); }
.is-fallback .asst-text { border-left-color: var(--line-2); background: var(--surface-2); }
.asst-sources { margin-top: 8px; }
.asst-sources ul { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.asst-sources-label { width: fit-content; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.asst-sources-label:hover { color: var(--ink-2); }
.asst-source { padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2);
  font: 11.5px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink-2); overflow-wrap: anywhere; }
.asst-receipts { list-style: none; display: grid; gap: 4px; margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.4; }
.asst-receipts[hidden] { display: none; }
.asst-receipt { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-3); overflow-wrap: anywhere; }
.asst-receipt-icon { flex: none; width: 1em; font-weight: 700; text-align: center; }
.asst-receipt.is-ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.asst-receipt.is-failed { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.asst-receipt.is-info { color: var(--blue-ink); background: var(--blue-soft); border-color: var(--blue-line); }
.asst-receipt.is-dropped, .asst-receipt.is-skipped { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.asst-msg.is-error { padding: 12px 14px; border: 1px solid var(--bad-line); border-radius: 12px; background: var(--bad-soft);
  color: var(--bad); font-size: 14px; }
.asst-error-text { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.asst-error-more { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.asst-error-id summary { width: fit-content; cursor: pointer; }
.asst-error-id p { margin: 2px 0 0; }
.asst-retry { margin-top: 10px; }
.asst-retry:disabled { opacity: .55; cursor: not-allowed; }
.asst-typing { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 0 12px 12px 0;
  border-left: 3px solid var(--line-2); background: var(--surface-2); font-size: 13.5px; color: var(--ink-3); }
.asst-dots { display: inline-flex; gap: 4px; }
.asst-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: asst-blink 1.2s ease-in-out infinite; }
.asst-dots span:nth-child(2) { animation-delay: .15s; }
.asst-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes asst-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* suggestions and the composer */
.asst-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 2px; }
.asst-chips.is-compact { flex-wrap: nowrap; overflow-x: auto; padding: 8px 18px 6px; scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.asst-chips.is-compact::-webkit-scrollbar { display: none; }
.asst-chip { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; line-height: 1.35; color: var(--ink-2); text-align: left; cursor: pointer; }
.asst-chips.is-compact .asst-chip { flex: none; white-space: nowrap; }
.asst-chip:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); }
.asst-chip[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.asst-chips.is-compact .asst-chip:focus-visible { outline-offset: -1px; }
.asst-form { padding: 8px 18px 14px; }
.asst-compose { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 14px; border: 1px solid var(--line-2);
  border-radius: 14px; background: var(--surface); }
.asst-compose:focus-within { outline: 3px solid var(--blue); outline-offset: 1px; }
.asst-input { flex: 1; min-width: 0; min-height: 40px; max-height: 168px; padding: 9px 0; border: 0; outline: 0; resize: none;
  background: transparent; font-size: 15px; line-height: 1.45; }
.asst-input::placeholder { color: var(--placeholder); }
.asst-send { display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0;
  border-radius: 10px; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.asst-send:hover { background: var(--accent-hover); }
.asst-send:disabled { opacity: .45; cursor: not-allowed; }
.asst-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; }
.asst-hint { display: flex; justify-content: space-between; gap: 10px; margin: 6px 2px 0; font-size: 12px; color: var(--ink-3); }
.asst-keys.is-wait { color: var(--warn); font-weight: 500; }
.asst-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the peek card (the sheet stepped aside) */
.asst-peek { position: fixed; right: 20px; bottom: 90px; z-index: 60; width: min(360px, calc(100% - 32px)); padding: 12px 14px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lift);
  animation: asst-up .18s ease-out; }
.asst-peek-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.asst-peek-head .asst-head-mark { width: 26px; height: 26px; border-radius: 7px; }
.asst-peek-head .asst-mark { width: 16px; height: 16px; }
.asst-peek-head strong { flex: 1; font-weight: 600; }
.asst-peek-close { width: 30px; height: 30px; font-size: 19px; }
.asst-peek-text { display: -webkit-box; margin: 8px 0 0; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.asst-peek-actions { display: flex; justify-content: flex-end; margin-top: 10px; }

/* ---------------------------------------------------------------- the page beside a docked panel */
@media (max-width: 1579px) {  /* report.css enlarges the A4 sheet from 1180px; beside the panel it fits at 1x */
  body[data-assistant="docked"] .report-sheet:not(.r-measure) { zoom: 1; }
}
@media (max-width: 1339px) {  /* the full nav needs about 890px of page: beside the panel, a 1,340px screen */
  body[data-assistant="docked"] .nav { grid-template-columns: auto 1fr; padding: 12px 20px; }
  body[data-assistant="docked"] .nav-links { display: none; }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 680px) {
  .asst-launcher { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .asst-tip { display: none; }
  .asst-panel { left: 0; width: 100%; border-left: 0; }
  .asst-head { padding: 12px 14px 12px 16px; }
  .asst-scroll { padding: 14px 16px 8px; }
  .asst-chips { padding-inline: 16px; }
  .asst-form { padding: 8px 16px 12px; }
  .asst-peek { right: 12px; left: 12px; bottom: 80px; width: auto; }
  .asst-msg.is-user { max-width: 92%; }
  .footer { padding-bottom: 88px; }  /* the end of the page scrolls clear of the launcher */
}

@media (prefers-reduced-motion: reduce) {
  .asst-panel, .asst-peek, .asst-dots span { animation: none; }
  .asst-launcher, .asst-launcher:hover { transition: none; transform: none; }
  .asst-tip { transition: none; transform: translate(0, -50%); }
}
@media (forced-colors: active) {
  .asst-launcher, .asst-send { border: 2px solid ButtonText; }
  .asst-label-dot { forced-color-adjust: none; }
}
@media print {
  .asst-launcher, .asst-panel, .asst-peek, .asst-backdrop { display: none !important; }
  body[data-assistant] { padding-right: 0 !important; overflow: visible !important; }
}