/* Status floats above native dialogs; it never takes keyboard or pointer input. */
#toast.operation-toast,
#operation-progress.operation-progress {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  z-index: 2147483647;
  left: var(--feedback-left, 50%);
  transform: translateX(-50%);
  width: min(var(--feedback-width, 560px), calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  pointer-events: none;
  overflow-wrap: anywhere;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
#toast.operation-toast {
  bottom: var(--feedback-bottom, 24px);
  top: auto;
  width: max-content;
  max-width: min(var(--feedback-width, 560px), calc(100vw - 32px));
  padding: 15px 21px;
  border: 1px solid #567299;
  border-radius: 12px;
  background: #152f50;
  color: #fff;
  box-shadow: 0 10px 36px #102b4c40, 0 2px 8px #102b4c24;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.55;
}
#operation-progress.operation-progress {
  top: var(--feedback-top, 20px);
  bottom: auto;
  display: none;
  align-items: center;
  gap: 15px;
  padding: 19px 22px 23px;
  border: 1px solid #9cbcea;
  border-radius: 15px;
  background: #fafdff;
  color: #173e73;
  box-shadow: 0 14px 48px #173e7338, 0 2px 9px #173e7320;
  overflow: hidden;
}
#toast.operation-toast[popover]:not(:popover-open),
#operation-progress.operation-progress[popover]:not(:popover-open) { display: none; }
#toast.operation-toast:popover-open { display: block; }
#toast.operation-toast.feedback-visible { display: block; }
#operation-progress.operation-progress:popover-open { display: flex; }
#operation-progress.operation-progress.feedback-visible { display: flex; }
#toast.operation-toast::backdrop,
#operation-progress.operation-progress::backdrop { background: transparent; pointer-events: none; backdrop-filter: none; }
.operation-spinner {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 3px solid #d7e7fb;
  border-top-color: #1466d4;
  border-right-color: #1466d4;
  border-radius: 50%;
  animation: operation-spin .85s linear infinite;
}
.operation-copy { display: flex; flex-direction: column; min-width: 0; gap: 5px; }
.operation-label { color: #173e73; font-size: 15px; font-weight: 650; line-height: 1.4; }
.operation-detail { color: #617999; font-size: 12px; font-weight: 450; line-height: 1.45; }
.operation-track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; background: #dfebfa; }
.operation-track i { display: block; height: 100%; width: 35%; border-radius: 4px; background: #2676dc; animation: operation-travel 1.8s ease-in-out infinite; }

/* Image-based plan rendering has its own lifecycle, in addition to API processing. */
.pv-viewport #pv-loading {
  display: flex;
  align-items: center;
  gap: 16px;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 36px);
  padding: 24px 29px;
  border: 1px solid #9cbcea;
  border-radius: 15px;
  background: #fafdfffa;
  color: #173e73;
  box-shadow: 0 12px 45px #173e7333;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}
.pv-viewport #pv-loading::before {
  content: '';
  box-sizing: border-box;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 3px solid #d7e7fb;
  border-top-color: #1466d4;
  border-right-color: #1466d4;
  border-radius: 50%;
  animation: operation-spin .85s linear infinite;
}
.pv-viewport #pv-loading[data-state=error] { border-color: #d9ad74; background: #fffbf4; color: #805826; }
.pv-viewport #pv-loading[data-state=error]::before {
  content: '!';
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  animation: none;
  font-size: 19px;
  line-height: 1;
}
@keyframes operation-spin { to { transform: rotate(360deg); } }
@keyframes operation-travel { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
@media (max-width: 600px) {
  #operation-progress.operation-progress { gap: 12px; padding: 16px 17px 20px; }
  .operation-label { font-size: 14px; }
  #toast.operation-toast { font-size: 13px; padding: 13px 17px; }
  .pv-viewport #pv-loading { padding: 18px 20px; gap: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .operation-spinner, .operation-track i, .pv-viewport #pv-loading::before { animation: none; }
  .operation-track i { width: 100%; background: #679ada; }
}