/* ── Notification dialog ────────────────────────────────────────────────────
   Reuses shared modal classes:
     .modal-backdrop, .modal-box, .modal-header, .modal-body,
     .modal-footer, .modal-btn, .modal-btn--apply
   Only adds: z-index override, width, top accent, header icon.
─────────────────────────────────────────────────────────────────── */

.notif-backdrop {
  z-index: 9000;
  transition: opacity 0.15s ease;
}

.notif-box {
  width: min(360px, calc(100vw - 40px));
}

.notif-box.notif--error { border-top: 3px solid #b91c1c; }
.notif-box.notif--warn  { border-top: 3px solid #d97706; }
.notif-box.notif--info  { border-top: 3px solid #2563eb; }

/* Preserve newlines so multi-line messages (joined with \n) wrap per line */
.notif-box .modal-body { white-space: pre-line; }

/* Header row: icon + title */
.notif-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Small filled circle — letter only, no emoji */
.notif-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

.notif--error .notif-title-icon { background: #b91c1c; color: #fff; }
.notif--warn  .notif-title-icon { background: #d97706; color: #fff; }
.notif--info  .notif-title-icon { background: #2563eb; color: #fff; }

/* Input used in showPrompt() dialog */
.modal-text-input {
  width: 100%; box-sizing: border-box;
  height: 32px; padding: 0 8px;
  border: 1px solid var(--c-border); border-radius: 4px;
  font-size: 13px; background: var(--c-bg); color: var(--c-text);
}
.modal-text-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-lt); }