/* Paczka 3 (W1, W2): one shared look for messages — informacja, sukces, ostrzeżenie, błąd.
   Colours come from the page palette (--sf-success, --sf-warning, --sf-danger and their -soft pairs),
   so the light and dark themes follow automatically. The icon is drawn with a CSS mask, so modules
   can keep writing plain textContent. Three ids win over older per-module status styles. */
#seafix-demo#seafix-demo#seafix-demo .sf-notice {
  --tone: var(--sf-muted);
  --tone-soft: var(--sf-surface-raised);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--sf-line));
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--sf-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
}
#seafix-demo#seafix-demo#seafix-demo .sf-notice::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: var(--tone);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
/* Always wins over the inline (W2) rules below, so an empty hidden message never shows its icon. */
#seafix-demo#seafix-demo#seafix-demo .sf-notice[hidden] { display: none !important; }
#seafix-demo#seafix-demo#seafix-demo .sf-notice.is-success {
  --tone: var(--sf-success);
  --tone-soft: var(--sf-success-soft);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
/* Backup and emergency-file modules call their pending/advice state "waiting": shown as a warning. */
#seafix-demo#seafix-demo#seafix-demo :is(.sf-notice.is-warning, .sf-notice.is-waiting) {
  --tone: var(--sf-warning);
  --tone-soft: var(--sf-warning-soft);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
#seafix-demo#seafix-demo#seafix-demo .sf-notice.is-error {
  --tone: var(--sf-danger);
  --tone-soft: var(--sf-danger-soft);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
/* W2: work in progress ("Zapisywanie…") and short results next to a button sit inline, without a box. */
#seafix-demo#seafix-demo#seafix-demo :is(.sf-notice.is-busy, .sf-notice.sf-notice-inline:not(.is-error):not(.is-warning)) {
  display: flex;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sf-muted);
  font-size: 13px;
}
#seafix-demo#seafix-demo#seafix-demo :is(.sf-notice.is-busy, .sf-notice.sf-notice-inline:not(.is-error):not(.is-warning))::before { width: 16px; height: 16px; margin-top: 1px; }
#seafix-demo#seafix-demo#seafix-demo .sf-notice.sf-notice-inline.is-success:not(.is-error) { color: var(--sf-success); }
#seafix-demo#seafix-demo#seafix-demo .sf-notice.is-busy {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
}
#seafix-demo#seafix-demo#seafix-demo .sf-notice.is-busy::before { animation: sf-notice-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  #seafix-demo#seafix-demo#seafix-demo .sf-notice.is-busy::before { animation: none; }
}
@keyframes sf-notice-spin { to { transform: rotate(360deg); } }

/* W4: in a confirmation, cancel on the left and the action on the right; deleting is always red. */
#seafix-demo .sf-confirm-actions { display: flex; gap: 10px; margin-top: 12px; }
#seafix-demo .sf-confirm-actions > * { flex: 1; min-width: 0; margin: 0 !important; }
#seafix-demo#seafix-demo .sf-collab-quiet.is-danger {
  border-color: color-mix(in srgb, var(--sf-danger) 38%, var(--sf-line));
  background: var(--sf-danger-soft);
  color: var(--sf-danger);
  font-weight: 600;
}