/* A failure notice (failure.js): a neutral fill with a light danger tint, a
 * small danger mark, the sentence in ink, Retry and Details as quiet
 * actions, the raw text in a well once Details opens. No border, no accent
 * bar; it sits in the answer column (transcript.css). Retry shows only
 * under the last run and never while one works. */

.turn-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-2);
  max-width: min(100%, 46rem);
  padding: var(--sv-space-3) var(--sv-space-4) var(--sv-space-2) var(--sv-space-3);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sv-danger) 6%, var(--sv-surface));
  color: var(--sv-ink);
  font-size: var(--ui-text);
  animation: sv-enter-msg var(--sv-dur-base) var(--sv-ease-out) both;
}
.te-mark { flex: none; display: inline-flex; padding-top: 3px; color: var(--sv-danger); }
.te-mark .icon { width: 15px; height: 15px; }
.te-body { flex: 1; min-width: 0; display: grid; gap: var(--sv-space-1); }
.te-text { margin: 0; line-height: 1.5; }
.te-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); margin-left: calc(-1 * var(--sv-space-2)); }
.te-actions button.ghost { min-height: 28px; padding: 0 var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.te-actions button.ghost:hover { color: var(--sv-ink); }
.te-actions button.te-retry { color: var(--sv-ink); }
.te-actions .icon { width: 14px; height: 14px; margin-right: var(--sv-space-1); }
.te-raw {
  margin: var(--sv-space-1) 0 var(--sv-space-1);
  padding: var(--sv-space-2) var(--sv-space-3);
  max-height: 12rem;
  overflow: auto;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sv-ink) 5%, transparent);
  color: var(--sv-ink-secondary);
  font: 0.8125rem/1.5 var(--sv-font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A later input, or a run at work: this failure is history, nothing to retry. */
.turn-error:has(~ [data-run-input]) .te-retry,
.turn-error:has(~ .turn-user) .te-retry,
body:has(#stop:not([hidden])) .turn-error .te-retry { display: none; }
@media (hover: none) and (pointer: coarse) { .te-actions button.ghost { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .turn-error { animation: none; } }