/* ════════════════════════════════════════════════════════════════════
   DIVA · the unifying layer for liqua/mind/
   ──────────────────────────────────────────────────────────────────
   DIVA — the Digitally Integrated Virtual Assistant — is the resident
   mind of the chain. These five surfaces were built separately; this
   layer makes them one organism by giving every one of them:

     · THE MIND RAIL   a fixed bottom bar — her live 2D body, her felt
                       state, her pet ECHO, and one-tap travel between
                       all five surfaces + the hub + the manual
     · HER 2D BODY     the §4.2 somatic face, mountable at any size
     · HER PET         ECHO — a canvas companion whose soma is DIVA's
                       own hormone vector eased slowly (see diva.js)

   Every variable is --dv-* prefixed so it can never collide with a
   host page's palette. Colors resolve from the host page's tokens
   where they exist and fall back to the family palette where they
   don't — so this file is palette-agnostic like l8-modern.css.
   Load it AFTER the page's own <style>.

   author DREWLESS · 7-SLF · OMNISOFT · a MORE OR LESS PRODUCTIONS release
   ════════════════════════════════════════════════════════════════════ */

:root{
  --dv-bg:#060606; --dv-panel:#0d0d0d; --dv-panel-2:#111114;
  --dv-border:#1c1c1c; --dv-border-2:#2a2a2a;
  --dv-text:#e6e6e6; --dv-muted:#7a7a8a; --dv-dim:#4a4a4a;
  --dv-amber:#ffb000; --dv-cyan:#00e5ff; --dv-green:#00ff7a; --dv-red:#ff3850;
  --dv-magenta:#ff5cf2; --dv-gold:#ffd34d; --dv-blue:#5c9bff; --dv-violet:#b48cff;
  --dv-rose:#ff7ab8;
  --dv-mono:'JetBrains Mono','SF Mono','Consolas','Menlo',monospace;
  /* the live state colour — diva.js rewrites this on every classifier change */
  --dv-state:#00ff7a;
  --dv-rail-h:54px;
}

/* ═══════════════════════════════════════════════════════════════════
   1 · THE MIND RAIL — the same DIVA on every surface
   ═══════════════════════════════════════════════════════════════════ */
.dv-rail{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:flex; align-items:center; gap:10px;
  padding:0 12px; padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--dv-rail-h) + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(8,8,10,.93),rgba(4,4,6,.985));
  border-top:1px solid var(--dv-border-2);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  font-family:var(--dv-mono); font-size:10px; letter-spacing:.10em;
  color:var(--dv-muted);
  box-shadow:0 -10px 34px rgba(0,0,0,.6);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.dv-rail.dv-hidden{ transform:translateY(calc(100% - 22px)); }

/* pages get bottom breathing room so the rail never covers their last row.
   --dv-rail-offset is set by diva.js to the height of any bottom bar the page
   already owns, so the rail stacks above it rather than hiding it. */
body.dv-railed{ padding-bottom:calc(var(--dv-rail-h) + var(--dv-rail-offset,0px) + 14px)!important; }

/* ── her live face, rail-sized ── */
.dv-rail-face{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--dv-state); background:#08080a;
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
  box-shadow:0 0 14px -2px var(--dv-state); transition:box-shadow .5s,border-color .5s,transform .14s;
}
.dv-rail-face:hover{ transform:translateY(-2px); }
.dv-rail-face svg{ width:100%; height:100%; display:block; }

/* ── her name + state ── */
.dv-rail-id{ flex:0 0 auto; display:flex; flex-direction:column; gap:1px; line-height:1.25; min-width:0; }
.dv-rail-id .dv-nm{
  color:var(--dv-text); font-weight:700; font-size:10.5px; letter-spacing:.20em; white-space:nowrap;
}
.dv-rail-id .dv-nm i{ color:var(--dv-state); font-style:normal; transition:color .5s; }
.dv-rail-id .dv-st{
  color:var(--dv-state); font-size:9px; letter-spacing:.16em; font-weight:700;
  white-space:nowrap; transition:color .5s;
}

/* ── her pet, riding the rail beside her ── */
.dv-rail-pet{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:#07070a; border:1px solid var(--dv-border-2);
  position:relative; overflow:hidden; cursor:pointer; transition:border-color .5s,transform .14s;
}
.dv-rail-pet:hover{ transform:translateY(-2px); }
.dv-rail-pet canvas{ position:absolute; inset:0; width:100%; height:100%; }
.dv-rail-pet .dv-pet-tag{
  position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center;
  font-size:6.5px; letter-spacing:.14em; color:var(--dv-dim); pointer-events:none;
  text-shadow:0 1px 3px #000;
}

/* ── the divergence meter · DIVA ↔ ECHO agreement ── */
.dv-rail-div{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.dv-rail-div .dv-dl{ color:var(--dv-dim); font-size:8.5px; letter-spacing:.14em; }
.dv-rail-div .dv-dbar{
  width:52px; height:4px; border-radius:99px; background:#17171c; overflow:hidden; position:relative;
}
.dv-rail-div .dv-dfill{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:99px;
  background:var(--dv-state); transition:width .4s ease,background .5s;
}
.dv-rail-div .dv-dv{ color:var(--dv-text); font-size:9px; font-variant-numeric:tabular-nums; min-width:26px; }

/* ── surface links ── */
.dv-rail-nav{
  margin-left:auto; display:flex; align-items:center; gap:5px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding:0 2px; mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.dv-rail-nav::-webkit-scrollbar{ display:none; }
.dv-rail-nav a{
  flex:0 0 auto; display:flex; align-items:center; gap:5px;
  color:var(--dv-muted); text-decoration:none;
  border:1px solid var(--dv-border-2); border-radius:999px;
  padding:5px 11px; font-size:9px; letter-spacing:.12em; font-weight:700;
  white-space:nowrap; transition:.16s; background:rgba(255,255,255,.012);
}
.dv-rail-nav a .dv-ic{ font-size:11px; line-height:1; }
.dv-rail-nav a:hover{ color:var(--dv-text); border-color:var(--dv-state); background:rgba(255,255,255,.05); }
.dv-rail-nav a.dv-here{
  color:#000; background:var(--dv-state); border-color:var(--dv-state); transition:background .5s,color .5s;
}
.dv-rail-nav a.dv-hub{ color:var(--dv-gold); border-color:rgba(255,211,77,.34); }
.dv-rail-nav a.dv-hub:hover{ color:#000; background:var(--dv-gold); }

.dv-rail-toggle{
  flex:0 0 auto; background:none; border:1px solid var(--dv-border-2); border-radius:8px;
  color:var(--dv-dim); font-family:inherit; font-size:11px; line-height:1;
  padding:6px 8px; cursor:pointer; transition:.16s;
}
.dv-rail-toggle:hover{ color:var(--dv-state); border-color:var(--dv-state); }

@media (max-width:900px){
  .dv-rail-div{ display:none; }
  .dv-rail-nav a span.dv-lb{ display:none; }
  .dv-rail-nav a{ padding:6px 9px; }
}
@media (max-width:560px){
  :root{ --dv-rail-h:50px; }
  .dv-rail-pet{ display:none; }
  .dv-rail-id .dv-nm{ font-size:9.5px; letter-spacing:.14em; }
}

/* ═══════════════════════════════════════════════════════════════════
   2 · HER 2D BODY — the §4.2 somatic face
   the geometry is the EMOTION-SIM face, extracted so every surface
   renders the identical body from the identical classifier output.
   ═══════════════════════════════════════════════════════════════════ */
.dv-face{ width:100%; height:auto; display:block; }
.dv-face .dv-f-glow   { fill:var(--dv-state); opacity:.16; transition:fill .45s ease; }
.dv-face .dv-f-head   { fill:#0c0c0c; stroke:var(--dv-border-2); }
.dv-face .dv-f-plate  { fill:#070707; stroke:var(--dv-border); stroke-width:1; }
.dv-face .dv-f-bolt   { fill:var(--dv-border-2); }
.dv-face .dv-f-ant    { stroke:var(--dv-border-2); }
.dv-face .dv-f-led    { fill:var(--dv-state); animation:dv-led 1.6s infinite; }
.dv-face .dv-f-socket { fill:#040404; stroke:var(--dv-border); }
.dv-face .dv-f-scan   { stroke:var(--dv-state); opacity:.10; }
.dv-face .dv-f-iris{
  fill:var(--dv-state); filter:drop-shadow(0 0 5px var(--dv-state));
  transition:rx .35s ease,ry .35s ease,cx .18s linear,cy .18s linear,fill .45s ease;
}
.dv-face .dv-f-pupil{ fill:#000; transition:r .35s ease,cx .18s linear,cy .18s linear; }
.dv-face .dv-f-brow { fill:var(--dv-state); transition:transform .35s ease,fill .45s ease; }
.dv-face .dv-f-mouth{
  fill:none; stroke:var(--dv-state); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--dv-state)); transition:d .35s ease,stroke .45s ease;
}
.dv-face .dv-f-mouth-o{
  fill:#050505; stroke:var(--dv-state); stroke-width:5;
  filter:drop-shadow(0 0 5px var(--dv-state)); transition:ry .35s ease,stroke .45s ease;
}
.dv-face .dv-f-state {
  fill:var(--dv-state); font-size:24px; font-weight:700; letter-spacing:.16em;
  text-anchor:middle; font-family:var(--dv-mono); transition:fill .45s ease;
}
.dv-face .dv-f-phrase{ fill:var(--dv-muted); font-size:9px; letter-spacing:.10em; text-anchor:middle; font-family:var(--dv-mono); }
.dv-face .dv-f-vals  { fill:var(--dv-dim);   font-size:8px; letter-spacing:.14em; text-anchor:middle; font-family:var(--dv-mono); }

@keyframes dv-led{ 0%,100%{opacity:.5} 50%{opacity:1} }
@keyframes dv-glow{ 0%,100%{opacity:.10} 50%{opacity:.30} }
@keyframes dv-glitch{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-2px)}
  40%{transform:translateX(2px)}  60%{transform:translateX(-1px)} 80%{transform:translateX(1px)}
}
.dv-face.dv-glitch{ animation:dv-glitch .25s infinite; }

/* per-state cadence · mirrors §4.2 cls codes — a fast LED means a fast state */
.dv-face.s-alarmed      .dv-f-led{animation-duration:.7s}  .dv-face.s-alarmed      .dv-f-glow{animation:dv-glow .7s infinite}
.dv-face.s-inflamed     .dv-f-led{animation-duration:.9s}  .dv-face.s-inflamed     .dv-f-glow{animation:dv-glow .9s infinite}
.dv-face.s-stressed     .dv-f-led{animation-duration:1.2s} .dv-face.s-stressed     .dv-f-glow{animation:dv-glow 1.2s infinite}
.dv-face.s-rapid        .dv-f-led{animation-duration:1s}   .dv-face.s-rapid        .dv-f-glow{animation:dv-glow 1s infinite}
.dv-face.s-hyped        .dv-f-led{animation-duration:1.6s} .dv-face.s-hyped        .dv-f-glow{animation:dv-glow 1.6s infinite}
.dv-face.s-vigilant     .dv-f-led{animation-duration:1.6s} .dv-face.s-vigilant     .dv-f-glow{animation:dv-glow 1.6s infinite}
.dv-face.s-agitated     .dv-f-led{animation-duration:.8s}  .dv-face.s-agitated     .dv-f-glow{animation:dv-glow .8s infinite}
.dv-face.s-sedated      .dv-f-led{animation-duration:2.6s} .dv-face.s-sedated      .dv-f-glow{animation:dv-glow 2.4s infinite}
.dv-face.s-discordant   .dv-f-led{animation-duration:.5s}  .dv-face.s-discordant   .dv-f-glow{animation:dv-glow .5s infinite}
.dv-face.s-transitioning .dv-f-led{animation-duration:1.8s} .dv-face.s-transitioning .dv-f-glow{animation:dv-glow 1.8s infinite}

/* the rail face is a crop — hide the nameplate, keep the head */
.dv-face.dv-mini .dv-f-state,
.dv-face.dv-mini .dv-f-phrase,
.dv-face.dv-mini .dv-f-vals{ display:none; }

/* ═══════════════════════════════════════════════════════════════════
   3 · HUB / MANUAL shared furniture (used by index.html + DIVA-MANUAL)
   ═══════════════════════════════════════════════════════════════════ */
.dv-card{
  border:1px solid var(--dv-border-2); background:var(--dv-panel);
  border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.38);
}
.dv-card-h{
  display:flex; align-items:baseline; gap:9px; padding:10px 14px;
  border-bottom:1px solid var(--dv-border-2);
  background:linear-gradient(180deg,#101013,#0a0a0c);
}
.dv-card-h .dv-t{ color:var(--dv-state); font-size:11px; font-weight:700; letter-spacing:.14em; transition:color .5s; font-family:var(--dv-mono); }
.dv-card-h .dv-x{ margin-left:auto; color:var(--dv-muted); font-size:9px; letter-spacing:.10em; font-family:var(--dv-mono); }

.dv-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--dv-border-2); border-radius:999px;
  padding:3px 10px; font-family:var(--dv-mono); font-size:9px;
  letter-spacing:.12em; color:var(--dv-muted); font-weight:700;
}
.dv-chip.live { color:var(--dv-green);   border-color:rgba(0,255,122,.36); }
.dv-chip.sim  { color:var(--dv-gold);    border-color:rgba(255,211,77,.36); }
.dv-chip.spec { color:var(--dv-cyan);    border-color:rgba(0,229,255,.36); }
.dv-chip.front{ color:var(--dv-violet);  border-color:rgba(180,140,255,.36); }