/* ---- the assistant drawer: the body, the turns, the chips and the foot ----

   The edge tab's own rules stay in brand.css, where the shell lives. Everything
   here belongs to ui/assistant/, one block per module of it. */

/* ui/assistant/drawer.py */

.aucra-chat-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  /* 10px over a 24px row is the 45px head of the drawings
     (section 13, D8). */
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.aucra-chat-title {
  font-weight: 600;
  font-size: 14px;
}
/* The drawings' own sparkle, drawn as a vector rather than the tab's emoji,
   because the head is not the thing that animates (section 13, D9). */
.aucra-chat-spark {
  display: flex;
  align-items: center;
  color: var(--gold-deep);
}
/* The chevron is the control: a dense 18px glyph, with a 24px box around it so
   the target is not smaller than the row it sits in. */
.aucra-chat .aucra-chat-close.q-btn {
  min-height: 24px;
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--muted);
}
.aucra-chat .aucra-chat-close .q-icon {
  font-size: 18px;
}
.aucra-chat .aucra-chat-context {
  padding: 8px 16px 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.aucra-chat .aucra-chat-head .aucra-confirm-row {
  gap: 8px;
}
/* Asking takes a line of its own under the title: the question is one sentence
   and the head is 400px wide, so squeezing both into the title's row pushes the
   title and the close chevron out of it. `hidden` is the class NiceGUI's
   set_visibility adds, so the rule reads the resting state as the drawn one. */
.aucra-chat .aucra-chat-head > .aucra-confirm-row:has(
    > .aucra-confirm-asking:not(.hidden)
  ) {
  flex-basis: 100%;
  order: 1;
}
.aucra-chat .aucra-chat-head .aucra-confirm-question {
  flex-basis: 100%;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.aucra-chat .aucra-chat-head .aucra-btn.q-btn {
  min-height: 24px;
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.aucra-chat .aucra-chat-head .aucra-btn.q-btn .q-icon {
  font-size: 14px;
}

/* ui/assistant/transcript.py */

.aucra-chat .aucra-chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text);
  font-size: 0.92rem;
}
.aucra-chat-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aucra-chat-turn.aucra-chat-answer {
  gap: 8px;
}
.aucra-chat-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.aucra-chat-eyebrow-gold {
  color: var(--gold-deep);
}
.aucra-chat-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.aucra-chat-foot {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}
.aucra-chat-failure {
  font-size: 0.81rem;
  line-height: 1.5;
  color: #b45309;
}
.aucra-chat-empty {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--muted);
}
.aucra-chat-thinking {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.81rem;
  color: var(--muted);
}
.aucra-chat-ring {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold-deep);
  animation: aucra-chat-spin 0.9s linear infinite;
}
@keyframes aucra-chat-spin {
  to {
    transform: rotate(360deg);
  }
}
.aucra-chat-end {
  height: 1px;
}

/* ui/assistant/chips.py */

.aucra-chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aucra-chat-chips .aucra-place-link {
  font-size: 0.75rem;
}
.aucra-chat .aucra-source-chip[aria-expanded="true"] {
  border-color: var(--gold-deep);
  background: var(--gold-wash);
}

/* ui/assistant/chip_card.py: the passage or the clause's words, unfolded under
   the chip row inside the drawer rather than over the page beside it (the
   user's decision of 2026-09-15). The gold rule on its left marks a quotation,
   as the chip that opened it is marked while the card is open. */
.aucra-chat-card {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  border-radius: 6px;
  background: var(--wash-band);
  animation: aucra-chat-card-in 0.14s ease-out;
}
.aucra-chat-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aucra-chat-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 4px 12px;
}
.aucra-chat-card-head .aucra-passage-source {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.aucra-chat-card-head .aucra-btn.q-btn {
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.aucra-chat-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 0 12px 10px;
}
.aucra-chat-card-foot {
  padding: 0 12px 10px;
}
@keyframes aucra-chat-card-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .aucra-chat-card {
    animation: none;
  }
}

/* ui/assistant/starters.py */

.aucra-chat-starters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
button.aucra-chat-starter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 5px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  transition: color 0.15s, border-color 0.15s;
}
button.aucra-chat-starter:hover {
  color: var(--text);
  border-color: var(--gold-deep);
}
/* Once the conversation has a turn the starters sit under the box, on one
   small line that wraps. */
.aucra-chat-try {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 10px;
}
.aucra-chat-try-label {
  font-size: 0.7rem;
  color: var(--muted);
}
.aucra-chat-starters.aucra-chat-try-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.aucra-chat-try-row button.aucra-chat-starter {
  min-height: 22px;
  padding: 2px 8px;
  font-size: 0.7rem;
}

/* ui/assistant/ask_box.py */

/* NiceGUI's drawer column leaves its children at their own width, which is why
   the head and the body carry w-full. Without this the foot shrank to the box's
   own 168px inside a 400px drawer (section 13, D1 and D2). */
.aucra-chat .aucra-chat-input {
  width: 100%;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
}
.aucra-chat-ask-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.aucra-chat-box {
  flex: 1;
  min-width: 0;
}
/* One line at rest, four at most: Quasar's autogrow keeps the box at the height
   of its text, and the cap turns the fifth line into a scroll. The cap is the
   four line heights themselves, so the fourth line is the last one whole
   (section 13, D19). */
.aucra-chat-box textarea {
  max-height: calc(1.45em * 4);
  font-size: 0.84rem;
  line-height: 1.45;
}
/* Disabled, on a page with no product or no model: the box fills with mist and
   Ask reads as the flat control it is (section 13, D17 and D18). */
.aucra-chat-box.q-field--disabled .q-field__control {
  background: var(--mist);
}
/* Quasar paints a coloured button `bg-primary text-white` and fades a disabled
   one to 0.7, all three with !important inside its own cascade layer, where an
   unlayered !important cannot reach them however specific it is (measured: the
   ink face and the white label stood while the box beside it filled with mist).
   An important declaration in an earlier layer does win, and NiceGUI declares
   `base` before `quasar`, which is the `q-notification` block in content.css. */
@layer base {
  .aucra-chat .aucra-chat-ask.q-btn[disabled],
  .aucra-chat .aucra-chat-ask.q-btn.disabled {
    background: var(--mist) !important;
    color: var(--placeholder) !important;
    border: 1px solid var(--line) !important;
    cursor: default !important;
    opacity: 1 !important;
  }
}
.aucra-chat .aucra-chat-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 6px;
  font-size: 0.75rem;
  color: var(--muted);
}
.aucra-chat-link {
  color: var(--gold-deep);
}

@media (prefers-reduced-motion: reduce) {
  .aucra-chat-ring {
    animation: none;
  }
  button.aucra-chat-starter {
    transition: none;
  }
}

/* ui/assistant/fill_starter.py: the one starter that acts. It sends at once,
   so it carries the gold mark the Suggest button carries. */
button.aucra-chat-starter.aucra-chat-fill {
  color: var(--gold-deep);
  border-color: var(--gold-deep);
}
button.aucra-chat-starter.aucra-chat-fill[disabled] {
  color: var(--placeholder);
  border-color: var(--line);
  cursor: default;
}
.aucra-chat-fill-icon {
  font-size: 0.9rem;
}
.aucra-chat-fill-note {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ui/assistant/batch_card.py: a batch of changes to apply (docs/plans/
   ai-actions.md section 3). */
.aucra-chat-batch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-deep);
  border-radius: 6px;
  background: var(--wash-band);
}
.aucra-chat-batch-head {
  font-size: 0.81rem;
  font-weight: 600;
  line-height: 1.45;
}
.aucra-chat-step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.aucra-chat-step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.aucra-chat-step-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
}
.aucra-chat-step-value {
  font-size: 0.8rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.aucra-chat-step-source {
  align-self: flex-start;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--muted);
}
.aucra-chat-step-replaces {
  font-size: 0.72rem;
  color: var(--warn);
}
.aucra-chat-step-low {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--warn);
}
.aucra-chat-step-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}
.aucra-chat-step-outcome {
  font-size: 0.74rem;
  font-weight: 600;
}
.aucra-chat-step-not-applied {
  color: var(--muted);
}
.aucra-chat-step-done {
  color: var(--pass);
}
.aucra-chat-step-refused,
.aucra-chat-step-failed {
  color: var(--warn);
}
.aucra-chat-batch-abstained {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.aucra-chat-batch-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.aucra-chat-batch-done {
  font-size: 0.8rem;
  font-weight: 600;
}
.aucra-chat-batch-open {
  font-size: 0.8rem;
  font-weight: 600;
}