/* AlgoGuide (algo_guide.js): the flying light guide AIrene, her speech bubble, the menu, the
   spotlight and the Explain mode (every part outlined at once). Everything is scoped under .ag-* and lives in one fixed layer above the app.
   Tokens: glow cyan #4be9fa (the app's icon glow), accent amber #f0a030, text #e8e8e8,
   muted #9fb3c8, headings #cfefff, radius 10–14px. */

.ag-root { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .3s ease;
           font-family: inherit; }
.ag-root.ag-on { opacity: 1; }
.ag-block { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.ag-root.ag-leaving .ag-block { pointer-events: none; }

/* ---------- spotlight ------------------------------------------------------------------ */
.ag-spot { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 12px; pointer-events: none;
           box-shadow: 0 0 0 2px rgba(127,238,255,.85), 0 0 26px 6px rgba(75,233,250,.30), 0 0 0 200vmax rgba(2,6,11,.66);
           transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1),
                       height .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, opacity .35s ease; }
.ag-spot::after { content: ''; position: absolute; inset: -2px; border-radius: 14px; border: 2px solid rgba(127,238,255,.55);
                  animation: ag-ping 1.9s ease-out infinite; }
/* every state keeps the same three shadows (ring, glow, dim): the transition then interpolates each one,
   instead of blowing the 2 px ring up to 200vmax for a moment (a coloured flash over the whole page) */
.ag-spot.ag-none { box-shadow: 0 0 0 0 rgba(127,238,255,0), 0 0 0 0 rgba(75,233,250,0), 0 0 0 200vmax rgba(2,6,11,.66); }
.ag-spot.ag-none::after { display: none; }
.ag-root.ag-leaving .ag-spot { opacity: 0; }
@keyframes ag-ping { 0% { inset: -2px; opacity: .9; } 100% { inset: -16px; opacity: 0; border-radius: 22px; } }

/* ---------- the wisp ------------------------------------------------------------------- */
.ag-wisp { position: fixed; left: 0; top: 0; width: 52px; height: 52px; pointer-events: none; will-change: transform;
           --lx: 0px; --ly: 0px; }
.ag-wisp.ag-glide { transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.ag-scale { width: 100%; height: 100%; }
.ag-scale.ag-appear { animation: ag-appear .55s cubic-bezier(.2,1.5,.4,1) both; }
.ag-scale.ag-vanish { animation: ag-vanish .5s ease-in forwards; }
.ag-scale.ag-nudge { animation: ag-hop .55s ease-out; }
.ag-bob { position: relative; width: 100%; height: 100%; animation: ag-bob 2.8s ease-in-out infinite; }
.ag-halo { position: absolute; inset: -28px; border-radius: 50%;
           background: radial-gradient(circle, rgba(75,233,250,.42) 0%, rgba(75,233,250,.15) 36%, rgba(75,233,250,0) 68%);
           animation: ag-breathe 2.4s ease-in-out infinite; transition: inset .3s ease; }
.ag-core { position: absolute; inset: 9px; border-radius: 50%;
           background: radial-gradient(circle at 38% 32%, #ffffff 0%, #f3fdff 24%, #b8f4ff 50%, #58e6f7 78%, #2bc4d6 100%);
           box-shadow: 0 0 12px 3px rgba(170,248,255,.85), 0 0 36px 10px rgba(75,233,250,.38); }
.ag-eye { position: absolute; top: 38%; width: 4px; height: 6px; border-radius: 50%; background: #0c3b46;
          transform: translate(var(--lx), var(--ly)); animation: ag-blink 4.6s infinite; transition: transform .25s ease; }
.ag-eye.l { left: 33%; }
.ag-eye.r { left: 57%; }
.ag-orbits { position: absolute; inset: 0; transform: rotate(-18deg) scaleY(.42); }
.ag-mote { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
           background: #e6fcff; box-shadow: 0 0 6px 2px rgba(75,233,250,.85); --r: 34px;
           animation: ag-orbit 3.4s linear infinite; }
.ag-mote.m2 { --r: 28px; width: 4px; height: 4px; animation-duration: 4.8s; animation-direction: reverse; }
.ag-mote.m3 { --r: 40px; width: 3px; height: 3px; animation-duration: 6.2s; animation-delay: -2s; opacity: .8; }
.ag-thinking { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); display: none; gap: 3px; }
.ag-thinking i { width: 5px; height: 5px; border-radius: 50%; background: #cfefff; animation: ag-dot 1s ease-in-out infinite; }
.ag-thinking i:nth-child(2) { animation-delay: .15s; }
.ag-thinking i:nth-child(3) { animation-delay: .3s; }
.ag-wisp.ag-think .ag-thinking { display: flex; }
.ag-wisp.ag-think .ag-mote { animation-duration: 1s; }
.ag-wisp.ag-fly .ag-halo { inset: -36px; }
.ag-wisp.ag-fly .ag-bob { animation-play-state: paused; }
.ag-wisp.ag-talk .ag-core { animation: ag-talk .2s ease-in-out infinite alternate; }

.ag-spark { position: fixed; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; pointer-events: none;
            background: #effdff; box-shadow: 0 0 7px 2px rgba(75,233,250,.85); animation: ag-spark .75s ease-out forwards; }

@keyframes ag-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ag-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ag-blink { 0%, 93%, 100% { transform: translate(var(--lx), var(--ly)) scaleY(1); }
                      96% { transform: translate(var(--lx), var(--ly)) scaleY(.1); } }
@keyframes ag-orbit { from { transform: rotate(0deg) translateX(var(--r)); } to { transform: rotate(360deg) translateX(var(--r)); } }
@keyframes ag-talk { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes ag-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes ag-spark { from { opacity: .95; transform: translate(var(--x), var(--y)) scale(1); }
                      to { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(.2); } }
@keyframes ag-appear { from { transform: scale(.1); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ag-vanish { 0% { transform: scale(1); opacity: 1; } 40% { transform: scale(1.25); opacity: 1; }
                       100% { transform: scale(.05); opacity: 0; } }
@keyframes ag-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-12px); } 60% { transform: translateY(2px); } }

/* ---------- speech bubble -------------------------------------------------------------- */
.ag-bubble { position: fixed; left: 0; top: 0; width: min(344px, calc(100vw - 32px)); pointer-events: auto; box-sizing: border-box;
             background: linear-gradient(160deg, rgba(15,26,36,.97), rgba(7,12,18,.97));
             border: 1px solid rgba(127,238,255,.38); border-radius: 14px; padding: 10px 14px 10px; color: #e8e8e8;
             box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(75,233,250,.14);
             --bx: -9999px; --by: -9999px; --ty: 28px; --oy: 30px;
             transform: translate(var(--bx), var(--by)) scale(.88); transform-origin: 0 var(--oy); opacity: 0;
             transition: opacity .2s ease, transform .28s cubic-bezier(.2,1.35,.4,1); }
.ag-bubble.ag-side-left { transform-origin: 100% var(--oy); }
.ag-bubble.ag-show { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); }
.ag-bubble.ag-snap { transition: none !important; }
.ag-bubble::before { content: ''; position: absolute; top: var(--ty); width: 12px; height: 12px; background: rgb(13,23,32);
                     transform: rotate(45deg); }
.ag-bubble.ag-side-right::before { left: -7px; border-left: 1px solid rgba(127,238,255,.38); border-bottom: 1px solid rgba(127,238,255,.38); }
.ag-bubble.ag-side-left::before { right: -7px; border-right: 1px solid rgba(127,238,255,.38); border-top: 1px solid rgba(127,238,255,.38); }

.ag-bh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ag-name { color: #7feeff; font-size: .64rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
           text-shadow: 0 0 10px rgba(75,233,250,.6); }
.ag-title { color: #9fb3c8; font-size: .7rem; flex: 1; }
.ag-icon { background: transparent; border: none; color: #7f93a8; font-size: .78rem; padding: 0 2px; cursor: pointer; line-height: 1; }
.ag-icon:hover { color: #cfefff; }

.ag-text { font-size: .9rem; line-height: 1.55; color: #e8eef3; cursor: pointer; min-height: 2.6em; }
.ag-text b { color: #cfefff; font-weight: 600; }
.ag-text em { color: #f5c679; font-style: normal; }
.ag-ch { opacity: 0; transition: opacity .12s ease; }
.ag-ch.on { opacity: 1; }
.ag-caret { display: inline-block; margin-left: 5px; color: #f0a030; visibility: hidden; }
.ag-bubble.ag-done .ag-caret { visibility: visible; animation: ag-caret 1s ease-in-out infinite; }
@keyframes ag-caret { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

.ag-bf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ag-steps { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ag-count { color: #9fb3c8; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-steps i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ag-steps i.past { background: rgba(127,238,255,.45); }
.ag-steps i.on { background: #7feeff; box-shadow: 0 0 6px rgba(75,233,250,.9); }
.ag-hint { color: #7feeff; font-size: .74rem; flex: 1 1 100%; order: -1; }
.ag-hint i { margin-right: 3px; animation: ag-dot 1.2s ease-in-out infinite; display: inline-block; }
.ag-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #dfe7ee; border-radius: 8px;
          padding: 3px 11px; font-size: .76rem; line-height: 1.4; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.ag-btn:hover { border-color: rgba(127,238,255,.6); color: #fff; }
.ag-btn.ag-primary { border-color: rgba(240,160,48,.7); background: rgba(240,160,48,.14); color: #f5d6a3; }
.ag-btn.ag-primary:hover { background: rgba(240,160,48,.24); color: #fff; }
.ag-btn.ag-nudge { animation: ag-hop .5s ease-out; }

/* ---------- the "Guide" button in an idea-app toolbar ------------------------------------ */
.ag-orb { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: 0;
          background: radial-gradient(circle at 38% 32%, #fff 0%, #b8f4ff 50%, #4be9fa 100%);
          box-shadow: 0 0 7px 2px rgba(75,233,250,.7); animation: ag-breathe 2.4s ease-in-out infinite; }
.idea-tool.guide:hover .ag-orb { box-shadow: 0 0 10px 3px rgba(75,233,250,.95); }

/* ---------- the name: AIrene ---------------------------------------------------------------------
   "AI" is a neon sign (white core, a SOFT cyan halo since 2026-10-04: the wide glow read as too strong, a
   rare flicker); "rene" is plain light text. */
.ae-mark { display: inline-flex; align-items: baseline; letter-spacing: .6px; font-weight: 700; white-space: nowrap;
           text-transform: none; }   /* AIrene keeps its case inside uppercase labels */
.ae-ai { display: inline-flex; align-items: baseline; margin-right: .03em; }
.ae-a, .ae-i { font-weight: 800; color: #f4ffff;
               text-shadow: 0 0 1px rgba(255,255,255,.75), 0 0 4px rgba(127,244,255,.7), 0 0 9px rgba(75,233,250,.38);
               animation: ae-neon 7s infinite steps(1, end); }
.ae-i { animation-delay: .12s; }
.ae-rest { color: #cfefff; font-weight: 600; letter-spacing: .3px; }
@keyframes ae-neon {                 /* mostly steady, two quick flickers per cycle, like a real tube */
    0%, 100% { opacity: 1; }
    91% { opacity: .6; text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 3px rgba(127,244,255,.5); }
    92% { opacity: 1; }
    94% { opacity: .75; text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 3px rgba(127,244,255,.5); }
    95% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ae-a, .ae-i { animation: none; } }
.ag-name .ae-mark { text-shadow: none; }
.ag-root[data-mode=menu] .ag-name { font-size: 1rem; }
.ag-root[data-mode=menu] .ag-bh { align-items: center; margin-bottom: 8px; }

/* ---------- the menu -------------------------------------------------------------------------- */
.ag-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ag-choices.ag-nudge { animation: ag-hop .5s ease-out; }
.ag-choice { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
             background: rgba(255,255,255,.05); border: 1px solid rgba(127,238,255,.32); border-radius: 11px;
             padding: 9px 12px; color: #e8e8e8; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.ag-choice:hover { border-color: rgba(240,160,48,.8); background: rgba(240,160,48,.10); transform: translateX(2px); }
.ag-choice i { color: #7feeff; font-size: 1.05rem; width: 22px; text-align: center; }
.ag-choice b { display: block; color: #cfefff; font-size: .88rem; font-weight: 600; }
.ag-choice small { display: block; color: #9fb3c8; font-size: .72rem; margin-top: 1px; }

/* ---------- Explain mode: the page dims, every part is outlined; click one ----------------------- */
.ag-ex { display: none; }
.ag-root[data-mode=explore] .ag-ex { display: block; }
.ag-root[data-mode=explore] .ag-block { pointer-events: none; }   /* the page stays usable (tabs, scroll) */
.ag-root[data-mode=explore] .ag-spot { opacity: 0; }
.ag-ex-dim { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ag-ex-shade { fill: rgba(2,6,11,.58); }
.ag-hs-layer { position: fixed; inset: 0; pointer-events: none; }
.ag-hs { position: fixed; pointer-events: auto; cursor: help; border-radius: 10px;
         border: 2px solid rgba(127,238,255,.8); background: rgba(75,233,250,.03);
         box-shadow: 0 0 14px rgba(75,233,250,.30), inset 0 0 14px rgba(75,233,250,.10);
         transition: background .15s, border-color .15s, box-shadow .15s; animation: ag-hs-in .35s ease-out both; }
.ag-hs:hover { border-color: #fff; background: rgba(75,233,250,.12);
               box-shadow: 0 0 26px rgba(75,233,250,.65), inset 0 0 18px rgba(75,233,250,.2); z-index: 2; }
.ag-hs-l { position: absolute; left: 8px; top: -12px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; pointer-events: none; font-size: .68rem; line-height: 1.6; color: #cfefff;
           background: #0b1820; border: 1px solid rgba(127,238,255,.7); border-radius: 8px; padding: 0 8px;
           box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ag-hs-l i { color: #7feeff; margin-right: 2px; }
.ag-hs-in .ag-hs-l { top: 6px; }
/* item.through: the outlined part stays usable (clicks reach the page); the badge below it explains it */
.ag-hs.ag-hs-through { pointer-events: none; background: transparent; }
.ag-hs.ag-hs-through .ag-hs-l { top: auto; bottom: -15px; pointer-events: auto; cursor: help; }
.ag-hs.ag-hs-through .ag-hs-l:hover { color: #fff; border-color: #fff; max-width: none; z-index: 3; }
.ag-hs:hover .ag-hs-l { color: #fff; border-color: #fff; max-width: none; }
@keyframes ag-hs-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

.ag-ex-bar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: auto;
             display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px; max-width: calc(100vw - 120px);
             background: linear-gradient(160deg, rgba(15,26,36,.97), rgba(7,12,18,.97));
             border: 1px solid rgba(127,238,255,.45); border-radius: 14px;
             box-shadow: 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(75,233,250,.18); color: #e8e8e8; }
.ag-ex-mark { display: inline-flex; align-items: center; font-size: .78rem; color: #7feeff; }
.ag-ex-txt { font-size: .82rem; color: #e8eef3; white-space: nowrap; }
.ag-ex-txt small { color: #9fb3c8; font-size: .74rem; }
.ag-ex-list { display: none; position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
              max-height: 56vh; overflow-y: auto; pointer-events: auto; padding: 8px 8px 10px;
              background: linear-gradient(160deg, rgba(15,26,36,.98), rgba(7,12,18,.98));
              border: 1px solid rgba(127,238,255,.4); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.6); }
.ag-ex.ag-list-open .ag-ex-list { display: block; }
.ag-ex-g { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .8px; margin: 8px 6px 3px; }
.ag-ex-item { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px;
              color: #dfe7ee; font-size: .82rem; padding: 4px 8px; cursor: pointer; }
.ag-ex-item:hover { background: rgba(240,160,48,.14); color: #fff; }

/* ---------- the bubble can be dragged by its head ---------------------------------------------- */
.ag-bh { cursor: move; user-select: none; }
.ag-bh .ag-icon { cursor: pointer; }
.ag-bubble.ag-pinned::before { display: none; }
.ag-bubble.ag-ok { animation: ag-okflash .7s ease-out; }
@keyframes ag-okflash { 0% { box-shadow: 0 0 0 0 rgba(95,191,106,.9), 0 12px 34px rgba(0,0,0,.55); }
                        100% { box-shadow: 0 0 0 16px rgba(95,191,106,0), 0 12px 34px rgba(0,0,0,.55); } }

/* ---------- missions (hands-on onboarding): the page stays usable, the spotlight turns amber ------ */
.ag-root[data-mode=mission] .ag-block { pointer-events: none; }
.ag-root[data-mode=mission] .ag-spot { box-shadow: 0 0 0 2px rgba(240,160,48,.95), 0 0 26px 6px rgba(240,160,48,.30),
                                                   0 0 0 200vmax rgba(2,6,11,.30); }
.ag-root[data-mode=mission] .ag-spot::after { border-color: rgba(240,160,48,.65); }
.ag-root[data-mode=mission] .ag-spot.ag-none { box-shadow: 0 0 0 0 rgba(240,160,48,0), 0 0 0 0 rgba(240,160,48,0),
                                                           0 0 0 200vmax rgba(2,6,11,0); }
.ag-mbar { display: none; height: 3px; margin: -10px -14px 9px; border-radius: 14px 14px 0 0; overflow: hidden;
           background: rgba(255,255,255,.08); }
.ag-mbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4be9fa, #f0a030);
               transition: width .6s ease; }
.ag-skip { color: #9fb3c8; }
.ag-hint .fa-hourglass-half { color: #f0a030; }
.ag-bubble.ag-wait .ag-hint { color: #f5d6a3; }
.ag-status { display: block; color: #9fb3c8; font-size: .7rem; margin-top: 2px; }
.ag-status:empty { display: none; }
.ag-btn.ag-danger { border-color: rgba(255,123,114,.45); color: #ffb4ac; }
.ag-btn.ag-danger.armed { background: rgba(255,123,114,.18); border-color: rgba(255,123,114,.9); color: #fff; }

/* the checklist (data-mode=missions) */
.ag-root[data-mode=missions] .ag-bubble { width: min(420px, calc(100vw - 32px)); }
.ag-root[data-mode=missions] .ag-name { font-size: 1rem; }
.ag-root[data-mode=missions] .ag-bh { align-items: center; margin-bottom: 8px; }
.ag-prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.ag-prog > i { display: block; height: 100%; background: linear-gradient(90deg, #4be9fa, #f0a030); border-radius: 3px;
               transition: width .6s ease; }
.ag-progt { color: #9fb3c8; font-size: .72rem; margin: 3px 0 2px; text-align: right; }
.ag-mlist { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; padding-right: 2px; }
.ag-mrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
           background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
           padding: 6px 10px; color: #e8e8e8; transition: border-color .15s, background .15s; }
.ag-mrow:hover { border-color: rgba(240,160,48,.8); background: rgba(240,160,48,.10); }
.ag-mrow.next { border-color: rgba(240,160,48,.7); box-shadow: 0 0 12px rgba(240,160,48,.18); }
.ag-mi { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
         font-size: .72rem; font-weight: 700; color: #cfefff; border: 1px solid rgba(127,238,255,.5); }
.ag-mrow.done .ag-mi { background: #5fbf6a; border-color: #5fbf6a; color: #08130a; }
.ag-mrow.skipped .ag-mi { border-style: dashed; color: #9fb3c8; }
.ag-mt { flex: 1; min-width: 0; }
.ag-mt b { display: block; color: #cfefff; font-size: .82rem; font-weight: 600; }
.ag-mt small { display: block; color: #9fb3c8; font-size: .7rem; }
.ag-mrow.done .ag-mt b { color: #b9e8bf; }
.ag-mtag { font-size: .64rem; color: #9fb3c8; text-transform: uppercase; letter-spacing: .6px; }
.ag-mfoot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.ag-choice.ag-choice-m { border-color: rgba(240,160,48,.55); }
.ag-choice.ag-choice-m i { color: #f0a030; }

@media (prefers-reduced-motion: reduce) {
    .ag-bob, .ag-halo, .ag-mote, .ag-orb, .ag-spot::after, .ag-wisp.ag-talk .ag-core, .ag-hs { animation: none !important; }
}