/* ---------- Conversations (saved notes) ---------- */
/* The ☰ menu drops from the top left, as tall as its two items. */
.menu { position: fixed; z-index: 10; top: calc(52px + env(safe-area-inset-top)); inset-inline-start: max(12px, calc((100vw - 640px) / 2 + 12px));
  bottom: auto; inset-inline-end: auto; height: auto; max-height: calc(100vh - 80px); width: 220px; margin: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-m); background: var(--color-surface);
  color: var(--color-text); box-shadow: 0 10px 30px rgb(var(--rgb-shadow-menu) / .15); }
.menu button { flex: none; }
.menu button { text-align: start; background: none; border: 0; border-radius: var(--radius-s); padding: 12px 14px; font-size: var(--text-lg); font-weight: 600;
  cursor: pointer; }
.menu button:hover { background: var(--color-bg); }
.notes-list { display: grid; gap: 8px; }
.note-item { display: grid; gap: 2px; text-align: start; background: var(--color-surface); border: 0; border-radius: var(--radius-s);
  padding: 12px 14px; cursor: pointer; }
.note-item strong { font-size: var(--text-base); }
.note-item span, .note-head span, .notes-empty { font-size: var(--text-xs); color: var(--color-text-muted); }
.note-view { display: grid; gap: 10px; }
.note-back { justify-self: start; background: none; border: 0; padding: 0; color: var(--color-action); font-size: var(--text-md); cursor: pointer; }
.note-head h3 { margin: 0; font-size: var(--text-3xl); }
.note-thread { display: flex; flex-direction: column; gap: 6px; }
.note-line { max-width: 84%; padding: 8px 13px; border-radius: var(--radius-l); font-size: var(--text-md); display: grid; gap: 2px; }
.note-line small { color: var(--color-text-muted); font-size: var(--text-xs); }
.note-line.them { align-self: flex-start; background: var(--color-bubble-them); border-end-start-radius: var(--radius-xs); }
.note-line.me { align-self: flex-end; background: var(--color-bubble-me); border-end-end-radius: var(--radius-xs); }
.note-line.babble { align-self: flex-start; background: var(--color-surface); border-end-start-radius: var(--radius-xs); }
.note-actions { display: flex; gap: 8px; }
.note-actions button { flex: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 10px; font-size: var(--text-md);
  cursor: pointer; }
.note-actions .danger { color: var(--color-danger); }