.dm { max-width: 620px; }

.bubble {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  margin: 1rem 0;
  width: fit-content;
  max-width: 90%;
  background: #111820;
  white-space: normal;
}
.bubble.me {
  margin-left: auto;
  background: #16202b;
  border-color: #33475a;
  color: #c7d5e2;
}
.bubble.link {
  display: block;
  color: var(--blue);
  border-style: dashed;
}
.bubble.later {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding-left: 0;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 3rem;
}
.choices button {
  font: inherit;
  text-align: left;
}
.choices button[aria-pressed="true"] {
  border-color: var(--blue);
  color: var(--blue);
}

.tell {
  margin: 2rem 0;
  max-width: 420px;
}
.tell label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .4rem; }
.tell input {
  display: block;
  width: 100%;
  background: #0e141b;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .8rem;
  margin: 0 0 .8rem;
}