/* ══════ MODAL (modal-core.js) ══════ */
#modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; }
#modal-bg.open { display:flex; }
#modal-box { background:var(--bg); border-radius:6px; padding:1.1rem; min-width:300px; max-width:640px; width:100%; max-height:88vh;
  overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid var(--border); }
#modal-box h3 { font-size:16px; font-weight:600; margin-bottom:1.1rem; letter-spacing:-.02em; }
.modal-btns { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1.1rem; flex-wrap:wrap; }
/* The uuid line at the top of the edit modals. */
.modal-id { font-size:11px; font-family:var(--mono); color:var(--text3); margin-bottom:.85rem; word-break:break-all; }
/* Full-width row button — the "pick one of these" shape (insert above, import…). */
.modal-pick-row { width:100%; justify-content:flex-start; gap:.55rem; padding:.5rem .65rem; margin-bottom:.35rem; }
/* Variant navigator in the message edit modal: ◀ 2/3 ▶. */
.variant-nav { display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.variant-label { flex:1; font-size:12px; color:var(--text3); }
.variant-pos { font-size:12px; color:var(--text3); min-width:2.5rem; text-align:center; }
.variant-btn { padding:.2rem .5rem; }

/* Blocks interaction with the rest of the app during a long-running,
   non-cancelable operation (e.g. parsing a large import file) — same
   full-screen backdrop as #modal-bg, but with no close affordance (no
   Escape, no backdrop click) since there's nothing to safely cancel into. */
#busy-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1100; display:none; align-items:center; justify-content:center; padding:1rem; outline:none; }
#busy-overlay.open { display:flex; }
.busy-box { background:var(--bg); border-radius:6px; padding:1rem 1.3rem; display:flex; align-items:center; gap:.7rem; font-size:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); border:1px solid var(--border); }
.busy-box .spinner { width:18px; height:18px; }