/* ============================================================
   FRANKOS 2.0 — Futuristic enhancement layer
   Additive only. All rules namespaced f2- so the original
   style.css is untouched. Fallback = remove the two <link>/<script>
   tags from index.html (no revert editing of core files needed).
   ============================================================ */

/* --- Data channels (set by frankos2.js, consumed by CSS) --- */
:root{
  --f2-cpu:0;            /* 0..1 */
  --f2-mem:0;            /* 0..1 */
  --f2-gw:0;             /* 0 down / 1 up */
  --f2-pulse:1;          /* breathing speed multiplier */
  --f2-hue:32;           /* base hue deg (warm gold) */
  --f2-session-err:0;    /* error-dump count */
  --f2-activity:0;       /* unread activity count */
}

/* --- Live neural-field background --- */
#f2-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%;
  opacity:.55; mix-blend-mode:screen;
  transition:opacity .6s ease;
}
/* push content above the field */
.topbar-fixed,.app,.toast-wrap,.lightbox{z-index:1}
.app{z-index:1}
.topbar-fixed{z-index:70}

/* --- Adaptive glass 2.0: spectral rim + depth --- */
.panel,.kpi,.wig,.skill-card,.modal-box,.chip,.toast{
  border:1px solid var(--brd);
  box-shadow:0 8px 30px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(243,220,174,.10),
             0 0 0 1px rgba(243,220,174,.04);
  position:relative;
  overflow:hidden;
}
.panel::after,.kpi::after,.wig::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,
     rgba(243,220,174,calc(.10*var(--f2-mem))) 0%,
     transparent 40%,
     rgba(212,175,120,calc(.08*var(--f2-gw))) 100%);
  mix-blend-mode:screen;
}
/* liquid warp entrance instead of plain fade */
.view.active{animation:f2warp .45s cubic-bezier(.22,1,.36,1)}
@keyframes f2warp{
  0%{opacity:0;transform:perspective(900px) translateY(18px) scale(.985) rotateX(2deg)}
  100%{opacity:1;transform:none}
}

/* --- Orbital dock (upgrades the existing .bot-nav) --- */
@media(max-width:760px){
  .bot-nav{
    position:static!important;
    gap:6px;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,rgba(20,12,7,.72),rgba(34,21,11,.92))!important;
    backdrop-filter:blur(18px) saturate(140%);
    border-top:1px solid rgba(243,220,174,.22)!important;
    box-shadow:0 -10px 40px rgba(0,0,0,.5),0 -1px 0 rgba(243,220,174,.15) inset;
  }
  .bot-nav a{
    position:relative;
    flex:1; border-radius:16px; padding:8px 4px 6px;
    color:var(--mut); transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s;
  }
  /* breathing orb behind each item */
  .bot-nav a::before{
    content:""; display:block; width:40px; height:40px; margin:0 auto 3px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 38%,rgba(243,220,174,.9),rgba(169,116,63,.35) 60%,transparent 72%);
    box-shadow:0 0 16px rgba(212,175,120,.45);
    animation:f2breathe calc(3.4s / var(--f2-pulse)) ease-in-out infinite;
    transition:box-shadow .3s, background .3s;
  }
  .bot-nav a span{
    position:relative; z-index:2;
    font-size:20px!important;
    filter:drop-shadow(0 0 6px rgba(243,220,174,.6));
    transition:transform .25s;
  }
  /* active item = expanded sun with corona */
  .bot-nav a.active{
    color:var(--gold2);
    background:radial-gradient(120% 120% at 50% 0%,rgba(212,175,120,.20),transparent 70%);
    transform:translateY(-3px);
  }
  .bot-nav a.active::before{
    width:46px; height:46px;
    background:radial-gradient(circle at 50% 38%,#fff3da,#f3dcae 30%,#d4af78 60%,rgba(212,175,120,.2) 75%,transparent 80%);
    box-shadow:0 0 26px rgba(243,220,174,.85),0 0 60px rgba(212,175,120,.4);
  }
  .bot-nav a.active span{transform:scale(1.08)}

  /* refresh orb (added 2026-08-12) — same breathing orb as nav items */
  .bot-nav .nav-refresh{
    position:relative; flex:1; border-radius:16px; padding:8px 4px 6px;
    color:var(--mut); transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s;
    background:none; border:none; cursor:pointer; font-family:inherit; line-height:1.2;
    font-size:10px!important;
  }
  .bot-nav .nav-refresh::before{
    content:""; display:block; width:40px; height:40px; margin:0 auto 3px;
    border-radius:50%;
    background:radial-gradient(circle at 50% 38%,rgba(174,213,243,.9),rgba(99,144,169,.35) 60%,transparent 72%);
    box-shadow:0 0 16px rgba(120,180,212,.45);
    animation:f2breathe calc(3.4s / var(--f2-pulse)) ease-in-out infinite;
    transition:box-shadow .3s, background .3s, transform .3s;
  }
  .bot-nav .nav-refresh span{
    position:relative; z-index:2; font-size:20px!important;
    filter:drop-shadow(0 0 6px rgba(174,213,243,.6));
    transition:transform .25s; display:inline-block;
  }
  .bot-nav .nav-refresh:active::before{ box-shadow:0 0 26px rgba(174,213,243,.85); }
  .bot-nav .nav-refresh.spinning span{ animation:navSpin .6s linear infinite; }
  @keyframes navSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

  /* live status orbs */
  .bot-nav a[data-view="gateway"]::before{ animation-duration:calc(2.2s / var(--f2-pulse)); }
  .bot-nav.gw-down a[data-view="gateway"]::before{
    background:radial-gradient(circle at 50% 38%,#ff9a8a,#e08a72 55%,transparent 72%);
    box-shadow:0 0 18px rgba(224,138,114,.7);
    animation:f2alert 1.1s ease-in-out infinite;
  }
  /* unread activity ring */
  .bot-nav a[data-view="activity"].has-unread::after{
    content:""; position:absolute; top:4px; right:calc(50% - 22px);
    width:10px; height:10px; border-radius:50%;
    background:#ff5d6c; box-shadow:0 0 10px #ff5d6c;
    animation:f2ping 1.6s ease-out infinite;
  }
  /* session error badge (anchored to the orb, no extra wrapper needed) */
  .bot-nav a[data-view="dashboard"].has-err::after{
    content:attr(data-err);
    position:absolute; top:2px; right:calc(50% - 26px);
    display:inline-block; font-size:9px; font-weight:800; line-height:1.4;
    color:#1c120b; background:#e08a72; border-radius:8px; padding:0 5px;
    box-shadow:0 0 8px rgba(224,138,114,.6);
  }

  @keyframes f2breathe{
    0%,100%{transform:scale(1);opacity:.92}
    50%{transform:scale(1.06);opacity:1}
  }
  @keyframes f2alert{ 0%,100%{opacity:.7} 50%{opacity:1;box-shadow:0 0 26px rgba(224,138,114,.95)} }
  @keyframes f2ping{ 0%{transform:scale(.7);opacity:1} 100%{transform:scale(2.4);opacity:0} }
}

/* --- Anticipatory surface glow (e.g. prayer time approaching) --- */
.f2-anticipate{
  position:fixed; left:0; right:0; bottom:0; height:140px; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 100%, rgba(243,220,174,.18), transparent 70%);
  opacity:0; transition:opacity .8s ease; mix-blend-mode:screen;
}
.f2-anticipate.on{ opacity:1; animation:f2ant 3s ease-in-out infinite; }
@keyframes f2ant{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* --- KPI gauge ring upgrade (count-up handled in JS) --- */
.f2-gauge{ position:relative; }
.f2-gauge .kpi-val{ transition:color .4s; }
.f2-gauge.lo .kpi-val{ color:#9bd17e }
.f2-gauge.mid .kpi-val{ color:var(--gold2) }
.f2-gauge.hi .kpi-val{ color:#e08a72 }

/* --- Desktop: keep dock hidden (mobile only) but allow field + glass everywhere --- */
@media(min-width:761px){
  .bot-nav{ display:none!important; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  #f2-field{ display:none; }
  .bot-nav a::before,.bot-nav a.active::before,.f2-anticipate.on{ animation:none!important; }
}

/* ===== Mission Control home deck — luxury boxes (added 2026-08-12) ===== */
#view-dashboard .deck{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
#view-dashboard .wig{
  border-radius:18px;
  border:1px solid rgba(212,175,120,.35);
  background:linear-gradient(160deg,rgba(52,33,18,.92),rgba(30,19,11,.96));
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(243,220,174,.14),
             inset 0 0 34px rgba(212,175,120,.06);
  padding:16px 14px;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
#view-dashboard .wig::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(243,220,174,.85),transparent);
  opacity:.7;
}
#view-dashboard .wig:hover,#view-dashboard .wig:active{
  transform:translateY(-2px);
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(243,220,174,.2),
             0 0 26px rgba(212,175,120,.18);
}
#view-dashboard .wig h4{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gold2); margin-bottom:10px;
}
#view-dashboard .wig h4 .em{
  width:30px; height:30px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; border-radius:10px;
  background:linear-gradient(145deg,rgba(212,175,120,.28),rgba(169,116,63,.10));
  border:1px solid rgba(212,175,120,.4);
  box-shadow:0 0 14px rgba(212,175,120,.25), inset 0 1px 0 rgba(243,220,174,.25);
}
#view-dashboard .wig .big{
  font-size:30px; font-weight:800; color:#fff;
  text-shadow:0 0 18px rgba(243,220,174,.35);
  letter-spacing:.5px;
  background:linear-gradient(180deg,#fff,var(--gold2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
#view-dashboard .wig .meta{
  font-size:11px; color:var(--mut); line-height:1.5; margin-top:4px;
}
#view-dashboard .wig .bar{
  margin-top:10px; height:10px; border-radius:999px;
  border:1px solid rgba(212,175,120,.3);
  background:rgba(0,0,0,.45);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.6);
}
#view-dashboard .wig .bar i{
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  box-shadow:0 0 12px rgba(243,220,174,.55);
}
/* the "What can you do?" panel — same luxury rim */
#view-dashboard .panel{
  border-radius:18px;
  border:1px solid rgba(212,175,120,.3);
  background:linear-gradient(160deg,rgba(46,29,16,.9),rgba(28,18,11,.96));
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(243,220,174,.12);
}
#view-dashboard .panel h3{
  color:var(--gold2); letter-spacing:.8px;
}
/* constellation canvas box stays fully open, subtle rim */
#view-dashboard .panel[data-f2p-static]{
  border-color:rgba(95,227,255,.22);
  background:linear-gradient(160deg,rgba(16,28,34,.92),rgba(22,16,10,.96));
}
#view-dashboard .panel[data-f2p-static] h3{ color:#a8d8f0; }
#agentConst{
  display:block; margin:0 auto;
  max-width:640px; width:100%; height:auto;
}

/* ===== Live strip chips (added 2026-08-12) ===== */
#view-dashboard #liveStrip{ border-color:rgba(212,175,120,.32); }
#view-dashboard #liveStrip h3{ color:var(--gold2); }
.live-chip{
  flex:1 1 150px; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(150deg,rgba(52,33,18,.85),rgba(30,19,11,.9));
  border:1px solid rgba(212,175,120,.28);
  box-shadow:inset 0 1px 0 rgba(243,220,174,.12), 0 4px 18px rgba(0,0,0,.35);
}
.live-chip .lc-ic{
  width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:19px; border-radius:12px;
  background:linear-gradient(145deg,rgba(212,175,120,.3),rgba(169,116,63,.12));
  border:1px solid rgba(212,175,120,.42);
  box-shadow:0 0 14px rgba(212,175,120,.25), inset 0 1px 0 rgba(243,220,174,.3);
}
.live-chip .lc-num{
  font-size:21px; font-weight:800; color:#fff; letter-spacing:.5px;
  text-shadow:0 0 16px rgba(243,220,174,.4);
  font-variant-numeric:tabular-nums;
}
.live-chip .lc-lbl{ font-size:10.5px; color:var(--gold); letter-spacing:.8px; text-transform:uppercase; margin-top:2px; }
#liveStrip .lfc-soon .lc-num{ color:#ffb59a; text-shadow:0 0 16px rgba(255,140,90,.45); }