/* ═══════════════════════════════════════════════════════════════════
   BNL GENIE LAUNCHER — site-wide Light Genie dock
   Brighter Nights Lighting Technologies · v2.0 · 2026-08-15

   Ported verbatim from the Growth Capital Briefing dock (the ruled
   visual standard, Austen 2026-08-15) with the standing site rulings
   applied on top:
     · 210px desktop figure (Austen 2026-08-02, BRI-361 — supersedes
       the deck's 150px; change --bnl-genie-size to revisit)
     · breakpoints 210 / 168 / 132 / 108 (BRI-361)
     · safe-area insets + sticky-CTA clearance variable
       (bnl-genie-launcher-DOCK-CLEARANCE-PATCH lineage)
     · audience NAMES, never tier integers (BRI-353 C)
   Component vars are self-contained: site tokens are consumed when
   present, with hard fallbacks so the dock never renders unstyled.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bnl-genie-size:210px;                 /* figure height, desktop — ruled 2026-08-02 */
  --bnl-genie-clearance:0px;              /* pages with a sticky bottom CTA raise the dock */
  --lg-font-display:var(--font-display,'Bricolage Grotesque','Sora',system-ui,sans-serif);
  --lg-font-body:var(--font-body,'Sora',system-ui,sans-serif);
  --lg-radius-pill:var(--radius-pill,999px);
  --lg-accent:#00A9B5;                    /* deck teal */
  --lg-accent-2:#E3056B;                  /* deck pink */
  --lg-ice:#8FE3E9;
}

/* ── Dock frame ─────────────────────────────────────────────────── */
.lg-dock{position:fixed;
  right:calc(18px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px) + var(--bnl-genie-clearance));
  z-index:9000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  pointer-events:none}                    /* the box never eats clicks — only its children do */
.lg-dock>*{pointer-events:auto}

/* ── "Your wish is my command" pill ─────────────────────────────── */
.lg-wish{align-self:flex-end;margin-bottom:-2px;padding:6px 13px;border-radius:var(--lg-radius-pill);
  font-family:var(--lg-font-display);font-weight:700;font-size:11.5px;letter-spacing:.02em;white-space:nowrap;
  color:#DDF6F8;background:rgba(10,12,14,.82);border:1px solid rgba(143,227,233,.34);
  box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 22px rgba(0,169,181,.18);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  animation:lgwish 6s ease-in-out infinite}
.lg-panel.on ~ .lg-wish,.lg-panel.in ~ .lg-wish{opacity:0}

/* ── The genie figure (the launcher) ────────────────────────────── */
.lg-fab{position:relative;display:block;border:0;cursor:pointer;padding:6px 22px 6px 6px;
  background:none;border-radius:0;box-shadow:none;overflow:visible;line-height:0;
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.lg-fab:hover{transform:translateY(-3px) scale(1.04)}
.lg-fab:active{transform:translateY(0) scale(.99)}
.lg-fab__l{width:calc(var(--bnl-genie-size) * .862);height:var(--bnl-genie-size);
  flex:0 0 auto;display:block;margin:0}
.lg-av{position:relative;display:block;background:none;border:0;box-shadow:none;overflow:visible}
.lg-av img{width:100%;height:100%;object-fit:contain;display:block;
  filter:none;animation:lgfloat 5.4s ease-in-out infinite}
.lg-fab:hover .lg-av img{filter:brightness(1.08)}
.lg-fab__hint{display:none}                             /* a11y text, visually replaced by the figure */
.lg-fab::after{content:'';position:absolute;inset:-6px;border-radius:22px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(143,227,233,.9);opacity:0;transition:opacity .3s}
.lg-fab:focus-visible::after{opacity:1}
.lg-pulse{display:none}

/* ── Panel ──────────────────────────────────────────────────────── */
.lg-panel{width:min(400px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));
  display:none;flex-direction:column;overflow:hidden;
  border-radius:20px;border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(170deg,#15181b 0%,#101214 52%,#0b0c0d 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.66),0 0 0 1px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.97);opacity:0;
  transition:opacity .3s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1)}
.lg-panel.on{display:flex}
.lg-panel.in{opacity:1;transform:translateY(0) scale(1)}

.lg-head{display:flex;align-items:center;gap:11px;padding:15px 14px 13px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.lg-head__l{width:64px;height:64px;flex:0 0 64px;display:block;margin:0;background:none;box-shadow:none}
.lg-head__l img{filter:none}
.lg-head__t{font-family:var(--lg-font-display);font-weight:800;font-size:15px;letter-spacing:-.02em;color:#fff;line-height:1.15}
.lg-head__s{font-size:10.5px;color:var(--color-text-muted,#9aa1a6);letter-spacing:.01em;margin-top:2px}
.lg-x{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.14);color:#cfd3d6;
  width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.lg-x:hover{background:rgba(255,255,255,.08);color:#fff}

.lg-log{flex:1;overflow-y:auto;padding:16px 15px 6px;display:flex;flex-direction:column;gap:13px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.lg-log::-webkit-scrollbar{width:7px}
.lg-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:4px}

.lg-msg{max-width:92%;font-size:13.5px;line-height:1.58;border-radius:14px;padding:11px 13px;
  animation:lgin .34s cubic-bezier(.2,.7,.3,1) both}
.lg-msg--you{align-self:flex-end;background:linear-gradient(120deg,rgba(0,169,181,.20),rgba(227,5,107,.16));
  border:1px solid rgba(0,169,181,.34);color:#eaf7f8}
.lg-msg--g{align-self:flex-start;background:#191c1f;border:1px solid rgba(255,255,255,.09);color:#DDE1E3}
.lg-msg--g b{color:#fff;font-weight:600}
.lg-msg--g .lg-num{font-family:var(--lg-font-display);font-weight:800;color:var(--lg-ice);letter-spacing:-.01em}
.lg-msg--g .lg-warn{color:#FFC59B}

.lg-jump{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-family:var(--lg-font-display);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--lg-radius-pill);cursor:pointer;text-decoration:none;
  background:color-mix(in srgb,#00A9B5 12%,transparent);
  border:1px solid color-mix(in srgb,#00A9B5 40%,transparent);color:var(--lg-ice);transition:.2s}
.lg-jump:hover{background:color-mix(in srgb,#00A9B5 22%,transparent);color:#fff}

.lg-dots{display:inline-flex;gap:4px;align-items:center;height:12px}
.lg-dots i{width:5px;height:5px;border-radius:50%;background:var(--lg-ice);opacity:.35;animation:lgdot 1.1s infinite}
.lg-dots i:nth-child(2){animation-delay:.15s}
.lg-dots i:nth-child(3){animation-delay:.3s}

.lg-chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 15px 12px}
.lg-chip{font-size:11.5px;padding:7px 11px;border-radius:var(--lg-radius-pill);cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);color:#C6CBCE;
  transition:.2s;font-family:var(--lg-font-body)}
.lg-chip:hover{background:color-mix(in srgb,#00A9B5 14%,transparent);border-color:color-mix(in srgb,#00A9B5 45%,transparent);color:#fff}

.lg-bar{display:flex;gap:8px;align-items:center;padding:11px 12px 12px;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.lg-in{flex:1;background:#0d0f11;border:1px solid rgba(255,255,255,.14);border-radius:11px;
  color:#EDEFF0;font-family:var(--lg-font-body);font-size:13.5px;padding:11px 12px;outline:none;transition:.2s;min-width:0}
.lg-in::placeholder{color:#6C7276}
.lg-in:focus{border-color:var(--lg-accent);box-shadow:0 0 0 3px rgba(0,169,181,.16);background:#111417}
.lg-send{flex:0 0 auto;border:0;cursor:pointer;width:40px;height:40px;border-radius:11px;
  background:linear-gradient(120deg,var(--lg-accent),var(--lg-accent-2));color:#04191b;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.lg-send:hover{filter:brightness(1.1)}
.lg-send:disabled{opacity:.4;cursor:default}
.lg-foot{font-size:10px;color:#6C7276;text-align:center;padding:0 12px 10px;line-height:1.45}

/* ── Breakpoints — ruled sizes 210/168/132/108 (BRI-361) ────────── */
@media (max-width:900px){
  :root{--bnl-genie-size:168px}
}
@media (max-width:640px){
  .lg-dock{right:calc(12px + env(safe-area-inset-right,0px));
    bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--bnl-genie-clearance));
    left:12px;align-items:stretch}
  .lg-fab{align-self:flex-end;padding:0}
  .lg-panel{width:100%;height:min(72vh,540px)}
  .lg-wish{font-size:10.5px;padding:5px 11px}
}
@media (max-width:600px){
  :root{--bnl-genie-size:132px}
}
@media (max-height:460px){
  :root{--bnl-genie-size:108px}
}

/* ── Reduced motion + print ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .lg-panel,.lg-fab{transition:none}
  .lg-wish,.lg-msg,.lg-pulse,.lg-av img{animation:none}
  .lg-dots i{animation:none;opacity:.7}
}
@media print{
  .lg-dock{display:none!important}
}

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes lgdot{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes lgin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes lgwish{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}