/* Shared transient feedback for the actual app and its embedded preview. */
#toast,.panel.product-error{background:#fff3f7;color:var(--burgundy);border:1px solid #fff9fc;box-shadow:0 12px 36px #45182d24,inset 0 1px 1px #fff;overflow-wrap:anywhere;word-break:normal}
#toast{position:fixed;inset:calc(var(--toast-viewport-top,0px) + var(--app-safe-top,env(safe-area-inset-top,0px)) + 12px) 12px auto;box-sizing:border-box;margin:0;width:calc(100% - 24px);max-width:none;min-width:0;max-height:min(40dvh,360px);overflow-y:auto;overscroll-behavior:contain;padding:18px 22px;border-radius:24px;font-size:15px;font-weight:600;line-height:1.5;text-align:left;white-space:pre-wrap;color:#35272e;border:1.5px solid #bd33566b;box-shadow:0 14px 44px #661e4140,inset 0 1px 0 #ffffffd9;z-index:10000;opacity:0;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease;pointer-events:none;scrollbar-width:thin}
#toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
#toast::backdrop{background:transparent;pointer-events:none}
.panel.product-error{max-width:640px;margin-inline:auto;border-radius:28px}
.panel.product-error p{line-height:1.6;white-space:pre-wrap}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){
 #toast,.panel.product-error{background:linear-gradient(135deg,#fff8fbe8,#f8e3ede0);backdrop-filter:blur(20px) saturate(145%);-webkit-backdrop-filter:blur(20px) saturate(145%)}
}
@supports ((backdrop-filter:blur(18px)) or (-webkit-backdrop-filter:blur(18px))){#toast{background:linear-gradient(125deg,#ffffff9c,#f2b9cd8c);backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%)}}
@media(min-width:1000px){#toast{inset:calc(var(--toast-viewport-top,0px) + 18px) 24px auto;width:calc(100% - 48px);padding:20px 26px;border-radius:26px}}
@media(prefers-reduced-transparency:reduce){#toast,.panel.product-error{background:#fff3f7;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){#toast{transition:none}}

/* Inline validation uses the same glass surface as transient app messages. */
#app .form-error:not(:empty){box-sizing:border-box;max-width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fff8fbeb,#f8e3ede6);color:var(--burgundy);box-shadow:0 6px 18px #45182d0d,inset 0 1px 1px #fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:14px;line-height:1.5;overflow-wrap:anywhere;white-space:normal}
#app .form-error:empty{display:none}

/* Top-edge notification island. Keep the exit animation visible in the top layer. */
#toast{inset:calc(var(--toast-viewport-top,0px) + var(--app-safe-top,env(safe-area-inset-top,0px)) + 10px) auto auto 50%;width:calc(100% - 24px);max-width:780px;border-radius:25px;transform:translate(-50%,calc(-100% - 30px)) scale(.92);transform-origin:top center;opacity:0;transition:transform .42s cubic-bezier(.22,.8,.25,1),opacity .28s ease;will-change:transform,opacity}
#toast.show{transform:translate(-50%,0) scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){#toast{transition:opacity .1s linear}}
#toast{touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}#toast:active{cursor:grabbing}#toast.toast-link{cursor:pointer}
/* v477: notification bubbles sit just below the status bar / Dynamic Island, aligned with the floating burger/bell row (app, mobile web, demo phone). */
@media(max-width:999px){#toast{inset:calc(var(--toast-viewport-top,0px) + var(--app-safe-top,env(safe-area-inset-top,0px)) + 6px) auto auto 50%}}
.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{top:calc(var(--app-safe-top,0px) + 6px);bottom:auto;transform:translate(-50%,-16px)}
.sandbox-device>#toast.show,.sandbox-device>#toast.toast-in-phone.show{transform:translate(-50%,0)}

/* v494 Dynamic Island toasts (iOS app on island devices: safe-area-top >= 59, flagged html.fc-island; demo phone too):
   the bubble starts as the island pill (126x37 at top 11) and morphs down into the full bubble; collapses back on dismiss. */
html.fc-island #toast,.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{
 --island-w:126px;--island-h:37px;
 inset:calc(var(--toast-viewport-top,0px) + 20px) auto auto 50%!important;bottom:auto!important;
 width:calc(100% - 20px);max-width:420px;padding:46px 22px 18px;border-radius:30px;
 transform:translate(-50%,0)!important;opacity:0;
 clip-path:inset(0 calc(50% - var(--island-w)/2) calc(100% - var(--island-h)) calc(50% - var(--island-w)/2) round calc(var(--island-h)/2));
 background-color:#000;color:transparent;
 transition:clip-path .55s cubic-bezier(.32,1.25,.45,1),opacity .16s linear,color .25s ease .18s,background-color .35s ease!important}
html.fc-island #toast.show,.sandbox-device>#toast.show,.sandbox-device>#toast.toast-in-phone.show{
 opacity:1;clip-path:inset(0 0 0 0 round 30px);color:var(--burgundy);background-color:transparent;
 transition:clip-path .55s cubic-bezier(.32,1.25,.45,1),opacity .12s linear,color .25s ease .2s,background-color .3s ease .05s!important}
.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{top:calc(var(--demo-island-top,23px) + 9px)!important;width:calc(100% - 44px)}
@media(prefers-reduced-motion:reduce){html.fc-island #toast,.sandbox-device>#toast{transition:opacity .15s linear!important;clip-path:none}}
/* v499 toasts always sit above everything (sheets, fullscreen match/likes/live photo, dialogs). */
#toast,.sandbox-device>#toast{z-index:2147483647!important}
/* v502 bubbles sit just below the Dynamic Island (island: 37pt tall at 11pt), never over it; they unfold from a pill under it. */
html.fc-island #toast,.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{inset:calc(var(--toast-viewport-top,0px) + 54px) auto auto 50%!important;padding:16px 22px!important;background-color:transparent!important;color:var(--burgundy)!important}
.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{top:calc(var(--demo-island-top,23px) + 43px)!important}
html.fc-island #toast:not(.show),.sandbox-device>#toast:not(.show){opacity:0}
#toast,.sandbox-device>#toast{z-index:2147483647!important}
/* v504 bubble on the floating-button line: same top, height and outer side margins as burger/bell (16px) */
html.fc-island #toast,.sandbox-device>#toast,.sandbox-device>#toast.toast-in-phone{top:var(--chrome-button-top,calc(var(--toast-viewport-top,0px) + env(safe-area-inset-top,0px) + 6px))!important;left:16px!important;right:16px!important;width:auto!important;max-width:none!important;transform:none!important;min-height:var(--chrome-bell-size,50px)!important;box-sizing:border-box!important;padding:8px 18px!important;border-radius:25px!important;display:flex!important;align-items:center}
/* v507 same alignment wherever the burger/bell line was measured (demo frame has no fc-island class) */
@media(max-width:999px){html #toast[style*="--chrome-button-top"]{top:var(--chrome-button-top)!important;bottom:auto!important;left:16px!important;right:16px!important;inset-inline:16px!important;width:auto!important;max-width:none!important;min-height:var(--chrome-bell-size,50px)!important;box-sizing:border-box!important;padding:8px 18px!important;border-radius:calc(var(--toast-line-size,50px)/2)!important;display:flex!important;align-items:center;justify-content:center;transform:translateY(-12px) scale(.96)!important}
html #toast[style*="--chrome-button-top"].show{transform:none!important}}
/* v551 desktop (>=1000px, the spinner's desktop branch): the bubble is the loading pill's twin – same height
   and centre line as the spinner (--toast-line-*, from runtime-controls festlLoadingLine), fully round corners, one line with ellipsis. */
@media(min-width:1000px){html body #toast:not(.toast-in-phone){top:calc(var(--toast-viewport-top,0px) + var(--toast-line-y,calc(var(--app-safe-top,env(safe-area-inset-top,0px)) + 49px)) - var(--toast-line-size,50px)/2)!important;bottom:auto!important;height:var(--toast-line-size,50px)!important;min-height:0!important;max-height:none!important;padding:0 24px!important;border-radius:calc(var(--toast-line-size,50px)/2)!important;display:block!important;line-height:calc(var(--toast-line-size,50px) - 2px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important}}