/*
 * Conversation transcript — an iMessage-style thread of turns. Authorship reads
 * from colour + side: the human's turns are indigo bubbles on the RIGHT, the
 * agent's slate bubbles on the LEFT, each a rounded card with one softened corner
 * for the familiar chat tail.
 *
 * An agent turn's MECHANICS (its tool trace, result, and per-turn cost) live in a
 * separate foldable card BELOW its bubble — amber when it took real tool actions —
 * so the chat reads cleanly and the sandbox stays a debugging surface. The running
 * total sits apart at the foot of the thread.
 */

@layer components {
  .message {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-3);
  }

  .message--human { align-items: flex-end; }  /* what you send — on the right */
  .message--agent { align-items: flex-start; } /* replies from others — on the left */

  .message__bubble {
    max-width: min(80%, 42rem);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xl);
    white-space: pre-wrap;      /* keep the model's line breaks; wrap naturally */
    overflow-wrap: anywhere;
    line-height: var(--leading-snug);
  }

  .message--human .message__bubble {
    background: var(--color-indigo-500);
    color: var(--color-white);
    border-bottom-right-radius: var(--radius-xs);
  }

  .message--agent .message__bubble {
    background: var(--color-slate-200);
    color: var(--color-black);
    border-bottom-left-radius: var(--radius-xs);
  }

  .message__muted { opacity: 0.7; }
  .message__note  { color: var(--color-text-body); }

  /* "Thought for Xs" — a quiet caption under the agent's reply. */
  .message__thought { margin: 0; font-size: var(--text-xs); color: var(--color-text-body); }

  /* The agent "thinking" placeholder — a typing indicator + a live seconds counter,
     shown optimistically while the run is in flight (see thinking_controller.js). */
  .message__bubble--thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-body);
  }

  .thinking-dots { display: inline-flex; gap: 3px; }
  .thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    animation: thinking-bounce 1.2s infinite ease-in-out both;
  }
  .thinking-dots span:nth-child(1) { animation-delay: -0.24s; }
  .thinking-dots span:nth-child(2) { animation-delay: -0.12s; }

  @keyframes thinking-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
    40%           { transform: translateY(-3px); opacity: 0.9; }
  }

  @media (prefers-reduced-motion: reduce) {
    .thinking-dots span { animation: none; opacity: 0.5; }
  }

  /* An approval renders inside its own <turbo-frame>, which is inline by default —
     so its card sized differently from the agent turn cards. Make the frame block
     so the card's max-width resolves against the thread and the two line up. */
  .stack turbo-frame { display: block; }

  /* The turn's mechanics — a foldable card under the bubble. Amber flags a turn
     that took real tool ACTIONS; a plain turn (text only) gets the neutral card. */
  .turn-card {
    max-width: min(80%, 42rem);   /* no wider than the bubble above it */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    font-size: var(--text-sm);
    color: var(--color-text-body);
  }

  .turn-card--actions {
    background: var(--color-amber-100);
    border-color: var(--color-amber-300);
  }

  .turn-card__summary {
    cursor: pointer;
    list-style: none;                 /* hide the default disclosure marker */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-weight: 500;
    color: var(--color-text-heading);
  }

  .turn-card--actions .turn-card__summary { color: var(--color-amber-900); }
  .turn-card__summary::-webkit-details-marker { display: none; }

  .turn-card__meta { font-weight: 400; color: var(--color-text-body); }

  .turn-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-3);
  }

  /* Running total — set apart at the foot of the thread, foldable to the token
     breakdown, so the per-turn costs (in each turn card) and the tally read clearly. */
  .conversation__total {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }

  .conversation__total > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-heading);
  }

  .conversation__total .detail-list { margin-top: var(--space-2); }
}