/* Editor feedback only. These tokens never enter the authored page or exports. */
:root {
  --wc-limit-bg: #172033;
  --wc-limit-text: #ffffff;
  --wc-limit-border: #43516a;
  --wc-limit-icon: #93c5fd;
  --wc-limit-shadow: rgb(10 18 32 / 28%);
}
:root[data-theme="dark"] {
  --wc-limit-bg: #f5f7fb;
  --wc-limit-text: #172033;
  --wc-limit-border: #c7d2e4;
  --wc-limit-icon: #2563eb;
  --wc-limit-shadow: rgb(0 0 0 / 40%);
}
.plan-limit-notice {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  width: max-content;
  max-width: min(520px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 18px 22px;
  border: 1px solid var(--wc-limit-border);
  border-radius: 12px;
  background: var(--wc-limit-bg);
  color: var(--wc-limit-text);
  box-shadow: 0 12px 40px var(--wc-limit-shadow);
  font: 600 14px/1.85 Arial, "Noto Sans JP", sans-serif;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.plan-limit-notice::backdrop { background: transparent; pointer-events: none; }
.plan-limit-notice.is-visible {
  display: flex;
  animation: wc-limit-shake var(--limit-shake-duration, 300ms) ease-in-out,
    wc-limit-fade-out var(--limit-fade-duration, 200ms) ease-in var(--limit-fade-delay, 1800ms) forwards;
}
.plan-limit-notice > svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; color: var(--wc-limit-icon); }
.plan-limit-notice > span { min-width: 0; text-wrap: balance; }
.plan-usage { white-space: pre-line; }
@keyframes wc-limit-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% - 4px), -50%); }
  40% { transform: translate(calc(-50% + 4px), -50%); }
  60% { transform: translate(calc(-50% - 3px), -50%); }
  80% { transform: translate(calc(-50% + 2px), -50%); }
}
@keyframes wc-limit-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .plan-limit-notice.is-visible {
    animation: wc-limit-fade-out var(--limit-fade-duration, 200ms) ease-in var(--limit-fade-delay, 1800ms) forwards;
  }
}