/* Agent messages (a2a.js): a teammate's Share writing to this person's
 * Share sits on the other side, under "<Name>'s Share", on one fill step
 * (no border, bar or accent colour); its actions are 44 px targets. The
 * approval card shows the exact words in a well; in the log an incoming
 * row is a step darker than an outgoing one. The Agent sharing sheet
 * docks to the side on a wide screen and fills the screen on a phone. */

.a2a-msg {
  width: fit-content;
  min-width: min(100%, 16rem);
  max-width: min(82%, 38rem);
  margin-right: auto;
  padding: 10px 14px;
  background: var(--sv-fill-2);
  border-radius: calc(var(--sv-radius) * 1.5);
  line-height: 1.5;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}
.transcript > .a2a-msg + .a2a-msg { margin-top: var(--sv-space-2); }
.a2a-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1) var(--sv-space-2); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-head .icon { flex: none; width: 15px; height: 15px; }
.a2a-from { color: var(--sv-ink); font-weight: 600; }
.a2a-tag {
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sv-fill-2);
  color: var(--sv-ink-secondary);
}
.a2a-title { margin-top: 2px; font-weight: 600; color: var(--sv-ink); }
.a2a-body { margin-top: var(--sv-space-1); white-space: pre-wrap; color: var(--sv-ink); }
.a2a-body a { color: inherit; text-decoration: underline; }
.a2a-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-1); margin: var(--sv-space-2) -6px -4px; }
.a2a-actions button.a2a-action { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-actions button.a2a-action:hover { color: var(--sv-ink); }
.a2a-actions button.a2a-action .icon { width: 15px; height: 15px; }
.a2a-status { margin: var(--sv-space-1) 0 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-status:empty { display: none; }

/* The approval card, aligned with the tool rows like a Core change's card (trackchange.css). */
.transcript > .a2a-card { margin-left: 36px; }
.a2a-card {
  display: grid;
  gap: var(--sv-space-2);
  max-width: 36rem;
  padding: var(--sv-space-3) var(--sv-space-4);
  background: var(--sv-fill-2);
  border: 0;
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.a2a-card[hidden] { display: none; }
.a2a-card-head { display: flex; align-items: center; gap: var(--sv-space-2); font-weight: 600; }
.a2a-card-head .icon { width: 16px; height: 16px; color: var(--sv-ink-secondary); }
.a2a-card-facts { display: grid; gap: 2px; }
.a2a-card-facts:empty { display: none; }
.a2a-card-facts p { margin: 0; }
.a2a-card-title { font-weight: 600; }
.a2a-card-meta { color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-card-words {
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  padding: var(--sv-space-2) var(--sv-space-3);
  border-radius: var(--sv-radius);
  background: var(--sv-fill-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.a2a-card-status { margin: 0; }
.a2a-card-error { margin: 0; color: var(--sv-danger); }
.a2a-card-error:empty { display: none; }
.a2a-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sv-space-2); }
.a2a-card-actions:empty { display: none; }
.a2a-card-actions button { min-height: 44px; }

/* The Agent sharing sheet. */
.a2a-sheet {
  width: min(30rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  border-left: var(--sv-hairline-w) solid var(--sv-hairline);
  background: var(--sv-surface);
  color: var(--sv-ink);
}
.a2a-sheet::backdrop { background: color-mix(in srgb, var(--sv-ink) 18%, transparent); }
.a2a-sheet[open] { display: flex; flex-direction: column; }
.a2a-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-4); padding-top: max(var(--sv-space-3), env(safe-area-inset-top)); border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.a2a-sheet-head h2 { margin: 0; font-size: var(--sv-text-h4); }
.a2a-sheet-head button { min-width: 44px; min-height: 44px; }
.a2a-sheet-body { flex: 1; overflow: auto; display: grid; align-content: start; gap: var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4) max(var(--sv-space-4), env(safe-area-inset-bottom)); }
.a2a-muted { margin: 0; color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-policy { display: grid; gap: var(--sv-space-2); margin: 0; padding: 0; border: none; }
.a2a-policy legend { padding: 0; font-weight: 600; margin-bottom: var(--sv-space-1); }
.a2a-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-3); min-height: 44px; cursor: pointer; }
.a2a-toggle-copy { display: grid; gap: 2px; }
.a2a-toggle-copy span { color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-toggle input { flex: none; width: 20px; height: 20px; accent-color: var(--sv-ink); }
.a2a-filter { display: flex; align-items: center; gap: var(--sv-space-2); }
.a2a-filter select { min-height: 44px; flex: 1; }
.a2a-sub { margin: 0; font-size: var(--ui-text); }
.a2a-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sv-space-2); }
.a2a-row { padding: var(--sv-space-2) var(--sv-space-3); border-radius: var(--sv-radius); background: var(--sv-fill-1); }
.a2a-row.in { background: var(--sv-fill-2); }
.a2a-row-meta { display: flex; align-items: center; gap: var(--sv-space-1); color: var(--sv-ink-secondary); font-size: var(--ui-meta); }
.a2a-row-meta .icon { width: 14px; height: 14px; flex: none; }
.a2a-row-meta time { margin-left: auto; white-space: nowrap; }
.a2a-row-title { display: block; margin-top: 2px; }
.a2a-row-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .a2a-msg { max-width: 100%; }
  .transcript > .a2a-card { margin-left: 0; }
  .a2a-card { padding: var(--sv-space-3); }
  .a2a-card-actions button { flex: 1; }
  .a2a-sheet { width: 100vw; border-left: none; }
}