/*
 * Farron Assistant — domain layout only.
 *
 * The page is one panel that fills the content column: a conversation rail
 * beside a thread that scrolls inside its own box, with the composer at the
 * bottom of that box rather than pinned to the viewport. There is no page
 * heading card — the shell already marks where you are, and a band repeating it
 * spent 62px of the thread on every visit. Identity lives in the rail head, and
 * on a phone in a slim bar inside the card.
 *
 * The mobile composition is written against the shell's own breakpoint (1199px),
 * because that is where the sidebar disappears and the floating bottom bar
 * appears.
 */

/* ---------------------------------------------------------------- page shell */

.fs-assistant-page {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  height: 100%;
  min-height: 0;
}

/* The conversation is edge-to-edge inside the card, so the card keeps no padding. */
.fs-assistant-card {
  display: grid;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.fs-assistant-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 268px) minmax(0, 1fr);
  min-height: 0;
  transition: grid-template-columns 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fs-assistant-workspace {
    transition: none;
  }
}

/* Only the phone needs these: on desktop the rail is already on the page. */
.fs-assistant-chat__bar,
.fs-assistant-history__backdrop {
  display: none;
}

/* ------------------------------------------------------------ conversations */

.fs-assistant-history {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  padding: 12px 10px;
  background: var(--fs-color-surface-subtle);
  border-right: 1px solid var(--fs-color-border-subtle);
}

.fs-assistant-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  margin-bottom: 10px;
}

/*
 * The name of the thing lives here now, next to its mark. It is not an <h1> —
 * the page states that once, for assistive technology, at the top of `main`.
 */
.fs-assistant-history__identity,
.fs-assistant-chat__identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fs-assistant-history__identity img,
.fs-assistant-chat__identity img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.fs-assistant-history__identity > span,
.fs-assistant-chat__identity > span {
  overflow: hidden;
  color: var(--fs-color-text);
  font-size: var(--fs-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-assistant-history__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fs-assistant-history__collapse .action-button__icon {
  transition: transform 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fs-assistant-history__collapse .action-button__icon {
    transition: none;
  }
}

.fs-assistant-history__list {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}

.fs-assistant-history__empty {
  align-self: start;
  margin: 4px 4px 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}

/*
 * One track, not two. A second column for the row's actions costs the title a
 * third of the rail permanently — and the actions are not even on screen most
 * of the time. They overlay the end of the title instead, on the row's own
 * surface, which is why that surface is a variable: the fade behind them has to
 * be whatever the row currently is.
 */
.fs-assistant-history__row {
  --fs-assistant-row-surface: transparent;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  background: var(--fs-assistant-row-surface);
  border: 1px solid transparent;
  border-radius: var(--fs-radius-md);
}

/*
 * Selected and hovered are two different things, so they take two different
 * families: the selected row uses the product's one selection tone, hover keeps
 * the warm neutral that means "under the pointer" everywhere else.
 */
.fs-assistant-history__row.is-active {
  --fs-assistant-row-surface: var(--fs-color-selected);
  border-color: var(--fs-color-selected-line);
}

@media (hover: hover) {
  .fs-assistant-history__row:hover:not(.is-active) {
    --fs-assistant-row-surface: var(--fs-color-surface-hover);
    border-color: var(--fs-color-border-subtle);
  }
}

/* Reaching the actions by keyboard must give them the same backing as hover. */
.fs-assistant-history__row:focus-within:not(.is-active) {
  --fs-assistant-row-surface: var(--fs-color-surface-hover);
  border-color: var(--fs-color-border-subtle);
}

.fs-assistant-history__open {
  overflow: hidden;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--fs-color-text);
  background: transparent;
  border: 0;
  border-radius: var(--fs-radius-md);
  font: inherit;
  font-size: var(--fs-text-sm);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.fs-assistant-history__row.is-active .fs-assistant-history__open {
  color: var(--fs-color-selected-text);
  font-weight: 600;
}

.fs-assistant-history__open:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-history__actions {
  position: absolute;
  top: 50%;
  right: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 24px;
  transform: translateY(-50%);
  background: linear-gradient(to right, transparent, var(--fs-assistant-row-surface) 24px);
}

/*
 * A pointer can reveal the row's actions; a finger cannot, and neither can the
 * row that is already the open conversation.
 */
@media (hover: hover) and (min-width: 1200px) {
  .fs-assistant-history__row:not(.is-active) .fs-assistant-history__actions {
    visibility: hidden;
  }

  .fs-assistant-history__row:hover .fs-assistant-history__actions,
  .fs-assistant-history__row:focus-within .fs-assistant-history__actions {
    visibility: visible;
  }
}

/* Collapsed rail: mark, new conversation, and the control that opens it again. */
.fs-assistant-workspace.is-history-collapsed {
  grid-template-columns: 52px minmax(0, 1fr);
}

.fs-assistant-workspace.is-history-collapsed .fs-assistant-history {
  padding-inline: 8px;
}

.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__head {
  flex-direction: column;
  gap: 6px;
}

.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__tools {
  flex-direction: column;
}

.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__identity > span,
.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__list,
.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__empty {
  display: none;
}

.fs-assistant-workspace.is-history-collapsed .fs-assistant-history__collapse .action-button__icon {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------- thread */

.fs-assistant-chat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.fs-assistant-chat__bar {
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--fs-color-surface);
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * No artwork behind the conversation — working panels carry no ornament. The
 * single track is what keeps a line of text readable on a wide monitor: without
 * it the thread starts at the left edge of a 1100px column and the eye has to
 * travel back across the whole panel for every line.
 */
.fs-assistant-thread {
  display: grid;
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 20px;
  background: var(--fs-color-surface);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * Messages stack from the top; the greeting is the exception. Alone in the box
 * it takes the middle of it, otherwise it hangs off the top edge with an empty
 * screen under it.
 */
.fs-assistant-thread:has(> [data-assistant-blank]) {
  align-content: center;
}

.fs-assistant-thread:focus-visible {
  outline: none;
  box-shadow: inset var(--fs-focus-ring);
}

.fs-assistant-blank {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 46ch;
  margin-inline: auto;
  color: var(--fs-color-text-secondary);
  text-align: center;
}

.fs-assistant-blank__mark {
  width: auto;
  height: auto;
  max-width: min(180px, 60vw);
  max-height: 44px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.fs-assistant-blank strong {
  color: var(--fs-color-text);
  font-size: var(--fs-text-lg);
  font-weight: 700;
}

.fs-assistant-blank p {
  margin: 0;
  font-size: var(--fs-text-sm);
}

/* ----------------------------------------------------------------- messages */

/*
 * A bubble is as wide as what it says, up to a readable measure. Stretched to
 * the column the way a grid item is by default, a two-word answer arrived as a
 * band across the thread and the short pending state as an empty one.
 */
.fs-assistant-message {
  justify-self: start;
  width: fit-content;
  max-width: min(72ch, 88%);
  padding: 10px 14px;
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-lg);
}

.fs-assistant-message--user {
  justify-self: end;
  color: var(--fs-color-surface);
  background: var(--fs-color-primary);
  border-color: var(--fs-color-primary);
}

/*
 * A failed answer is not an answer. It takes the danger surface, says what
 * happened, and offers the one useful next step instead of pretending to be a
 * reply the model never gave.
 */
.fs-assistant-message--error {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
  border-color: var(--fs-color-danger-line);
}

/* A table needs the width; a sentence does not. */
.fs-assistant-message--wide {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.fs-assistant-message p {
  margin: 0;
  font-size: var(--fs-text-md);
  line-height: 1.55;
}

.fs-assistant-message > p {
  white-space: pre-wrap;
}

/* The answer is on its way: a state, not a message pretending to be one. */
.fs-assistant-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 21px;
}

.fs-assistant-typing__dot {
  width: 6px;
  height: 6px;
  background: var(--fs-color-text-muted);
  border-radius: var(--fs-radius-pill);
  animation: fs-assistant-typing 1.1s ease-in-out infinite;
}

.fs-assistant-typing__dot:nth-child(2) {
  animation-delay: 0.16s;
}

.fs-assistant-typing__dot:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes fs-assistant-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
  }

  30% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-assistant-typing__dot {
    animation: none;
    opacity: 0.6;
  }
}

/* --------------------------------------------------- sources, trace, footer */

.fs-assistant-sources,
.fs-assistant-trace {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--fs-color-border-subtle);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

.fs-assistant-sources > strong,
.fs-assistant-trace summary {
  font-weight: 600;
}

.fs-assistant-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
}

.fs-assistant-sources a {
  color: var(--fs-color-primary-text);
  overflow-wrap: anywhere;
}

.fs-assistant-sources a:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-trace summary {
  width: fit-content;
  cursor: pointer;
}

.fs-assistant-trace summary:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-trace ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.fs-assistant-message__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-assistant-message__copy {
  color: var(--fs-color-text-secondary);
  box-shadow: none;
}

.fs-assistant-feedback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
}

/*
 * "What should be better?" is asked in the answer it is about, not in a browser
 * prompt over the whole window — the reason is optional, and a modal for an
 * optional sentence reads as a demand.
 */
.fs-assistant-feedback__reason {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}

.fs-assistant-feedback__reason input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-sm);
  font: inherit;
  font-size: var(--fs-text-sm);
}

.fs-assistant-feedback__reason input:focus {
  border-color: var(--fs-color-primary);
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

/* -------------------------------------------------------------- attachments */

.fs-assistant-attachments {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.fs-assistant-attachments__label {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 600;
}

.fs-assistant-attachment {
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-assistant-attachment__head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.fs-assistant-attachment__head > img {
  width: 28px;
  height: 28px;
}

.fs-assistant-attachment__identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.fs-assistant-attachment__identity strong,
.fs-assistant-attachment__identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-assistant-attachment__identity small {
  color: var(--fs-color-text-secondary);
}

.fs-assistant-attachment__preview {
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-assistant-attachment__preview > summary {
  padding: 9px 12px;
  color: var(--fs-color-primary-text);
  cursor: pointer;
  font-size: var(--fs-text-sm);
  font-weight: 600;
}

.fs-assistant-attachment__preview > summary:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-attachment__content {
  min-height: 48px;
  padding: 0 10px 10px;
  color: var(--fs-color-text-secondary);
  overflow: hidden;
}

.fs-assistant-attachment__content > .fs-spreadsheet {
  color: var(--fs-color-text);
  background: var(--fs-color-surface);
}

.fs-assistant-attachment__content.is-error {
  color: var(--fs-color-danger-text);
}

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

.fs-assistant-composer {
  display: grid;
  padding: 12px 20px 16px;
  background: var(--fs-color-surface);
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-assistant-composer__column {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}

/*
 * Attached records read as one row of pills, not as a list: three of them must
 * still leave the field its own line. The chip carries the one selection tone
 * the product already uses for "this is the record you are working on".
 */
.fs-assistant-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.fs-assistant-context__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  background: var(--fs-color-selected);
  border: 1px solid var(--fs-color-selected-line);
  border-radius: var(--fs-radius-pill);
  color: var(--fs-color-selected-text);
  font-size: var(--fs-text-sm);
}

.fs-assistant-context__glyph {
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask: var(--fs-assistant-chip-icon) center / 16px 16px no-repeat;
}

.fs-assistant-context__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-assistant-context__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--fs-radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.fs-assistant-context__remove::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentcolor;
  mask: url("/stoneware/icons/close.svg") center / 12px 12px no-repeat;
}

@media (hover: hover) {
  .fs-assistant-context__remove:hover {
    background: var(--fs-color-surface);
  }
}

/*
 * What can be asked about the attachment, offered as words instead of left to
 * be guessed. These are quiet soft actions: the one emphatic control on the
 * composer stays "Надіслати".
 */
.fs-assistant-context-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --------------------------------------------------------------- add menu */

.fs-assistant-menu {
  display: grid;
  gap: 2px;
  max-height: 320px;
  padding: 8px;
  overflow-y: auto;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-card);
  box-shadow: var(--fs-shadow-md);
}

.fs-assistant-menu__group {
  margin: 0;
  padding: 8px 10px 4px;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fs-assistant-menu__group:not(:first-child) {
  border-top: 1px solid var(--fs-color-border-subtle);
  margin-top: 6px;
}

.fs-assistant-menu__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-control);
  background: transparent;
  color: var(--fs-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .fs-assistant-menu__item:hover {
    background: var(--fs-color-surface-hover);
    border-color: var(--fs-color-border-subtle);
  }
}

.fs-assistant-menu__item:focus-visible {
  outline: none;
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-menu__icon {
  width: 20px;
  height: 20px;
  background-color: var(--fs-color-text-secondary);
  mask: var(--fs-assistant-menu-icon) center / 20px 20px no-repeat;
}

.fs-assistant-menu__hint {
  grid-column: 2;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- picker */

.fs-assistant-picker {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-card);
  box-shadow: var(--fs-shadow-md);
}

.fs-assistant-picker__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.fs-assistant-picker__head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-assistant-search {
  display: grid;
  gap: 8px;
}

.fs-assistant-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--fs-color-field-line);
  border-radius: var(--fs-radius-control);
  background: var(--fs-color-field);
  color: var(--fs-color-text);
  font: inherit;
}

.fs-assistant-search input:focus-visible {
  outline: none;
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-search__status {
  margin: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}

.fs-assistant-search__results {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.fs-assistant-search__results button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--fs-radius-control);
  background: transparent;
  color: var(--fs-color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .fs-assistant-search__results button:hover {
    background: var(--fs-color-surface-hover);
    border-color: var(--fs-color-border-subtle);
  }
}

.fs-assistant-search__results button:focus-visible {
  outline: none;
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-search__results small {
  color: var(--fs-color-text-muted);
}

.fs-assistant-voice.is-recording {
  border-color: var(--fs-color-danger);
  color: var(--fs-color-danger);
}

.fs-assistant-context[hidden],
.fs-assistant-context-actions[hidden],
.fs-assistant-menu[hidden],
.fs-assistant-picker[hidden] { display: none; }

/*
 * The field is the control, not the textarea. Adding, dictating and sending
 * each own a column beside the text instead of floating over it, so no offset
 * has to be re-guessed against a padding change, and the row still collapses
 * correctly when a deployment has no context providers and no transcriber.
 */
.fs-assistant-composer__field {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 6px 6px 6px;
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-card);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

@media (prefers-reduced-motion: reduce) {
  .fs-assistant-composer__field {
    transition: none;
  }
}

.fs-assistant-composer__field:focus-within {
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-assistant-composer__add,
.fs-assistant-composer__trailing {
  flex: none;
  align-self: flex-end;
}

.fs-assistant-composer__trailing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*
 * 24px of text plus 5px above and below is exactly the 34px of the icon buttons
 * beside it, so an empty composer is one clean line with nothing sitting proud.
 */
.fs-assistant-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 24px;
  max-height: 168px;
  padding: 5px 4px;
  color: var(--fs-color-text);
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--fs-text-md);
  line-height: 1.5;
  overflow-y: hidden;
  resize: none;
}

.fs-assistant-composer textarea::placeholder {
  color: var(--fs-color-text-muted);
}

.fs-assistant-composer__hint {
  margin: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
}

/* ------------------------------------------------------------ quick action */

/*
 * The card is a two-column form, not a stack: a quantity and its unit are one fact and stand on
 * one row. A field says its own width, so the card needs no per-feature layout — and a feature
 * needs no markup of its own to get one.
 */
.fs-assistant-quick-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fs-space-3);
}

.fs-assistant-quick-action__cell,
.fs-assistant-quick-action__section,
.fs-assistant-quick-action__error {
  grid-column: 1 / -1;
}

.fs-assistant-quick-action__cell--half {
  grid-column: span 1;
}

/* Names the part of the record the next fields belong to; it is a label, not a heading. */
.fs-assistant-quick-action__section {
  margin-top: var(--fs-space-1);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-assistant-quick-action__hint {
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-weight: 400;
}

@media (max-width: 560px) {
  .fs-assistant-quick-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-assistant-quick-action__cell--half {
    grid-column: 1 / -1;
  }
}

.fs-assistant-quick-action__picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--fs-color-field-line);
  border-radius: var(--fs-radius-control);
  background: var(--fs-color-field);
}

.fs-assistant-quick-action__picked.is-empty {
  background: var(--fs-color-required-subtle);
  border-color: var(--fs-color-required-line);
}

.fs-assistant-quick-action__picked span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-assistant-quick-action__error {
  margin: 0;
  color: var(--fs-color-danger-text);
  font-size: var(--fs-text-sm);
}

/*
 * The act an answer offers. It sits under the text and above the footer, where the reader has
 * finished the answer and is deciding what to do — not beside the copy action, which is about
 * the answer rather than about the work.
 */
.fs-assistant-suggestion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-3);
}

/* ------------------------------------------------------------------ dialogs */

.fs-assistant-dialog-form {
  display: grid;
  gap: 12px;
}

.fs-assistant-dialog-subject {
  margin: 0;
  color: var(--fs-color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ shell action */

.fs-shell-action--assistant.fs-shell-action--active {
  background: var(--fs-color-primary-subtle);
  border-color: var(--fs-color-primary-line);
}

/* -------------------------------------------------------- knowledge page */

.fs-assistant-knowledge-page {
  align-content: start;
}

.fs-assistant-knowledge-tabs {
  display: flex;
  gap: 8px;
}

.fs-assistant-knowledge-tabs a {
  padding: 8px 12px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-primary-line);
  border-radius: var(--fs-radius-md);
  font-weight: 600;
  text-decoration: none;
}

.fs-assistant-knowledge-section {
  display: grid;
  gap: 12px;
}

.fs-assistant-knowledge-section > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.fs-assistant-knowledge-section h2,
.fs-assistant-knowledge-section header p,
.fs-assistant-document-list p {
  margin: 0;
}

.fs-assistant-knowledge-section header p {
  margin-top: 4px;
  color: var(--fs-color-text-secondary);
}

.fs-assistant-knowledge-section > header > span {
  padding: 4px 9px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border-radius: var(--fs-radius-md);
  font-weight: 700;
}

.fs-assistant-tool-card,
.fs-assistant-document-list article {
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-assistant-tool-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
}

.fs-assistant-tool-card summary > span:first-child {
  display: grid;
  gap: 3px;
}

.fs-assistant-tool-card code {
  overflow-wrap: anywhere;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
}

.fs-assistant-tool-card__effect {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

.fs-assistant-tool-card > div {
  padding: 0 12px 12px;
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-assistant-tool-card dl,
.fs-assistant-document-list dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 12px;
  margin: 10px 0 0;
}

.fs-assistant-tool-card dt,
.fs-assistant-document-list dt {
  color: var(--fs-color-text-muted);
}

.fs-assistant-tool-card dd,
.fs-assistant-document-list dd {
  margin: 0;
}

.fs-assistant-document-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-assistant-document-form label {
  display: grid;
  gap: 5px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 600;
}

.fs-assistant-document-form input,
.fs-assistant-document-form select {
  min-height: 42px;
  padding: 8px 10px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-md);
  font: inherit;
}

.fs-assistant-document-form .action-button {
  align-self: end;
  justify-self: start;
}

.fs-assistant-document-list {
  display: grid;
  gap: 8px;
}

.fs-assistant-document-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 12px;
}

.fs-assistant-knowledge-empty,
.fs-assistant-knowledge-notice {
  margin: 0;
  padding: 12px;
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-surface-subtle);
  border-radius: var(--fs-radius-md);
}

/* =========================================================== mobile / tablet
 *
 * Same breakpoint as the shell: below it there is no sidebar and no top bar,
 * and a floating bottom bar covers the last 88px of the page.
 */
@media (max-width: 1199px) {
  .fs-assistant-page {
    height: auto;
    /*
     * Stoneware keeps 78px under the last block of every page so the floating
     * bar cannot cover it. This page's last block is a card that already ends
     * above the bar — the shell's own 88px does that — so the second reserve is
     * 78px of dead scroll under a screen meant to hold exactly one.
     */
    padding-bottom: 0;
  }

  /*
   * A definite height, not a minimum: with `min-height` the thread grows the
   * card instead of scrolling inside it, and the composer ends up below the
   * fold after the third answer. 98px is what the screen spends around it —
   * the shell's bar clearance plus the content padding.
   */
  .fs-assistant-card {
    height: calc(100dvh - 98px - env(safe-area-inset-bottom));
    min-height: 420px;
  }

  .fs-assistant-workspace {
    grid-template-columns: minmax(0, 1fr);
    isolation: isolate;
  }

  /* Bar, thread, composer — the bar is what makes the drawer reachable at all. */
  .fs-assistant-chat {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .fs-assistant-chat__bar {
    display: flex;
  }

  .fs-assistant-chat__bar .action-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
  }

  /* The rail becomes a drawer over the conversation, not a column beside it. */
  .fs-assistant-history {
    position: absolute;
    z-index: 3;
    inset: 0 auto 0 0;
    width: min(86%, 320px);
    box-sizing: border-box;
    padding: 12px;
    border-right: 0;
    box-shadow: var(--fs-shadow-md);
    transform: translateX(-102%);
    transition: transform 0.18s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .fs-assistant-history {
      transition: none;
    }
  }

  .fs-assistant-workspace.is-history-open .fs-assistant-history {
    transform: translateX(0);
  }

  /* Collapsing is a desktop preference; the drawer is either open or closed. */
  .fs-assistant-workspace.is-history-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history {
    padding: 12px;
  }

  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__head,
  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__tools {
    flex-direction: row;
  }

  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__identity > span,
  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__empty {
    display: block;
  }

  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__list {
    display: grid;
  }

  .fs-assistant-workspace.is-history-collapsed .fs-assistant-history__collapse .action-button__icon {
    transform: none;
  }

  .fs-assistant-history__head .action-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
  }

  .fs-assistant-history__backdrop {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    padding: 0;
    background: rgb(40 34 26 / 36%);
    border: 0;
  }

  /*
   * A finger cannot hover, so the actions are always on the row — and once they
   * are always there, the title gets a real gutter instead of running under
   * them. Every target grows to the mobile minimum.
   */
  .fs-assistant-history__row {
    --fs-assistant-row-surface: var(--fs-color-surface);
    border-color: var(--fs-color-border-subtle);
  }

  .fs-assistant-history__row.is-active {
    --fs-assistant-row-surface: var(--fs-color-selected);
    border-color: var(--fs-color-selected-line);
  }

  .fs-assistant-history__open {
    min-height: 44px;
    padding-right: 88px;
    font-size: var(--fs-text-md);
  }

  .fs-assistant-history__actions .action-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .fs-assistant-thread {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }

  .fs-assistant-message {
    max-width: 92%;
  }

  .fs-assistant-blank__mark {
    max-height: 38px;
  }

  .fs-assistant-composer {
    padding: 10px 12px 12px;
  }

  .fs-assistant-composer__field {
    padding: 5px;
  }

  /* Safari on iPhone zooms the page when a focused control is under 16px. */
  .fs-assistant-composer textarea,
  .fs-assistant-feedback__reason input {
    font-size: 16px;
  }

  /* 30px of text plus 5px either side matches the 40px mobile send button. */
  .fs-assistant-composer textarea {
    min-height: 30px;
  }

  .fs-assistant-composer__send {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
  }

  .fs-assistant-feedback__reason input {
    min-height: 40px;
  }

  /* The keyboard already occupies the screen; the hint would be the only line left. */
  .fs-assistant-composer__hint {
    display: none;
  }

  .fs-assistant-message__footer {
    gap: 8px;
  }

  .fs-assistant-document-form,
  .fs-assistant-document-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .fs-assistant-attachment__head {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .fs-assistant-attachment__head .action-button {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}