/* ── Reset & tokens ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #000000;
  --bg-panel:     #0a0a0a;
  --bg-card:      #111111;
  --bg-input:     #080808;
  --bg-hover:     #161616;

  --border:       #272727;
  --border-dim:   #1a1a1a;
  --border-bright:#3a3a3a;

  --accent:       #d4d4d4;
  --accent-dim:   #888888;
  --accent-muted: rgba(255,255,255,0.05);

  --text:         #e2e2e2;
  --text-dim:     #7a7a7a;
  --text-muted:   #3d3d3d;

  /* D15 — the accent/highlight. Was --green #3ddc84 in Co_Design_V5.
     Use these two together: --accent-hl for solid colour, --accent-hl-rgb
     inside rgba() so translucent uses never hardcode the channels again
     (the old theme had ~32 hardcoded rgba(61,220,132,a) literals scattered
     across the two stylesheets, which is why a find/replace on --green
     silently missed half of them). #c084fc on #000 is ~8:1 contrast. */
  --accent-hl:     #c084fc;
  --accent-hl-rgb: 192,132,252;
  --green:         var(--accent-hl);   /* alias; all NEW css uses --accent-hl */

  --orange:       #e07b39;
  --red:          #cc4444;

  --radius:       3px;
  --radius-sm:    2px;
  --font:         'Inter', system-ui, sans-serif;
  --mono:         'JetBrains Mono', 'Fira Mono', monospace;
}

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #2a2a2a; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: #444; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  background: #000;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #555 40%, #555 60%, transparent);
}

.header-left { display: flex; align-items: center; gap: 12px; }
.header-left,
.header-right { min-width: 0; }

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.025) 3px,
    rgba(255,255,255,0.025) 4px
  );
}

.header-title {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.header-title .accent { color: var(--accent-dim); font-weight: 400; }

.header-right { display: flex; align-items: center; gap: 6px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--radius);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  font-family: var(--font);
  text-transform: uppercase;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  padding: 22px 13px;
}
.btn-primary:hover  { background: #fff; }
.btn-primary:active { transform: scale(0.97); }

.btn-visual {
  background: transparent;
  color: #60a5fa;
  border: 1px solid #1e3a5f;
  font-weight: 600;
  padding: 22px 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.btn-visual:hover   { background: rgba(96,165,250,0.08); border-color: #60a5fa; color: #93c5fd; }
.btn-visual:active  { transform: scale(0.97); }
.btn-visual.loading { opacity: 0.6; cursor: wait; }

/* ── PRESSING A BUTTON MUST LOOK LIKE PRESSING A BUTTON ──────────────────────
   `.btn-ghost` had no `:active` rule at all, so DOWNLOAD (and STOP, and every
   other ghost button) gave no feedback whatsoever on click — reported as "it
   looks like I didn't click it". The two buttons that DID move had their own
   rules; this is the base one, so a new variant cannot be born without it. */
.btn:active:not(:disabled),
a.btn:active { transform: scale(0.97); }

/* A download takes seconds (the server rebuilds the model, rolls the policy out and
   zips ~9 MB), so the button narrates the wait rather than sitting there. */
.is-downloading {
  cursor: wait;
  color: var(--accent-hl) !important;
  border-color: rgba(var(--accent-hl-rgb), 0.45) !important;
  background: rgba(var(--accent-hl-rgb), 0.10) !important;
  animation: dl-pulse 1.1s ease-in-out infinite;
}
@keyframes dl-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.is-download-done {
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  background: rgba(74, 222, 128, 0.10) !important;
}
.is-download-failed {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  background: rgba(248, 113, 113, 0.10) !important;
}
@media (prefers-reduced-motion: reduce) {
  .is-downloading { animation: none; }
  .btn:active:not(:disabled), a.btn:active { transform: none; }
}

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover      { color: var(--text); border-color: var(--border-bright); background: var(--bg-hover); }
.btn-ghost:disabled   { opacity: 0.3; cursor: not-allowed; }
.btn-ghost:disabled:hover { color: var(--text-dim); border-color: var(--border); background: transparent; }
.btn-sm               { padding: 4px 9px; font-size: 0.68rem; }

/* Axis toggle active state */
.axis-btn.active {
  color: var(--accent-hl);
  border-color: rgba(var(--accent-hl-rgb), 0.5);
  background: rgba(var(--accent-hl-rgb), 0.07);
}

/* ── Main layout — CSS grid, resizable via JS ────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: 32% 5px 1fr;
  height: calc(100vh - 52px);
  overflow: hidden;
}

/* ── Drag handle ─────────────────────────────────────────────────────────── */
.resize-handle {
  background: var(--border-dim);
  cursor: col-resize;
  position: relative;
  z-index: 20;
  transition: background 0.15s;
}
.resize-handle:hover,
.resize-handle.dragging { background: var(--border-bright); }
.resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 32px;
  background: var(--accent-dim);
  border-radius: 1px;
  opacity: 0.4;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */
.panel           { display: flex; flex-direction: column; overflow: hidden; }
.chat-panel      { background: var(--bg-panel); min-width: 0; }
.viewer-panel    { background: var(--bg); min-width: 0; }

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 38px;
  background: #000;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
  font-family: var(--mono);
}

.panel-icon { font-size: 0.85rem; }

.robot-stats {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--accent-hl);
  font-family: var(--mono);
  letter-spacing: 0.06em;
}

/* ── WS status ───────────────────────────────────────────────────────────── */
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background 0.3s;
}
.status-dot.connected { background: var(--accent-hl); box-shadow: 0 0 4px var(--accent-hl); }
.status-dot.error     { background: var(--red); }

/* ── Messages ────────────────────────────────────────────────────────────── */
.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scroll-behavior: smooth;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.msg-entry {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeUp 0.18s ease;
}

.msg-tag {
  width: 38px;
  min-width: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11px;
  font-size: 0.57rem;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.msg-entry.user { border: 1px solid #2c2c2c; }
.msg-entry.user .msg-tag { background: #000; color: #e8e8e8; border-right: 1px solid #2c2c2c; }
.msg-entry.user .msg-body { background: #0c0c0c; color: var(--text); }

.msg-entry.sys,
.msg-entry.satisfaction { border: 1px solid #1e1e1e; }
.msg-entry.sys .msg-tag,
.msg-entry.satisfaction .msg-tag { background: #181818; color: #505050; border-right: 1px solid #1e1e1e; }
.msg-entry.sys .msg-body,
.msg-entry.satisfaction .msg-body { background: #111; color: var(--text-dim); }
.msg-entry.satisfaction { border-color: var(--border-bright); }
.msg-entry.satisfaction .msg-body { color: var(--text); }

.validator-status-entry { border-color: #1a2a3a !important; }
.validator-status-entry .msg-tag { color: #2d6a9f !important; }
.validator-status-body { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; }
.reasoning-trace-entry { border-color: #1f2c1f !important; }
.reasoning-trace-entry .msg-tag { color: #4ade80 !important; }
.reasoning-trace-body { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--text-dim); }

.msg-body {
  flex: 1;
  padding: 9px 13px;
  font-size: 0.83rem;
  line-height: 1.65;
  word-break: break-word;
  min-width: 0;
}

.msg-body strong { color: var(--text); font-weight: 600; }
.msg-body em     { color: var(--text-dim); font-style: italic; }
.msg-body code {
  font-family: var(--mono);
  font-size: 0.76rem;
  background: #1a1a1a;
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--accent);
}
.msg-body ul, .msg-body ol { padding-left: 16px; }
.msg-body li { margin: 3px 0; color: var(--text-dim); }
.msg-body li::marker { color: var(--text-muted); }
.msg-body p + p { margin-top: 6px; }

.urdf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(var(--accent-hl-rgb), 0.06);
  border: 1px solid rgba(var(--accent-hl-rgb), 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--accent-hl);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* ── Hardware actuator badge ─────────────────────────────────────────────── */
.hw-tag {
  color: #a78bfa !important;
  border-color: rgba(167,139,250,0.25) !important;
}

.hw-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 6px;
  padding: 5px 12px;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.22);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-family: var(--mono);
  letter-spacing: 0.03em;
}

.hw-model {
  font-weight: 700;
  color: #e9d5ff;
  font-size: 0.72rem;
}

.hw-supplier {
  color: #6b7280;
  font-size: 0.64rem;
}

.hw-divider {
  width: 1px;
  height: 10px;
  background: #2a2a2a;
  flex-shrink: 0;
}

.hw-spec {
  color: #c4b5fd;
  background: rgba(139,92,246,0.1);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.68rem;
}

.hw-source-tag {
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hw-source-local {
  background: rgba(71,85,105,0.2);
  color: #94a3b8;
  border-color: rgba(71,85,105,0.3);
}

.hw-link {
  color: #7c3aed;
  text-decoration: none;
  font-size: 0.64rem;
  margin-left: 2px;
  opacity: 0.85;
}
.hw-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Typing indicator ────────────────────────────────────────────────────── */
.typing-indicator { display: none; align-items: center; gap: 4px; padding: 4px 14px 10px; }
.typing-indicator.visible { display: flex; }

.typing-indicator .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: blink 1.1s infinite;
}
.dot:nth-child(2) { animation-delay: 0.18s; }
.dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes blink {
  0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
  40%          { opacity: 1;   transform: scale(1);   }
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #000;
  flex-shrink: 0;
}

textarea#user-input {
  flex: 1;
  resize: none;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.84rem;
  line-height: 1.55;
  padding: 8px 11px;
  outline: none;
  transition: border-color 0.15s;
  min-height: 40px;
  max-height: 130px;
}
textarea#user-input:focus       { border-color: var(--border-bright); }
textarea#user-input::placeholder { color: var(--text-muted); font-size: 0.81rem; }
textarea#user-input:disabled    { opacity: 0.45; cursor: not-allowed; }
.btn-visual:disabled            { opacity: 0.35; cursor: not-allowed; }

/* ── Viewer panel ────────────────────────────────────────────────────────── */
.viewer-body {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  position: relative; /* anchor for absolute joints-float */
}

.viewer-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

/* corner brackets */
.viewer-container::before,
.viewer-container::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--border-bright);
  z-index: 5;
  pointer-events: none;
}
.viewer-container::before { top: 10px;    left: 10px;    border-right: none; border-bottom: none; }
.viewer-container::after  { bottom: 10px; right: 10px;   border-left: none;  border-top: none;    }

.viewer-placeholder {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 4;
}
.placeholder-icon  { opacity: 1; }
.placeholder-text  { font-size: 1.64rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); }

#meshcat-frame {
  position: absolute;
  top:    -44px;
  left:   0;
  right:  0;
  bottom: 0;
  width:  100%;
  height: calc(100% + 44px);
  border: none;
  z-index: 1;
}

/* ── Top-left toggle button bar ──────────────────────────────────────────── */
.side-btn-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.side-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.6rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.side-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.25); }
.side-btn.active {
  color: var(--text);
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.09);
}

/* ── Floating panel — both joints and links share this anchor ────────────── */
.joints-float,
.links-float {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 1;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.joints-float.collapsed,
.links-float.collapsed {
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Panel body — the visible card */
.joints-float-body {
  width: 220px;
  max-height: 75vh;
  overflow-y: auto;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
}

/* Sticky header inside the panel */
.joints-float-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  position: sticky;
  top: 0;
  background: rgba(8, 8, 8, 0.88);
  z-index: 1;
  flex-shrink: 0;
}

.joint-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

#btn-rom-all-joints {
  min-width: 74px;
  justify-content: center;
}

#btn-rom-all-joints.active {
  color: #000;
  border-color: var(--accent);
  background: var(--accent);
}

.angle-unit-toggle {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.angle-unit-btn {
  width: 29px;
  height: 20px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--border-dim);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.angle-unit-btn:last-child { border-right: 0; }
.angle-unit-btn:hover { color: var(--text); background: var(--bg-hover); }
.angle-unit-btn.active {
  color: var(--accent-hl);
  background: rgba(var(--accent-hl-rgb), 0.1);
}

.viewer-unit-toggle {
  margin-left: 0;
}

/* Vertical slider list */
.joints-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
}

.joint-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.joint-control:hover { background: rgba(255,255,255,0.03); }

.joint-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.joint-name {
  font-size: 0.68rem;
  font-family: var(--mono);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.joint-val {
  font-size: 0.64rem;
  font-family: var(--mono);
  color: var(--accent-hl);
  min-width: 44px;
  text-align: right;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.joint-rom-btn {
  font-size: 0.55rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.joint-rom-btn:hover { background: rgba(255,255,255,0.12); }
.joint-rom-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

/* ── Range slider ────────────────────────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--border-bright);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #000;
  box-shadow: 0 0 0 1px var(--border-bright);
  transition: transform 0.12s;
}
input[type="range"]::-webkit-slider-thumb:hover  { transform: scale(1.3); }
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #000;
}

/* ── Parameters sidebar ──────────────────────────────────────────────────── */
.params-panel {
  width: 296px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-panel);
  flex-direction: column;
}

.params-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
  flex-wrap: wrap;
  row-gap: 5px;
}

.params-tabs { display: flex; gap: 2px; margin-left: 6px; }
.rebuild-btn { margin-left: auto; }

.params-tab {
  padding: 2px 8px;
  font-size: 0.6rem;
  font-family: var(--mono);
  letter-spacing: 0.1em;
  background: transparent;
  border: 1px solid var(--border-dim);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  text-transform: uppercase;
}
.params-tab:hover  { color: var(--text); border-color: var(--border); }
.params-tab.active { color: var(--text); border-color: var(--border-bright); background: var(--bg-card); }

.params-tab-content { display: block; overflow-y: auto; }

.rebuild-btn          { color: var(--accent-hl) !important; border-color: rgba(var(--accent-hl-rgb), 0.3) !important; }
.rebuild-btn:hover    { background: rgba(var(--accent-hl-rgb), 0.08) !important; border-color: var(--accent-hl) !important; }
.rebuild-btn:disabled { color: var(--text-muted) !important; border-color: var(--border-dim) !important; cursor: not-allowed; }

.params-body { padding: 0; }

/* ── Accordion param sections ────────────────────────────────────────────── */
.param-section {
  border-bottom: 1px solid var(--border-dim);
}
.param-section:last-child { border-bottom: none; }

/* Clickable accordion header */
.param-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.param-section-head:hover { background: var(--bg-hover); }

.param-section-head .chevron {
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.param-section.open .param-section-head .chevron {
  transform: rotate(90deg);
}

.param-name {
  font-size: 0.72rem;
  font-family: var(--mono);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.param-type {
  font-size: 0.72rem;
  font-family: var(--mono);
  color: var(--text-dim);
  font-weight: 400;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Collapsible body */
.param-section-body {
  display: none;
  padding: 0 0 8px;
}
.param-section.open .param-section-body {
  display: block;
}

/* param-group: one labeled block */
.param-group { margin-top: 6px; padding: 0 10px; }
.param-group:first-of-type { margin-top: 4px; }

.param-group-label {
  font-size: 0.54rem;
  font-family: var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 1px;
}

.param-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0 3px 10px;
  gap: 6px;
}

.param-item-label {
  font-size: 0.64rem;
  font-family: var(--mono);
  color: var(--text-dim);
  flex: 1;
}

.param-input {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 3px 7px;
  width: 118px;
  text-align: right;
  outline: none;
  transition: border-color 0.12s;
  flex-shrink: 0;
}
.param-input:focus { border-color: var(--border-bright); }
.param-input::-webkit-outer-spin-button,
.param-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.param-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.params-loading, .params-empty {
  padding: 14px 10px;
  font-size: 0.68rem;
  font-family: var(--mono);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* PARAMS toggle button active state */
#btn-toggle-params.params-active {
  color: var(--text);
  border-color: var(--border-bright);
  background: var(--bg-hover);
}

/* ── Loading overlay ─────────────────────────────────────────────────────── */
.loading-overlay {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  gap: 14px;
  z-index: 10;
}
.spinner {
  width: 32px; height: 32px;
  border: 2px solid #222;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 0.75rem; color: var(--text-muted); font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Library modal overlay ───────────────────────────────────────────────── */
.lib-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lib-modal {
  width: 360px;
  background: #0d0d0d;
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lib-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.65rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text);
}

.lib-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: color 0.15s;
}
.lib-modal-close:hover { color: var(--text); }

.lib-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Tips modal ──────────────────────────────────────────────────────────── */
.tips-body {
  max-height: 70vh;
  overflow-y: auto;
  gap: 18px;
}
.tips-section { display: flex; flex-direction: column; gap: 7px; }
.tips-h {
  margin: 0;
  font-size: 0.72rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.tips-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tips-list li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.tips-list strong { color: var(--accent); font-weight: 600; }
.tips-list em {
  color: var(--accent);
  font-style: normal;
  background: var(--accent-muted);
  padding: 1px 5px;
  border-radius: 3px;
}

.lib-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lib-label {
  font-size: 0.6rem;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.lib-input,
.lib-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 7px 10px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.lib-input:focus,
.lib-select:focus {
  border-color: var(--border-bright);
}
.lib-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}

.lib-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* Import library modal — category level */
.import-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid #111;
  transition: background 0.12s;
}
.import-cat-row:hover { background: rgba(0,200,120,.06); }
.import-cat-icon  { font-size: 0.9em; }
.import-cat-name  { font-size: 0.84em; color: var(--text); font-family: var(--font-mono); flex: 1; }
.import-cat-count { font-size: 0.72em; color: #444; font-family: var(--font-mono); }
.import-cat-arrow { font-size: 1em; color: #333; margin-left: 4px; }

/* Back button + category header inside robot list */
.import-nav-back {
  padding: 8px 14px;
  font-size: 0.78em;
  color: #555;
  cursor: pointer;
  border-bottom: 1px solid #111;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.import-nav-back:hover { color: var(--accent); }
.import-lib-cat-header {
  padding: 8px 14px 4px;
  font-size: 0.68em;
  color: #444;
  letter-spacing: .09em;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Import library modal — robot level */
.import-lib-cat {
  padding: 8px 14px 3px;
  font-size: 0.68em;
  color: #444;
  letter-spacing: .09em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.import-lib-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #111;
  transition: background 0.12s;
}
.import-lib-row:hover    { background: rgba(0,200,120,.06); }
.import-lib-row.selected { background: rgba(0,200,120,.12); outline: 1px solid rgba(0,200,120,.25); }
.import-lib-name {
  font-size: 0.82em;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}
.import-lib-meta {
  font-size: 0.75em;
  color: #555;
  font-family: var(--font-mono);
  display: flex;
  gap: 6px;
  align-items: center;
}
.import-mode-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 0.78em;
  color: #aaa;
  font-family: var(--font-mono);
}
.import-mode-opt input { cursor: pointer; accent-color: var(--accent); }

/* Links panel body */
.links-float-body {
  width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
}

.links-float-header {
  padding: 7px 10px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--mono);
  position: sticky;
  top: 0;
  background: rgba(8, 8, 8, 0.88);
  z-index: 1;
  flex-shrink: 0;
}

/* Individual link rows */
.links-list {
  padding: 6px 0;
  overflow-y: auto;
}

.link-row {
  padding: 5px 10px;
  font-size: 0.68rem;
  font-family: var(--mono);
  color: var(--text-dim);
  cursor: default;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.link-row:hover {
  background: rgba(255,140,0,0.12);
  color: #FF8C00;
}

/* ── MuJoCo in-browser simulator ───────────────────────────────────────────── */
.mujoco-container {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #2e3e4f;
}
.mujoco-container canvas.mj-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* Active state for the SIMULATE toggle button */
#btn-simulate.active {
  color: var(--accent-hl);
  border-color: var(--accent-hl);
  background: rgba(var(--accent-hl-rgb), 0.08);
}

/* Floating control bar (bottom-center of the viewer) */
.mj-toolbar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.mj-btn {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mj-btn:hover { background: rgba(255,255,255,0.14); }
.mj-btn.paused { color: var(--accent-hl); border-color: var(--accent-hl); }
.mj-hint {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  margin-left: 4px;
  white-space: nowrap;
}

/* Live sensor readout (top-left of the viewer) */
.mj-sensors {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 300px;
  max-height: calc(100% - 300px);   /* leaves room for the bottom-left camera panel */
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mj-sensors-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
}
.mj-sensors-body {
  overflow-y: auto;
  padding: 4px 0;
}
.mj-sensor-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 10px;
}
.mj-sensor-name {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mj-sensor-val {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text);
  white-space: pre;
  text-align: right;
}
.mj-sensor-empty {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  padding: 6px 10px;
}

/* Grouped floating-base state with aligned axes and units. */
.mj-sensor-group {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-hl);
  padding: 7px 10px 3px;
  border-top: 1px solid var(--border-bright);
  margin-top: 2px;
}
.mj-sensor-group:first-child {
  border-top: none;
  margin-top: 0;
}
.mj-base-field { padding: 2px 10px 4px; }
.mj-base-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--text-dim);
}
.mj-unit { color: var(--text-muted); }
.mj-base-val { margin-top: 2px; }
.mj-vec {
  display: grid;
  align-items: center;
}
.mj-th,
.mj-td {
  font-family: var(--mono);
  text-align: center;
  padding: 1px 4px;
  border-right: 1px solid var(--border-dim);
}
.mj-th:nth-child(3n),
.mj-td:nth-child(3n) { border-right: none; }
.mj-th {
  font-size: 0.5rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-dim);
  text-transform: lowercase;
}
.mj-td {
  font-size: 0.58rem;
  color: var(--text);
  white-space: pre;
}

/* ── MuJoCo: toolbar toggles + separator ───────────────────────────────────── */
.mj-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border-bright);
  margin: 0 2px;
}
.mj-btn.mj-toggle { opacity: 0.55; }
.mj-btn.mj-toggle.active {
  opacity: 1;
  color: var(--accent-hl);
  border-color: var(--accent-hl);
  background: rgba(var(--accent-hl-rgb), 0.08);
}

/* ── MuJoCo: joint-torque controls (top-left overlay) ──────────────────────── */
.mj-torques {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 300px;
  max-height: calc(100% - 300px);   /* leaves room for the bottom-left camera panel */
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mj-torques-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
  flex-shrink: 0;
}
.mj-torques-body {
  overflow-y: auto;
  padding: 6px 0;
}
.mj-torque-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mj-torque-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mj-torque-name {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.mj-torque-val {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--accent-hl);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}
.mj-torque-slider { width: 100%; }
.mj-torque-empty {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--text-muted);
  padding: 6px 10px;
}

/* ── References menu (hamburger) ────────────────────────────────────────────── */
.refs-menu-wrap,
.toolbar-menu-wrap { position: relative; display: inline-flex; }
#btn-refs-menu { padding: 5px 7px; }
.menu-chevron {
  margin-left: 2px;
  transition: transform 0.15s ease;
}
[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.refs-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 100;
  padding: 4px;
}
.refs-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.refs-menu-item:hover { background: var(--bg-hover); color: var(--accent-hl); }
.refs-menu-item:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  background: transparent;
}
.toolbar-dropdown { min-width: 174px; }
.toolbar-dropdown-right {
  left: auto;
  right: 0;
}

/* ── References modal extras ────────────────────────────────────────────────── */
.refs-textarea {
  resize: vertical;
  min-height: 64px;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.5;
}
.refs-status {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.refs-status.info  { color: var(--text-dim); background: rgba(255,255,255,0.04); }
.refs-status.ok    { color: var(--accent-hl);  background: rgba(var(--accent-hl-rgb), 0.08); border: 1px solid rgba(var(--accent-hl-rgb), 0.3); }
.refs-status.warn  { color: #fbbf24;        background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); }
.refs-status.error { color: #f87171;        background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); }

.refs-existing {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.refs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.refs-row:last-child { border-bottom: none; }
.refs-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.refs-row-name {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.refs-row-url {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.refs-del {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  width: 22px; height: 22px;
  cursor: pointer;
  line-height: 1;
}
.refs-del:hover { color: #f87171; border-color: #f87171; }
.refs-empty {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  padding: 10px;
  text-align: center;
}

/* ── In-sim live scene switcher (bottom-center overlay) ─────────────────────── */
.mj-scene-switch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 11;
  backdrop-filter: blur(6px);
}
.mj-scene-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
}
.mj-scene-switch select {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
}

/* ── Environment physics panel (opens upward from the scene switcher) ──────── */
.mj-env-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  padding: 10px 12px;
  background: rgba(8, 10, 13, 0.92);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  z-index: 12;
}
.mj-env-row {
  display: grid;
  grid-template-columns: 104px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}
.mj-env-name {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.mj-env-row.overridden .mj-env-name { color: var(--accent-hl); }
.mj-env-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent-hl);
  cursor: pointer;
}
.mj-env-val {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text);
  text-align: right;
}
.mj-env-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.mj-env-seed {
  margin-top: 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--text-muted);
}

/* ── Camera view selector (top-left overlay — the scene switcher above is
   horizontally centered, so this corner is free) ───────────────────────────── */
.mj-cam-switch {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(8, 10, 13, 0.82);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 11;
  backdrop-filter: blur(6px);
}
.mj-cam-switch select {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
}

/* CAM selector, now inline inside the bottom toolbar (between Reset and Torques) */
.mj-cam-inline { display: flex; align-items: center; gap: 6px; }
.mj-cam-inline .mj-scene-label { color: var(--accent-hl); }
.mj-cam-inline select {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
}

/* RoboForge policy panel — bottom-right corner, growing UPWARD as content is added
   (bottom anchored, no top anchor, so the box's top edge simply moves up with height).
   Shares the right side with the torque sliders (top-right, hidden by default);
   the sensor readout lives top-left. rl_ui.js still auto-collapses the sensor panel
   while the pose editor (the tall stage, one row per joint) is open, and restores it
   afterward — the pose editor gets the FULL vertical space. */
/* ── Point cloud (bottom-right overlay, same width as .rf-panel) ────────────── */
.mj-pointcloud {
  position: absolute;
  bottom: 16px;
  right: 14px;
  width: 340px;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.9);
  border: 5px solid #000;
  border-radius: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mj-pointcloud-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
  flex-shrink: 0;
}
.mj-pointcloud-canvas-wrap {
  width: 100%;
  height: 220px;
  line-height: 0;   /* canvas is inline by default; kills a few px of phantom gap */
}
.mj-pointcloud-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.mj-pointcloud-empty {
  display: none;   /* flipped by Session.updatePointCloudHint() */
  padding: 16px 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

/* ── Camera view (bottom-LEFT overlay, mirrors the point cloud on the right) ── */
.mj-camera {
  position: absolute;
  bottom: 16px;
  left: 14px;
  width: 300px;   /* match the Robot-states (sensors) panel width */
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.9);
  border: 5px solid #000;
  border-radius: 8px;
  z-index: 10;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.mj-camera-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
  flex-shrink: 0;
}
.mj-camera-canvas-wrap {
  width: 100%;
  height: 220px;
  line-height: 0;
}
.mj-camera-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.mj-camera-empty {
  display: none;   /* flipped by Session.updateCameraHint() */
  padding: 16px 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

.rf-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 340px;   /* wide enough for the pose editor's name + slider + value */
  max-height: calc(100% - 90px);   /* aligned with the scene bar (top) + clears the toolbar (bottom) */
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.9);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 12;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.rf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.rf-panel-head .rf-caret { color: var(--text-dim); font-family: var(--mono); }
.rf-panel-body {
  overflow-y: auto;
  padding: 8px 10px;
}
/* Pose editor: only the joint list scrolls; Reset/Save/Skip stay pinned at
   the bottom of the panel regardless of how many joints there are. */
.rf-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
}
.rf-panel-footer {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-top: 1px solid var(--border-bright);
}
.rf-panel.collapsed .rf-panel-body,
.rf-panel.collapsed .rf-panel-scroll,
.rf-panel.collapsed .rf-panel-footer { display: none; }
.rf-panel .rf-btn {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rf-panel .rf-btn:hover { background: rgba(255,255,255,0.14); }
.rf-panel .rf-btn:disabled { opacity: 0.4; cursor: wait; }
/* Reset / Save / Skip all share the same plain white boxed look — no green
   or blue accents distinguishing them. */
.rf-panel .rf-btn-primary,
.rf-panel .rf-btn-link { color: var(--text); }
.rf-panel .rf-hint {
  font-family: var(--mono); font-size: 0.56rem; color: var(--text-dim);
  margin-bottom: 8px; line-height: 1.5;
}
.rf-panel .rf-msg {
  font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim);
  margin-top: 6px; min-height: 14px; white-space: pre-wrap; line-height: 1.5;
}
.rf-field-row {
  display: grid;
  grid-template-columns: 96px 1fr 62px;
  gap: 8px;
  align-items: center;
  margin: 5px 0;
}
.rf-field-row span {
  font-family: var(--mono); font-size: 0.6rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-field-row input[type=range] { width: 100%; accent-color: var(--accent-hl); }
.rf-field-row input[type=number] {
  width: 62px; font-family: var(--mono); font-size: 0.62rem;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: 4px; padding: 3px 5px;
  color-scheme: dark;   /* dark native spin buttons instead of white */
}
.rf-field-row input[type=number]:focus {
  outline: none; border-color: var(--accent-hl);
}
.rf-field-row.rf-height span { color: var(--accent-dim); }
/* version picker (Run policy version): a full-width labelled dropdown that
   lines up with the stacked action buttons, instead of an awkward grid row. */
.rf-panel .rf-version-label {
  display: block; margin: 4px 0 0;
  font-family: var(--mono); font-size: 0.6rem; color: var(--text-dim);
  text-transform: none; letter-spacing: 0.03em;
}
.rf-panel .rf-version-select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 3px;
  font-family: var(--mono); font-size: 0.64rem;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border-bright); border-radius: 4px; padding: 5px 7px;
  color-scheme: dark;
}
.rf-panel .rf-version-select:focus { outline: none; border-color: var(--accent-hl); }
.rf-panel .rf-version-select:disabled { opacity: 0.5; }

/* Movement joystick (D-pad + rotate) — drives vx/vy/yaw on /api/rl/run_policy. */
.rf-joystick {
  display: grid;
  grid-template-columns: 38px 38px 38px;
  grid-template-rows: 32px 32px 32px 32px;
  gap: 5px;
  justify-content: center;
  margin: 8px 0;
}
.rf-jbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rf-jbtn:hover { background: rgba(255,255,255,0.14); }
.rf-jbtn:disabled { opacity: 0.4; cursor: wait; }
.rf-jbtn.active { color: var(--accent-hl); border-color: var(--accent-hl); background: rgba(var(--accent-hl-rgb), 0.12); }
.rf-jbtn-key { font-size: 0.52rem; color: var(--text-dim); margin-left: 2px; }
.rf-jbtn-up    { grid-column: 2; grid-row: 1; }
.rf-jbtn-left  { grid-column: 1; grid-row: 2; }
.rf-jbtn-stop  { grid-column: 2; grid-row: 2; font-size: 0.62rem; }
.rf-jbtn-right { grid-column: 3; grid-row: 2; }
.rf-jbtn-down  { grid-column: 2; grid-row: 3; }
.rf-jbtn-ccw   { grid-column: 1; grid-row: 4; font-size: 0.68rem; }
.rf-jbtn-cw    { grid-column: 3; grid-row: 4; font-size: 0.68rem; }

/* Policy info panel — opens centered just below the sim toolbar (Play/Reset/
   Torques/Sensors), toggled by the "Policy info" button in the RoboForge panel.
   Shows which stored policy versions this session runs (base / trained) plus the
   full version history from the registry. */
.rf-info-panel {
  position: absolute;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-height: 55%;
  display: flex;
  flex-direction: column;
  background: rgba(8, 10, 13, 0.9);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  z-index: 11;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.rf-info-head {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-hl);
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-bright);
  flex-shrink: 0;
}
.rf-info-body { overflow-y: auto; padding: 8px 10px; }
.rf-info-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 0.6rem;
}
.rf-info-row .k { color: var(--text-dim); white-space: nowrap; }
.rf-info-row .v { color: var(--text); text-align: right; }
.rf-info-row .v.dim { color: var(--text-muted); }
.rf-info-sub {
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: 10px 0 4px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 8px;
}