/* The note form and toasts from notes.js, over the canvas. */
.wobble-note {
  position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px;
  display: grid; gap: 10px; background: rgba(20, 22, 26, 0.97); border: 1px solid #5a5f68;
  border-radius: 10px; color: #ebeef5; font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
  z-index: 10;
}
.wobble-note label { font-weight: 600; }
/* 16px keeps iOS from zooming the page when the field gets focus. */
.wobble-note textarea {
  font-size: 16px; line-height: 1.4; font-family: inherit; color: inherit; background: #2c3038;
  border: 1px solid #5a5f68; border-radius: 6px; padding: 8px; resize: vertical; min-height: 4.5em;
}
.wobble-note-context { margin: 0; color: #9aa0aa; font-size: 13px; overflow-wrap: anywhere; }
.wobble-note-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.wobble-note button {
  font: inherit; color: #ebeef5; background: #2c3038; border: 1px solid #5a5f68;
  border-radius: 6px; padding: 8px 16px; min-height: 40px;
}
.wobble-note button[type=submit] { background: #2c3c60; border-color: #4a64a0; }
.wobble-note button:disabled { opacity: 0.6; }
.wobble-toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 8px; background: rgba(28, 72, 62, 0.95);
  color: #ebeef5; font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif;
  pointer-events: none; z-index: 11;
}
.wobble-toast.error { background: rgba(120, 30, 30, 0.95); }