* { box-sizing: border-box; }

#viewer-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #737373;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

#application-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    outline: none;
    touch-action: none;
    background: #737373;
}

#viewer-transition-background {
    position: absolute;
    z-index: 4;
    inset: 0;
    background: #737373;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 110ms ease, visibility 110ms ease;
}

#viewer-transition-background.active {
    opacity: 1;
    visibility: visible;
    transition: none;
}

#viewer-measurement-overlay {
    position: absolute;
    z-index: 11;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

#viewer-measurement-overlay .measurement-line {
    stroke: rgba(255,255,255,.96);
    stroke-width: 2.2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

#viewer-measurement-overlay .measurement-point {
    fill: #fff;
    stroke: rgba(30,43,58,.94);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
}

#viewer-measurement-overlay .measurement-label-bg {
    fill: rgba(49,58,67,.78);
    stroke: rgba(255,255,255,.18);
    stroke-width: 1;
}

#viewer-measurement-overlay .measurement-label-text {
    fill: rgba(255,255,255,.98);
    font: 550 13px/1 "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
}

#viewer-measurement-overlay-close {
    position: absolute;
    z-index: 14;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(49,58,67,.82);
    color: rgba(255,255,255,.98);
    font: 500 19px/20px "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    transform: translate(-50%, -100%);
    box-shadow: 0 2px 7px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    user-select: none;
}

#viewer-measurement-overlay-close:hover {
    background: rgba(65,75,85,.94);
}

#viewer-measurement-overlay-close[hidden] {
    display: none !important;
}

#viewer-stage.measurement-picking #application-canvas {
    cursor: crosshair;
}

#model-loading {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #737373;
    color: rgba(255,255,255,.96);
    transition: opacity 160ms ease, visibility 160ms ease;
}

#model-loading.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.model-loading-card {
    width: min(140px, 38vw);
    text-align: center;
}

#model-loading-title {
    display: none;
    font-size: 14px;
    font-weight: 500;
}

#model-loading-detail {
    display: none;
    min-height: 18px;
    margin-top: 7px;
    font-size: 12px;
    color: rgba(255,255,255,.68);
}

.model-loading-track {
    height: 2px;
    margin-top: 0;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    transition: opacity 120ms ease;
}

#model-loading-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.88);
    transition: width 120ms linear;
}

#model-loading.indeterminate #model-loading-bar {
    width: 38%;
    animation: dvisio-viewer-loading-slide 1s ease-in-out infinite alternate;
}

#model-loading.idle .model-loading-track { opacity: 0; }
#model-loading.error .model-loading-card { width: min(360px, 82vw); }
#model-loading.error #model-loading-title,
#model-loading.error #model-loading-detail { display: block; }
#model-loading.error #model-loading-detail { margin-top: 7px; }
#model-loading.error #model-loading-bar { display: none; }

@keyframes dvisio-viewer-loading-slide {
    from { transform: translateX(-80%); }
    to { transform: translateX(170%); }
}

#presentation-overlay {
    position: absolute;
    z-index: 12;
    left: 50%;
    bottom: 3px;
    width: min(860px, calc(100% - 44px));
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

#presentation-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#presentation-tabs {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto;
    max-width: min(100%, 760px);
    margin: 0 auto;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: linear-gradient(180deg,rgba(112,120,130,.28),rgba(84,92,102,.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px rgba(12,20,28,.18),0 4px 12px rgba(12,20,28,.12);
    backdrop-filter: blur(24px) saturate(1.12);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);
    pointer-events: auto;
    scrollbar-width: none;
}

#presentation-tabs::-webkit-scrollbar { display: none; }

.presentation-tab-button {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    max-width: 220px;
    min-height: 34px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(246,250,252,.90);
    font: 450 13px/1.2 "Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    user-select: text;
    -webkit-user-select: text;
    text-shadow: 0 1px 2px rgba(0,0,0,.12);
    transition: color 180ms ease,background 220ms ease,border-color 220ms ease,transform 220ms ease,box-shadow 220ms ease;
}

.presentation-tab-button::after {
    content: "";
    position: absolute;
    top: 7px;
    right: -3px;
    width: 1px;
    height: calc(100% - 14px);
    background: rgba(255,255,255,.12);
    transition: opacity 180ms ease;
}

.presentation-tab-button:last-child::after,
.presentation-tab-button.active::after,
.presentation-tab-button.active + .presentation-tab-button::after { opacity: 0; }

.presentation-tab-button:hover {
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.06);
}

.presentation-tab-button.active {
    color: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.22);
    background: linear-gradient(180deg,rgba(246,250,250,.36),rgba(240,247,247,.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 10px 20px rgba(12,20,28,.12),0 1px 4px rgba(12,20,28,.08);
    transform: translateY(-1px);
}

#presentation-copy {
    width: min(760px,calc(100% - 12px));
    max-width: 100%;
    /* No negative overlap while the description panel is collapsed.
       Otherwise the zero-height copy shortens the flex shell and lets the
       tab pill paint below the viewport edge. */
    margin: 0 auto;
    padding: 0 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 30px;
    background: linear-gradient(180deg,rgba(104,113,122,.28),rgba(80,90,100,.28));
    color: rgba(255,255,255,.92);
    text-align: left;
    backdrop-filter: blur(24px) saturate(1.10);
    -webkit-backdrop-filter: blur(24px) saturate(1.10);
    box-shadow: 0 14px 36px rgba(12,20,28,.18),0 3px 10px rgba(12,20,28,.10);
    opacity: 0;
    max-height: 0;
    pointer-events: none;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    transform: translateY(-10px) scale(.985);
    transform-origin: top center;
    transition: max-height 340ms cubic-bezier(.22,1,.36,1),opacity 190ms ease,transform 340ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,padding 340ms cubic-bezier(.22,1,.36,1);
}

#presentation-overlay.has-description #presentation-copy {
    margin: -24px auto 0;
    padding-top: 28px;
    padding-bottom: 18px;
    border-color: rgba(255,255,255,.14);
    opacity: 1;
    max-height: 20vh;
    max-height: 20dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.34) transparent;
    transform: translateY(0) scale(1);
}

#presentation-overlay.has-description #presentation-copy::-webkit-scrollbar {
    width: 5px;
}

#presentation-overlay.has-description #presentation-copy::-webkit-scrollbar-track {
    background: transparent;
}

#presentation-overlay.has-description #presentation-copy::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.32);
    border-radius: 999px;
}

#presentation-overlay.has-description #presentation-copy::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.46);
}

#presentation-description {
    display: block;
    margin: 0;
    padding: 0;
    color: rgba(249,252,253,.90);
    font-size: 13.5px;
    font-weight: 350;
    line-height: 1.58;
    letter-spacing: 0;
    text-align: left;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    white-space: pre-wrap;
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgba(0,0,0,.14);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease,transform 280ms cubic-bezier(.22,1,.36,1);
}

#presentation-overlay.has-description #presentation-description {
    opacity: 1;
    transform: translateY(0);
}

#presentation-action {
    position: relative;
    z-index: 3;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: -17px auto 0;
    pointer-events: none;
}

#presentation-overlay.has-action #presentation-action {
    display: flex;
}

#presentation-overlay.has-action:not(.has-description) #presentation-action {
    margin-top: 7px;
}

#presentation-overlay.has-description.has-action #presentation-copy {
    padding-bottom: 22px;
}

.presentation-action-button {
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    max-width: min(420px, calc(100% - 28px));
    min-width: 148px;
    min-height: 34px;
    padding: 8px 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: linear-gradient(180deg,rgba(246,250,250,.36),rgba(240,247,247,.28));
    color: rgba(255,255,255,.96);
    font: 450 13px/1.2 "Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 10px 20px rgba(12,20,28,.12),0 1px 4px rgba(12,20,28,.08);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    transform: translateY(-1px);
    transition: background 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}

.presentation-action-button:hover {
    border-color: rgba(255,255,255,.30);
    background: linear-gradient(180deg,rgba(255,255,255,.43),rgba(246,250,250,.32));
}

.presentation-action-button:active {
    transform: translateY(2px) scale(.99);
    box-shadow: inset 0 1px 2px rgba(31,43,55,.12),0 5px 12px rgba(12,20,28,.10);
}

.presentation-action-button:focus-visible {
    outline: 2px solid rgba(255,255,255,.56);
    outline-offset: 2px;
}

/* Free-plan attribution occupies the strip below the presentation menu. */
body.has-free-branding.viewer-mode #presentation-overlay {
    bottom: calc(max(4px, env(safe-area-inset-bottom)) + 25px);
}

@media (max-width: 720px) {
    #presentation-overlay { width: calc(100% - 26px); bottom: 3px; }
    body.has-free-branding.viewer-mode #presentation-overlay { bottom: calc(max(4px, env(safe-area-inset-bottom)) + 25px); }
    #presentation-tabs { gap: 4px; padding: 7px; max-width: 100%; }
    .presentation-tab-button { max-width: 160px; min-height: 34px; padding: 8px 16px; font-size: 12px; }
    #presentation-copy { width: calc(100% - 4px); border-radius: 24px; }
    #presentation-overlay.has-description #presentation-copy { padding-top: 24px; padding-bottom: 15px; max-height: 20vh; max-height: 20dvh; }
    #presentation-description { font-size: 12.5px; line-height: 1.5; }
    .presentation-action-button { min-width: 136px; min-height: 34px; padding: 8px 16px; font-size: 12px; }
}


/* Normal loading belongs to the 3D scene layer. Presentation controls stay visible above it. */
#model-loading.error { z-index: 11; }

/* Patch 121: WebXR AR DOM overlay. */
#viewer-ar-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

#viewer-ar-overlay[hidden] {
    display: none !important;
}

#viewer-ar-gesture-surface {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    touch-action: none;
}

#viewer-ar-hint {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
    max-width: min(88vw, 430px);
    padding: 11px 17px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(48,58,68,.48);
    color: rgba(255,255,255,.98);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(12,20,28,.18);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    transform: translateX(-50%);
    text-align: center;
    font-size: 14px;
    font-weight: 520;
    line-height: 1.2;
    pointer-events: none;
}

#viewer-ar-exit {
    position: absolute;
    z-index: 3;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 50px;
    height: 50px;
    padding: 0 0 2px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(48,58,68,.48);
    color: rgba(255,255,255,.98);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(12,20,28,.18);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    font: 450 31px/1 "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    pointer-events: auto;
    touch-action: manipulation;
}


/* Patch 138: keep the presentation panel clear of Telegram controls. */
body.telegram-mode.viewer-mode #presentation-overlay { bottom: max(3px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px)); }
body.telegram-mode.has-free-branding.viewer-mode #presentation-overlay { bottom: calc(max(4px, env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px)) + 25px); }