/* ========================================================================
   AI LAB /demo : the frame around the dashboard showcase.
   The dashboard keeps its own product UI (dashboard.css). This file only adds
   the slim "Demo mode" strip on top and adjusts the app height so nothing
   is covered. Language: midnight, electric blue, a violet hairline of glass.
   ======================================================================== */
:root{
  --nv-frame-h:38px;
  --nv-midnight:#0A0F1C;
  --nv-blue:#0274DE;
  --nv-blue-light:#5FA8FF;
  --nv-vio:rgba(160,120,255,.55);
  --nv-ease:cubic-bezier(.4,0,.2,1);
}

/* the strip: normal flow, above the scrim (z 30) and menus (z 60), below modal (z 200) */
.nv-frame{
  position:relative;z-index:120;height:var(--nv-frame-h);
  display:flex;align-items:center;gap:14px;padding:0 16px 0 18px;
  font-family:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12.5px;line-height:1;
  color:#EAF3FF;background:
    radial-gradient(120% 160% at 12% -40%,rgba(95,168,255,.16),rgba(95,168,255,0) 60%),
    linear-gradient(180deg,#0D1424 0%,var(--nv-midnight) 100%);
  border-bottom:1px solid rgba(150,190,255,.14);
  box-shadow:inset 0 1px 0 rgba(200,225,255,.08),0 6px 18px -12px rgba(0,10,40,.7);
  -webkit-font-smoothing:antialiased;
}
/* one violet refraction hairline along the top edge, the AI LAB signature */
.nv-frame::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(120,170,255,.55) 22%,var(--nv-vio) 34%,rgba(120,170,255,0) 52%)}

.nv-frame-mode{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.nv-frame-dot{position:relative;width:7px;height:7px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#CFE4FF 30%,var(--nv-blue-light) 100%);
  box-shadow:0 0 0 .5px rgba(255,255,255,.35),0 0 6px 1px rgba(95,168,255,.85),0 0 14px 3px rgba(2,116,222,.35)}
.nv-frame-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(95,168,255,.55);
  animation:nvPulse 2.6s var(--nv-ease) infinite}
@keyframes nvPulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}

.nv-frame-sep{width:1px;height:14px;flex:none;background:linear-gradient(180deg,transparent,rgba(150,190,255,.45),transparent)}
.nv-frame-note{color:rgba(234,243,255,.58);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nv-frame-note b{color:rgba(234,243,255,.86);font-weight:600}

.nv-frame-back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px 0 10px;border-radius:999px;flex:none;
  color:#EAF3FF;font-weight:600;font-size:12px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  border:1px solid rgba(150,190,255,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 55%,rgba(40,80,200,.14));
  box-shadow:inset 0 1px 0 rgba(220,236,255,.28),inset 0 -1px 0 rgba(0,10,40,.45);
  transition:border-color .28s var(--nv-ease),background .28s var(--nv-ease),transform .28s var(--nv-ease),box-shadow .28s var(--nv-ease)}
.nv-frame-back svg{display:block;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--nv-ease)}
.nv-frame-back:hover{border-color:rgba(120,180,255,.6);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 55%,rgba(2,116,222,.28));
  box-shadow:inset 0 1px 0 rgba(220,236,255,.4),0 6px 14px -8px rgba(2,116,222,.7);transform:translateY(-1px)}
.nv-frame-back:hover svg{transform:translateX(-3px)}
.nv-frame-back:focus-visible{outline:2px solid var(--nv-blue-light);outline-offset:2px}
.nv-frame-back .nv-frame-lab{color:var(--nv-blue-light);letter-spacing:.2em;font-size:10.5px;margin-left:1px}

/* ---- adjust the product shell so the strip never overlaps it ---- */
.app{height:calc(100vh - var(--nv-frame-h));height:calc(100dvh - var(--nv-frame-h))}
@media (max-width:860px){
  .sidebar{top:var(--nv-frame-h);height:calc(100% - var(--nv-frame-h))}
}
@media (max-width:640px){
  .nv-frame{gap:10px;padding:0 12px 0 14px}
  .nv-frame-note{display:none}
  .nv-frame-sep{display:none}
}
/* phones: the product's topbar overflows by ~140px on the Overview (range + bell + theme + export
   + new report + avatar). Drop the three controls that are demo-disabled or duplicated elsewhere
   (notifications, print/export, theme toggle: theme lives in Settings) so nothing is clipped. */
@media (max-width:560px){
  .topbar .icon-btn[title="Notifications"],.topbar .icon-btn[title="Toggle theme"],.topbar .menu-wrap:has(.btn-export){display:none}
}
@media (max-width:360px){
  .nv-frame-back span:not(.nv-frame-lab){display:none}
}
@media (prefers-reduced-motion:reduce){
  .nv-frame-dot::after{animation:none;opacity:0}
  .nv-frame-back,.nv-frame-back svg{transition:none}
}
@media print{.nv-frame{display:none}}