.arm-preview-container--3d {
  position: relative;
  background: #f7f8fa;
}

.arm-preview-3d {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: #f7f8fa;
}

.arm-preview-3d[hidden] {
  display: none !important;
}

.arm-preview-container.is-robot-sim-active .arm-preview-3d,
.arm-preview-container.is-robot-sim-active [data-arm-preview-3d-fallback-status] {
  display: none !important;
}

.arm-preview-3d__viewport {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.arm-preview-3d__viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.robot-sim-3d__viewport.is-leader-handles-visible canvas,
.arm-preview-3d__viewport.is-leader-handles-visible canvas {
  cursor: grab;
  touch-action: none;
}

.robot-sim-3d__viewport.is-leader-handle-hover canvas,
.arm-preview-3d__viewport.is-leader-handle-hover canvas {
  cursor: grab;
}

.robot-sim-3d__viewport.is-leader-handle-dragging canvas,
.arm-preview-3d__viewport.is-leader-handle-dragging canvas {
  cursor: grabbing;
  touch-action: none;
}

.arm-preview-container--3d.is-vertical-panning .arm-preview-3d__viewport,
.arm-preview-container--3d.is-vertical-panning .arm-preview-3d__viewport canvas {
  cursor: ns-resize;
}

.arm-preview-3d__toolbar {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

.arm-preview-3d__status,
.arm-preview-3d__fallback-status {
  min-width: 0;
  border: 1px solid #dfe4eb;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  color: #263142;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 6px 9px;
}

.arm-preview-3d__status {
  display: none !important;
}

.arm-preview-3d__status[data-tone="ready"] {
  border-color: #95d1aa;
  color: #176739;
}

.arm-preview-3d__status[data-tone="warning"] {
  border-color: #e7bd75;
  color: #86520b;
}

.arm-preview-3d__status[data-tone="error"],
.arm-preview-3d__fallback-status {
  border-color: #e4a4a4;
  color: #9f2525;
}

.arm-preview-3d__reset {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 0;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #d7dde6;
  background: rgba(255, 255, 255, 0.96);
  color: #263142;
  box-shadow: none;
  line-height: 1;
}

.arm-preview-3d__reset:hover,
.arm-preview-3d__reset:focus-visible {
  border-color: #2f6fe4;
  color: #1c57bd;
}

.arm-preview-3d__reset svg {
  width: 18px;
  height: 18px;
}

.arm-preview-3d__reset span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.arm-preview-3d__fallback-status {
  position: absolute;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: 12px;
  border-radius: 8px;
  text-align: center;
}

.arm-preview-3d__fallback-status[hidden] {
  display: none !important;
}

.arm-preview-container--3d.is-3d-active > svg {
  display: none !important;
}

.arm-preview-container--3d.is-3d-disabled .arm-preview-3d {
  cursor: default;
}

@media (min-width: 768px) {
  .sidebar__preview .arm-preview-container--3d {
    min-height: 220px;
  }
}

.index-3d-page .workspace-panel--block,
.index-3d-page .workspace-panel--manual {
  min-height: 0;
  height: 100%;
}

.index-3d-page .workspace {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.index-3d-workbench {
  --index-3d-teach-controls-gap: 8px;
  --index-3d-teach-controls-size: 28px;
  --index-3d-teach-controls-size-min: 26px;
  --index-3d-teach-controls-size-max: 36px;
  --index-3d-teach-controls-height: 30px;
  --index-3d-teach-controls-padding: 4px;
  --index-3d-teach-controls-icon-size: 13px;
  height: 100%;
  min-height: 0;
  padding: 0 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas:
    "main";
  gap: 0;
}

.index-3d-main-split,
.index-3d-block-manual-group,
.index-3d-side-column {
  min-width: 0;
  min-height: 0;
  display: grid;
}

.index-3d-main-split {
  grid-area: main;
}

.index-3d-block-manual-group {
  grid-area: pair;
}

.index-3d-workbench .sidebar-card,
.index-3d-workbench .workspace__editor,
.index-3d-main-split,
.index-3d-block-manual-group,
.index-3d-side-column {
  min-width: 0;
  min-height: 0;
}

.index-3d-preview-card {
  grid-area: auto;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
}

.index-3d-preview-card .arm-preview-container--3d {
  min-height: 0;
  height: 100%;
}

.index-3d-side-column {
  grid-area: side;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.index-3d-manual-card {
  grid-area: manual;
  height: auto;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: auto;
}

.index-3d-manual-card.has-bridge-controls {
  grid-template-rows: auto auto max-content;
  grid-auto-rows: max-content;
  align-content: start;
}

.index-3d-card-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.index-3d-card-header .panel-label {
  min-width: 0;
}

.index-3d-block-card .index-3d-card-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.index-3d-manual-card .teach-controls {
  gap: 6px;
}

.index-3d-manual-card .teach-controls__row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.index-3d-manual-card .teach-controls__toggle {
  flex: 0 0 auto;
  min-height: 28px;
  gap: 6px;
  padding: 3px 7px;
  font-size: 0.74rem;
}

.index-3d-manual-card .teach-controls__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--index-3d-teach-controls-gap);
  overflow-x: auto;
  padding: 1px 1px 3px;
  scrollbar-width: thin;
}

.index-3d-manual-card .teach-controls__tool {
  flex: 0 0 auto;
  display: inline-flex;
}

.index-3d-manual-card .teach-controls__actions .btn {
  flex: 0 0 auto;
  min-width: 0;
  width: var(--index-3d-teach-controls-size);
  height: var(--index-3d-teach-controls-height);
  min-height: var(--index-3d-teach-controls-height);
  padding: var(--index-3d-teach-controls-padding);
}

.index-3d-manual-card .teach-controls__actions .btn svg {
  width: var(--index-3d-teach-controls-icon-size);
  height: var(--index-3d-teach-controls-icon-size);
}

.index-3d-manual-card .teach-controls__status {
  padding: 5px 7px;
  font-size: 0.72rem;
}

.index-3d-manual-card .servo-sliders {
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 4px;
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.index-3d-manual-card.has-bridge-controls .servo-sliders {
  height: auto;
  min-height: 210px;
  align-content: start;
  gap: 6px;
  grid-template-rows: repeat(6, minmax(30px, auto));
}

.index-3d-manual-card .servo-channel {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  padding: 6px 8px;
}

.index-3d-manual-card .servo-slider {
  min-width: 0;
}

.index-3d-manual-card.has-bridge-controls .servo-channel {
  min-height: 30px;
}

.index-3d-manual-card.has-bridge-controls .robot-bridge-panel {
  margin-top: 2px;
}

.index-3d-manual-card .servo-channel__label,
.index-3d-manual-card .servo-channel__value {
  font-size: 0.76rem;
}

.index-3d-block-card {
  grid-area: block;
  height: auto;
  padding: 10px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "heading"
    "canvas"
    "actions";
}

.index-3d-block-card #blocklyDiv {
  grid-area: canvas;
  min-height: 0;
}

.index-3d-block-actionbar {
  grid-area: actions;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 0 0;
  border-top: 1px solid rgba(216, 223, 235, 0.72);
}

.index-3d-block-actionbar .python-draft__action-divider {
  display: none;
}

.index-3d-block-actions {
  min-width: 0;
  display: flex;
  flex: 1 1 260px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.index-3d-block-actions .btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 8px;
}

.index-3d-block-actions .btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.index-3d-block-actions .btn svg {
  width: 18px;
  height: 18px;
}

.index-3d-block-actions .python-draft__tool[hidden] {
  display: none !important;
}

.index-3d-console-panel {
  min-height: 0;
  height: auto;
  padding: 0;
  display: grid;
  gap: 8px;
  align-content: start;
}

.index-3d-console-body {
  min-height: 0;
}

.index-3d-console-panel .gemini-draft__console-toggle-icon {
  transition: transform var(--transition-fast);
}

.index-3d-console-panel .gemini-draft__console-toggle[aria-expanded="true"] .gemini-draft__console-toggle-icon {
  transform: rotate(180deg);
}

.index-3d-console-card {
  grid-area: auto;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.index-3d-console-card .console-split {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 1180px) {
  .index-3d-workbench {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    padding: 0 8px 0;
  }

  .index-3d-manual-card .servo-channel {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "label value"
      "slider slider";
    row-gap: 5px;
    column-gap: 6px;
    padding-inline: 4px;
  }

  .index-3d-manual-card .servo-channel__label {
    grid-area: label;
    min-width: 0;
  }

  .index-3d-manual-card .servo-channel__track {
    grid-area: slider;
    min-width: 0;
    max-width: 100%;
  }

  .index-3d-manual-card .servo-slider {
    grid-area: auto;
  }

  .index-3d-manual-card .servo-channel__metrics {
    grid-area: value;
    justify-self: end;
  }

  .index-3d-manual-card .servo-channel__value {
    grid-area: auto;
  }

}

@media (max-width: 980px) {
  .index-3d-block-actionbar {
    flex-wrap: wrap;
  }

  .index-3d-block-actions {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-inline: 4px;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-step {
    gap: 3px;
    padding-inline: 2px;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-step::after {
    font-size: 0.58rem;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__port-row,
  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__session-row,
  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__auth-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__port-row .btn,
  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__connect-row .btn {
    min-width: 0;
    white-space: normal;
  }

  .index-3d-manual-card.has-bridge-controls .robot-bridge-panel__status {
    min-width: 0;
  }

  .index-3d-manual-card.sidebar__controls.has-drive-controls {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .index-3d-manual-card.sidebar__controls.has-drive-controls .teach-controls {
    grid-column: 1;
    grid-row: 2;
  }

  .index-3d-manual-card.sidebar__controls.has-drive-controls .robot-drive-controls {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }

  .index-3d-manual-card.sidebar__controls.has-drive-controls .servo-sliders {
    grid-column: 1;
    grid-row: 4;
  }

}