/* Ask Claude (#22): the per-target disclosure, the /claude list and the result view.
   Existing tokens only; the violet is the same formula as .runner-claude, so "Drafted by Claude API"
   and "Runs on: Claude API" read as one brand colour. */

/* The disclosure: closed by default, secondary to the page's own action. */
.ask-claude {
  margin-top: 12px;
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}
.ask-claude[open] {
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.ask-claude > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 9px 12px;
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: background-color 160ms;
}
.ask-claude > summary:hover {
  background: var(--surface-3);
}
.ask-title {
  font: 700 15px/1.3 var(--display);
  color: var(--ink);
}
.ask-form {
  display: grid;
  gap: 10px;
  padding: 4px 12px 14px;
}
.ask-form textarea {
  width: 100%;
  min-height: 9em;
  box-sizing: border-box;
}
.ask-usage {
  margin: 0;
  font-weight: 600;
  color: var(--ink-2);
}
.ask-usage.is-at-limit,
.ask-usage.is-over {
  color: var(--warn);
}
.ask-runner {
  margin: 0;
  color: var(--ink-2);
}
.ask-runner.is-warn {
  color: var(--warn);
}
.ask-runner.is-bad {
  color: var(--bad);
  font-weight: 650;
}
.ask-refused,
.ask-limit-warning {
  margin: 0;
  color: var(--warn);
  font-weight: 650;
}
.ask-submit {
  justify-self: start;
}
.ask-panel {
  margin-top: 18px;
}
.ask-panel .ask-claude {
  margin-top: 0;
}
.item-row .ask-claude {
  margin: 10px 0 4px;
}
.task-ask {
  margin: 4px 0 0;
  font-size: 14px;
}

/* State chips that don't exist elsewhere on the desk (text always present; colour is secondary). */
.chip.running {
  background: var(--info-bg);
  color: var(--ink);
}
.chip.refused {
  background: var(--surface-3);
  color: var(--ink-2);
}

/* /claude: one card per request; a four-part row on desktop, two columns on tablet, stacked on phones. */
.ask-head {
  display: grid;
  gap: 6px;
}
.ask-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ask-row {
  display: grid;
  gap: 8px 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.ask-row p {
  margin: 0;
}
.ask-row-main,
.ask-row-side {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
}
.ask-target-title,
.ask-question {
  overflow-wrap: anywhere;
}
.ask-target-title {
  display: block;
  color: var(--ink-2);
  font-size: 15px;
}
.ask-unreadable {
  color: var(--bad);
  font-weight: 650;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .ask-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* /claude/<id>: single column at every width. */
.ask-detail-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  overflow-wrap: anywhere;
}
.ask-facts {
  display: grid;
  gap: 10px;
}
.ask-facts > * {
  margin: 0;
}
.ask-question-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.ask-reason {
  font-weight: 650;
}
.ask-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  font-size: 15px;
}
.ask-stats dt {
  font-weight: 700;
  color: var(--ink-3);
}
.ask-stats dd {
  margin: 0;
}

/* The result: drafted, untrusted text. The border is the trust boundary made visible. */
.claude-result {
  margin-top: 18px;
}
.claude-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.claude-result-head h2 {
  margin: 0;
}
.claude-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 12.5px/1.2 var(--body);
  background: color-mix(in oklab, #7b3fe4 14%, var(--surface));
  color: color-mix(in oklab, #7b3fe4 80%, var(--ink));
  border: 1px solid color-mix(in oklab, #7b3fe4 30%, transparent);
}
.claude-result-body {
  margin: 0;
  max-width: 74ch;
  max-height: 70vh;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 15px/1.6 var(--body);
  padding: 18px 20px;
  border-radius: var(--radius-panel);
  background: var(--surface-2);
  border: 1px solid var(--rule);
}
.ask-decision {
  margin-top: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.ask-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.ask-actions form {
  margin: 0;
}
/* Accept and Discard are separate forms, so desk.js's is-sending only covers the one pressed. Once either
   is on its way, the other can't be clicked either (a quick Accept-then-Discard would otherwise land the
   user on a 409 "Already accepted by <you>" page for their own accept). */
.ask-actions:has(form.is-sending) .btn {
  pointer-events: none;
}
.ask-actions:has(form.is-sending) form:not(.is-sending) .btn {
  opacity: 0.5;
}
.ask-actions .field-help {
  flex-basis: 100%;
  margin: 0;
}

@media (max-width: 639px) {
  .ask-submit {
    justify-self: stretch;
  }
  .ask-actions {
    display: grid;
  }
  .ask-actions .btn {
    width: 100%;
  }
}