/* Mobile primary tools are the canonical visual contract for primary canvas
 * tools on every viewport. Desktop consumes these exact control metrics and
 * states; only surface placement remains responsive. */
.aircraft-next-mobile-primary-tool,
#aircraft-next-main-dock .aircraft-next-dock-desktop-item {
  display: grid;
  width: var(--aircraft-ui-control-height);
  height: var(--aircraft-ui-control-height);
  min-width: var(--aircraft-ui-control-height);
  min-height: var(--aircraft-ui-control-height);
  flex: 0 0 var(--aircraft-ui-control-height);
  place-items: center;
  padding: 0;
  border-radius: var(--aircraft-ui-control-radius);
  background: transparent;
  color: var(--ui-text);
}

.aircraft-next-mobile-primary-tool:disabled,
#aircraft-next-main-dock .aircraft-next-dock-desktop-item:disabled {
  color: var(--ui-text-disabled);
  opacity: .72;
  cursor: default;
}

.aircraft-next-mobile-primary-tool[data-current='true'],
#aircraft-next-main-dock .aircraft-next-dock-desktop-item[data-current='true'] {
  background: var(--ui-control-active);
  color: var(--ui-text);
}

.aircraft-next-mobile-primary-tool:active:not(:disabled),
#aircraft-next-main-dock .aircraft-next-dock-desktop-item:active:not(:disabled) {
  transform: scale(var(--aircraft-ui-press-scale));
}

.aircraft-next-mobile-primary-tool .aircraft-lucide-icon,
#aircraft-next-main-dock .aircraft-next-dock-icon .aircraft-lucide-icon {
  display: block;
  width: var(--aircraft-ui-icon-size);
  height: var(--aircraft-ui-icon-size);
  opacity: 1;
  pointer-events: none;
}

#aircraft-next-main-dock .aircraft-next-dock-icon {
  display: grid;
  width: var(--aircraft-ui-icon-size);
  height: var(--aircraft-ui-icon-size);
  flex: 0 0 var(--aircraft-ui-icon-size);
  place-items: center;
  pointer-events: none;
}

.aircraft-next-mobile-primary-tools,
#aircraft-next-shape-menu { display: none; }

/* Shape picker is a Context surface, not a separate popup style. Placement is
 * responsive below, but geometry and controls are the exact Context contract. */
#aircraft-next-shape-menu.aircraft-next-context-surface[data-open='true'] {
  width: max-content !important;
  min-width: 0 !important;
  height: var(--aircraft-ui-context-shell-height) !important;
  min-height: var(--aircraft-ui-context-shell-height) !important;
  max-height: var(--aircraft-ui-context-shell-height) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--aircraft-ui-control-gap) !important;
  padding: 0 var(--aircraft-ui-surface-pad) !important;
}

#aircraft-next-shape-menu .aircraft-next-shape-item.aircraft-next-context-icon-button {
  display: grid !important;
  width: var(--aircraft-ui-control-height) !important;
  min-width: var(--aircraft-ui-control-height) !important;
  height: var(--aircraft-ui-control-height) !important;
  min-height: var(--aircraft-ui-control-height) !important;
  flex: 0 0 var(--aircraft-ui-control-height) !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: var(--aircraft-ui-control-radius) !important;
}

#aircraft-next-shape-menu .aircraft-next-shape-item-icon {
  width: var(--aircraft-ui-icon-size) !important;
  height: var(--aircraft-ui-icon-size) !important;
  flex: 0 0 var(--aircraft-ui-icon-size) !important;
}

@media (max-width: 480px) {
  :root {
    --aircraft-mobile-canvas: var(--ui-canvas);
    --aircraft-mobile-surface: var(--ui-surface-alt);
    --aircraft-mobile-ink: var(--ui-text);
    --aircraft-mobile-muted: var(--ui-text-muted);
    --aircraft-mobile-surface-height: calc(
      var(--aircraft-ui-mobile-bottom-offset)
      + var(--aircraft-ui-context-shell-height)
      + var(--aircraft-ui-surface-gap)
    );
  }

  html,
  body,
  #aircraft-next-canvas {
    background: var(--aircraft-mobile-canvas);
  }

  body::after,
  #aircraft-next-main-dock::before {
    content: none !important;
  }

  /* The bottom shelf hugs the floating mobile controls instead of reserving a
   * large dead band above them. The toolbar itself still uses the Context
   * surface contract. */
  #aircraft-next-main-dock {
    position: fixed;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--aircraft-mobile-surface-height) + env(safe-area-inset-bottom));
    padding: 0;
    transform: none;
    border: 0;
    border-radius: 0;
    background: var(--aircraft-mobile-surface);
    box-shadow: none;
    pointer-events: none;
  }

  .aircraft-next-dock-desktop-item { display: none !important; }

  /* Six canonical primary tools fit before the three right-side mobile
   * actions. Their visual metrics remain identical to desktop. */
  .aircraft-next-mobile-primary-tools {
    position: absolute;
    z-index: 2;
    left: 8px;
    right: 144px;
    top: auto;
    bottom: calc(var(--aircraft-ui-mobile-bottom-offset) + env(safe-area-inset-bottom));
    display: flex !important;
    width: auto;
    min-width: 0;
    height: var(--aircraft-ui-context-shell-height);
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0 4px;
    transform: none;
    border: var(--aircraft-ui-surface-border);
    border-radius: var(--aircraft-ui-surface-radius);
    background: var(--ui-surface-glass);
    box-shadow: none;
    backdrop-filter: blur(var(--aircraft-ui-surface-blur-soft));
    -webkit-backdrop-filter: blur(var(--aircraft-ui-surface-blur-soft));
    pointer-events: auto;
  }

  #aircraft-next-shape-menu[data-open='true'] {
    position: fixed;
    z-index: 31;
    right: 156px;
    left: auto;
    bottom: calc(var(--aircraft-ui-mobile-bottom-offset) + var(--aircraft-ui-context-shell-height) + var(--aircraft-ui-popover-gap) + env(safe-area-inset-bottom));
    display: flex;
    width: 212px;
    height: var(--aircraft-ui-touch-shell-height);
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 1px;
    transform: none;
    border: var(--aircraft-ui-surface-border);
    border-radius: var(--aircraft-ui-surface-radius);
    background: var(--ui-surface-glass);
    box-shadow: none;
    backdrop-filter: blur(var(--aircraft-ui-surface-blur-soft));
    -webkit-backdrop-filter: blur(var(--aircraft-ui-surface-blur-soft));
  }

  .aircraft-next-shape-item {
    display: grid;
    width: var(--aircraft-ui-touch-control-size);
    height: var(--aircraft-ui-touch-control-size);
    min-height: var(--aircraft-ui-touch-control-size);
    flex: 0 0 var(--aircraft-ui-touch-control-size);
    place-items: center;
    padding: 0;
    border-radius: var(--aircraft-ui-control-radius);
    background: transparent;
    color: var(--ui-text);
  }

  .aircraft-next-shape-item:active {
    transform: scale(var(--aircraft-ui-press-scale));
  }

  .aircraft-next-shape-item-icon {
    display: block;
    width: var(--aircraft-ui-icon-size);
    height: var(--aircraft-ui-icon-size);
    pointer-events: none;
  }

  .aircraft-next-mobile-dock {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .aircraft-next-mobile-dock-button:not(.aircraft-next-mobile-dock-add):not(.aircraft-next-mobile-dock-action):not(.aircraft-next-mobile-dock-sketch) {
    display: none !important;
  }

  .aircraft-next-mobile-dock-sketch,
  .aircraft-next-mobile-dock-action,
  .aircraft-next-mobile-dock-add {
    position: absolute;
    left: auto;
    top: auto;
    bottom: calc(var(--aircraft-ui-mobile-bottom-offset) + env(safe-area-inset-bottom));
    display: grid !important;
    width: var(--aircraft-ui-action-control-size);
    height: var(--aircraft-ui-action-control-size);
    min-height: var(--aircraft-ui-action-control-size);
    place-items: center;
    padding: 0;
    transform: none;
    background: transparent;
    color: var(--aircraft-mobile-muted);
    pointer-events: auto;
  }

  .aircraft-next-mobile-dock-sketch {
    right: 96px;
  }

  .aircraft-next-mobile-dock-action {
    right: 52px;
  }

  .aircraft-next-mobile-dock-add {
    right: 8px;
  }

  .aircraft-next-mobile-dock-sketch:active,
  .aircraft-next-mobile-dock-action:active,
  .aircraft-next-mobile-dock-add:active {
    transform: scale(var(--aircraft-ui-press-scale));
  }

  .aircraft-next-mobile-dock-add[data-open='true'] {
    color: var(--aircraft-mobile-ink);
  }

  .aircraft-next-mobile-dock-sketch-icon,
  .aircraft-next-mobile-dock-action-icon,
  .aircraft-next-mobile-dock-selection-icon,
  .aircraft-next-mobile-dock-icon {
    display: block;
    width: var(--aircraft-ui-icon-action-size);
    height: var(--aircraft-ui-icon-action-size);
    pointer-events: none;
  }

  #aircraft-next-insert-menu {
    right: 8px;
    left: auto !important;
    bottom: calc(var(--aircraft-ui-mobile-bottom-offset) + var(--aircraft-ui-action-control-size) + var(--aircraft-ui-popover-gap) + env(safe-area-inset-bottom));
  }
}

@media (max-width: 340px) {
  .aircraft-next-mobile-primary-tool {
    width: 26px;
    min-width: 26px;
    flex-basis: 26px;
  }

  .aircraft-next-mobile-primary-tool .aircraft-lucide-icon {
    width: var(--aircraft-ui-icon-small-size);
    height: var(--aircraft-ui-icon-small-size);
  }
}