/*
 * Agent conversation UI: full-width message blocks (a small role label over a
 * tinted block — user tinted, assistant plain) and collapsible tool-call
 * disclosures. All on design tokens, so light/dark track automatically.
 */

/* Conversation title: the heading text doubles as the rename trigger. Reset
   the button chrome so it reads as the <h1>, then give a subtle hover pill
   (negative margins cancel the padding so the text never shifts) plus a focus
   ring for keyboard users. */
.title-trigger {
  margin: -0.125rem -0.375rem;
  padding: 0.125rem 0.375rem;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
}
.title-trigger:hover {
  background: var(--color-secondary-hover);
}
.title-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Empty-state placeholder: shown until the first message arrives. The
   :has() rule hides it once any message is in the list, including messages
   appended live over Turbo Streams. */
.conversation__empty {
  color: var(--color-text-muted);
  text-align: center;
  /* No top margin: the card's own padding already sets the gap above this, and a
     second margin made the empty state sit too low. Keep bottom spacing only. */
  margin: 0 0 1rem;
}
.conversation:has(.agent-message) .conversation__empty {
  display: none;
}

/* Message blocks. The user reads as a right-aligned bubble; the assistant as a
   small avatar beside a plain-text column (no background block). Inter-message
   spacing is the conversation list's flex gap, so the row itself has no margin. */
.agent-message {
  margin: 0;
}
.agent-message__row {
  display: flex;
}
.agent-message__row--user {
  justify-content: flex-end;
}
.agent-message__bubble {
  max-width: 76%;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--color-accent-subtle);
  color: var(--color-on-accent-subtle);
  line-height: 1.55;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(43, 33, 29, 0.04);
}

.agent-message__col {
  flex: 1 1 auto;
  min-width: 0;
}
.agent-message__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* Thoughts disclosure: a small pill summary, body indented beneath it. */
.agent-message__thoughts {
  margin: 0 0 12px;
}
.agent-message__thoughts-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.agent-message__thoughts-body {
  margin-top: 8px;
  padding: 8px 14px;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Compact "thinking" indicator: no bubble, just a shimmer sweeping across the
   word while the reply streams in. */
.agent-thinking {
  padding: 0.15rem 0.1rem;
  font-size: 0.95rem;
}
.agent-thinking__label {
  background: linear-gradient(
    90deg,
    var(--color-text-muted) 0%,
    var(--color-text-muted) 40%,
    var(--color-text) 50%,
    var(--color-text-muted) 60%,
    var(--color-text-muted) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: agent-thinking-wave 1.5s linear infinite;
}
@keyframes agent-thinking-wave {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .agent-thinking__label {
    animation: none;
    color: var(--color-text-muted);
    -webkit-text-fill-color: var(--color-text-muted);
  }
}

/* Tool-call disclosure */
.tool-call {
  margin: 0.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  font-size: 0.85rem;
}
.tool-call__summary {
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  user-select: none;
  color: var(--color-text);
}
.tool-call__summary code {
  overflow-wrap: anywhere;
}
.tool-call[open] .tool-call__summary {
  border-bottom: 1px solid var(--color-border);
}
.tool-call__detail {
  padding: 0 0.7rem 0.6rem;
}
.tool-call__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0.6rem 0 0.25rem;
}
.tool-call__value {
  margin: 0;
  padding: 0.45rem 0.55rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border-radius: 6px;
}

/* Message composer. A single rounded "shell" holds the persistent <form>
   (textarea + upload previews) and a toolbar beneath it: the attach button on
   the left, the model picker / cost / Send on the right. The composer Stimulus
   controller lives on the shell; Send sits in the toolbar (outside the form) and
   submits via form="composer". The status row is display:contents so Send (and
   any error text, which wraps full-width below) lay out directly in the toolbar. */
.composer-shell {
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface-raised);
  padding: 0.4rem 0.7rem 0.5rem;
  box-shadow: 0 2px 10px rgba(43, 33, 29, 0.05);
}
.composer-shell:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-focus-ring);
}
.composer-shell.composer--dragover {
  border-color: var(--color-accent);
  outline: 2px dashed var(--color-accent);
  outline-offset: 3px;
}
#composer {
  margin: 0;
}
/* Borderless, transparent textarea that blends into the shell. Element-qualified
   to win over the shared `.textarea` rules in forms.css (loaded later). Grows to
   fit content (composer#autogrow sets the height inline); scrolls past
   max-height. */
textarea.composer__input {
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.4rem 0.25rem;
  min-height: 2.5rem;
  max-height: 12rem;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
}
textarea.composer__input:focus {
  outline: none;
  box-shadow: none;
}
/* Toolbar row beneath the textarea. */
.composer__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Claude-style borderless icon button, bottom-left. */
.composer__attach {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  color: var(--color-text-muted);
}
.composer__attach:hover:not(:disabled) {
  background: var(--color-secondary-hover);
}
.composer__attach:disabled {
  opacity: 0.5;
  cursor: default;
}
.composer__send {
  padding: 0.4rem 0.95rem;
}
.composer__status {
  display: contents;
}
.composer__message {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
}
.composer__message--error {
  color: var(--color-danger);
}

/* Attachment list: flex row of image previews and file chips rendered above the
   message body for both user and assistant messages. */
.attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.attachment__image-link { display: inline-flex; line-height: 0; }
.attachment__image { max-height: 12rem; max-width: 100%; border-radius: 10px; border: 1px solid var(--color-border); }
.attachment__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem;
  border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.85rem; text-decoration: none; }

/* Composer attachment previews: flex row of pending/completed upload chips shown
   between the textarea and the toolbar. Each chip has a label and a remove
   button; pending chips are dimmed until the DirectUpload resolves. (Drag-over
   state is handled on .composer-shell above.) */
.composer__previews { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.1rem; }
.composer__chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; }
.composer__chip--pending { opacity: 0.6; }
.composer__chip--error { border-color: crimson; color: crimson; }
.composer__chip-remove { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; }

/* Composer footer: model picker + running conversation cost, rendered in the
   toolbar. margin-left:auto pushes this cluster (and the Send button after it) to
   the right of the attach button. */
.composer__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  margin-left: auto;
}
.composer__footer form {
  margin: 0;
}
/* Compact, auto-width model/thinking selects — overrides the full-width shared .select. */
.composer__model,
.composer__thinking {
  width: auto;
  font-size: 0.8125rem;
  padding: 0.25rem 1.75rem 0.25rem 0.5rem;
}
.composer__cost {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Full-height conversation view (inside .app-main--conversation): slim header,
   a scrolling message region, and the composer pinned at the bottom. */
.conversation-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.conversation-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
/* The new-conversation page's static heading, matching the size of the live
   conversation's rename trigger so the header band doesn't resize on send. */
.conversation-view__new-title {
  margin: 0;
  font-size: 1.25rem;
}
.conversation-view__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.conversation-view__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem;
}
.conversation-view__scroll .conversation {
  max-width: 44rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}
/* The composer "floats": no hard separator — messages fade out behind a
   gradient as they scroll up to it, and the shell lifts off the page. */
.conversation-view__composer {
  padding: 8px 1.25rem 24px;
  background: linear-gradient(to top, var(--color-bg) 55%, transparent);
}
.conversation-view__composer .composer-shell {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}