/* 全ページ共通。時間の既定値はtoast.js、外観と入退場はこのファイルを正本にする。 */
.svwb-toast-viewport {
  --toast-top: max(calc(14px + var(--svwb-toast-top-offset, 0px)), env(safe-area-inset-top));
  --toast-available-height: calc(100svh - var(--toast-top) - max(14px, env(safe-area-inset-bottom)));
  --toast-text-offset: 3px;
  --toast-gold: #c6a648;
  --toast-gold-light: #e8ce79;
  --toast-danger: #ffa6ab;
  position: fixed;
  top: var(--toast-top);
  right: max(14px, env(safe-area-inset-right));
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(280px, calc(100vw - 28px));
  max-height: var(--toast-available-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #82703c transparent;
  pointer-events: auto;
  color-scheme: dark;
}
.svwb-toast-viewport:empty { display: none; }
.svwb-toast {
  position: relative;
  flex: 0 0 auto;
  pointer-events: auto;
  background: var(--popup-surface, linear-gradient(155deg, #201f19, #111110));
  color: #eef1f5;
  border: 1px solid rgba(198, 166, 72, .32);
  border-radius: 8px;
  box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .28);
  padding: 13px 14px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  overflow: hidden;
  opacity: 0;
  transform: translateX(130%);
  box-sizing: border-box;
  line-height: 1.5;
  text-align: left;
  font-family: inherit;
}
.svwb-toast.enter { animation: svwb-toast-in var(--toast-enter-ms) cubic-bezier(.22,1.12,.32,1) forwards; }
.svwb-toast.leave { animation: svwb-toast-out var(--toast-exit-ms) ease forwards; }
@keyframes svwb-toast-in { 0% { opacity: 0; transform: translateX(130%); } 60% { opacity: 1; transform: translateX(-6%); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes svwb-toast-out { to { opacity: 0; } }
.svwb-toast .icon-wrap { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.svwb-toast .icon-pulse { position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--toast-gold); opacity: 0; }
.svwb-toast.enter .icon-pulse { animation: svwb-toast-pulse .65s ease-out .28s forwards; }
@keyframes svwb-toast-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.svwb-toast .icon-dot { width: 100%; height: 100%; border-radius: 50%; background: rgba(198,166,72,.14); display: flex; align-items: center; justify-content: center; transform: scale(0); }
.svwb-toast.enter .icon-dot { animation: svwb-toast-dot .4s cubic-bezier(.34,1.56,.64,1) .12s forwards; }
@keyframes svwb-toast-dot { to { transform: scale(1); } }
.svwb-toast .icon-dot svg { width: 15px; height: 15px; overflow: visible; }
.svwb-toast .icon-dot circle { fill: none; stroke: var(--toast-gold); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 44; }
.svwb-toast .check-line { fill: none; stroke: var(--toast-gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.svwb-toast.enter .icon-dot circle { animation: svwb-toast-draw .4s ease-out .2s forwards; }
.svwb-toast.enter .check-line { animation: svwb-toast-draw .25s ease-out .5s forwards; }
@keyframes svwb-toast-draw { to { stroke-dashoffset: 0; } }
/* 文字の入場移動を内側に収め、一時的なスクロールバーによる高さ変化を防ぐ。 */
.svwb-toast .toast-body { min-width: 0; flex: 1; padding-bottom: var(--toast-text-offset); margin-bottom: calc(-1 * var(--toast-text-offset)); max-height: calc(var(--toast-available-height) - 32px); overflow-y: auto; overflow-wrap: anywhere; scrollbar-width: thin; }
.svwb-toast .toast-title { display: block; padding-right: 20px; font-size: 13.5px; font-weight: 700; margin: 0; white-space: pre-wrap; }
.svwb-toast .toast-description { display: block; font-size: 12px; white-space: pre-wrap; margin-top: 2px; }
.svwb-toast .toast-content { font-size: 12px; margin-top: 2px; }
.svwb-toast .toast-body > * { opacity: 0; transform: translateY(var(--toast-text-offset)); }
.svwb-toast.enter .toast-body > * { animation: svwb-toast-text .3s ease-out .3s forwards; }
.svwb-toast.enter .toast-title { animation-delay: .22s; }
@keyframes svwb-toast-text { to { opacity: 1; transform: translateY(0); } }
.svwb-toast .bar-track { position: absolute; left: 0; bottom: 0; height: 2.5px; width: 100%; background: #303038; }
.svwb-toast .bar-track[hidden] { display: none; }
.svwb-toast .bar { position: absolute; inset: 0; background: linear-gradient(90deg, var(--toast-gold), var(--toast-gold-light)); transform: scaleX(1); transform-origin: left; }
.svwb-toast .sparkle { position: absolute; left: 30px; top: 20px; width: 5px; height: 5px; border-radius: 1px; background: var(--toast-gold-light); opacity: 0; }
.svwb-toast .info-line, .svwb-toast .x-line { fill: none; stroke: var(--toast-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 15; stroke-dashoffset: 15; }
.svwb-toast.enter .info-line, .svwb-toast.enter .x-line { animation: svwb-toast-draw .3s ease-out .36s forwards; }
.svwb-toast:not([data-kind="success"]) .check-line,
.svwb-toast:not([data-kind="error"]) .x-line,
.svwb-toast:is([data-kind="error"], [data-kind="success"]) .info-line { display: none; }
.svwb-toast[data-kind="error"] { border-color: rgba(255,166,171,.45); }
.svwb-toast[data-kind="error"] .icon-pulse { border-color: var(--toast-danger); }
.svwb-toast[data-kind="error"] .bar { background: var(--toast-danger); }
.svwb-toast[data-kind="error"] .icon-dot { background: rgba(255,166,171,.14); }
.svwb-toast[data-kind="error"] .icon-dot circle, .svwb-toast[data-kind="error"] .x-line { stroke: var(--toast-danger); }
.svwb-toast[data-kind="error"].enter { animation-name: svwb-toast-in-shake; }
.svwb-toast[data-kind="error"].leave { animation-name: svwb-toast-out; }
@keyframes svwb-toast-in-shake { 0% { opacity: 0; transform: translateX(130%); } 55% { opacity: 1; transform: translateX(0); } 68% { transform: translateX(-5px); } 80% { transform: translateX(4px); } 92% { transform: translateX(-2px); } 100% { opacity: 1; transform: translateX(0); } }
.svwb-toast .svwb-toast-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: grid; place-items: center; padding: 6px; margin: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.svwb-toast-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.svwb-toast-close:focus-visible { outline: 2px solid var(--toast-gold); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .svwb-toast-close:hover { background: rgba(198,166,72,.16); } }
@media (prefers-reduced-motion: reduce) {
  /* 残り時間バーのWeb Animationには影響させない。 */
  .svwb-toast, .svwb-toast .icon-pulse, .svwb-toast .icon-dot, .svwb-toast .icon-dot *, .svwb-toast .toast-body > * { animation-duration: .001s !important; animation-delay: 0s !important; }
  .svwb-toast .sparkle { display: none; }
}