/* ---------- the end of a conversation: Babble's bubbles and quick answers, in the chat ---------- */
main .goal-ideas { display: flex; }
main .welcome { flex: none; }
.goal-ideas button:disabled { opacity: .45; cursor: default; }
.welcome.note { display: grid; gap: 4px; }
.welcome.note strong { font-size: var(--text-xl); }
.note-label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }
/* How did it go? A quiet line with two thumbs; 👎 opens the reasons as chips under it. */
.end-rate { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
.end-rate .ask { font-size: var(--text-md); color: var(--color-text-muted); }
.end-rate .thumb { background: none; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 4px 12px; font-size: var(--text-xl); line-height: 1; cursor: pointer; }
.end-rate .reasons { display: flex; flex-basis: 100%; }
/* Saying more after 👎: a small box, a note that it goes to Babble's team, Skip and Send. */
.end-rate .tell { flex-basis: 100%; font: inherit; font-size: var(--text-md); color: var(--color-text); background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-m); padding: 8px 10px; resize: vertical; }
.end-rate .hint { flex-basis: 100%; font-size: var(--text-xs); color: var(--color-text-muted); text-align: end; }
.end-rate .skip, .end-rate .send { border-radius: var(--radius-pill); padding: 7px 14px; font-size: var(--text-md); cursor: pointer; }
.end-rate .skip { background: none; border: 1.5px solid var(--color-border); color: var(--color-text); }
.end-rate .send { background: var(--color-action); color: var(--color-on-action); border: none; }
.end-rate .send:disabled { opacity: .45; cursor: default; }
.welcome.note ul { margin: 0; padding-inline-start: 18px; font-size: var(--text-base); }


/* After a conversation: the wrap-up is the screen. Setup stays folded; live-only blocks step aside. */
body.done .controls { display: none; }
body.done.show-setup .controls { display: grid; }
body.done #latest, body.done #summary, body.done footer, body.done .intro { display: none; }