/* Phase 116 (BR2 §5.5): talking to her while she works. The split Send button (its main part does
   the default, the ▾ offers Tell her now / After this / Just asking), the chips of what waits, the
   side question's card, and her steps' loop-guard line. Theme tokens only; 44 px targets. */

/* The split button: Send grows a label while she works, the ▾ sits right next to it. */
#composer #send.busy-send {
  width: auto;
  min-width: 44px;
  padding: 0 14px 0 12px;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#composer #send .send-label { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.send-more-wrap { position: relative; flex: none; display: flex; }
#composer .send-more {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 44px;
  padding: 0;
  margin-left: -6px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  border-left: 1px solid color-mix(in srgb, var(--on-mine) 35%, transparent);
  background: var(--accent-grad);
  color: var(--on-mine);
}
#composer .send-more svg { width: 18px; height: 18px; }
#composer .send-more[hidden] { display: none; }
.send-menu { top: auto; left: auto; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 24px)); padding: 6px; }
.send-menu .pop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--r-control);
  text-align: left;
  color: var(--text-1);
}
.send-menu .pop-item:hover, .send-menu .pop-item:focus-visible { background: color-mix(in srgb, var(--surface-3) 85%, transparent); }
.send-menu .pop-item[hidden] { display: none; }

/* What waits for her: one chip per message, above the composer. */
.pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) 0;
}
.pending-chips[hidden] { display: none; }
.pending-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--s-2);
  max-width: 100%;
  padding: 4px 4px 4px var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: var(--fs-small);
}
.pending-chip.steer.waiting { border-color: var(--accent); background: var(--accent-soft); }
.pending-chip.stale { border-style: dashed; }
.pending-chip .pending-text { min-width: 0; overflow-wrap: anywhere; }
.pending-chip .pending-text { flex: 1 1 12em; }
.pending-chip .pending-when { flex: 1 1 auto; }
.pending-chip .pending-btn { min-width: 44px; min-height: 44px; }
.pending-chip .icon-x { font-size: 18px; line-height: 1; }

/* The side question: never stored, gone after a reload. */
.aside-card {
  margin: var(--s-2) var(--s-3) 0;
  padding: var(--s-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  background: var(--glass-strong);
  box-shadow: var(--shadow-1);
  color: var(--text-1);
}
.aside-card[hidden] { display: none; }
.aside-card .aside-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.aside-card .aside-head .aside-note { flex: 1 1 auto; }
.aside-card .aside-head button { min-height: 44px; }
.aside-card .aside-q { margin: var(--s-1) 0; }
.aside-card .aside-a { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; }
.aside-card.waiting .aside-a { color: var(--text-2); }

/* In the turn: his note she took, and the loop guard's line. */
.msg.user.steer { border-style: dashed; }
.steer-from { display: block; margin-bottom: 2px; }
.guard-flag { margin: 2px 0 6px; padding-left: var(--s-2); border-left: 2px solid var(--warn); }

@media (max-width: 520px) {
  #composer #send.busy-send { padding: 0 10px; }
  #composer #send .send-label { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
}
/* On a phone the label would squeeze the text box: the icon stays, and the ▾ menu names the choice. */
@media (max-width: 420px) {
  #composer #send .send-label { display: none; }
  .pending-chips { padding: var(--s-2) var(--s-2) 0; }
  .aside-card { margin: var(--s-2) var(--s-2) 0; }
}