/* Toast above the tool pill (errors, restore prompt) */
#message-bar {
  position: fixed;
  z-index: 10;
  top: 16px;
  left: 0;
  right: 0;
  margin-inline: auto; /* centered without a transform: a half-pixel shift blurs the text */
  width: max-content;
  max-width: min(520px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 8px 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  color: var(--text);
  font-size: var(--fs-small);
  animation: toast-in 480ms cubic-bezier(0.34, 1.4, 0.64, 1) 300ms backwards;
}
#message-bar[hidden] { display: none; }
#message-bar button { height: 26px; padding: 0 8px; font-size: var(--fs-small); color: var(--text-muted); }
#message-bar button:hover { color: var(--text); }
#message-bar details { max-height: 30vh; overflow: auto; }
#message-bar summary { cursor: pointer; color: var(--text-muted); }
#message-bar ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); }
#message-bar li { margin: 2px 0; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Import dialog */
#import-dialog {
  width: min(560px, 92vw);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}
#import-dialog::backdrop { background: color-mix(in srgb, var(--text) 35%, transparent); backdrop-filter: blur(2px); }
#import-dialog h2 { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
.import-help { margin: 4px 0 12px; font-size: var(--fs-small); color: var(--text-muted); }
#import-text {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-small);
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface-2);
  resize: vertical;
}
#import-text::placeholder { color: var(--text-faint); }
#import-text:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.import-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 16px 0 0; }
#import-dialog #import-choose { margin-right: auto; color: var(--text-muted); }
#import-error { margin: 12px 0 0; font-size: var(--fs-small); color: var(--danger); font-weight: 500; }
#import-confirm { margin: 12px 0 0; padding: 8px 10px; font-size: var(--fs-small); background: var(--surface-2); border-radius: var(--radius-sm); }
#import-error[hidden], #import-confirm[hidden] { display: none; }