:root{
  --bg:#0b1220; --panel:#121a2b; --accent:#6ee7ff; --accent-2:#a78bfa; --good:#10b981; --warn:#f59e0b; --bad:#ef4444; --muted:#94a3b8; --grid:#1e293b;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0a0f1a,#0e182a 35%,#0b1220);color:#e5e7eb;font:14px/1.45 system-ui,Segoe UI,Roboto,Arial,sans-serif}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 6px 18px;               /* reduced vertical padding */
  height: 48px;                    /* fixed compact height */
  background: rgba(15,22,38,0.85); /* slightly darker tone */
  border-bottom: 1px solid #1f2a44;
  backdrop-filter: saturate(1.1) blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Title and Subtext */
header .title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #e5e7eb;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
  gap: 20px;
}

.title{font-weight:700;font-size:20px;letter-spacing:.3px}

header .sub {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

header {
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

main{padding:18px;display:grid;grid-template-columns:360px 1fr;gap:18px;min-height:calc(100vh - 70px)}
.card{background:var(--panel);border:1px solid #1f2a44;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.2)}
.left{display:flex;flex-direction:column;gap:10px}
.section{padding:14px 14px 12px}
.section h3{margin:0 0 10px;font-size:13px;letter-spacing:.5px;color:#c7d2fe;text-transform:uppercase}
.row{display:flex;gap:8px;flex-wrap:wrap}
label{font-size:12px;color:#cbd5e1}
select,input{background:#0f1626;color:#e5e7eb;border:1px solid #1f2a44;border-radius:10px;padding:10px 12px;outline:none}
input[type="number"],input[type="text"],input[type="range"],textarea{width:100%}
textarea{min-height:96px;resize:vertical}
.muted{color:#9aa7bf;font-size:12px}
.hidden{display:none!important}

.btn{background:#0f1626;border:1px solid #273352;padding:10px 14px;border-radius:10px;color:#e5e7eb;font-weight:600;cursor:pointer;transition:.15s}
.btn:hover{transform:translateY(-1px);border-color:#3a4a78}
.btn.primary{background:linear-gradient(135deg,#2a375a,#1a2542);border-color:#3a4a78}
.btn:disabled{opacity:.5;cursor:not-allowed}
.pill{display:inline-block;border:1px solid #273352;background:#111a2b;padding:6px 10px;border-radius:999px;color:#a5b4fc;font-weight:700}

.viz{
  display:grid;
  grid-template-rows: auto auto;   /* was: auto 1fr */
  grid-auto-rows: auto;            /* any extra rows are auto-sized */
  align-content: start;            /* don't distribute free space */
  gap: 6px;                        /* keep a small gap */
  padding-bottom: 4px;
}.viz-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.legend{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;background:#0f1626;border:1px solid #1f2a44;border-radius:999px;padding:6px 10px;color:#cbd5e1}
.dot{width:10px;height:10px;border-radius:50%}

#grid{position:relative;border-radius:12px;border:1px solid #1f2a44;overflow:auto;background:linear-gradient(180deg,#0f172a,#0b1321); max-width:1100px; margin:0 auto; margin-bottom: 1px !important;}
.grid{position:relative;display:inline-grid;gap:1px;background:var(--grid);padding:1px}
.cell{min-width:64px;min-height:44px;display:flex;align-items:center;justify-content:center;background:#0b1321;color:#d1d5db;font-weight:600;border-radius:6px}
.cell.updated{outline:2px solid var(--accent)}
.cell.best{outline:2px solid var(--good)}
.cell.path{background:#132332}
.cell.label{background:#0f1626;color:#b7c0d5;font-weight:700}

.console{padding:10px;height:160px;background:#0f1626;border-top:1px solid #1f2a44;border-radius:0 0 14px 14px;overflow:auto;font-family:ui-monospace,Consolas,monospace;color:#cbd5e1}
.logline{margin-bottom:10px;white-space:pre-wrap;}

.desc{color:#cbd5e1;font-size:13px;margin-top:6px;text-align: justify;}
.inputs-grid{display:grid;grid-template-columns:1fr;gap:10px}

@media (max-width:980px){
  main{grid-template-columns:1fr}
}

/* Tabs & graph */
.tab.hidden{display:none}
.tab{display:flex;justify-content:center;align-items:flex-start; margin-bottom: 6px; }
.tree{display:block;margin:0 auto;width:100%;max-width:1100px;height:400px;max-height: 400px; background:#0b1321;border:1px solid #1f2a44;border-radius:12px; margin-bottom: 0;}
.memo{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;max-width:1100px;margin:0 auto; }
.node{fill:#0f1a2b;stroke:#2d3a5e;stroke-width:1.2}
.node.memo{fill:#132332;stroke:#10b981}
.node.return{stroke:#6ee7ff}
.edge{stroke:#334155;stroke-width:1.2}
.nlabel{fill:#e5e7eb;font:14px ui-monospace,Consolas,monospace}

/* ——— Matrix editor (scrollable + confined to left panel) ——— */
.matrix-editor{
  display:block;               /* ensure it's a block box */
  position: relative;
  max-width: 100%;
  max-height: 420px;           /* vertical scroll within the left card */
  overflow: auto;              /* both axes */
  -webkit-overflow-scrolling: touch;
  border:1px solid #1f2a44;
  border-radius:12px;
  background:#0f172a;
  margin-top:8px;

  /* IMPORTANT: remove contain/clip-path that could hide content on some engines */
  /* isolation keeps sticky layers composited without bleeding */
  isolation:isolate;
}

/* Let the table take its natural width; wrapper handles scrolling */
.matrix{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;           /* intrinsic width; don’t shrink to card */
  min-width:420px;
  white-space:nowrap;
}

.matrix th, .matrix td {
  border-bottom:1px solid #1f2a44;
  border-right:1px solid #1f2a44;
  background-clip: padding-box; /* keeps borders clean when sticky overlaps */
}
.matrix th:first-child, .matrix td:first-child { border-left:none; }

/* Sticky header row (clipped by .matrix-editor) */
.matrix thead th{
  position:sticky; top:0;
  background:#0f1626;
  color:#b7c0d5;
  font-weight:700;
  padding:8px 10px;
  text-align:center;
  z-index:3;
}

/* Sticky first column (clipped by .matrix-editor) */
.matrix tbody th{
  position:sticky; left:0;
  background:#0f1626;
  color:#b7c0d5;
  font-weight:700;
  padding:8px 10px;
  text-align:center;
  z-index:2;
}

/* Sticky top-left corner */
.matrix thead th:first-child{
  position:sticky;
  top:0; left:0;
  z-index:4;
  background:#0f1626;
}

.matrix td{ padding:6px; }
.matrix input[type="number"]{
  width:72px; max-width:100%;
  background:#0b1321;
  color:#e5e7eb;
  border:1px solid #273352;
  border-radius:8px;
  padding:8px 10px;
  outline:none;
}
.matrix input[type="number"]::placeholder{ color:#64748b; }
.matrix input.diag{ background:#0f1a2b; border-color:#36456e; }

/* --- Make the entire left stack shrinkable --- */
main > .left,
.left .card,
#input-panel,
#input-panel .section,
#inputs,
#input-panel .inputs-grid,
#matHost {
  min-width: 0;              /* critical for Grid overflow */
}

/* --- Clip any accidental bleed from sticky headers etc. --- */
.left .card,
#input-panel .section,
#inputs {
  overflow: hidden;          /* card clips; inner editor scrolls */
}

/* --- The editor is the ONLY scroll container --- */
.matrix-editor{
  display:block;
  width:100%;
  max-width:100%;
  max-height:420px;          /* vertical scroll inside the card */
  overflow:auto;             /* both axes */
  -webkit-overflow-scrolling: touch;
  isolation:isolate;         /* keeps sticky compositing inside */
}
.matrix input.locked { opacity:.6; pointer-events:none; }


/* Keep your existing matrix/table rules (width:max-content on .matrix, sticky TH, etc.) */

/* --- MST highlight: make chosen edges bright orange with a subtle glow --- */
:root {
  /* optional token if you want to reuse it */
  --mst-edge: #ff8a00; /* bright orange */
}

/* Cover common cases: lines/paths with either .edge.chosen, .edge.best or .edge.mst */
.edge.chosen,
.edge.best,
.edge.mst,
line.chosen,
path.chosen {
  stroke: var(--mst-edge);
  stroke-width: 3.5px;         /* thicker to stand out */
  stroke-opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255, 138, 0, 0.85));
}

/* If your base .edge has its own color, ensure chosen wins */
.edge { transition: stroke 120ms ease, stroke-width 120ms ease; }

/* --- Robot log styling --- */
.console {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px !important;
  margin-top: 0;
}
.edge-label {
  fill: #fbbf24; /* amber for visibility */
  font-size: 13px;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 600;
  paint-order: stroke;
  stroke: #0b1220;
  stroke-width: 3px;
  stroke-opacity: 0.7;
  pointer-events: none; /* so clicks pass through */
}

/* one log line */
.logitem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* avatar (inline SVG via data URL; no extra file needed) */
.bot-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #0b1321;
  box-shadow: 0 0 0 1px #334155 inset;
  position: relative;
}
/* --- Linked List visuals --- */
.ll-node {
  fill:#0f1a2b;
  stroke:#2d3a5e;
  stroke-width:1.8;
}
.ll-node.active { stroke:#60a5fa; stroke-width:2.6; }
.ll-node.mid    { stroke:#a78bfa; }
.ll-node.tail   { stroke:#10b981; }
.ll-node.head   { stroke:#fbbf24; }

.ll-label { fill:#e5e7eb; font:14px ui-monospace,Consolas,monospace; }

.ll-arrow {
  stroke:#6ee7ff;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-opacity:.9;
}
.ll-arrow.glow {
  stroke:#0ea5e9;
  stroke-width:8;
  stroke-opacity:.32;
}

/* === Linked List (step-by-step pointers) === */
.ll-node { fill:#0f1a2b; stroke:#2d3a5e; stroke-width:1.8; }
.ll-node.head { stroke:#f59e0b; }
.ll-node.tail { stroke:#10b981; }
.ll-node.active { stroke:#60a5fa; stroke-width:2.6; }

.ll-label { fill:#e5e7eb; font:14px ui-monospace,Consolas,monospace; }

.ll-arrow { stroke:#6ee7ff; stroke-width:2.6; stroke-linecap:round; marker-end:url(#llArrow); }
.ll-arrow.glow { stroke-width:8; stroke:#0ea5e9; stroke-opacity:.32; marker-end:none; }

.ll-pointer {
  fill:#111827; stroke:#6b7280; stroke-width:1.2; rx:6;
}
.ll-pointer-text {
  fill:#e5e7eb; font:12px ui-monospace,Consolas,monospace;
}
.ll-x {
  stroke:#ef4444; stroke-width:2.2;
}

.ll-arrow { stroke:#6ee7ff; stroke-width:2.6; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.ll-arrow.glow { stroke-width:8; stroke:#0ea5e9; stroke-opacity:.32; }

/* Compact default viz height; users can zoom if needed */
#treeSvg.tree{
  width: 100%;
  height: 100%;   
  height: 350px;      /* ↓ shorter by default */
  max-height: 5000px;     /* keeps the output card from growing too tall */
}

.card.viz {
  position: relative; 
}

/* Zoom UI */
.viz-zoom-btn {
  /* Positions the button in the top-right corner of the .card.viz */
  position: absolute;
  top: 10px; 
  right: 10px; 
  z-index: 100;
  display: inline-block; 

  /* Add any existing button styles here */
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--grid);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}
.viz-zoom-panel {
  /* Positions the panel relative to the button */
  position: absolute;
  top: 100%; /* Below the button */
  right: 0; /* Aligns the right edge with the button's right edge */
  margin-top: 5px; /* Small space below the button */
  z-index: 110;

  /* Styling for the panel itself */
  background: var(--panel);
  border: 1px solid var(--grid);
  border-radius: 8px;
  padding: 10px;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Style for the panel rows */
.viz-zoom-panel .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.viz-zoom-panel input[type="range"] {
  /* Slider styling */
  flex-grow: 1;
  min-width: 80px;
}.viz-zoom-panel button {
  /* Basic styling for +,-,Fit,Reset buttons */
  flex-shrink: 0;
  padding: 4px 8px;
}
.viz-zoom-panel .pct{ width:52px; text-align:right; font-variant-numeric:tabular-nums; }

.viz-split .tab {
  /* Prevent scroll chaining */
  overscroll-behavior: contain;

  /* Default cursor to indicate it can be grabbed/panned */
  cursor: grab;
  cursor: -webkit-grab;

  /* Ensure the container is given a height/area to scroll within */
  min-height: 0px; /* Or whatever height is appropriate for the viz area */
}

.viz-split .tab.is-dragging {
  /* Cursor while the user is dragging/panning */
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* Add user-select: none to the visualization elements themselves
   to ensure no text selection happens during the drag, even outside of JS control. */
.viz-split .tab, .viz-split .tab * {
  user-select: none;
  -webkit-user-select: none;
}

/* --- Tutorial/Onboarding Styles --- */

/* Full-screen semi-transparent overlay */
#tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    z-index: 9998; /* Below the modal, above everything else */
    display: none; /* Hidden by default */
}

/* Modal box for instructions */
#tutorial-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--panel);
    border: 1px solid var(--accent);
    padding: 25px;
    border-radius: 8px;
    z-index: 9999;
    max-width: 400px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    display: none; /* Hidden by default */
}

/* Style for the element currently being highlighted */
.tutorial-highlighted {
    z-index: 9999; /* Bring the target element above the overlay */
    position: relative; /* Ensure z-index works */
    box-shadow: 0 0 0 5px var(--accent), 0 0 20px 5px var(--accent); /* Outer glow */
    border-radius: 4px; /* Optional: adds rounded corners to the highlight */
    transition: all 0.3s ease;
}


/* Collapsible matrix */
.matrix-wrap{
  border:1px solid #1f2a44;
  border-radius:12px;
  overflow:hidden;
  background:#0f172a;
}

/* Header bar */
.matrix-head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#0f1626;
  border:0;
  border-bottom:1px solid #1f2a44;
  color:#e5e7eb;
  font-weight:600;
  cursor:pointer;
}
.matrix-head .left{
  display:flex; align-items:center; gap:8px;
}
.matrix-head .chev{
  display:inline-block; transition:transform .15s ease;
}

/* Animate collapse using max-height (works well for unknown heights) */
.matrix-wrap .matrix-editor{
  transition:max-height .2s ease, padding .2s ease, border-width .2s ease;
}
.matrix-wrap.collapsed .matrix-editor{
  max-height:0; padding:0; border-width:0;
}
.matrix-wrap.collapsed .chev{ transform:rotate(-90deg); }


/* Optional: nicer highlight for pseudo-code lines */
#codePane .pc-line { transition: background .15s ease, outline-color .15s ease; }

/* Pseudo-code active line highlight (consistent with your theme) */
.pc-line.active{
  background: rgba(80,120,255,.12);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.25);
  border-radius: 6px;
}

/* Navigation control buttons */
.nav-ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-ctrls .btn {
  padding: 6px 10px;             /* smaller buttons */
  font-size: 13px;
  border-radius: 8px;
  background: #101827;
  border: 1px solid #273352;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nav-ctrls .btn:hover {
  background: #162034;
  transform: translateY(-1px);
}
.nav-ctrls .btn.primary {
  background: linear-gradient(135deg, #2a375a, #1a2542);
  border-color: #3a4a78;
}

/* Speed Slider Compact Styling */
.nav-ctrls .speed-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.nav-ctrls .speed-wrap span {
  font-size: 11px;
  color: #9aa7bf;
}
.nav-ctrls .speed-wrap input[type="range"] {
  width: 110px;                   /* shorter slider */
  height: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Hide the old left-pane controls block (buttons + slider) */
.left .section:has(#runBtn), 
.left .section:has(#speed){ display:none; }


.bot-avatar::before {
  content: "";
  position: absolute;
  inset: 3px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* tiny robot SVG (stroke = cyan) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='9' fill='%230f1a2b'/>\
<rect x='7' y='9' width='10' height='7' rx='2' ry='2' fill='none' stroke='%236ee7ff' stroke-width='1.6'/>\
<circle cx='10' cy='12' r='1.2' fill='%236ee7ff'/>\
<circle cx='14' cy='12' r='1.2' fill='%236ee7ff'/>\
<path d='M12 6v2' stroke='%236ee7ff' stroke-width='1.6' stroke-linecap='round'/>\
</svg>");
}

.bot-bubble {
  background: #0f1a2b;
  color: #e2e8f0;
  border: 1px solid #1f2a44;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
  line-height: 1.25;
  font-size: 0.95rem;
  max-width: 100%;
  position: relative;
}
.bot-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent #1f2a44 transparent transparent;
}
.bot-bubble::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent #0f1a2b transparent transparent;
}
main > .card.viz {
  margin-bottom: 0 !important;
}