/* ============================================================
   Theatrics add-ons: engine theater, command palette,
   live notifications + bell, ROI tiles.
   ============================================================ */

/* ---- engine episode theater ---- */
.espine{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:14px}
.ephase{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;color:#7e94a0;padding:6px 11px;border-radius:9px;border:1px solid var(--edge);background:rgba(10,18,24,.4);transition:.25s}
.ephase .ed{width:7px;height:7px;border-radius:50%;background:#3a4b56;transition:.25s}
.ephase.on{color:#fff;border-color:var(--gold);background:rgba(217,162,74,.12)}
.ephase.on .ed{background:var(--gold);box-shadow:0 0 8px var(--gold-glow)}
.ephase.done{color:#8aa0ab}.ephase.done .ed{background:#3cb489;box-shadow:none}
.earrow{color:#3a4b56}
.elog{font-family:var(--mono);font-size:12px;height:178px;overflow-y:auto;background:rgba(6,11,15,.5);border:1px solid var(--edge);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:5px}
.eline{display:flex;gap:9px;color:#9fb4be;opacity:0;transform:translateY(4px)}
.eline.in{opacity:1;transform:none;transition:.3s var(--e1)}
.eline .et{color:#5f7682;width:56px;flex:0 0 auto;text-transform:uppercase;font-size:9.5px;padding-top:1px}
.eline.ok{color:#5fd6a6}.eline.gold{color:var(--gold)}

/* ---- command palette ---- */
.pal{position:fixed;inset:0;z-index:90;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.pal.open{display:flex}
.pal-scrim{position:absolute;inset:0;background:rgba(4,8,11,.6);backdrop-filter:blur(3px)}
.pal-box{position:relative;z-index:2;width:min(560px,94vw);background:linear-gradient(180deg,var(--glass2),var(--glass));
  border:1px solid var(--edge2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;transform:translateY(-10px);opacity:0;transition:.25s var(--e2)}
.pal.open .pal-box{transform:none;opacity:1}
.pal-in{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--edge)}
.pal-in .seg-ico{width:18px;height:18px;color:#7e94a0}
.pal-in input{flex:1;background:none;border:none;outline:none;color:#eaf1f4;font-size:15px;font-family:var(--body)}
.pal-in input::placeholder{color:#5f7682}
.pal-in kbd{font-family:var(--mono);font-size:10px;color:#7e94a0;border:1px solid var(--edge2);border-radius:6px;padding:3px 6px}
.pal-list{max-height:340px;overflow-y:auto;padding:8px}
.pal-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;color:#cdd9df;cursor:pointer;text-align:left;border:none;background:none;transition:.1s}
.pal-row .seg-ico{width:16px;height:16px;color:#7fd0f0;flex:0 0 auto}
.pl-label{flex:1;font-size:13.5px}
.pl-kind{font-size:9.5px;color:#5f7682;text-transform:uppercase;letter-spacing:.06em}
.pal-row.sel{background:rgba(46,131,166,.18);color:#fff}.pal-row.sel .seg-ico{color:var(--gold)}

/* ---- live notifications + bell ---- */
.toast.live{background:linear-gradient(180deg,var(--glass2),var(--glass))}
.nico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:rgba(255,255,255,.04);border:1px solid var(--edge);color:#7fd0f0}
.nico .seg-ico{width:15px;height:15px;color:inherit}
#notifBell{position:relative}
.nbadge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;border-radius:999px;background:var(--rust);color:#fff;
  font-family:var(--mono);font-size:9px;display:none;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.nbadge.show{display:flex}.nbadge.pop{animation:popk .4s var(--e2)}
#notifDrop{position:fixed;top:58px;right:clamp(14px,2.4vw,24px);width:300px;max-height:60vh;overflow-y:auto;z-index:50;
  background:linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid var(--edge2);border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.6);display:none;padding:8px}
#notifDrop.open{display:block;animation:rise .25s var(--e1)}
.ndh{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#5f7682;padding:8px 10px 6px}
.nrow{display:flex;gap:10px;padding:9px 10px;border-radius:10px}
.nrow:hover{background:rgba(255,255,255,.03)}
.nbody .nt{font-size:12.5px;color:#dde7eb;line-height:1.35}
.nbody .nt b{color:#fff;font-weight:600}
.nbody .nago{font-size:10px;color:#6f8693;margin-top:2px}

/* ---- ROI tiles ---- */
.roi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.roi-tile{background:rgba(10,18,24,.5);border:1px solid var(--edge);border-radius:13px;padding:15px;opacity:0;transform:translateY(8px)}
.roi-tile.rin{opacity:1;transform:none;transition:opacity .4s var(--e1),transform .4s var(--e2)}
.roi-tile .rval{font-family:var(--mono);font-weight:600;font-size:clamp(22px,2.4vw,30px);color:var(--gold);line-height:1;display:block}
.roi-tile .rl{font-size:10.5px;color:#9fb4be;margin-top:6px}
.roi-foot{margin-top:14px;font-size:11px;color:#7e94a0}

@media(max-width:560px){ .roi-grid{grid-template-columns:1fr 1fr} #notifDrop{width:min(300px,90vw)} }