/* ──────────────────────────────────────────────────────────────────────
   ENTBOX.AI design system — scoped to .entbox-scope so it doesn't leak
   into the rest of the AgentBox dashboard. Lifted from tool-deck.html
   + BOXAI Brand Board (2026-05-25).
   ────────────────────────────────────────────────────────────────────── */

/* ── Light-mode override: the header reads as dark slate (icons stay blue) ──── */
html:not(.dark) .entbox-scope .eb-h1 {
  color: #1F2937;
}

/* ── ENTBOX logo spin (GLOBAL — usable wherever the EntboxLogo renders) ── */
.entbox-logo-frame,
.entbox-logo-inner {
  transform-origin: 41.93px 41.93px;
}
.entbox-logo-spin:hover .entbox-logo-frame {
  animation: entbox-icon-spin .6s cubic-bezier(0, 0, .3, 1);
}
.entbox-logo-spin:hover .entbox-logo-inner {
  animation: entbox-icon-spin-r .6s cubic-bezier(0, 0, .3, 1);
}
@keyframes entbox-icon-spin {
  from { transform: rotate(180deg); }
  to   { transform: rotate(0deg); }
}
@keyframes entbox-icon-spin-r {
  from { transform: rotate(-180deg); }
  to   { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .entbox-logo-spin:hover .entbox-logo-frame,
  .entbox-logo-spin:hover .entbox-logo-inner { animation: none; }
}

/* ── ENTBOX logo ENTRANCE animation (page-load) — THE canonical logo intro ──
   On the full lockup (viewBox 0 0 484 84): the wordmark (.logo-text) pans out
   rightward from behind the icon while the two icon halves (.icon-frame +
   .icon-inner) counter-rotate from ±180° and fade in. Trigger by adding the
   `anim` class to the .hlogo SVG shortly after mount/load (~60ms). This is the
   deck's hero choreography — distinct from the smaller `.entbox-logo-spin`
   hover spin above (which the dashboard uses). Scoped to .entbox-scope. */
.entbox-scope .hlogo { display: block; overflow: visible; }
.entbox-scope .hlogo .logo-text  { transform: translateX(-383px); }
.entbox-scope .hlogo .icon-frame { transform-origin: 41.93px 41.93px; opacity: 0; }
.entbox-scope .hlogo .icon-inner { transform-origin: 41.93px 41.93px; opacity: 0; }
.entbox-scope .hlogo.anim .logo-text  { animation: eb-logoPan 1.4s cubic-bezier(.15, .8, .3, 1) .3s forwards; }
.entbox-scope .hlogo.anim .icon-frame { animation: eb-iconSpin 1.4s cubic-bezier(.55, .05, .3, 1) .3s both, eb-iconFade .55s ease-out .3s forwards; }
.entbox-scope .hlogo.anim .icon-inner { animation: eb-iconSpinR 1.4s cubic-bezier(.55, .05, .3, 1) .3s both, eb-iconFade .55s ease-out .3s forwards; }
@keyframes eb-logoPan   { to   { transform: translateX(0); } }
@keyframes eb-iconSpin  { from { transform: rotate(180deg); }  to { transform: rotate(0deg); } }
@keyframes eb-iconSpinR { from { transform: rotate(-180deg); } to { transform: rotate(0deg); } }
@keyframes eb-iconFade  { to   { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .entbox-scope .hlogo .logo-text  { transform: none; }
  .entbox-scope .hlogo .icon-frame,
  .entbox-scope .hlogo .icon-inner { opacity: 1; }
  .entbox-scope .hlogo.anim .logo-text,
  .entbox-scope .hlogo.anim .icon-frame,
  .entbox-scope .hlogo.anim .icon-inner { animation: none; }
}

.entbox-scope {
  /* Color tokens (hardcoded — no tenant theming) */
  --eb-deep: #0D1232;
  --eb-card: #141A42;
  --eb-card-h: #1C2255;
  --eb-surface: #10153A;
  --eb-border: #252B5F;
  --eb-blue: #3446FF;
  --eb-mid: #2735BF;
  --eb-text: var(--text-primary);
  --eb-text2: var(--text-secondary);
  --eb-text3: var(--text-tertiary);
  --eb-blue-soft: #7B8FFF;

  /* Outline tone — used wherever sections meet */
  --eb-outline: rgba(52, 70, 255, 0.35);
  --eb-outline-strong: rgba(52, 70, 255, 0.6);

  /* Type stacks */
  --eb-fh: var(--font-dm-sans), 'DM Sans', system-ui, sans-serif;
  --eb-fb: var(--font-ibm-plex-sans), 'IBM Plex Sans', system-ui, sans-serif;
  /* JetBrains Mono is BANNED from the brand (Matt, 2026-09-02) — never load it.
   * Prefer DM Sans / IBM Plex Sans with tabular-nums for accent labels; this
   * stack exists only for unavoidable true-terminal output (system fonts). */
  --eb-fm: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Theme-aware tokens
   * Light mode: text is dark slate grey (#1F2937) for readability.
   *             Icons, buttons, and brand accents stay Entbox blue (#3446FF).
   *             Cards get a soft Entbox-blue tinted background.
   */
  --eb-card-fill: #DDE2FF;
  --eb-card-fill-h: #CFD6FF;
  --eb-content-color: #1F2937;
  --eb-content-color-soft: #1F2937;
  --eb-link-color: #2735BF;
  --eb-viz-bg: transparent;
  --eb-viz-hex: none;
  --eb-node-label: #0D1232;
  --eb-node-label-opacity: 0.7;
  --eb-header-bg: transparent;
  --eb-content-bg: transparent;
  --eb-banner-bg: transparent;
  --eb-banner-text: #3446FF;
  --eb-subcard-bg: #C8D0FF;
  --eb-card-shadow: 0 1px 3px rgba(13, 18, 50, 0.08), 0 4px 14px rgba(52, 70, 255, 0.10);

  font-family: var(--eb-fb);
  -webkit-font-smoothing: antialiased;
}

/* Dark mode overrides */
html.dark .entbox-scope {
  --eb-card-fill: #141A42;
  --eb-card-fill-h: #1C2255;
  --eb-content-color: #E8EAFF;
  --eb-content-color-soft: #A5ACDB;
  --eb-link-color: #7B8FFF;
  --eb-viz-bg: #0D1232;
  --eb-viz-hex: block;
  --eb-node-label: #E8EAFF;
  --eb-node-label-opacity: 1;
  --eb-header-bg: #0D1232;
  --eb-content-bg: #0D1232;
  --eb-banner-bg: linear-gradient(90deg, #0D1232 0%, #2735BF 60%, #3446FF 100%);
  --eb-banner-text: #E8EAFF;
  --eb-subcard-bg: #0D1232;
  --eb-card-shadow: none;
}

/* Pin text tokens to light values on surfaces that ALWAYS have the dark
 * Entbox-deep background (viz, side panels, brain modal) — these don't
 * follow the dashboard theme since the background never changes. */
.entbox-scope .entbox-on-dark {
  --eb-text: #E8EAFF;
  --eb-text2: #A5ACDB;
  --eb-text3: #6C7396;
}

/* ── Headers ────────────────────────────────────────────────────────── */
.entbox-scope .eb-eyebrow {
  font-family: var(--eb-fb);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--eb-blue);
  font-weight: 700;
}

.entbox-scope .eb-h1 {
  font-family: var(--eb-fh);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--eb-text);
}

.entbox-scope .eb-h2 {
  font-family: var(--eb-fh);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: var(--eb-text);
}

.entbox-scope .eb-sub {
  font-family: var(--eb-fb);
  font-size: 15px;
  line-height: 1.65;
  color: var(--eb-text2);
}

.entbox-scope .eb-grad {
  background: linear-gradient(135deg, #3446FF, #7B8FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cards (outline only, sharp corners) ────────────────────────────── */
.entbox-scope .eb-card {
  background: transparent;
  border: 1px solid var(--eb-outline);
  border-radius: 0;
  transition: border-color .35s, box-shadow .35s;
}

.entbox-scope .eb-card:hover {
  border-color: var(--eb-blue);
  box-shadow:
    0 0 0 1px rgba(52, 70, 255, .35),
    0 0 24px rgba(52, 70, 255, .28),
    0 0 52px rgba(52, 70, 255, .14);
}

.entbox-scope .eb-card-static {
  background: transparent;
  border: 1px solid var(--eb-outline);
  border-radius: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.entbox-scope .eb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--eb-fb);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: 0;
  border: 1px solid var(--eb-border);
  background: transparent;
  color: var(--eb-text2);
  cursor: pointer;
  transition: all .2s;
}
.entbox-scope .eb-btn:hover {
  border-color: var(--eb-blue);
  color: var(--eb-text);
}

.entbox-scope .eb-btn-primary {
  background: var(--eb-blue);
  border-color: var(--eb-blue);
  color: #fff;
  font-weight: 700;
}
.entbox-scope .eb-btn-primary:hover {
  background: var(--eb-mid);
  border-color: var(--eb-mid);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(52, 70, 255, .35),
    0 0 24px rgba(52, 70, 255, .28),
    0 0 52px rgba(52, 70, 255, .14);
}
.entbox-scope .eb-btn-primary:active {
  transform: translateY(2px);
  transition: all .08s;
}

/* ── Pills / chips ──────────────────────────────────────────────────── */
.entbox-scope .eb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(52, 70, 255, 0.1);
  border: 1px solid rgba(52, 70, 255, 0.2);
  color: var(--eb-blue);
  font-family: var(--eb-fb);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 0;
}

/* ── Marching-ants vertical edge (used on side-panel boundaries) ────── */
.entbox-scope .eb-marching-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(52, 70, 255, 0.95) 0,
    rgba(52, 70, 255, 0.95) 10px,
    transparent 10px,
    transparent 16px
  );
  pointer-events: none;
  z-index: 3;
  filter:
    drop-shadow(0 0 4px rgba(52, 70, 255, 1))
    drop-shadow(0 0 10px rgba(52, 70, 255, 0.5));
  animation: eb-marching-edge .6s linear infinite;
}
@keyframes eb-marching-edge {
  to { background-position: 0 -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .entbox-scope .eb-marching-edge { animation: none; }
}

/* ── Marching-ants featured border ──────────────────────────────────── */
.entbox-scope .eb-marching {
  position: relative;
}
.entbox-scope .eb-marching-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.entbox-scope .eb-marching-rect {
  fill: none;
  stroke: rgba(52, 70, 255, 0.95);
  stroke-width: 2;
  stroke-dasharray: 10 6;
  filter:
    drop-shadow(0 0 4px rgba(52, 70, 255, 1))
    drop-shadow(0 0 10px rgba(52, 70, 255, 0.5));
  animation: eb-marching-ants 32s linear infinite;
}
@keyframes eb-marching-ants {
  to { stroke-dashoffset: -800; }
}

/* ── Ambient particle field (background for the canvas viz) ─────────── */
.entbox-scope .eb-amb {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.entbox-scope .eb-amb-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: eb-amb-glow 18s ease-in-out infinite;
}
.entbox-scope .eb-amb-glow.g1 {
  width: 480px; height: 480px;
  top: -100px; left: -80px;
  background: rgba(52, 70, 255, 0.22);
  animation-delay: 0s;
}
.entbox-scope .eb-amb-glow.g2 {
  width: 380px; height: 380px;
  bottom: -80px; right: -60px;
  background: rgba(123, 143, 255, 0.18);
  animation-delay: -6s;
}
.entbox-scope .eb-amb-glow.g3 {
  width: 320px; height: 320px;
  top: 45%; left: 55%;
  background: rgba(80, 110, 255, 0.14);
  animation-delay: -12s;
}
@keyframes eb-amb-glow {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50%      { opacity: .85; transform: scale(1.05); }
}

/* ── Hex grid background pattern ────────────────────────────────────── */
.entbox-scope .eb-hex-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'><path d='M30 0 L60 17 L60 52 L30 69 L0 52 L0 17 Z M30 0 L30 35 M30 35 L60 52 M30 35 L0 52 M30 69 L30 104 M60 87 L60 52 M60 87 L30 104 M0 87 L0 52 M0 87 L30 104' fill='none' stroke='%23252B5F' stroke-width='1'/></svg>");
  background-size: 60px 104px;
  opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black, transparent);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, black, transparent);
}

/* ── Node entrance (used by framer-motion or as CSS fallback) ───────── */
@keyframes eb-node-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Sparkle pulse (for AI/brain icons) ─────────────────────────────── */
.entbox-scope .eb-sparkle {
  animation: eb-sparkle-pulse 2.4s ease-in-out infinite;
}
@keyframes eb-sparkle-pulse {
  0%, 100% { opacity: .65; transform: scale(.92); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* ── Status indicators (circle) ─────────────────────────────────────── */
.entbox-scope .eb-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.entbox-scope .eb-status-dot.live    { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, .7); }
.entbox-scope .eb-status-dot.beta    { background: #d29922; box-shadow: 0 0 6px rgba(210, 153, 34, .7); }
.entbox-scope .eb-status-dot.planned { background: #8b949e; }

/* ── Brain (center) — outline square that flips on hover ────────────── */
.entbox-scope .eb-brain-button { background: transparent; }
.entbox-scope .eb-brain-square {
  position: absolute;
  /* 88px square — 10% larger than the tool nodes' 80px (button is 112px → inset 12 on all sides) */
  inset: 12px;
  border: 2px solid var(--eb-blue);
  /* Match the viz-area background so connection lines/particles appear to
     terminate cleanly at the outline, even when the square scales/rotates on hover. */
  background: var(--eb-deep);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.entbox-scope .eb-brain-button:hover .eb-brain-square,
.entbox-scope .eb-brain-button:focus-visible .eb-brain-square {
  transform: rotate(80deg) scale(1.1);
}

.entbox-scope .eb-brain-icon-wrap {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.entbox-scope .eb-brain-button:hover .eb-brain-icon-wrap,
.entbox-scope .eb-brain-button:focus-visible .eb-brain-icon-wrap {
  transform: scale(1.1);
}

/* ── Tool nodes — share the brain's hover choreography ──────────────── */
.entbox-scope .eb-tool-button { background: transparent; }
.entbox-scope .eb-tool-square,
.entbox-scope .eb-tool-icon-wrap {
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.entbox-scope .eb-tool-button:hover .eb-tool-square,
.entbox-scope .eb-tool-button:focus-visible .eb-tool-square {
  transform: rotate(80deg) scale(1.1);
}
.entbox-scope .eb-tool-button:hover .eb-tool-icon-wrap,
.entbox-scope .eb-tool-button:focus-visible .eb-tool-icon-wrap {
  transform: scale(1.1);
}

/* ── Modal overlay ──────────────────────────────────────────────────── */
.entbox-scope .eb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.entbox-scope .eb-modal {
  background: linear-gradient(180deg, #10153A 0%, #0D1232 100%);
  border: 1px solid rgba(52, 70, 255, 0.4);
  border-radius: 0;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
}

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .entbox-scope .eb-marching-rect,
  .entbox-scope .eb-amb-glow,
  .entbox-scope .eb-sparkle { animation: none; }
}
#btn-run.precheck-warn{background:#D4850A !important;border-color:#D4850A !important;color:#fff !important}   /* #223 pre-run problems detected */