/* ==========================================================================
   DGTechQA — Mobile status bar: bigger tiles + animated aurora background
   Loaded last in dgtechqa_mobile.html. To revert: remove its <link>.
   ========================================================================== */
@property --msb-ang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes msbAurora{ 0%{ background-position:0% 0%,100% 0%,50% 100%,0 0; } 100%{ background-position:100% 40%,0% 60%,80% 20%,40px 0; } }
@keyframes msbRise  { 0%{ transform:translateY(8px); opacity:0; } 25%{ opacity:.9; } 100%{ transform:translateY(-46px); opacity:0; } }
@keyframes msbScan  { 0%,40%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@keyframes msbFlow  { to{ background-position:250% 0; } }
@keyframes msbIn    { from{ opacity:0; transform:translateY(-8px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes msbBeat  { 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.4); } 28%{ transform:scale(1); } 42%{ transform:scale(1.2); } }
@keyframes msbPing  { 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(3); opacity:0; } }
@keyframes msbPing2 { 0%{ transform:scale(1); opacity:.6; } 80%,100%{ transform:scale(2.2); opacity:0; } }
@keyframes msbSpin  { to{ --msb-ang:360deg; } }
@keyframes msbBlink { 0%,100%{ opacity:1; } 50%{ opacity:.2; } }

html[data-mobile-app] body .status-bar{
  position:relative; overflow:hidden !important; isolation:isolate;
  display:grid !important; grid-template-columns:1fr 1fr 1.15fr 1.2fr; gap:5px !important;
  padding:9px 8px 11px !important; border:0 !important; font-size:8.5px !important; color:rgba(255,255,255,.85) !important;
  background:
    radial-gradient(45% 140% at 8% 15%, rgba(228,37,39,.42), transparent 70%),
    radial-gradient(45% 140% at 92% 25%, rgba(37,211,102,.30), transparent 70%),
    radial-gradient(40% 130% at 50% 115%, rgba(34,109,180,.42), transparent 70%),
    linear-gradient(90deg,#04342e 0%,#075E54 50%,#04342e 100%) !important;
  background-size:170% 170%,170% 170%,170% 170%,100% 100% !important;
  animation:msbAurora 12s ease-in-out infinite alternate;
}
/* rising sparks */
html[data-mobile-app] body .status-bar::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1.4px,transparent 2.4px) 8% 90%/80px 50px no-repeat,
    radial-gradient(circle,rgba(255,200,61,.95) 0 1.8px,transparent 2.8px) 30% 82%/90px 50px no-repeat,
    radial-gradient(circle,rgba(124,196,255,.9) 0 1.4px,transparent 2.4px) 55% 94%/100px 50px no-repeat,
    radial-gradient(circle,rgba(255,255,255,.85) 0 1.4px,transparent 2.4px) 76% 86%/90px 50px no-repeat,
    radial-gradient(circle,rgba(110,231,214,.95) 0 1.8px,transparent 2.8px) 93% 92%/80px 50px no-repeat;
  animation:msbRise 5s ease-out infinite;
}
/* scanning shine + flowing colour line */
html[data-mobile-app] body .status-bar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,transparent,#e42527,#ffc83d,#25D366,#226db4,transparent); background-size:250% 100%; animation:msbFlow 5s linear infinite;
}

/* tiles */
html[data-mobile-app] body .status-bar .s-item{
  position:relative; overflow:hidden; flex-direction:column; align-items:center !important; justify-content:center; gap:1px !important;
  padding:9px 3px 5px !important; border-radius:11.5px; text-align:center; line-height:1.15;
  font-size:8.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.82); white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -8px rgba(0,0,0,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:msbIn .55s cubic-bezier(.22,1,.36,1) both;
}
html[data-mobile-app] body .status-bar .s-item:nth-child(2){ animation-delay:.1s; }
html[data-mobile-app] body .status-bar .s-item:nth-child(3){ animation-delay:.2s; }
html[data-mobile-app] body .status-bar .s-item:nth-child(4){ animation-delay:.3s; }
html[data-mobile-app] body .status-bar .s-item::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; left:0; transform:translateX(-130%) skewX(-20deg); pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); animation:msbScan 6s ease-in-out infinite;
}
html[data-mobile-app] body .status-bar .s-item:nth-child(2)::after{ animation-delay:.4s; }
html[data-mobile-app] body .status-bar .s-item:nth-child(3)::after{ animation-delay:.8s; }
html[data-mobile-app] body .status-bar .s-item span[id]{
  display:block; font-size:15px; line-height:1.05; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 12px var(--c);
}
/* coloured live dot in each tile corner */
html[data-mobile-app] body .status-bar .s-item:nth-child(1){ --c:#25D366; }
html[data-mobile-app] body .status-bar .s-item:nth-child(2){ --c:#4aa8ff; }
html[data-mobile-app] body .status-bar .s-item:nth-child(3){ --c:#ffc83d; }
html[data-mobile-app] body .status-bar .s-dot{
  position:absolute !important; top:4px; right:5px; width:5px !important; height:5px !important;
  background:var(--c) !important; box-shadow:0 0 8px var(--c) !important; animation:msbBeat 2.2s ease-in-out infinite;
}
html[data-mobile-app] body .status-bar .s-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--c); animation:msbPing2 1.8s ease-out infinite; }

/* clock tile with spinning colour ring */
html[data-mobile-app] body .status-bar #mClock{
  margin:0 !important; font-size:13.5px; font-weight:800; letter-spacing:.04em; color:#fff; font-variant-numeric:tabular-nums;
  border:2px solid transparent; text-shadow:0 0 12px rgba(124,196,255,.8);
  background:linear-gradient(#06312c,#06312c) padding-box, conic-gradient(from var(--msb-ang),#e42527,#ffc83d,#25D366,#226db4,#e42527) border-box;
  animation:msbIn .55s cubic-bezier(.22,1,.36,1) .3s both, msbSpin 4s linear infinite;
}
html[data-mobile-app] body .status-bar #mClock::before{
  content:"LIVE"; display:block; font-size:7px; font-weight:800; letter-spacing:.18em; color:#ff6b6b; margin-bottom:1px;
  animation:msbBlink 1.2s steps(1) infinite;
}
html[data-mobile-app] body .status-bar #mClock::after{ display:none; }

@media (max-width:360px){
  html[data-mobile-app] body .status-bar{ gap:4px !important; padding-left:5px !important; padding-right:5px !important; }
  html[data-mobile-app] body .status-bar .s-item span[id]{ font-size:14px; }
  html[data-mobile-app] body .status-bar #mClock{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  html[data-mobile-app] body .status-bar, html[data-mobile-app] body .status-bar *, html[data-mobile-app] body .status-bar::before, html[data-mobile-app] body .status-bar::after{ animation:none !important; }
}