/* Shared assembly-viewer module (scan page + CNC View Assembly). */
.av-toolbar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Phones register more tools (AR, Compare) than fit one row — wrap into
       extra rows instead of clipping buttons off the screen edges. */
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0,0,0,0.45));
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
    z-index: 4;
}
/* Tighter spacing on small phones so most tool sets still fit one row. */
@media (max-width: 480px) {
    .av-toolbar { gap: 5px; padding-left: 6px; padding-right: 6px; }
    .av-toolbar button { min-width: 42px; font-size: 14px; }
    /* Toolbar may wrap to two rows on phones — keep tool panels above it. */
    .av-panel { bottom: 112px; }
}
.av-toolbar.av-show { opacity: 1; pointer-events: auto; }
.av-toolbar button {
    min-width: 44px; min-height: 44px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 10px;
    background: rgba(20,20,18,0.55);
    color: #F2EFE8;
    font-size:var(--fs-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.av-toolbar button.av-active { border-color: #D8A93C; color: #EFC868; }
.av-toolbar button:disabled { opacity: 0.35; cursor: default; }
.av-panel {
    position: absolute;
    left: 10px; right: 10px; bottom: 64px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(20,20,18,0.72);
    color: #F2EFE8;
    font-size:var(--fs-sm);
    z-index: 4;
    display: none;
}
.av-panel.av-show { display: block; }
.av-panel input[type="range"] { width: 100%; }
.av-chip-row { display: flex; gap: 6px; margin-bottom: 8px; }
.av-chip {
    min-height: 32px; padding: 4px 12px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 999px;
    background: transparent; color: #F2EFE8;
    cursor: pointer;
}
.av-chip.av-active { border-color: #D8A93C; color: #EFC868; }
.av-card {
    position: absolute;
    left: 10px; right: 10px; bottom: 64px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(20,20,18,0.82);
    color: #F2EFE8;
    z-index: 5;
    display: none;
}
.av-card.av-show { display: block; }
.av-card .av-card-name { font-weight: 600; font-size: 14px; }
.av-card .av-card-sub { font-size:var(--fs-caption); color: #C9C4B8; margin-top: 2px; }
.av-card a { color: #EFC868; }
.av-toast {
    position: absolute;
    left: 50%; bottom: 70px;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(20,20,18,0.85);
    color: #F2EFE8;
    font-size:var(--fs-sm);
    z-index: 6;
}
/* Compare-to-build (two-point align) */
.av-compare-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    touch-action: none;
}
.av-compare-overlay video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.av-compare-overlay canvas {
    position: absolute;
    inset: 0;
}
.av-compare-hint {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    z-index: 10000;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(20,20,18,0.8);
    color: #F2EFE8;
    font-size: 14px;
    text-align: center;
}
.av-compare-controls {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
}
.av-compare-controls button {
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    background: rgba(20,20,18,0.7);
    color: #F2EFE8;
}
.av-compare-controls input[type="range"] { flex: 1; }