/* The agents view's own CSS. A plugin view is an iframe of its own, so there is no Tailwind here:
   the house style by hand. Colours are the app's theme variables with the light value as fallback,
   so the view follows the app's light and dark. Square everything, one grey line, muted secondary text. */

.ag-root {
  display: flex;
  height: 100%;
  width: 100%;
  background: var(--jaspers-background, #fff);
  color: var(--jaspers-foreground, #171717);
  font: 13px/1.45 var(--jaspers-font-sans, system-ui, -apple-system, sans-serif);
}

.ag-side {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ag-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-title,
.ag-name {
  font-weight: 600;
}

.ag-spacer {
  flex: 1 1 auto;
}

.ag-muted {
  color: var(--jaspers-muted-foreground, #737373);
}

.ag-error {
  color: var(--jaspers-destructive, #b91c1c);
}

.ag-empty {
  padding: 12px 10px;
}

.ag-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.ag-agent {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-pick {
  flex: 1 1 auto;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ag-pick:hover {
  background: var(--jaspers-muted, #f5f5f5);
}

.ag-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 4px;
}

.ag-body {
  min-width: 0;
}

.ag-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-button {
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid var(--jaspers-primary, #171717);
  background: var(--jaspers-primary, #171717);
  color: var(--jaspers-primary-foreground, #fff);
  font: inherit;
  cursor: pointer;
}

.ag-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.ag-link {
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--jaspers-muted-foreground, #737373);
  font: inherit;
  cursor: pointer;
}

.ag-bar .ag-link {
  padding: 0;
}

.ag-link:hover {
  color: var(--jaspers-foreground, #171717);
}

.ag-danger {
  color: var(--jaspers-destructive, #b91c1c);
}

.ag-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
}

.ag-user {
  margin: 0 0 10px auto;
  max-width: 80%;
  width: fit-content;
  padding: 6px 10px;
  background: var(--jaspers-muted, #f5f5f5);
  white-space: pre-wrap;
}

.ag-answer {
  margin-bottom: 14px;
}

.ag-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ag-head .ag-swatch {
  margin-top: 0;
}

.ag-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ag-searches {
  margin-bottom: 6px;
}

.ag-searches summary {
  cursor: pointer;
}

.ag-search {
  margin: 6px 0 0 12px;
}

.ag-query {
  font-style: italic;
}

.ag-passage {
  margin: 4px 0 0;
  padding-left: 8px;
  border-left: 2px solid var(--jaspers-border, #e5e5e5);
  font-size: 12px;
}

/* The message box: a box of its own, raised off the tile's foot so the tile's handle stays clear of it. */
.ag-composer {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 14px 34px;
}

.ag-compose-box {
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
}

.ag-compose-box:focus-within {
  border-color: var(--jaspers-muted-foreground, #737373);
}

/* Under the words: attachments at the left, the microphone at the right. */
.ag-compose-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 6px;
}

.ag-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  resize: none;
  background: var(--jaspers-background, #fff);
  color: inherit;
  font: inherit;
  outline: none;
}

.ag-offer {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
}

.ag-offer button {
  display: block;
  width: 100%;
  padding: 4px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ag-offer button:hover {
  background: var(--jaspers-muted, #f5f5f5);
}

.ag-failure {
  padding: 6px 10px;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
  color: var(--jaspers-destructive, #b91c1c);
}

.ag-form {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
}

.ag-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.ag-label {
  font-weight: 600;
}

.ag-hint {
  font-size: 12px;
}

.ag-field input,
.ag-field textarea,
.ag-field select {
  box-sizing: border-box;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  border-radius: 0;
  background: var(--jaspers-background, #fff);
  color: inherit;
  font: inherit;
}

.ag-field textarea {
  resize: vertical;
}

.ag-section {
  margin: 14px 0 10px;
  padding-top: 10px;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ag-actions .ag-button {
  margin-left: 0;
}

.ag-doc {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
}

.ag-note {
  padding: 6px 10px;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
  font-size: 12px;
}

/* A folded field: its line, which opens it, names what it holds. */
.ag-fold > summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ag-fold-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 0 14px;
}

.ag-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ag-field .ag-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ag-field .ag-check input {
  width: auto;
}

/* An answer's Markdown, sized for the chat: the markdown plugin's rules, smaller. */
.ag-md {
  overflow-wrap: anywhere;
}

.ag-md :where(p, ul, ol, pre, blockquote, .ag-md-table, .ag-md-footnote) {
  margin: 8px 0 0;
}

.ag-md :where(h1, h2, h3, h4, h5, h6) {
  margin: 12px 0 0;
  font-weight: 600;
  line-height: 1.35;
}

.ag-md :where(*) > :first-child,
.ag-md > :first-child {
  margin-top: 0;
}

.ag-md h1 {
  font-size: 16px;
}

.ag-md h2 {
  font-size: 15px;
}

.ag-md :where(h3, h4, h5, h6) {
  font-size: 13px;
}

/* A line break inside a paragraph stays one. */
.ag-md :where(p, li, th, td) {
  white-space: pre-line;
}

.ag-md .ag-md-html {
  white-space: pre-wrap;
}

.ag-md ul {
  padding-left: 18px;
  list-style: square;
}

.ag-md ol {
  padding-left: 22px;
  list-style: decimal;
}

.ag-md li + li,
.ag-md li > :where(ul, ol) {
  margin-top: 2px;
}

.ag-md li::marker {
  color: var(--jaspers-muted-foreground, #737373);
}

.ag-md .ag-md-task-item {
  list-style: none;
}

.ag-md-task {
  display: inline-block;
  width: 1.3em;
  margin-left: -1.3em;
  color: var(--jaspers-muted-foreground, #737373);
}

.ag-md code {
  padding: 0 4px;
  background: var(--jaspers-muted, #f5f5f5);
  font-family: var(--jaspers-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
}

.ag-md pre {
  padding: 6px 10px;
  background: var(--jaspers-muted, #f5f5f5);
  overflow-x: auto;
  font: 12px/1.5 var(--jaspers-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.ag-md pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.ag-md blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 10px;
  border-left: 2px solid var(--jaspers-border, #e5e5e5);
  color: var(--jaspers-muted-foreground, #737373);
}

.ag-md hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-md a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--jaspers-muted-foreground, #737373);
  text-underline-offset: 2px;
  cursor: pointer;
}

.ag-md a:hover {
  text-decoration-color: var(--jaspers-foreground, #171717);
}

.ag-md-table {
  overflow-x: auto;
}

.ag-md-table table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ag-md-table th,
.ag-md-table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  vertical-align: top;
}

.ag-md-table th {
  font-weight: 600;
  text-align: left;
}

.ag-md-table :where(th, td):first-child {
  padding-left: 0;
}

.ag-md-footnote {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  color: var(--jaspers-muted-foreground, #737373);
  font-size: 12px;
}

.ag-row {
  display: flex;
  gap: 6px;
}

.ag-small {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  border-radius: 0;
  background: var(--jaspers-background, #fff);
  color: inherit;
  font: inherit;
}

.ag-row .ag-button {
  margin-left: 0;
}

.ag-step {
  margin-bottom: 16px;
}

.ag-step-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 0 18px;
}

.ag-command {
  gap: 8px;
  align-items: center;
}

.ag-command code {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  background: var(--jaspers-muted, #f5f5f5);
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
  font: 12px/1.5 var(--jaspers-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.ag-done {
  color: var(--jaspers-foreground, #171717);
}

.ag-gap {
  margin-top: 4px;
}

.ag-model {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 520px;
}

.ag-meter {
  height: 6px;
  background: var(--jaspers-muted, #f5f5f5);
  border: 1px solid var(--jaspers-border, #e5e5e5);
}

.ag-meter-fill {
  height: 100%;
  background: var(--jaspers-primary, #171717);
  transition: width 300ms;
}

/* A part of the side panel: its bar, then its body, which scrolls on its own. */
.ag-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Every section's bar is the same height, its chevron and title in the same place. */
.ag-panel > .ag-bar {
  box-sizing: border-box;
  height: 44px;
  padding: 0 10px;
}

/* The open section is as tall as what it holds, so the bars after it stay close under it; past the
   room there is, it scrolls. */
.ag-panel.ag-open {
  flex: 0 1 auto;
}

.ag-panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* A citation in an answer, and the document window it opens. The mark is the plugin's own colour:
   its dark value is set at the end. */
.ag-cite {
  display: inline-block;
  margin: 0 1px;
  padding: 0 4px;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-muted, #f5f5f5);
  color: var(--jaspers-foreground, #171717);
  font: 11px/16px var(--jaspers-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  vertical-align: 1px;
  cursor: pointer;
}

.ag-cite:hover {
  border-color: var(--jaspers-foreground, #171717);
}

.ag-cite-missing {
  color: var(--jaspers-destructive, #b91c1c);
  cursor: default;
}

.ag-docwin {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100% - 24px));
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.ag-docbody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 14px 24px;
}

.ag-docsection {
  border-bottom: 1px solid var(--jaspers-border, #e5e5e5);
  padding: 4px 0 8px;
}

.ag-dochead {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ag-mark {
  margin: 0 -6px;
  padding: 2px 6px;
  background: var(--ag-mark, #fff3bf);
  border-left: 3px solid var(--ag-mark-edge, #e0a800);
}

@media (prefers-color-scheme: dark) {
  .ag-mark {
    --ag-mark: #3d3200;
    --ag-mark-edge: #c89400;
  }
}

.ag-audit {
  margin-top: 4px;
  font-size: 12px;
}

/* The paperclip beside the message box and its menu, which opens upward. */
.ag-attach {
  position: relative;
  flex: 0 0 auto;
}

.ag-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: none;
  color: var(--jaspers-muted-foreground, #737373);
  cursor: pointer;
}

.ag-icon.ag-danger,
.ag-icon.ag-danger:hover {
  color: var(--jaspers-destructive, #b91c1c);
}

/* A row's icons sit at its right, level with its first line. */
.ag-agent > .ag-icon {
  margin-top: 4px;
}

/* The bars' padding, so a row's last icon lines up under its bar's +. */
.ag-agent > .ag-icon:last-of-type {
  margin-right: 10px;
}

/* A list's + sits at the end of its bar, where a button would. */
.ag-add {
  margin-left: auto;
}

/* Folded, the side panel is only the button that unfolds it. */
.ag-side.ag-folded {
  flex-basis: 40px;
  align-items: center;
  padding-top: 6px;
}

.ag-icon:hover,
.ag-attach:hover > .ag-icon {
  border-color: var(--jaspers-border, #e5e5e5);
  color: var(--jaspers-foreground, #171717);
}

.ag-menu {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 8px;
  z-index: 5;
  min-width: 200px;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.ag-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ag-menu-item:hover {
  background: var(--jaspers-muted, #f5f5f5);
}

.ag-submenu {
  bottom: 0;
  left: 100%;
  min-width: 300px;
  max-height: 320px;
  overflow-y: auto;
  cursor: default;
}

.ag-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 10px;
}

.ag-menu-row .ag-line {
  flex: 1 1 auto;
  min-width: 0;
}

/* A company: its name and buttons, then how far it is in words and as a bar, each across the row. */
.ag-company {
  flex-wrap: wrap;
  padding-bottom: 8px;
}

/* A zero basis keeps the name on the buttons' line, however long it is. */
.ag-company > .ag-doc {
  flex: 1 1 0;
}

.ag-company > .ag-whole,
.ag-company > .ag-meter {
  flex: 0 0 calc(100% - 20px);
  margin: 0 10px;
}

.ag-company > .ag-meter {
  margin-top: 4px;
}

/* The skills an answer loaded and the skill files it read, above its searches. */
.ag-skills {
  margin: 2px 0 4px;
}

/* While an answer is written: the model's latest note, then the step it is on, a light passing over it. */
.ag-working {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.ag-thought {
  color: var(--jaspers-muted-foreground, #737373);
  font-style: italic;
  font-size: 12px;
}

.ag-shimmer {
  width: fit-content;
  background: linear-gradient(
    90deg,
    var(--jaspers-muted-foreground, #737373) 0%,
    var(--jaspers-muted-foreground, #737373) 35%,
    var(--jaspers-foreground, #171717) 50%,
    var(--jaspers-muted-foreground, #737373) 65%,
    var(--jaspers-muted-foreground, #737373) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ag-shimmer 1.8s linear infinite;
}

@keyframes ag-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ag-shimmer {
    animation: none;
    background: none;
    color: var(--jaspers-muted-foreground, #737373);
  }
}

/* Under a finished answer: copy it. */
.ag-answer-foot {
  display: flex;
  margin-top: 2px;
  margin-left: -6px;
}

/* The companies, each a chip, laid out in rows that wrap. */
.ag-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  padding: 10px;
}

.ag-chip-wrap {
  display: inline-flex;
}

.ag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 6px;
  overflow: hidden;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: default;
}

.ag-chip:hover,
.ag-chip-open {
  background: var(--jaspers-muted, #f5f5f5);
}

/* Something failed: the card says what. */
.ag-chip-mark {
  width: 6px;
  height: 6px;
  background: var(--jaspers-destructive, #b91c1c);
}

/* How far reading or embedding is, along the chip's foot. */
.ag-chip-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--jaspers-muted, #f5f5f5);
}

.ag-chip-bar > span {
  display: block;
  height: 100%;
  background: var(--jaspers-primary, #171717);
}

.ag-agent.ag-chip-card {
  position: fixed;
  z-index: 20;
  box-sizing: border-box;
  padding-top: 2px;
  border: 1px solid var(--jaspers-border, #e5e5e5);
  background: var(--jaspers-background, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* The microphone, and what it is doing, at the right under the words. */
.ag-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ag-mic-note {
  overflow: hidden;
  color: var(--jaspers-muted-foreground, #737373);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-mic-on,
.ag-mic-on:hover {
  color: var(--jaspers-destructive, #b91c1c);
}