:root{
  --vt-n-panel:#07100f;
  --vt-n-line:#203532;
  --vt-n-teal:#2fe6c8;
  --vt-n-text:#eaf4f1;
  --vt-n-muted:#829b96;
  --vt-n-warn:#ffb454;
  --vt-n-urgent:#ff7474
}

/* Bell now belongs to the header; floating is only a last-resort fallback. */
.vt-notify-button{
  position:relative;
  z-index:85;
  flex:0 0 auto;
  width:34px;
  height:34px;
  min-width:34px;
  min-height:34px;
  display:grid;
  place-items:center;
  margin:0 2px;
  padding:0;
  border:1px solid rgba(47,230,200,.22);
  border-radius:50%;
  background:rgba(7,16,15,.68);
  color:var(--vt-n-teal);
  opacity:1;
  box-shadow:none;
  cursor:pointer;
  transition:opacity .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease
}
.vt-notify-button.is-empty{
  opacity:.48;
  border-color:rgba(130,155,150,.18);
  color:#9bb0ac;
  background:rgba(7,16,15,.36)
}
.vt-notify-button.is-empty:hover,
.vt-notify-button.is-empty:focus-visible{
  opacity:.9
}
.vt-notify-button:hover,
.vt-notify-button:focus-visible{
  opacity:1;
  border-color:var(--vt-n-teal);
  background:#0b1817;
  outline:none
}
.vt-notify-button.role-admin{
  color:var(--vt-n-warn);
  border-color:rgba(255,180,84,.34)
}
.vt-notify-button.role-hybrid{
  border-color:rgba(255,180,84,.38);
  box-shadow:inset 0 0 0 1px rgba(47,230,200,.11)
}
.vt-notify-button svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8
}
.vt-notify-button.is-floating{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  top:74px;
  z-index:850
}
.vt-notify-count{
  position:absolute;
  right:-5px;
  top:-5px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  display:grid;
  place-items:center;
  border:2px solid #07100f;
  border-radius:999px;
  background:var(--vt-n-warn);
  color:#171006;
  font:800 8px 'JetBrains Mono',monospace
}
.vt-notify-count[hidden]{display:none!important}

.vt-notify-button.has-high{animation:vtBellHigh 1.75s ease-in-out infinite}
.vt-notify-button.has-urgent{
  color:var(--vt-n-urgent);
  border-color:rgba(255,116,116,.72);
  animation:vtBellUrgent .9s ease-in-out infinite
}
.vt-notify-button.flash-customer{animation:vtBellCustomer .46s ease-in-out 4}
.vt-notify-button.flash-admin{animation:vtBellAdmin .42s ease-in-out 5}
@keyframes vtBellHigh{50%{box-shadow:0 0 0 5px rgba(255,180,84,.07),0 0 19px rgba(255,180,84,.18)}}
@keyframes vtBellUrgent{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,116,116,.09),0 0 23px rgba(255,116,116,.26)}}
@keyframes vtBellCustomer{50%{transform:scale(1.07);box-shadow:0 0 0 7px rgba(47,230,200,.1),0 0 24px rgba(47,230,200,.25)}}
@keyframes vtBellAdmin{50%{transform:scale(1.07);box-shadow:0 0 0 7px rgba(255,180,84,.11),0 0 25px rgba(255,180,84,.28)}}

/* Dropdown is positioned from the bell by JS so it works with every header type. */
.vt-notify-panel{
  position:fixed;
  z-index:1000;
  width:min(390px,calc(100vw - 16px));
  max-height:min(72vh,680px);
  overflow:hidden;
  border:1px solid var(--vt-n-line);
  border-radius:11px;
  background:rgba(7,16,15,.99);
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  color:var(--vt-n-text);
  font-family:'Space Grotesk',sans-serif
}
.vt-notify-panel[hidden]{display:none!important}
.vt-notify-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--vt-n-line)
}
.vt-notify-head small{
  display:block;
  color:var(--vt-n-teal);
  font:700 7.5px 'JetBrains Mono',monospace;
  letter-spacing:.11em;
  text-transform:uppercase
}
.vt-notify-head h2{
  margin:4px 0 0!important;
  color:var(--vt-n-text)!important;
  font:700 17px 'Space Grotesk',sans-serif!important
}
.vt-notify-head-actions{
  display:flex;
  align-items:flex-end;
  gap:7px;
  flex-direction:column
}
.vt-notify-sound,.vt-notify-markall{
  border:0;
  background:none;
  color:var(--vt-n-teal);
  padding:1px 0;
  font:700 7.5px 'JetBrains Mono',monospace;
  text-transform:uppercase;
  cursor:pointer
}
.vt-notify-sound[aria-pressed="false"]{color:var(--vt-n-muted)}
.vt-notify-list{
  overflow:auto;
  max-height:calc(min(72vh,680px) - 70px);
  padding:6px
}
.vt-notify-item{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:inherit;
  padding:11px 10px;
  cursor:pointer
}
.vt-notify-item:hover,.vt-notify-item:focus-visible{
  background:rgba(47,230,200,.055);
  border-color:rgba(47,230,200,.16);
  outline:none
}
.vt-notify-item.unread{background:rgba(47,230,200,.042)}
.vt-notify-item.role-admin.unread{background:rgba(255,180,84,.042)}
.vt-notify-item.unread:before{
  content:"";
  position:absolute;
  left:4px;
  top:15px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--vt-n-teal)
}
.vt-notify-item.role-admin.unread:before{background:var(--vt-n-warn)}
.vt-notify-item.high{border-left:2px solid var(--vt-n-warn)}
.vt-notify-role{
  display:inline-flex;
  margin:0 0 6px;
  padding:3px 6px;
  border:1px solid rgba(47,230,200,.24);
  border-radius:999px;
  color:var(--vt-n-teal);
  font:800 6.8px 'JetBrains Mono',monospace;
  letter-spacing:.07em
}
.vt-notify-role.role-admin{
  border-color:rgba(255,180,84,.34);
  color:var(--vt-n-warn)
}
.vt-notify-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  font-size:11.5px;
  font-weight:700
}
.vt-notify-title time{
  flex:none;
  color:var(--vt-n-muted);
  font:7px 'JetBrains Mono',monospace;
  font-weight:400
}
.vt-notify-message{
  display:block;
  margin-top:4px;
  color:var(--vt-n-muted);
  font-size:10.5px;
  line-height:1.45
}
.vt-notify-action{
  display:inline-block;
  margin-top:7px;
  color:var(--vt-n-teal);
  font:700 7.5px 'JetBrains Mono',monospace;
  text-transform:uppercase
}
.vt-notify-item.role-admin .vt-notify-action{color:var(--vt-n-warn)}
.vt-notify-empty{
  padding:22px 14px;
  text-align:center;
  color:var(--vt-n-muted);
  font-size:11.5px
}

/* Realtime pop-up only; persistent action cards already exist in account/admin. */
.vt-notify-toast{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  z-index:1100;
  width:min(360px,calc(100vw - 24px));
  border:1px solid rgba(47,230,200,.45);
  border-radius:9px;
  background:#0a1514;
  color:var(--vt-n-text);
  box-shadow:0 18px 60px rgba(0,0,0,.65);
  padding:13px;
  text-align:left;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer
}
.vt-notify-toast.role-admin{
  border-color:rgba(255,180,84,.55);
  background:#151107
}
.vt-notify-toast.priority-urgent{
  border-color:rgba(255,116,116,.72);
  box-shadow:0 18px 60px rgba(0,0,0,.65),0 0 26px rgba(255,116,116,.15)
}
.vt-notify-toast small{
  display:block;
  color:var(--vt-n-teal);
  font:800 7px 'JetBrains Mono',monospace;
  letter-spacing:.09em
}
.vt-notify-toast.role-admin small{color:var(--vt-n-warn)}
.vt-notify-toast b{display:block;font-size:12px;margin-top:4px}
.vt-notify-toast span{
  display:block;
  color:var(--vt-n-muted);
  font-size:10.5px;
  line-height:1.45;
  margin-top:4px
}
.vt-notify-toast em{
  display:block;
  color:var(--vt-n-teal);
  font:700 7.5px 'JetBrains Mono',monospace;
  font-style:normal;
  text-transform:uppercase;
  margin-top:7px
}
.vt-notify-toast.role-admin em{color:var(--vt-n-warn)}

@media(max-width:620px){
  .vt-notify-button{width:32px;height:32px;min-width:32px;min-height:32px}
  .vt-notify-panel{width:calc(100vw - 12px)}
  .vt-notify-head{gap:7px;padding:12px}
  .vt-notify-head-actions{min-width:70px}
}

@media(prefers-reduced-motion:reduce){
  .vt-notify-button,
  .vt-notify-button.has-high,
  .vt-notify-button.has-urgent,
  .vt-notify-button.flash-admin,
  .vt-notify-button.flash-customer{
    animation:none!important;
    transform:none!important
  }
}

@media print{
  .vt-notify-button,.vt-notify-panel,.vt-notify-toast{display:none!important}
}


/* v5.1 notification lifecycle clarity */
.vt-notify-section-label{padding:10px 10px 5px;color:var(--vt-n-warn);font:800 7px 'JetBrains Mono',monospace;letter-spacing:.11em;text-transform:uppercase}
.vt-notify-section-label.history-label{margin-top:4px;padding-top:12px;border-top:1px solid rgba(130,155,150,.12);color:var(--vt-n-muted)}
.vt-notify-clear{margin:7px;padding:14px 12px;border:1px solid rgba(47,230,200,.15);border-radius:7px;background:rgba(47,230,200,.025)}
.vt-notify-clear b{display:block;color:var(--vt-n-text);font-size:11px}
.vt-notify-clear span{display:block;margin-top:3px;color:var(--vt-n-muted);font-size:9.5px;line-height:1.45}
.vt-notify-item.history{opacity:.66}
.vt-notify-item.history:hover,.vt-notify-item.history:focus-visible{opacity:1}


/* v5.2 — notification overlay deliberately reads as a popup, not another page */
.vt-notify-scrim{position:fixed;inset:0;z-index:990;background:rgba(0,3,5,.58);-webkit-backdrop-filter:blur(2.5px) saturate(.72);backdrop-filter:blur(2.5px) saturate(.72)}
.vt-notify-scrim[hidden]{display:none!important}
html.vt-notify-open{overflow:hidden}
.vt-notify-panel{z-index:1000;max-height:min(68vh,620px);overflow:visible;border:1px solid rgba(77,225,205,.46);border-top:2px solid rgba(47,230,200,.72);border-radius:16px;background:radial-gradient(circle at 18% 0%,rgba(47,230,200,.10),transparent 33%),linear-gradient(155deg,rgba(18,31,33,.995),rgba(8,14,16,.995) 58%,rgba(11,18,20,.995));box-shadow:0 32px 100px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.035),0 0 42px rgba(47,230,200,.09);outline:1px solid rgba(0,0,0,.55)}
.vt-notify-panel.context-admin{border-color:rgba(255,180,84,.48);border-top-color:rgba(255,180,84,.82);background:radial-gradient(circle at 18% 0%,rgba(255,180,84,.105),transparent 34%),linear-gradient(155deg,rgba(32,27,18,.995),rgba(11,15,16,.995) 56%,rgba(13,18,19,.995));box-shadow:0 32px 100px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.035),0 0 42px rgba(255,180,84,.08)}
.vt-notify-panel.context-hybrid{border-top-color:rgba(255,180,84,.72)}
.vt-notify-panel::before{content:"";position:absolute;top:-8px;left:calc(var(--vt-panel-anchor,50%) - 7px);width:14px;height:14px;transform:rotate(45deg);border-left:1px solid rgba(77,225,205,.46);border-top:1px solid rgba(77,225,205,.46);background:#142225}
.vt-notify-panel.context-admin::before{border-color:rgba(255,180,84,.5);background:#241e14}
.vt-notify-head{position:relative;padding:15px 42px 13px 15px;border-bottom:1px solid rgba(255,255,255,.075);border-radius:14px 14px 0 0;background:linear-gradient(90deg,rgba(47,230,200,.07),rgba(255,255,255,.018))}
.vt-notify-panel.context-admin .vt-notify-head{background:linear-gradient(90deg,rgba(255,180,84,.075),rgba(255,255,255,.014))}
.vt-notify-head h2{font-size:16px!important;letter-spacing:-.015em}
.vt-notify-close{position:absolute;top:12px;right:12px;width:27px;height:27px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.10);border-radius:50%;background:rgba(255,255,255,.035);color:#a9bbb7;font:400 19px/1 system-ui,sans-serif;cursor:pointer}
.vt-notify-close:hover,.vt-notify-close:focus-visible{color:#fff;border-color:rgba(47,230,200,.45);background:rgba(47,230,200,.08);outline:none}
.vt-notify-panel.context-admin .vt-notify-close:hover,.vt-notify-panel.context-admin .vt-notify-close:focus-visible{border-color:rgba(255,180,84,.48);background:rgba(255,180,84,.07)}
.vt-notify-list{max-height:calc(min(68vh,620px) - 72px);margin:0 6px 6px;padding:6px 3px 8px;border-radius:0 0 11px 11px;background:rgba(0,4,6,.31)}
.vt-notify-item{margin:3px 0;border:1px solid rgba(255,255,255,.045);background:rgba(255,255,255,.018)}
.vt-notify-item:hover,.vt-notify-item:focus-visible{transform:translateY(-1px);background:rgba(47,230,200,.065);border-color:rgba(47,230,200,.22)}
.vt-notify-item.role-admin:hover,.vt-notify-item.role-admin:focus-visible{background:rgba(255,180,84,.055);border-color:rgba(255,180,84,.22)}
.vt-notify-item.history{opacity:.58;background:rgba(255,255,255,.008)}
.vt-notify-clear{border-color:rgba(47,230,200,.20);background:rgba(47,230,200,.04)}
.vt-notify-panel.context-admin .vt-notify-clear{border-color:rgba(255,180,84,.18);background:rgba(255,180,84,.035)}
@media(max-width:620px){.vt-notify-panel{max-height:min(66vh,590px)}.vt-notify-list{max-height:calc(min(66vh,590px) - 72px)}.vt-notify-head{padding:13px 38px 12px 13px}}
@media(prefers-reduced-motion:reduce){.vt-notify-item{transition:none!important}.vt-notify-item:hover,.vt-notify-item:focus-visible{transform:none!important}}
@media print{.vt-notify-scrim{display:none!important}}