/* Keep the inspector usable at normal browser zoom instead of relying on a
   zoomed-out viewport to reveal its controls. */
:root {
  --toolbox-width: clamp(150px, 14vw, 190px);
  --properties-width: clamp(235px, 21vw, 310px);
}

/* Selection controls are screen-size stable and tightly follow the object. */
.selection-box { stroke-dasharray: none; }
.selection-toolbar-bg { fill: #18243a; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.selection-toolbar-button { fill: #31435f; pointer-events: auto; cursor: pointer; }
.selection-toolbar-button:hover { fill: #3f7cff; }
.selection-toolbar-delete { fill: #6b3340; }
.selection-toolbar-action { fill: #fff; font: 12px Inter, ui-sans-serif, sans-serif; pointer-events: auto; cursor: pointer; user-select: none; }
.selection-handle-n, .selection-handle-s { cursor: ns-resize; }
.selection-handle-e, .selection-handle-w { cursor: ew-resize; }
.selection-handle-ne, .selection-handle-sw { cursor: nesw-resize; }
.selection-handle-nw, .selection-handle-se { cursor: nwse-resize; }

.editor-shell {
  min-width: 0;
}

.left-sidebar,
.properties-panel {
  min-width: 0;
  overflow-x: hidden !important;
}

.properties-panel {
  width: var(--properties-width);
  max-width: 100%;
  padding: 14px;
}

.property-fields input,
.property-fields select,
.property-fields textarea {
  min-width: 0;
}

.appbar {
  min-width: 0;
  gap: 10px;
}

.brand {
  min-width: 0;
  flex: 0 1 auto;
}

.app-actions {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.zoom-controls {
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  :root {
    --toolbox-width: 150px;
    --properties-width: 245px;
  }

  .brand strong,
  .brand input,
  .bar-separator {
    display: none;
  }

  .app-actions {
    order: 3;
    flex: 1 1 100%;
    padding-bottom: 8px;
  }

  .appbar {
    flex-wrap: wrap;
    align-content: center;
    padding-block: 8px;
  }

  .editor-shell {
    grid-template-rows: 102px minmax(0, 1fr) var(--timeline-height);
  }

  .editor-shell.timeline-hidden {
    grid-template-rows: 102px minmax(0, 1fr) 0;
  }
}

@media (max-width: 760px) {
  :root {
    --timeline-height: 170px;
  }

  .editor-shell,
  .editor-shell.timeline-hidden {
    grid-template-rows: 94px minmax(0, 1fr) var(--timeline-height);
  }

  .appbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 8px 10px;
  }

  .app-actions {
    display: none;
  }

  .zoom-controls {
    margin-left: 0;
  }

  .zoom-controls output,
  .zoom-controls [data-action="zoom-out"],
  .zoom-controls [data-action="zoom-in"],
  .zoom-controls [data-action="fit"] {
    display: none;
  }

  .editor-body {
    position: relative;
    display: block;
  }

  .workspace {
    height: 100%;
    padding: 6px;
  }

  .left-sidebar,
  .properties-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    width: min(320px, 88vw);
    box-shadow: 0 10px 28px #18243a33;
  }

  .left-sidebar { left: 0; }
  .properties-panel { right: 0; }
  .editor-shell.toolbox-hidden .left-sidebar,
  .editor-shell.properties-hidden .properties-panel { display: none; }

  .timeline-panel {
    padding-inline: 8px;
  }

  .timeline-toolbar label { display: none; }
  .timeline-scroll { min-width: 520px; }
}