/* vr-notice v1 — Vendreel house standard for info / success / warning / error messages (Nikola 2026-10-09:
   „po default ne sme ovakav mali dole box za info i greške — mora lepo, moderno, animirano").
   Glass card, type icon that animates (check draws, X shakes, i bounces, ! pulses), title + text, close button,
   gradient countdown bar (pauses on hover), spring-in, swipe to dismiss, stacks up to 3, reduced-motion aware.
   Theme it per site with --vrn-* variables; it follows data-theme="dark" / .dark automatically. */
.vrn-wrap{position:fixed;z-index:2147483000;top:max(16px,env(safe-area-inset-top));right:16px;display:flex;flex-direction:column;gap:10px;width:min(400px,calc(100vw - 32px));pointer-events:none}
@media (max-width:640px){.vrn-wrap{right:50%;transform:translateX(50%)}}
.vrn{--c:var(--vrn-info,#4f7cff);position:relative;pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:14px 14px 16px;border-radius:18px;overflow:hidden;color:var(--vrn-ink,#151a2b);
  background:linear-gradient(135deg,rgba(255,255,255,.985),rgba(255,255,255,.955)),var(--vrn-bg,#fff);
  border:1px solid color-mix(in srgb,var(--c) 30%,rgba(20,25,45,.10));
  box-shadow:0 18px 50px -18px color-mix(in srgb,var(--c) 55%,rgba(10,15,35,.45)),0 2px 10px rgba(10,15,35,.08),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  font:500 14.5px/1.45 var(--vrn-font,inherit);touch-action:pan-y;
  animation:vrnIn .55s cubic-bezier(.2,1.25,.35,1) both}
.vrn::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 55%)}
.vrn.success{--c:var(--vrn-success,#16a36a)} .vrn.error{--c:var(--vrn-error,#e5484d)} .vrn.warning{--c:var(--vrn-warning,#e8930c)}
:is([data-theme="dark"],[data-vr-theme="dark"],.dark,[data-vrn="dark"]) .vrn{color:var(--vrn-ink-dark,#eef1fb);background:linear-gradient(135deg,rgba(26,31,52,.985),rgba(16,20,36,.96)),var(--vrn-bg-dark,#10142a);border-color:color-mix(in srgb,var(--c) 40%,rgba(255,255,255,.08));box-shadow:0 18px 50px -18px color-mix(in srgb,var(--c) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}
.vrn.out{animation:vrnOut .35s cubic-bezier(.4,0,.8,.4) both}
.vrn-ico{position:relative;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c));box-shadow:0 8px 18px -6px var(--c)}
.vrn-ico::after{content:"";position:absolute;inset:-4px;border-radius:15px;border:2px solid var(--c);opacity:0;animation:vrnRing 1.4s .25s ease-out 2}
.vrn-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vrn-ico .d{stroke-dasharray:30;stroke-dashoffset:30;animation:vrnDraw .5s .2s ease-out forwards}
.vrn.error .vrn-ico{animation:vrnShake .5s .35s ease-in-out}
.vrn.info .vrn-ico svg{animation:vrnHop .6s .25s cubic-bezier(.3,1.6,.5,1)}
.vrn.warning .vrn-ico{animation:vrnPulse 1.6s .3s ease-in-out 2}
.vrn-t{font-weight:750;font-size:14px;letter-spacing:.01em;margin:1px 0 2px;color:var(--c);filter:saturate(1.1)}
.vrn-m{margin:0;word-break:break-word}
.vrn-x{appearance:none;border:0;background:transparent;color:inherit;opacity:.55;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;cursor:pointer;margin:-4px -4px 0 0;transition:opacity .2s,background .2s,transform .25s}
.vrn-x:hover{opacity:1;background:color-mix(in srgb,var(--c) 14%,transparent);transform:rotate(90deg)}
.vrn-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.vrn-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--c) 14%,transparent)}
.vrn-bar i{display:block;height:100%;width:100%;transform-origin:left;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 60%,#fff),var(--c));animation:vrnBar var(--d,4.5s) linear forwards}
.vrn:hover .vrn-bar i{animation-play-state:paused}
@keyframes vrnIn{0%{opacity:0;transform:translateY(-18px) scale(.94);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
@keyframes vrnOut{to{opacity:0;transform:translateY(-10px) scale(.96);filter:blur(4px)}}
@keyframes vrnDraw{to{stroke-dashoffset:0}}
@keyframes vrnShake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(5deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes vrnHop{0%{transform:translateY(6px) scale(.6)}100%{transform:none}}
@keyframes vrnPulse{0%,100%{transform:none}50%{transform:scale(1.1)}}
@keyframes vrnRing{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
@keyframes vrnBar{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.vrn,.vrn *,.vrn::after,.vrn-ico::after{animation:none!important}.vrn-ico .d{stroke-dashoffset:0}}
/* legacy bottom toasts are replaced by the bridge */
html.vrn-on #toast,html.vrn-on .toast:not(.vrn){display:none!important}