/* ---------- the suggested reply: a message Babble is composing for you ----------
   Dotted = only Babble's idea. Each time you talk to it, it firms up (dashed, then solid, like your own bubbles).
   Tap it, or the send arrow, to say it to them. */
.draft { display: none; }
body[data-mode="assist"].live .draft:not(.empty), body[data-mode="assist"].live .draft.updating { display: grid; }
.draft { position: relative; align-self: flex-end; max-width: 88%; min-width: 46%; gap: 3px; padding: 7px 46px 9px 14px;
  border-radius: var(--radius-l); border-end-end-radius: var(--radius-xs); border: 2px dotted rgb(var(--rgb-action) / .5); background: transparent;
  color: var(--color-text); cursor: pointer; transition: background .3s, border-color .3s, opacity .2s; }
.draft[data-firm="1"] { border-style: dashed; border-color: rgb(var(--rgb-action) / .6); background: rgb(var(--rgb-bubble-me) / .45); }
.draft[data-firm="2"] { border-style: solid; border-color: transparent; background: var(--color-bubble-me); }
.draft-head { font-size: var(--text-2xs); color: var(--color-text-muted); }
.draft-en { font-size: var(--text-2xl); line-height: 1.28; font-weight: 600; }
.draft[data-firm="0"] .draft-en { color: var(--color-text-faint); }
.draft-native { font-size: var(--text-md); line-height: 1.35; color: var(--color-text-muted); }
.draft-native:empty, .draft-en:empty { display: none; }
.draft.updating .draft-en, .draft.updating .draft-native { opacity: .45; transition: opacity .2s; }
.draft.updating #draft-head-text::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 6px; border-radius: var(--radius-round);
  background: var(--color-text-muted); vertical-align: 1px; animation: pulse 1s ease-in-out infinite; }
/* The send arrow, iMessage-style. */
.say { position: absolute; inset-inline-end: 7px; bottom: 7px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  background: var(--color-action); color: var(--color-accent); border: 0; border-radius: var(--radius-round); font-size: var(--text-xl); font-weight: 700; line-height: 1; cursor: pointer; }
.say:disabled { opacity: .3; cursor: default; }
/* Nothing to send yet (Babble is still writing the first reply): no arrow, and a slimmer bubble. */
.draft.empty { padding-inline-end: 14px; }
.draft.empty .say { display: none; }
.draft:not(.empty) { min-height: 46px; } /* room for the arrow even on a one-line reply */
/* Just sent: the line it became slides in from where the draft was. */
main .msg.sent { animation: sent .35s ease-out; }
@keyframes sent { from { transform: translateY(10px) scale(.97); opacity: .4; } }