/* The Assistant (owners and admins): a chat panel on the right, over the page with a light scrim; a 420 px drawer on
   desktop, the whole screen on phones (under 720 px). Colors come from the tokens in style.css (light and dark);
   nothing here hard-codes one. */

/* ---- the top bar's button ---- */

.btn.as-btn { border-color: transparent; background: var(--tint); color: var(--link); }
.btn.as-btn:hover { background: var(--tint-2); }
.btn.as-btn[aria-expanded="true"] { background: var(--primary); color: var(--primary-ink); }
/* An owner's top bar already holds Log in all, Log in new model, Refresh now, the bell and the theme toggle; with the
   label as well it overflows below about 1120 px (sideways page scroll, the page title squeezed away). So there it is
   just the icon, as the other top-bar buttons are on phones; its title and aria-label still name it. */
@media (max-width: 1119px) {
  .top-actions .btn.as-btn { width: 38px; padding: 0; }
  .top-actions .btn.as-btn .lbl { display: none; }
}
/* Between the phone rule (style.css, up to 640 px) and 820 px the labelled Log in all, Log in new model and Refresh
   now leave no room for the page title (an owner's bar scrolled sideways there even before this button). In a bar
   with this button (owners and admins only) they are icons there too, as on phones; their titles still name them. */
@media (max-width: 820px) {
  .top-actions:has(.as-btn) .btn { width: 38px; padding: 0; }
  .top-actions:has(.as-btn) .lbl { display: none; }
}

/* ---- the drawer ---- */

.as-scrim { display: none; }
body.as-open .as-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 44;
  background: color-mix(in srgb, var(--scrim) 45%, transparent);
}
/* Closed, it is hidden from the keyboard and screen readers too (visibility flips after the slide-out). */
.as-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  border-left: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.22s ease, visibility 0s 0.22s;
}
body.as-open .as-panel { visibility: visible; transform: none; transition: transform 0.22s ease; }
body.auth-on .as-panel, body.auth-on .as-scrim { display: none; }

.as-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 16px;
  border-bottom: 1px solid var(--border);
}
.as-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--primary);
  color: var(--primary-ink);
}
.as-mark .ico { width: 19px; height: 19px; }
.as-title { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.as-title h2 { font-size: 16px; line-height: 1.25; }
.as-hint { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.as-new { flex: none; }
.as-new:disabled { opacity: 0.5; cursor: default; }
.as-new:disabled:hover { background: transparent; }

/* ---- the conversation ---- */

.as-body {
  position: relative; /* the messages' offsetTop (scrolling a long answer to its question) */
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px 14px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-2);
}
.as-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: auto 0; font-size: 13.5px; text-align: center; }
.as-center .as-error { text-align: left; }
.as-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.as-msg { display: flex; flex-direction: column; min-width: 0; }
.as-msg.user { align-items: flex-end; }
.as-bubble {
  max-width: 86%;
  padding: 9px 14px;
  border-radius: 16px 16px 5px 16px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.as-msg.user.failed .as-bubble { opacity: 0.7; }
.as-card {
  min-width: 0;
  padding: 12px 14px 8px;
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 5px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  line-height: 1.55;
}

/* the answer's text (views/assistant.js markdown()). break-word, not anywhere: a long URL or token still wraps, but
   the min-content width stays the words' own, so a table's header cells don't split in mid-word ("Diferen|ta"). */
.as-md { overflow-wrap: break-word; }
.as-md > :first-child { margin-top: 0; }
.as-md > :last-child { margin-bottom: 4px; }
.as-md p { margin: 0 0 8px; }
.as-md p.as-h { margin-top: 12px; color: var(--heading); }
.as-md strong { color: var(--heading); font-weight: 600; }
.as-md ul, .as-md ol { margin: 0 0 8px; padding-left: 22px; }
.as-md li + li { margin-top: 3px; }
.as-md code, .as-md pre {
  border-radius: 6px;
  background: var(--surface-2);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}
.as-md code { padding: 1px 5px; }
.as-md pre { margin: 0 0 8px; padding: 8px 10px; overflow-x: auto; white-space: pre; }
.as-md pre code { padding: 0; background: transparent; }

/* tables: the answer's own and the table blocks, scrolling sideways inside the card */
.as-table-wrap { max-width: 100%; margin: 4px 0 10px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; overscroll-behavior-x: contain; }
.as-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; }
.as-table th, .as-table td { padding: 6px 8px; text-align: left; white-space: nowrap; }
.as-table th:first-child, .as-table td:first-child { padding-left: 10px; }
.as-table th:last-child, .as-table td:last-child { padding-right: 10px; }
/* Names may wrap (numbers never do), so a table fits the panel before it has to scroll sideways. */
.as-table td:not(.num) { min-width: 5.5em; white-space: normal; overflow-wrap: break-word; }
.as-table th { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.3; vertical-align: bottom; white-space: normal; }
.as-table td { border-top: 1px solid var(--grid); }
.as-table .num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.as-table strong { color: var(--heading); }

/* display blocks */
.as-block { margin: 8px 0 6px; }
.as-block-title { margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.as-block-more { margin-top: -4px; color: var(--muted); font-size: 12px; }
.as-block .as-table-wrap { margin-bottom: 6px; }
.as-fc { padding: 12px 12px 10px; border-radius: 12px; background: var(--surface-2); }
.as-fc-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.as-fc-nums > div { display: flex; flex-direction: column; min-width: 0; }
.as-fc-nums span { color: var(--muted); font-size: 11.5px; }
.as-fc-nums b { color: var(--heading); font-size: 15px; font-weight: 600; white-space: nowrap; }
.as-fc-nums .likely b { color: var(--link); font-size: 18px; }
.as-fc-bar { position: relative; height: 12px; margin: 14px 2px 10px; border-radius: 6px; background: var(--tint-2); }
.as-fc-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.as-fc-bar .done { left: 0; border-radius: 6px 0 0 6px; background: var(--primary); }
.as-fc-bar .band { top: -3px; bottom: -3px; border-radius: 5px; background: var(--chat); box-shadow: 0 0 0 1px var(--surface-2); }
.as-fc-bar .mark { top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--heading); }
.as-fc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 11.5px; }
.as-fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.as-fc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.as-fc-legend .done { background: var(--primary); }
.as-fc-legend .band { background: var(--chat); }
.as-fc-legend .mark { width: 3px; background: var(--heading); }

/* under an answer: the tools it used, and "Copy" */
.as-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.as-used { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; }
.as-used > .dim { margin-right: 2px; }
.as-tool { padding: 1px 8px; border-radius: 999px; background: var(--tint); color: var(--link); font-size: 11px; font-weight: 500; white-space: nowrap; }
.as-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.as-copy .ico { width: 14px; height: 14px; }
.as-copy:hover { background: var(--surface-2); color: var(--text); }
.as-copy.done { color: var(--good-ink); }

/* the typing indicator */
.as-typing .as-card { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 12px 14px; color: var(--muted); font-size: 13px; }
.as-dots { display: inline-flex; gap: 4px; }
.as-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: 0.35; animation: as-dot 1.2s infinite ease-in-out; }
.as-dots i:nth-child(2) { animation-delay: 0.15s; }
.as-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes as-dot {
  0%, 70%, 100% { opacity: 0.35; transform: none; }
  35% { opacity: 1; transform: translateY(-3px); }
}

/* an error, with "Try again" */
.as-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  border-radius: 12px;
  background: var(--bad-bg);
  color: var(--bad-ink);
  font-size: 13.5px;
}
.as-error > .ico { width: 17px; height: 17px; flex: none; }
.as-error > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.as-error .btn { flex: none; }

/* nothing asked yet: what it knows, and the suggested questions */
.as-empty { display: flex; flex-direction: column; align-items: center; margin: auto 0; padding: 8px 4px; text-align: center; }
.as-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 12px; border-radius: 16px; background: var(--tint); color: var(--primary); }
.as-empty-ico .ico { width: 26px; height: 26px; }
.as-empty h3 { margin: 0 0 6px; color: var(--heading); font-size: 17px; font-weight: 600; }
.as-empty p { max-width: 330px; margin: 0 0 6px; color: var(--text-2); font-size: 13.5px; }
.as-empty p.dim { color: var(--muted); font-size: 12.5px; }
.as-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 12px; }
.as-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.as-chip .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.as-chip:hover { border-color: var(--primary); background: var(--tint); }
.as-chip:hover .ico { color: var(--link); }

/* ---- the composer ---- */

.as-foot { flex: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); }
.as-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.as-compose:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.as-compose textarea {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 38px;
  min-height: 0;
  max-height: 118px; /* 5 lines */
  padding: 9px 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  line-height: 20px;
  resize: none;
}
/* The frame shows the focus (the ring above); the field itself needs no outline of its own. */
.as-compose textarea:focus-visible { outline: none; }
.as-send {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 0;
  border-radius: 11px;
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
}
.as-send .ico { width: 18px; height: 18px; }
.as-send:hover { background: var(--primary-hover); }
.as-send:disabled { opacity: 0.4; cursor: default; }
.as-send:disabled:hover { background: var(--primary); }
.as-foot-hint { display: flex; justify-content: space-between; gap: 8px; min-height: 16px; margin-top: 6px; padding: 0 4px; color: var(--muted); font-size: 11.5px; }
.as-count { margin-left: auto; font-variant-numeric: tabular-nums; }

/* no AI key yet: the setup note instead of the composer */
.as-setup { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--text); font-size: 13px; }
.as-setup > .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--warn-ink); }
.as-setup b { color: var(--heading); font-weight: 600; }
.as-setup p { margin: 2px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.as-setup code { padding: 1px 5px; border-radius: 6px; background: var(--surface); font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; font-size: 12px; }

/* ---- keyboard focus ---- */

.as-chip:focus-visible, .as-copy:focus-visible, .as-send:focus-visible, .as-panel .btn:focus-visible, .as-panel .icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- phones: the whole screen ---- */

@media (max-width: 719px) {
  .as-panel { width: 100vw; height: 100dvh; bottom: auto; border-left: 0; }
  body.as-open { overflow: hidden; } /* the page behind stays still */
  body.as-open .as-scrim { background: transparent; }
  .as-head { padding: calc(8px + env(safe-area-inset-top)) 8px 8px 14px; }
  .as-new span { display: none; } /* just the + icon, its title says "New chat" */
  .as-new { width: 36px; padding: 0; }
  .as-body { padding: 14px 12px 18px; }
  .as-bubble { max-width: 90%; }
  .as-compose textarea { font-size: 16px; } /* no zoom-in on iOS */
}
/* No keyboard shortcuts to show on a touch screen. */
@media (hover: none) and (pointer: coarse) {
  .as-keys { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .as-panel, body.as-open .as-panel { transition: none; }
  .as-dots i { animation: none; opacity: 0.6; }
  .as-chip, .as-compose { transition: none; }
}