/* reply.js: the Reply action's looks — the bar over the composer while a
 * pick waits, the quote chip on a sent reply, and the flash of the message a
 * chip returns to. The action itself is turnactions.js's quiet ghost row. */

/* The bar: what a reply addresses, above the attachment tray. */
.reply-bar {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-width: 0;
  padding: var(--sv-space-1) var(--sv-space-2);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-sunken);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
}
.reply-bar[hidden] { display: none; }
.reply-bar .icon { flex: none; color: var(--sv-ink-tertiary); }
.reply-bar .reply-who { flex: none; color: var(--sv-ink); font-weight: 500; }
.reply-bar .reply-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-bar .reply-cancel {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius);
  background: none;
  color: var(--sv-ink-tertiary);
  cursor: pointer;
}
.reply-bar .reply-cancel:hover { color: var(--sv-ink); }
.reply-bar .reply-cancel:focus-visible { outline: var(--sv-hairline-w) solid var(--sv-ink-tertiary); outline-offset: 1px; }

/* The action on an agent turn: quiet like Copy; on touch, the hit area
 * grows to a thumb's without moving a thing around it. */
.turn-tools .turn-reply { position: relative; }
@media (pointer: coarse) {
  .turn-tools .turn-reply::after { content: ""; position: absolute; inset: -10px; }
}

/* The chip on a sent reply: the message it answers, bounded to two lines. */
.reply-quote {
  display: flex;
  align-items: baseline;
  gap: var(--sv-space-1);
  max-width: 100%;
  margin-bottom: var(--sv-space-1);
  padding: 0 0 0 var(--sv-space-2);
  border: 0;
  border-left: 2px solid var(--sv-hairline-strong);
  border-radius: 0;
  background: none;
  color: var(--sv-ink-tertiary);
  font: inherit;
  font-size: var(--ui-meta);
  text-align: left;
  cursor: pointer;
}
.reply-quote .icon { flex: none; align-self: center; }
.reply-quote .reply-quote-who { flex: none; color: var(--sv-ink-secondary); }
.reply-quote .reply-quote-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.reply-quote:hover { color: var(--sv-ink); border-left-color: var(--sv-ink-tertiary); }
.reply-quote:focus-visible { outline: var(--sv-hairline-w) solid var(--sv-ink-tertiary); outline-offset: 2px; }

/* The message a chip returns to: one quiet glow, then its own look again. */
@keyframes reply-flash {
  from { background-color: color-mix(in srgb, var(--sv-ink) 8%, transparent); }
  to { background-color: transparent; }
}
.reply-flash { animation: reply-flash 1.2s var(--sv-ease-out); border-radius: var(--sv-radius); }
@media (prefers-reduced-motion: reduce) { .reply-flash { animation: none; background-color: color-mix(in srgb, var(--sv-ink) 6%, transparent); } }