:root {
  --lightest-grey: #f5f5f5;
  --light-grey: #9d9d9d;
  --medium-light-grey: #737373;
  --medium-grey: #515151;
  --dark-grey: #353535;
  --darkest-grey: #2c2c2c;
  --darkest-grey-alpha-90: rgba(34, 34, 34, 0.7);
  --burnt-orange: #9C2A07;
  --axogeo-green: #25D0B9;
  --dark-green: #0E5D54;
  --glaucous: #334d96;
  --dopesheet-row-height: 24px;
}

* {
  box-sizing: border-box;
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}


input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.react-flow__attribution {
  display: none;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--darkest-grey);
  overflow: hidden;
}

/* The desktop min-widths are gated so a phone gets a document that matches
   its visual viewport — with `overflow: hidden` an unconditional min-width
   makes everything right of the screen permanently unreachable (fixed panels
   lay out against the visual viewport, absolute ones against the 574px
   document, and the two desynchronize). Mobile overrides live in
   src/mobile.css. */
@media (min-width: 641px) {
  body {
    min-width: 574px;
  }
}

.pr-full {
  position: relative;
  width: 100%;
  height: 100%;
}

.row {
  display: flex;
}

.jc-sb {
  justify-content: space-between;
}

.jc-c {
  justify-content: center;
}

.ai-c {
  align-items: center;
}

.react-flow__node {
  max-width: 150px;
}

/* Shared glass control: translucent dark, hairline border, DM Mono. Sized to
   match the 28px icon buttons (.help__button) it sits beside. Used by the
   Nodes menu trigger. */
.menu-button {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-family: "DM Mono", monospace;
  font-size: 0.8rem;
  color: var(--lightest-grey);
  background: rgba(30, 30, 32, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s;
}

.menu-button:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Split-pane dividers: a quiet grey separator line (always visible, so the
   three panels read as separate — grey so it neither vanishes into the dark
   editor/renderer backgrounds nor competes with them) and an axogeo-teal
   grab handle. The divider's HEIGHT lives in CustomSplitPane.js (14px
   desktop / 22px touch) — it is the only way to resize the panes, so the
   whole strip is the hit area. */
.split-divider {
  position: relative;
  background: transparent;
  cursor: row-resize;
  /* dividers drag via pointer events; without this, touch scrolls instead */
  touch-action: none;
}

/* the animation-panel collapse caret, riding the bottom divider */
.split-divider__toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 5;
  min-width: 34px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--lightest-grey);
  background: rgba(30, 30, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  cursor: pointer;
}

.split-divider__toggle:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

/* the separator line between panels */
.split-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: var(--medium-grey);
}

/* the grab handle */
.split-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 8px;
  border-radius: 4px;
  background: var(--axogeo-green);
}

.split-divider:hover::after {
  background: #4fe3cd;
}

#app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  /* dvh second, as the progressive override: on iOS Safari 100vh includes
     the space BEHIND the collapsing bottom toolbar, which buried the whole
     dopesheet strip (and its play button) under the browser chrome. dvh
     tracks the real visible height; older browsers keep vh. */
  height: 100vh;
  height: 100dvh;
  position: relative;
}

@media (min-width: 641px) {
  #app-container {
    min-width: 460px;
  }
}

#flow-container {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}

.react-flow__node {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Selection must POP — the accent ring + glow reads instantly in a large
   graph (the old 2px grey halo was easy to lose). */
.react-flow__node.selected {
  box-shadow:
    0 0 0 1.5px var(--axogeo-green),
    0 0 14px 2px rgba(37, 208, 185, 0.35);
}

/* the reroute dot draws its own round selection ring; the wrapper's
   rectangular glow would double it */
.react-flow__node.selected:has(.reroute-node) {
  box-shadow: none;
}

/* frames are resizable background regions — the 150px node clamp must not
   apply, and the whole frame is hit-TRANSPARENT so nodes inside the region
   stay clickable; only the label (the drag handle), the swatches, and the
   resize controls take pointer events (see FrameView.css) */
.react-flow__node:has(.frame-node) {
  max-width: none;
  pointer-events: none !important;
}

.react-flow__handle {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background-color: var(--axogeo-green) !important;
  opacity: 0.8;
}

.react-flow__handle-left {
  translate: -2px 0;
}

.react-flow__handle-right {
  translate: 2px 0;
}


.cube-node, 
.transform-node, 
.groupOutput-node, 
.instanceOnPoints-node, 
.sphere-node, 
.plane-node, 
.cylinder-node, 
.torus-node, .node {
  color: var(--lightest-grey);
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* viewport selection focus: contributing nodes glow, the rest dim */
.node.branch-highlighted {
  box-shadow:
    0 0 0 2px rgba(37, 208, 185, 0.85),
    0 0 14px rgba(37, 208, 185, 0.35);
}

.node.branch-dimmed {
  opacity: 0.45;
  transition: opacity 0.15s;
}

.node select {
  width: 100%;
  padding-left: 5px;
  background-color: #2f2f2f;
  color: var(--lightest-grey);
  border-radius: 5px;
}

.node-header {
  font-size: 0.9rem;
  border-radius: 5px 5px 0 0;
  padding: 0 5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* inline rename: looks like the header text it replaces */
.node-header-edit {
  width: 100%;
  background: transparent;
  border: none;
  outline: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
}

.node-content {
  display: flex;
  flex-direction: column;
  padding: 5px;
  background-color: var(--dark-grey);
}

.node-label {
  font-size: 0.85rem;
  padding: 2px 0;
}

.mesh-handle {
  background-color: var(--dark-green);
  border: none;
}

.primitive {
  background-color: var(--dark-green);
}

.operation {
  background-color: var(--glaucous);
}

.computed {
  background-color: var(--burnt-orange);
}

.handle-right {
  text-align: right;
}

input {
  width: 100%;
}

#menus-container {
  position: absolute;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  margin-top: 2px;
  background-color: #ffffff00;
  width: 100%;
  /* the strip is invisible but spans the full canvas width - without this
     it swallows clicks on any node scrolled underneath it */
  pointer-events: none;
}

#menus-container > * {
  pointer-events: auto;
}

#menus-container > #right-menu {
  pointer-events: none;
}

#node-menu {
  flex: 1;
}

#files-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

#right-menu {
  flex: 1;
}

/* DRAG WRAPPER */

/* Basic styling for all handles */
.drag-handle {
  display: grid;
  place-items: center;
  cursor: move;
  user-select: none;
  scale: 2;
  rotate: 90deg;
  translate: 10px 0;
  color: var(--dark-grey);
  background: var(--light-grey);
  border-radius: 5px;
}

/* Default handle: a grip with three dots
.default-handle {
  background: #444;
  border: 1px solid #333;
  border-radius: 3px;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* Text handle: simply shows text with some styling */
.text-handle {
  background: #666;
  color: #fff;
  border: 1px solid #555;
  border-radius: 3px;
  text-align: center;
}