/* ---- Overlays over the 3D view (panel/panel.js) --------------------------------------------- */
/* Top-left pill: the model's name and the Parts button; the parts drawer opens under it on the
   left, the details card floats on the right under the stats line. Both end above the toolbar
   (dock: 16px from the bottom, 48px tall, then a 12px gap). net.js sends the area they cover to
   the server (insets), which frames the model in the rest. */
.sv-stage {
  --sv-top: 58px; /* under the pill */
  --sv-above-dock: 76px;
}

.sv-bar {
  position: absolute;
  z-index: 3;
  top: max(10px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: max(240px, calc(100% - 430px)); /* clear of the stats line */
  height: 40px;
  padding: 3px 3px 3px 14px;
  border: 1px solid var(--sv-border);
  border-radius: 999px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}

.sv-bar__name {
  min-width: 0;
  max-width: 24em;
  margin: 0 4px 0 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#viewer .sv-bar__parts {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border-color: transparent;
  border-radius: 999px;
  background: var(--sv-hover);
}

#viewer .sv-bar__parts[aria-expanded="true"] {
  color: var(--sv-accent);
  background: var(--sv-accent-soft);
}

.sv-bar__count {
  color: var(--sv-muted);
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

/* Shared ✕ (drawer, card, Share dialog). */
#viewer .sv-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--sv-muted);
  background: none;
}

#viewer .sv-close:hover:not(:disabled) {
  color: var(--sv-ink);
  background: var(--sv-hover);
}

/* ---- Parts drawer ----------------------------------------------------------------------------- */
/* Width: --sv-drawer-w (panel.js sets the dragged width inline). */
.sv-drawer {
  --sv-drawer-w: clamp(300px, 28vw, 400px);
  position: absolute;
  z-index: 4;
  top: var(--sv-top);
  bottom: var(--sv-above-dock);
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  width: min(var(--sv-drawer-w), calc(100% - 24px));
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}

.sv-drawer.is-resizing {
  user-select: none;
  -webkit-user-select: none;
}

.sv-drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 8px 0 16px;
}

.sv-drawer__head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.sv-drawer__count {
  color: var(--sv-muted);
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

/* The right edge drags the width; an accent line shows where. */
.sv-drawer__resize {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: -4px;
  bottom: 12px;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.sv-drawer__resize::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 1px;
  background: var(--sv-accent);
  opacity: 0;
  transition: opacity 120ms;
}

.sv-drawer__resize:hover::after,
.sv-drawer__resize:focus-visible::after,
.sv-drawer.is-resizing .sv-drawer__resize::after {
  opacity: 1;
}

#viewer .sv-drawer__resize:focus-visible {
  outline: none;
}

/* ---- Details card: the selection, or (files with variants, nothing selected) Configure ------- */
.sv-card {
  position: absolute;
  z-index: 4;
  top: 44px; /* under the stats line */
  right: max(12px, env(safe-area-inset-right));
  width: min(300px, calc(100% - 24px));
  max-height: calc(100% - 44px - var(--sv-above-dock));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--sv-border);
  border-radius: 12px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--sv-border-strong) transparent;
}

#viewer .sv-link,
#viewer .sv-link:hover:not(:disabled) {
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  color: var(--sv-accent);
  background: none;
}

@media (pointer: coarse) {
  #viewer .sv-close {
    width: 44px;
    min-height: 44px;
  }

  #viewer .sv-link,
  #viewer .sv-link:hover:not(:disabled) {
    min-height: 44px;
  }
}

/* Phones (portrait, or landscape with a short height): the drawer is a full-height sheet over
   everything; the card is a sheet above the toolbar, at most 60% of the screen with the toolbar,
   so the model stays in view above it. */
@media (max-width: 760px), (max-width: 1023px) and (max-height: 520px) and (min-aspect-ratio: 301/200) {
  .sv-stage {
    --sv-above-dock: calc(max(12px, env(safe-area-inset-bottom)) + 60px);
  }

  .sv-bar {
    left: max(8px, env(safe-area-inset-left));
    max-width: calc(100% - 16px);
  }

  .sv-drawer {
    position: fixed;
    z-index: 6;
    inset: 0;
    width: auto;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border: 0;
    border-radius: 0;
  }

  .sv-drawer__resize {
    display: none;
  }

  .sv-card {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: var(--sv-above-dock);
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(60% - var(--sv-above-dock));
  }
}