/* ACCESS REQUESTS BELL — Pulse > Access Codes (2026-10-04)
   The "Waiting for a code" banner becomes a bell + badge in the navy header; the list opens as a floating card
   and closes on any outside tap. See js/178-access-requests-bell.js. */

.vc-otac-panel{position:relative;}

/* ---- bell button (sits right after the "Access Codes" title) ---- */
.arb-box{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;}
.req-cc .vc-otac-panel .vc-panel-head .arb-btn,
.vc-otac-panel .arb-btn{
  position:relative;flex:none;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--cd-gold2,#DDBB94);font-size:16px;cursor:pointer;
  transition:background .15s,transform .15s,border-color .15s,color .15s;
}
.req-cc .vc-otac-panel .vc-panel-head .arb-btn:hover,
.vc-otac-panel .arb-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px);}
.vc-otac-panel .arb-btn:focus-visible{outline:2px solid var(--cd-gold2,#DDBB94);outline-offset:2px;}
.vc-otac-panel .arb-btn[aria-expanded="true"]{background:var(--cd-gold,#CEA577);border-color:var(--cd-gold2,#DDBB94);color:#162D4C;}

/* something is waiting: warm gold bell + a soft ring that breathes */
.vc-otac-panel .arb-btn:not([data-n="0"]){border-color:rgba(224,138,0,.75);color:#ffd48a;animation:arbRing 2.2s ease-out infinite;}
.vc-otac-panel .arb-btn:not([data-n="0"]) i{animation:arbSwing 2.2s ease-in-out infinite;transform-origin:50% 8%;}
.vc-otac-panel .arb-btn[aria-expanded="true"] i{animation:none;}
.vc-otac-panel .arb-btn[aria-expanded="true"]{animation:none;}

.arb-badge{
  position:absolute;top:-7px;inset-inline-end:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:#E5484D;color:#fff;font:800 11px/1 var(--cd-mono,monospace);letter-spacing:0;border:2px solid #162D4C;
  box-shadow:0 2px 6px rgba(0,0,0,.35);pointer-events:none;
}
.arb-badge[hidden]{display:none;}

@keyframes arbRing{0%{box-shadow:0 0 0 0 rgba(224,138,0,.55);}70%,100%{box-shadow:0 0 0 9px rgba(224,138,0,0);}}
@keyframes arbSwing{0%,60%,100%{transform:rotate(0);}10%{transform:rotate(14deg);}20%{transform:rotate(-12deg);}30%{transform:rotate(8deg);}40%{transform:rotate(-5deg);}50%{transform:rotate(2deg);}}
@media (prefers-reduced-motion:reduce){
  .vc-otac-panel .arb-btn,.vc-otac-panel .arb-btn i{animation:none!important;transition:none;}
}

/* ---- the list: hidden until the bell is tapped, then floats over the page (takes no room) ---- */
.vc-otac-panel #otacRequestsHost.arb-pop{
  display:none;position:absolute;z-index:40;inset-inline:14px;top:var(--arb-top,70px);
  max-height:min(72vh,640px);overflow:auto;overscroll-behavior:contain;
  border-radius:16px;background:#fff;
  box-shadow:0 26px 60px -14px rgba(8,20,44,.6),0 0 0 1px rgba(15,33,64,.18);
}
.vc-otac-panel #otacRequestsHost.arb-pop.is-open{display:block;animation:arbIn .16s ease-out;}
@keyframes arbIn{from{opacity:0;transform:translateY(-8px) scale(.985);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.vc-otac-panel #otacRequestsHost.arb-pop.is-open{animation:none;}}

.arb-pop .oc-req{margin:0;border-radius:16px;overflow:visible;}
.arb-pop .oc-req.is-empty{border-radius:16px;}
.arb-pop .oc-req-head{position:sticky;top:0;z-index:2;border-radius:14px 14px 0 0;}
.arb-pop .oc-req > .oc-req-row:last-child{border-radius:0 0 14px 14px;}

@media (max-width:640px){
  .vc-otac-panel #otacRequestsHost.arb-pop{inset-inline:8px;max-height:min(78vh,640px);}
  .req-cc .vc-otac-panel .vc-panel-head .arb-btn,.vc-otac-panel .arb-btn{width:38px;height:38px;}
}