/**
 * ViewAtlas UI redesign — design tokens & new components
 * copy_05_cursor only
 */

/* Viewer URL — hide start chrome before body classes apply (FOUC) */
html.cas-boot-has-viewer .cas-va-menu-picker,
html.cas-boot-has-viewer .cas-top-auth-slot {
    display: none !important;
}

html.cas-boot-has-viewer .cas-top-viewer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    gap: var(--cas-bar-gap);
    align-items: stretch;
}

html.cas-boot-has-viewer .structures-slot {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
}

html.cas-boot-has-viewer #cas-viewer-placeholder.cas-start-screen {
    display: none !important;
}

/* Viewer URL — chrome a két felső gombon már boot előtt (natív button = fehér flash nélkül) */
html.cas-boot-has-viewer #cas-top-bar {
    background: transparent;
    border: none;
    box-shadow: none;
}

html.cas-boot-has-viewer .cas-top-viewer-btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    background-size: auto !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    box-shadow: none !important;
    border-radius: var(--va-radius-sm) !important;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    color: var(--va-text-primary);
}

/* Feliratok csak ha a viewer chrome kész — ne villanjanak átlátszóan betöltés alatt */
html.cas-boot-has-viewer:not(.cas-viewer-chrome-ready) .cas-viewer-model-label,
html.cas-boot-has-viewer:not(.cas-viewer-chrome-ready) .cas-viewer-notebook-label,
html:not(.cas-viewer-chrome-ready) body.cas-has-model .cas-viewer-model-label,
html:not(.cas-viewer-chrome-ready) body.cas-has-model .cas-viewer-notebook-label,
body.cas-viewer-booting .cas-viewer-model-label,
body.cas-viewer-booting .cas-viewer-notebook-label {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Viewer chrome — ne villanjon át a loading overlay alatt (boot gap) */
html.cas-boot-has-viewer:not(.cas-viewer-chrome-ready) #cas-top-bar,
html.cas-boot-has-viewer:not(.cas-viewer-chrome-ready) #cas-bottom-bar,
html:not(.cas-viewer-chrome-ready) body.cas-has-model #cas-top-bar,
html:not(.cas-viewer-chrome-ready) body.cas-has-model #cas-bottom-bar,
body.cas-viewer-booting #cas-top-bar,
body.cas-viewer-booting #cas-bottom-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Inner sID menu hit-area — always transparent (chrome lives on #cas-start-a-panel) */
#viewatlas-portal.cas-start-sid-menu-btn,
#viewatlas-portal.cas-start-sid-menu-btn:hover,
#viewatlas-portal.cas-start-sid-menu-btn.ripple:hover,
#viewatlas-portal.cas-start-sid-menu-btn.ripple:active,
#viewatlas-portal.cas-start-sid-menu-btn.is-picker-open,
#viewatlas-portal.cas-start-sid-menu-btn.is-picker-open.ripple:active {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

#cas-start-b-panel #cas-start-preview-trigger.cas-start-preview-img-btn,
#cas-start-b-panel #cas-start-preview-trigger.cas-start-preview-img-btn:hover,
#cas-start-b-panel #cas-start-preview-trigger.cas-start-preview-img-btn.ripple:hover,
#cas-start-b-panel #cas-start-preview-trigger.cas-start-preview-img-btn.ripple:active,
#cas-start-b-panel .cas-start-preview-picker,
#cas-start-b-panel .cas-start-preview-orient-shell,
#cas-start-b-panel .cas-start-preview-main {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

:root {
    --va-bg-deep: #2a2a40;
    --va-bg-canvas: #33334C;
    --va-bg-elevated: #3d3d5c;
    --va-bg-card: rgba(61, 61, 92, 0.72);
    --va-brand-blue: #1A3D7A;
    --va-brand-wine: #8E2D4C;
    --va-accent-mint: #5AAB92;
    --va-accent-chapter: #E0984A;
    --va-accent-intact: #A68AD4;
    --va-text-primary: #E8EEF9;
    --va-text-muted: #9aa8c4;
    --va-surface-pill: #E2E6EE;
    --va-radius-sm: 8px;
    --va-radius-md: 12px;
    --va-radius-lg: 16px;
    --va-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.22);
    --va-border-subtle: rgba(232, 238, 249, 0.12);
    --va-transition: 0.2s ease;
    /* Chrome button typography — phone / tablet (hallgatói terem) */
    --va-font-ui: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --va-btn-text-size: clamp(14px, 3.75vw, 16px);
    --va-btn-text-weight: 700;
    --va-btn-text-lh: 1.25;
    --va-btn-text-spacing: 0.01em;
    --va-btn-monogram-size: clamp(20px, 5.5vw, 26px);
    --va-btn-monogram-weight: 800;
    /* Gombfelület színe szövegre (kék–menta árnyalt ezüst, nem sima fehér) */
    --va-btn-surface-text: linear-gradient(
        180deg,
        #E8ECF4 0%,
        #E2E6EE 48%,
        #DDE6E4 100%
    );
    /* Egyetlen chrome gombstílus — Continue minta, kék (4285F4) */
    --va-chrome-btn-bg: rgba(66, 133, 244, 0.12);
    --va-chrome-btn-border: rgba(66, 133, 244, 0.45);
    --va-chrome-btn-bg-hover: rgba(66, 133, 244, 0.2);
    --va-chrome-btn-border-hover: rgba(66, 133, 244, 0.6);
    --va-chrome-btn-bg-active: rgba(66, 133, 244, 0.26);
    --va-chrome-btn-border-active: rgba(66, 133, 244, 0.68);
    --va-chrome-btn-blur: 8px;
    /* Képletlista — homályos canvas háttér (modell átlátszik a sorok között) */
    --va-structures-panel-frost: rgba(51, 51, 76, 0.52);
    --va-structures-panel-blur: 14px;
    /* Pair sID pen — bordó, nem rikító piros (VA „A” felső tónusa) */
    --va-pen-label-wine: #B04866;
}

/* Nagyobb érintési cél + olvashatóbb szöveg mobilon / tableten */
@media (pointer: coarse) {
    :root {
        --cas-bar-btn-h: 48px;
        --va-btn-text-size: clamp(15px, 4vw, 17px);
        --va-btn-monogram-size: clamp(22px, 6vw, 28px);
    }
}

/* ── Design system overrides ── */

#cas-top-bar,
#cas-bottom-bar {
    background: var(--va-bg-canvas);
    border: none;
    border-top: none;
    box-shadow: none;
}

/* ── Chrome gombok — egy stílus, kék; felirat színe külön (start + viewer) ── */

#cas-start-b-panel.bar-btn-top-portal,
#cas-start-a-panel.bar-btn-top-portal,
body.cas-no-model #cas-start-b-panel.cas-start-b-panel.bar-btn-top-portal,
body.cas-no-model #cas-start-a-panel.cas-start-a-panel.bar-btn-top-portal,
body.cas-no-model #cas-page-a-atlas-myology-btn.bar-btn-top-portal,
body.cas-no-model #cas-start-open-viewer-btn.bar-btn-top-portal,
body.cas-no-model .cas-page-b-entry.bar-btn-top-portal,
.cas-model-picker > .cas-model-toggle-btn,
.cas-model-picker > .cas-model-toggle-btn.bar-btn,
.cas-top-viewer-btn,
.cas-top-auth-slot .cas-sign-in-btn,
.cas-top-auth-slot .cas-open-viewer-top-btn,
#cas-va-menu-bar.cas-va-menu-popup button,
#cas-bottom-bar .bar-btn,
details.menu > summary.structures-summary,
details.menu > summary,
#cas-bottom-bar .bar-btn-back-start {
    appearance: none;
    -webkit-appearance: none;
    background: var(--va-chrome-btn-bg);
    background-size: auto;
    border: 1px solid var(--va-chrome-btn-border);
    box-shadow: none;
    border-radius: var(--va-radius-sm);
    transition: background var(--va-transition), border-color var(--va-transition);
    cursor: default;
}

body.cas-no-model #cas-start-b-panel.cas-start-b-panel.bar-btn-top-portal,
body.cas-no-model #cas-start-a-panel.cas-start-a-panel.bar-btn-top-portal,
body.cas-no-model #cas-page-a-atlas-myology-btn.bar-btn-top-portal,
body.cas-no-model .cas-page-b-entry.bar-btn-top-portal {
    transition: none;
}

/* Hover: no chrome shift — see sid-landscape-start.css (start page) + rules below (viewer) */

/* Viewer — 3d.css sötét sáv / gradiens gombok felülírása */
body.cas-has-model #cas-top-bar,
body.cas-has-model #cas-bottom-bar {
    background: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

body.cas-has-model #cas-top-bar > *,
body.cas-has-model #cas-top-bar .cas-top-viewer-row,
body.cas-has-model #cas-top-bar .structures-slot,
body.cas-has-model #cas-top-bar details.menu,
body.cas-has-model #cas-top-bar details.menu > summary,
body.cas-has-model #cas-bottom-bar > * {
    pointer-events: auto;
}

/* Viewer — lapos kék frost (mint a kezdőlap; nincs gradiens töltés) */
body.cas-has-model #viewatlas-portal.bar-btn-top-portal,
body.cas-has-model .cas-model-picker > .cas-model-toggle-btn,
body.cas-has-model .cas-model-picker > .cas-model-toggle-btn.bar-btn,
body.cas-has-model .cas-top-viewer-btn,
body.cas-has-model #cas-bottom-bar .bar-btn,
body.cas-has-model #cas-bottom-bar .bar-btn-back-start,
body.cas-has-model #cas-back-to-start,
body.cas-has-model #cas-bottom-bar .cas-stand-picker > .bar-btn,
body.cas-has-model #cas-bottom-bar .cas-lab-aspect-picker > .bar-btn,
body.cas-has-model #cas-bottom-bar .cas-viewing-direction-toggle,
body.cas-has-model #cas-stand-bar.cas-stand-bar-popup button,
body.cas-has-model #cas-lab-aspect-bar.cas-lab-aspect-bar-popup button,
body.cas-has-model details.menu > summary.structures-summary,
body.cas-has-model details.menu > summary,
body.cas-has-model .cas-structure-actions-bar .structure-info-btn,
body.cas-has-model .cas-structure-actions-bar .structure-notes-btn,
body.cas-has-model .cas-structure-actions-bar .structure-speak-btn,
body.cas-has-model .cas-structure-actions-bar .structure-visibility-btn,
body.cas-has-model #cas-viewer-model-bar.cas-viewer-model-bar-popup .cas-viewer-model-choice {
    appearance: none;
    -webkit-appearance: none;
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    background-size: auto !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    box-shadow: none !important;
    border-radius: var(--va-radius-sm) !important;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
}

body.cas-has-model #viewatlas-portal.bar-btn-top-portal.is-picker-open,
body.cas-has-model #viewatlas-portal.bar-btn-top-portal.ripple:active,
body.cas-has-model .cas-model-picker > .cas-model-toggle-btn.is-picker-open,
body.cas-has-model .cas-model-picker > .cas-model-toggle-btn.ripple:active:not(.is-picker-open),
body.cas-has-model #cas-bottom-bar .bar-btn:active,
body.cas-has-model #cas-bottom-bar .bar-btn.ripple:active,
body.cas-has-model #cas-stand-bar.cas-stand-bar-popup button:active,
body.cas-has-model .cas-structure-actions-bar .structure-info-btn:active,
body.cas-has-model .cas-structure-actions-bar .structure-notes-btn:active,
body.cas-has-model .cas-structure-actions-bar .structure-speak-btn:active,
body.cas-has-model .cas-structure-actions-bar .structure-visibility-btn:active {
    background: var(--va-chrome-btn-bg-active) !important;
    background-image: none !important;
    border-color: var(--va-chrome-btn-border-active) !important;
    box-shadow: none !important;
}

/* Kezdőlap — toll gomb chrome kék (3d.css fehér pill felülírása) */
body.cas-no-model #cas-bottom-bar .bar-btn-pen {
    background: var(--va-chrome-btn-bg);
    background-size: auto;
    border: 1px solid var(--va-chrome-btn-border);
    box-shadow: none;
    border-radius: var(--va-radius-sm);
}

body.cas-no-model #cas-bottom-bar .bar-btn-pen::before {
    display: none;
    content: none;
}

/* Structures panel — canvas fölötti lebegő popup (mint VA / model picker) */

.bar-btn-top-portal,
#viewatlas-portal.bar-btn-top-portal {
    position: relative;
    width: 100%;
    min-width: 0;
    height: var(--cas-bar-btn-h);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

.bar-btn-top-portal::before,
#viewatlas-portal.bar-btn-top-portal::before,
.cas-model-picker > .cas-model-toggle-btn::before,
.cas-top-auth-slot .cas-sign-in-btn::before,
.cas-top-auth-slot .cas-open-viewer-top-btn::before,
#cas-bottom-bar .bar-btn-pen::before {
    display: none;
    content: none;
}

.cas-top-auth-slot .cas-open-viewer-top-btn {
    color: var(--va-text-primary);
}

.cas-top-auth-slot .cas-sign-in-btn {
    color: var(--va-text-muted);
}

.cas-top-auth-slot .cas-sign-in-btn:disabled,
.cas-top-auth-slot .cas-sign-in-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
}

#cas-bottom-bar .bar-btn.bar-btn-pen {
    color: inherit;
}

details.menu > summary.structures-summary.has-selection,
details.menu[open] > summary.structures-summary.has-selection {
    background: var(--va-chrome-btn-bg);
    border-color: var(--va-chrome-btn-border);
    box-shadow: none;
}

body #viewatlas-portal.bar-btn-top-portal.is-picker-open,
body #viewatlas-portal.bar-btn-top-portal.is-picker-open.ripple:active,
body #viewatlas-portal.bar-btn-top-portal.ripple:active,
body .cas-model-picker > .cas-model-toggle-btn.is-picker-open,
body .cas-model-picker > .cas-model-toggle-btn.is-picker-open.ripple:active {
    background: var(--va-chrome-btn-bg-active);
    background-image: none;
    background-size: auto;
    border-color: var(--va-chrome-btn-border-active);
    box-shadow: none;
}

body #viewatlas-portal.bar-btn-top-portal.ripple:active,
body .cas-model-picker > .cas-model-toggle-btn.bar-btn.ripple:active:not(.is-picker-open),
body .cas-model-picker > .cas-model-toggle-btn.ripple:active:not(.is-picker-open),
.cas-top-auth-slot .cas-sign-in-btn:active:not(:disabled),
.cas-top-auth-slot .cas-open-viewer-top-btn:active,
body.cas-no-model .cas-page-b-entry.bar-btn-top-portal.ripple:active,
#cas-va-menu-bar.cas-va-menu-popup button:active,
#cas-bottom-bar .bar-btn:active,
#cas-bottom-bar .bar-btn.ripple:active,
details.menu > summary.structures-summary:active,
details.menu > summary:active,
body.cas-no-model #cas-bottom-bar .bar-btn-pen.ripple:active,
body.cas-has-model #cas-bottom-bar .bar-btn-pen.ripple:active {
    background: var(--va-chrome-btn-bg-active);
    background-image: none;
    background-size: auto;
    border-color: var(--va-chrome-btn-border-active);
    box-shadow: none;
}

/* Unified chrome button typography ── */
.cas-sign-in-btn,
.cas-bt-label,
#cas-stand-toggle.cas-stand-side-toggle .cas-stand-side-label,
#cas-lab-aspect-toggle .cas-lab-aspect-label,
.cas-viewing-direction-label,
.bar-btn-top-portal .cas-model-label,
#cas-va-menu-bar.cas-va-menu-popup button,
#cas-model-bar.cas-model-bar-popup button,
#cas-model-bar.cas-model-bar-popup .cas-model-choice-btn,
details.menu > summary.structures-summary .structures-summary-default,
details.menu > summary.structures-summary .structures-summary-label,
details.menu > summary.structures-summary.has-selection .structure-selected-name {
    font-family: var(--va-font-ui);
    font-size: var(--va-btn-text-size);
    font-weight: var(--va-btn-text-weight);
    line-height: var(--va-btn-text-lh);
    letter-spacing: var(--va-btn-text-spacing);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.bar-btn-top-portal .cas-model-label,
.cas-model-picker > .cas-model-toggle-btn .cas-model-label,
details.menu > summary.structures-summary .structures-summary-label,
body.cas-has-model .cas-viewer-model-label,
body.cas-has-model .cas-viewer-notebook-label {
    position: relative;
    z-index: 1;
    text-transform: none;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
    white-space: nowrap;
    text-align: center;
}

body.cas-has-model details.menu > summary.structures-summary .structures-summary-label {
    text-transform: none;
    font: 700 clamp(13px, 3.2vw, 16px)/1.15 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.01em;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Bottom bar — viewer: back to start (régi toll hely) */
#cas-back-to-start .cas-viewer-back-icon {
    display: block;
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    flex-shrink: 0;
    color: #fff;
    filter: var(--cas-btn-icon-filter);
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

#cas-back-to-start .cas-bt-btn-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 0 4px;
    position: relative;
    z-index: 1;
}

#cas-back-to-start .cas-bt-label {
    color: var(--va-text-primary);
    white-space: nowrap;
    text-align: center;
    text-transform: lowercase;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

body.cas-has-model #cas-stand-toggle.cas-stand-side-toggle .cas-stand-side-label,
body.cas-has-model #cas-lab-aspect-toggle .cas-lab-aspect-label {
    text-transform: lowercase;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

body.cas-has-model .cas-viewing-direction-label {
    position: relative;
    z-index: 1;
    text-transform: none;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
    white-space: nowrap;
    text-align: center;
}

#viewatlas-portal .cas-top-va-logo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--va-font-ui);
    font-size: var(--va-btn-monogram-size);
    font-weight: var(--va-btn-monogram-weight);
    line-height: 1;
    letter-spacing: -0.05em;
    user-select: none;
}

#viewatlas-portal .cas-top-va-v {
    display: inline-block;
    background: linear-gradient(180deg, var(--cas-brand-view-color-light) 0%, var(--cas-brand-view-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#viewatlas-portal .cas-top-va-a {
    display: inline-block;
    margin-left: -0.12em;
    background: linear-gradient(180deg, #B04866 0%, var(--cas-brand-a-color) 52%, var(--cas-brand-a-color-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Start screen ── */

body.cas-no-model .cas-viewer-placeholder.cas-start-screen {
    pointer-events: auto;
}

.cas-start-screen {
    pointer-events: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background:
        radial-gradient(ellipse 80% 60% at 50% 38%, rgba(26, 61, 122, 0.18) 0%, transparent 68%),
        radial-gradient(ellipse 50% 40% at 72% 62%, rgba(142, 45, 76, 0.12) 0%, transparent 70%),
        var(--va-bg-canvas);
}

.cas-start-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 8px 20px 28px;
    box-sizing: border-box;
}

.cas-start-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding-top: 4px;
}

.cas-start-hero .cas-start-va-logo {
    font-size: clamp(88px, 34vw, 160px);
    line-height: 1;
    margin-bottom: 2px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cas-start-brand-name,
.cas-start-tagline {
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cas-start-brand-name {
    margin: 0;
    font: var(--va-btn-text-weight) clamp(18px, 4.5vw, 22px)/1.2 var(--va-font-ui);
    letter-spacing: var(--va-btn-text-spacing);
}

.cas-start-tagline {
    margin: 0;
    font: 600 var(--va-btn-text-size)/var(--va-btn-text-lh) var(--va-font-ui);
    letter-spacing: var(--va-btn-text-spacing);
    max-width: 280px;
}

/* ── Bottom bar sID pen button ── */

.cas-bt-btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 0 4px;
    position: relative;
    z-index: 1;
}

.cas-bt-label {
    color: var(--va-pen-label-wine);
    white-space: normal;
    text-align: center;
    max-width: 100%;
}

/* Kezdőlap — toll felirat fehér/ezüst (mint Choose model) */
body.cas-no-model #cas-bottom-bar .bar-btn-pen {
    color: var(--va-text-primary);
}

body.cas-no-model #cas-bottom-bar .bar-btn-pen .cas-bt-label {
    position: relative;
    z-index: 1;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

/* Viewer — sID pen: ezüst = nincs jel, menta felirat = kész (csak a szöveg) */
body.cas-has-model #cas-bottom-bar .bar-btn-pen {
    color: var(--va-text-primary);
}

body.cas-has-model #cas-bottom-bar .bar-btn-pen .cas-bt-label {
    position: relative;
    z-index: 1;
    background: var(--va-btn-surface-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

body.cas-has-model #cas-bottom-bar .bar-btn-pen[data-bt-connected="true"] .cas-bt-label {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: var(--va-accent-mint);
    filter: none;
}

/* Vissza gomb — inline SVG (ne img: Android long-press „kép mentése”) */
#cas-bottom-bar #capture-view svg.cas-back-undo-icon {
    display: block;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    color: #fff;
    filter: var(--cas-btn-icon-filter);
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

#cas-top-bar,
#cas-bottom-bar,
#cas-top-bar .bar-btn,
#cas-bottom-bar .bar-btn {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#capture-view,
#viewatlas-portal {
    touch-action: manipulation;
}

body.cas-no-model #cas-bottom-bar .bar-btn-pen .cas-bt-btn-inner {
    padding: 0 10px;
}

body.cas-no-model #cas-bottom-bar .bar-btn-pen .cas-bt-label,
body.cas-has-model #cas-bottom-bar .bar-btn-pen .cas-bt-label {
    white-space: normal;
    text-align: center;
}

/* ── Start page chrome: Open viewer top-right ── */

body.cas-no-model .cas-top-auth-slot {
    position: relative;
    z-index: 202;
}

/* Viewer: back to start balra (régi toll hely) */
body.cas-has-model #cas-bottom-bar {
    justify-content: space-between;
    gap: var(--cas-bar-gap);
}

body.cas-has-model #cas-back-to-start {
    flex: 1 1 0;
    min-width: 0;
}

body.cas-has-model:not(.cas-model-body) #cas-back-to-start {
    max-width: calc((100% - var(--cas-bar-gap)) / 2);
}

body.cas-has-model #cas-back-to-start[hidden] {
    display: none !important;
}

.cas-top-auth-slot .cas-sign-in-btn,
.cas-top-auth-slot .cas-open-viewer-top-btn {
    position: relative;
    width: 100%;
    height: var(--cas-bar-btn-h);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
}

/* ── Loading overlay ── */

.cas-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* Opaque — chrome must not show through during GLB load */
    background: #2a2a40;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
}

.cas-loading-overlay[hidden] {
    display: none !important;
}

.cas-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(232, 238, 249, 0.15);
    border-top-color: var(--va-accent-mint);
    border-radius: 50%;
    animation: va-spin 0.85s linear infinite;
}

@keyframes va-spin {
    to { transform: rotate(360deg); }
}

.cas-loading-text {
    margin: 0;
    font: 500 14px/1.4 "Segoe UI", system-ui, sans-serif;
    color: var(--va-text-primary);
}

/* ── App sheets (Help, About, Contact, Bluetooth) ── */

.cas-app-sheet-panel {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.48);
}

.cas-app-sheet-panel[hidden] {
    display: none !important;
}

.cas-app-sheet {
    max-height: min(88dvh, 640px);
    overflow-y: auto;
    background: var(--va-bg-deep);
    color: var(--va-text-primary);
    border-radius: var(--va-radius-lg) var(--va-radius-lg) 0 0;
    padding: 20px 20px calc(20px + var(--cas-safe-bottom));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.cas-app-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(232, 238, 249, 0.22);
    margin: 0 auto 16px;
}

.cas-app-sheet h2 {
    margin: 0 0 14px;
    font: 700 20px/1.25 "Segoe UI", system-ui, sans-serif;
}

.cas-app-sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    border: none;
    background: rgba(232, 238, 249, 0.08);
    color: var(--va-text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: default;
}

.cas-app-sheet-body {
    position: relative;
}

.cas-app-sheet-body p,
.cas-app-sheet-body li {
    font: 400 14px/1.5 "Segoe UI", system-ui, sans-serif;
    color: rgba(232, 238, 249, 0.88);
}

.cas-app-sheet-body ul {
    margin: 0 0 12px;
    padding-left: 1.2rem;
}

.cas-app-sheet-body li {
    margin-bottom: 8px;
}

.cas-app-sheet-note {
    font-size: 12px !important;
    color: var(--va-text-muted) !important;
    margin-top: 12px !important;
}

.cas-help-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.cas-help-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--va-radius-md);
    background: var(--va-bg-elevated);
    border: 1px solid var(--va-border-subtle);
}

.cas-help-card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--va-radius-sm);
    background: rgba(26, 61, 122, 0.35);
    font-size: 18px;
}

.cas-help-card-text strong {
    display: block;
    font: 600 13px/1.3 "Segoe UI", system-ui, sans-serif;
    margin-bottom: 2px;
}

.cas-help-card-text span {
    font: 400 12px/1.4 "Segoe UI", system-ui, sans-serif;
    color: var(--va-text-muted);
}

.cas-about-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: var(--va-radius-md);
    background: var(--va-bg-elevated);
    border: 1px solid var(--va-border-subtle);
    margin-bottom: 14px;
    font: 400 13px/1.45 "Segoe UI", system-ui, sans-serif;
}

.cas-about-meta dt {
    color: var(--va-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cas-about-meta dd {
    margin: 0 0 8px;
    color: var(--va-text-primary);
}

.cas-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: var(--va-radius-md);
    background: rgba(26, 61, 122, 0.35);
    border: 1px solid rgba(66, 133, 244, 0.35);
    color: var(--va-text-primary);
    font: 600 14px/1 "Segoe UI", system-ui, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    pointer-events: auto;
    cursor: default;
}

.cas-contact-link:hover {
    background: rgba(26, 61, 122, 0.48);
}

/* ── VA menu expanded ── */

#cas-va-menu-bar {
    border-radius: var(--va-radius-md);
    overflow: hidden;
    box-shadow: var(--va-shadow-soft);
}

#cas-va-menu-bar.cas-va-menu-popup button {
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    background-size: auto;
    border: 1px solid var(--va-chrome-btn-border);
    box-shadow: none;
    color: var(--va-text-primary);
    cursor: default;
    transition: background var(--va-transition), border-color var(--va-transition);
}

#cas-va-menu-bar button[data-cas-va-action="auth"] {
    opacity: 0.45;
    cursor: not-allowed;
}

#cas-va-menu-bar button[data-cas-va-action="auth"]:not(:disabled) {
    opacity: 1;
    cursor: default;
}

/* Model picker dropdown — match VA menu popup */
#cas-model-bar.cas-model-bar-popup {
    border-radius: var(--va-radius-md);
    overflow: hidden;
    box-shadow: var(--va-shadow-soft);
}

#cas-model-bar.cas-model-bar-popup button,
#cas-model-bar.cas-model-bar-popup .cas-model-choice-btn {
    border: 1px solid var(--va-border-subtle);
    border-radius: var(--va-radius-sm);
    background: var(--va-bg-elevated);
    box-shadow: none;
    color: var(--va-text-primary);
    text-transform: lowercase;
}

#cas-model-bar.cas-model-bar-popup button.active {
    background: rgba(90, 171, 146, 0.16);
    border-color: rgba(90, 171, 146, 0.42);
    color: var(--va-accent-mint);
}

/* Structures panel — match A-lap sID menü lenyíló (chrome gombok, nem frost panel) */

/* details[open] előbb aktiválódik, mint body.cas-structures-open — ne villanjon régi zöldes 3d.css */
body.cas-has-model details.menu[open] > summary,
body.cas-has-model details.menu[open] > summary.structures-summary {
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    box-shadow: none !important;
}

body.cas-has-model details.menu[open] .structures-panel {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    top: calc(var(--cas-top-chrome-h) + var(--cas-bar-gap));
    bottom: calc(var(--cas-bottom-chrome-h) + var(--cas-bar-gap));
    z-index: 235;
    flex: none;
    min-height: 0;
    height: auto;
    max-height: none;
    display: grid;
    grid-template-rows: var(--cas-bar-btn-h) minmax(0, 1fr) var(--cas-structures-scroll-bar-h);
    overflow: hidden;
    gap: var(--cas-bar-gap);
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0 var(--cas-bar-gap) var(--cas-bar-gap);
    border-radius: 0;
    isolation: isolate;
}

body.cas-has-model details.menu[open] .structures-search-wrap {
    grid-row: 1;
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    flex: none;
    position: relative !important;
    top: auto !important;
    z-index: 2;
    padding: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 4px;
}

body.cas-has-model details.menu[open] .structures-panel-body {
    grid-row: 2;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: transparent;
}

body.cas-has-model details.menu[open] .structures-scroll-bar {
    grid-row: 3;
    height: var(--cas-structures-scroll-bar-h);
    min-height: var(--cas-structures-scroll-bar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: transparent;
    border-top: none;
    border-radius: 0;
}

body.cas-has-model details.menu[open] .structures-list {
    overflow: visible;
    touch-action: pan-y;
    padding-bottom: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: var(--cas-bar-gap);
    padding: 0;
}

body.cas-has-model details.menu[open] .structures-search {
    border: 1px solid var(--va-chrome-btn-border) !important;
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    box-shadow: none;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
}

body.cas-has-model details.menu[open] .structure-row {
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    box-shadow: none;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
}

.structures-summary {
    border-radius: var(--va-radius-sm) !important;
}

body.cas-structures-open details.menu[open] > summary.structures-summary,
body.cas-structures-open details.menu[open] > summary {
    border-radius: var(--va-radius-sm);
}

body.cas-structures-open .structures-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    top: calc(var(--cas-top-chrome-h) + var(--cas-bar-gap));
    bottom: calc(var(--cas-bottom-chrome-h) + var(--cas-bar-gap));
    height: auto;
    max-height: none;
    overflow: hidden;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none;
    box-shadow: none;
    gap: var(--cas-bar-gap);
    padding: 0 var(--cas-bar-gap) var(--cas-bar-gap);
    box-sizing: border-box;
    border-radius: 0;
    isolation: isolate;
}

body.cas-structures-open .structures-scroll-bar {
    border-top: none;
    border-radius: 0;
    background: transparent;
}

body.cas-structures-open .structures-scroll-hint-down::after {
    border-top-color: var(--va-text-muted);
}

body.cas-structures-open .structures-scroll-hint-up::after {
    border-bottom-color: var(--va-text-muted);
}

body.cas-structures-open .structures-panel-body {
    display: block;
    min-height: 0;
    height: auto;
    max-height: none;
    background: transparent;
}

body.cas-structures-open .structures-search-wrap {
    position: relative !important;
    top: auto !important;
    z-index: 2;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

body.cas-structures-open .structures-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: var(--cas-bar-btn-h);
    border: 1px solid var(--va-chrome-btn-border) !important;
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    color: var(--va-text-primary);
    font-family: var(--va-font-ui);
    font-size: var(--va-btn-text-size);
    font-weight: var(--va-btn-text-weight);
    box-shadow: none;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
}

body.cas-structures-open .structures-seen-btn {
    width: calc(34px * 3 + 4px * 2 + 16px);
    height: var(--cas-bar-btn-h);
    border: 1px solid rgba(232, 197, 71, 0.45) !important;
    border-radius: var(--va-radius-sm, 3px);
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    color: #e8c547;
    font-family: var(--va-font-ui);
    font-size: var(--va-btn-text-size);
    font-weight: var(--va-btn-text-weight, 650);
    line-height: var(--va-btn-text-lh, 1);
    backdrop-filter: blur(var(--va-chrome-btn-blur, 8px)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur, 8px)) saturate(115%);
}

body.cas-structures-open .structures-seen-btn:hover,
body.cas-structures-open .structures-seen-btn:active,
body.cas-structures-open .structures-seen-btn.is-active {
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    color: #e8c547;
}

body.cas-structures-open .structures-seen-btn.is-active,
body.cas-structures-open .structures-seen-btn:active {
    border-color: rgba(232, 197, 71, 0.85) !important;
}

body.cas-structures-open .structures-search:focus {
    border-color: var(--va-chrome-btn-border-active) !important;
    background: var(--va-chrome-btn-bg-active) !important;
    outline: none;
}

body.cas-structures-open .structures-search::placeholder {
    color: var(--va-text-muted);
}

body.cas-structures-open .structures-list {
    display: flex;
    flex-direction: column;
    gap: var(--cas-bar-gap);
    padding: 0;
}

body.cas-structures-open details.menu .structure-row {
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    border-radius: var(--va-radius-sm);
    box-shadow: none;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    transition: background var(--va-transition), border-color var(--va-transition);
}

body.cas-structures-open details.menu .structure-row:active {
    background: var(--va-chrome-btn-bg-active) !important;
    border-color: var(--va-chrome-btn-border-active) !important;
}

body.cas-structures-open details.menu .structure-label {
    color: var(--va-text-primary);
    font-family: var(--va-font-ui);
    font-size: var(--va-btn-text-size);
    font-weight: var(--va-btn-text-weight);
    line-height: var(--va-btn-text-lh);
    letter-spacing: var(--va-btn-text-spacing);
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

body.cas-structures-open details.menu .structure-label.hl {
    color: var(--va-accent-mint);
}

body.cas-structures-open details.menu .structure-info-btn,
body.cas-structures-open details.menu .structure-notes-btn,
body.cas-structures-open details.menu .structure-speak-btn,
body.cas-structures-open details.menu .structure-visibility-btn {
    border: 1px solid var(--va-chrome-btn-border);
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    color: var(--va-text-primary);
    box-shadow: none;
    backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
    -webkit-backdrop-filter: blur(var(--va-chrome-btn-blur)) saturate(115%);
}

body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-info-btn,
body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-notes-btn,
body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-speak-btn,
body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-visibility-btn {
    border: 1px solid var(--va-chrome-btn-border) !important;
    background: var(--va-chrome-btn-bg) !important;
    box-shadow: none !important;
}

/* Seen / sárga sorok — hangszóró + toll is sárga (felülírja a fehér invertet) */
body.cas-structures-open details.menu .structure-row.cas-identified .structure-info-btn,
body.cas-structures-open details.menu .structure-row.cas-identified .structure-notes-btn,
body.cas-structures-open details.menu .structure-row.cas-identified .structure-speak-btn,
body.cas-structures-open details.menu .structure-row.cas-identified .structure-visibility-btn {
    color: #e8c547;
    border-color: rgba(232, 197, 71, 0.45);
}

body.cas-structures-open details.menu .structure-row.cas-identified .structure-info-btn span {
    color: #e8c547;
}

body.cas-structures-open details.menu .structure-row.cas-identified .structure-speak-btn img,
body.cas-structures-open details.menu .structure-row.cas-identified .structure-notes-btn img,
body.cas-structures-open details.menu .structure-row.cas-identified .structure-visibility-btn img {
    filter: invert(86%) sepia(48%) saturate(600%) hue-rotate(5deg) brightness(98%);
    opacity: 1;
}

/* Viewer — csak Structures felül; VA + modellválasztó csak főoldalon */
body.cas-has-model .cas-va-menu-picker,
body.cas-has-model .cas-model-picker-header-slot {
    display: none !important;
}

body.cas-no-model .cas-top-viewer-row {
    display: none !important;
}

body.cas-has-model .cas-top-viewer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    gap: var(--cas-bar-gap);
    align-items: stretch;
    box-sizing: border-box;
}

body.cas-has-model .cas-top-viewer-row > .structures-slot {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: none;
}

body.cas-has-model .cas-viewer-model-slot {
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
    box-sizing: border-box;
}

body.cas-has-model .cas-viewer-model-slot .cas-top-viewer-btn {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Viewer felső sor — modell + vak gomb = structures summary méret */
body.cas-has-model .cas-top-viewer-btn,
body.cas-has-model:not(.cas-structure-selected) details.menu > summary.structures-summary,
body.cas-has-model.cas-structure-selected.cas-structures-open details.menu > summary.structures-summary {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.cas-has-model .cas-top-viewer-btn {
    flex: none;
}

body.cas-has-model .cas-top-viewer-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Lenyitva: egy réteg — border + fill, backdrop nélkül (blur+border = dupla gyűrű Chrome-on) */
body.cas-has-model #cas-top-viewer-btn-left.is-picker-open,
body.cas-has-model #cas-top-viewer-btn-left.is-picker-open:hover,
body.cas-has-model #cas-top-viewer-btn-left.is-picker-open.ripple:hover,
body.cas-has-model #cas-top-viewer-btn-left.is-picker-open.ripple:active,
body.cas-has-model #cas-top-bar #cas-top-viewer-btn-left.is-picker-open,
body.cas-has-model #cas-top-bar #cas-top-viewer-btn-left.is-picker-open:hover,
body.cas-has-model #cas-top-bar #cas-top-viewer-btn-left.is-picker-open.ripple:hover,
body.cas-has-model #cas-top-bar #cas-top-viewer-btn-left.is-picker-open.ripple:active {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--va-chrome-btn-bg) !important;
    background-image: none !important;
    background-size: auto !important;
    border: 1px solid var(--va-chrome-btn-border) !important;
    border-radius: var(--va-radius-sm) !important;
    box-shadow: none !important;
    outline: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    filter: none !important;
}

body.cas-has-model #cas-top-viewer-btn-left.is-picker-open .cas-viewer-model-label {
    filter: none;
}

body.cas-has-model .cas-viewer-model-label,
body.cas-has-model .cas-viewer-notebook-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 clamp(14px, 3.8vw, 17px)/1 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.02em;
    text-transform: none;
    padding: 0 10px;
    text-align: center;
}

/* Popup wrapper — csak pozíció (mint #cas-va-menu-bar / #cas-model-bar); ne legyen külön „kártya” a choice gomb körül */
#cas-viewer-model-bar.cas-viewer-model-bar-popup {
    position: absolute;
    top: calc(100% + var(--cas-bar-gap));
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: var(--cas-bar-gap);
    z-index: 236;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

/* Kijelölt képlet (2. sor név) — modellváltó választás a 3. sorba, a név alá */
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) #cas-viewer-model-bar.cas-viewer-model-bar-popup {
    top: calc(100% + var(--cas-bar-gap) + var(--cas-bar-btn-h) + var(--cas-bar-gap));
}

#cas-viewer-model-bar.cas-viewer-model-bar-popup.is-open {
    display: flex;
}

#cas-viewer-model-bar.cas-viewer-model-bar-popup .cas-viewer-model-choice {
    width: 100%;
    height: var(--cas-bar-btn-h);
    border: 1px solid var(--va-chrome-btn-border);
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    box-shadow: none;
    color: var(--va-text-primary);
    font: 700 clamp(12px, 3.2vw, 16px)/1.1 "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    padding: 0 8px;
    box-sizing: border-box;
    transition: background var(--va-transition), border-color var(--va-transition);
}

body.cas-has-model .structures-slot {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cas-bar-gap);
    box-sizing: border-box;
}

body.cas-has-model:not(.cas-structure-selected) .structures-slot {
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
}

body.cas-has-model:not(.cas-structure-selected) .structures-slot #switches-box,
body.cas-has-model:not(.cas-structure-selected) .structures-slot details.menu {
    width: 100%;
    height: 100%;
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .structures-slot {
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
    align-items: stretch;
    gap: 0;
}

body.cas-has-model.cas-structure-selected.cas-structures-open .structures-slot {
    align-items: stretch;
    min-height: 0;
    gap: 4px;
}

body.cas-has-model.cas-structure-selected #switches-box {
    width: 100%;
    display: block;
    background: transparent;
}

body.cas-has-model.cas-chrome-inline-actions.cas-structure-selected .structures-slot {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

body.cas-has-model.cas-structure-selected details.menu,
body.cas-has-model.cas-chrome-inline-actions.cas-structure-selected details.menu {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

body.cas-has-model:not(.cas-structure-selected) details.menu {
    width: 100%;
}

body.cas-has-model:not(.cas-structure-selected) details.menu > summary.structures-summary {
    width: 100%;
}

/* Kijelölt képlet — név gomb: teljes szélesség, zöld szöveg + vékony zöld keret */
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .structures-slot #switches-box {
    display: none;
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar:not([hidden]) {
    display: flex !important;
    flex: 1 1 auto;
    width: 100%;
    height: var(--cas-bar-btn-h);
    min-height: var(--cas-bar-btn-h);
    max-height: var(--cas-bar-btn-h);
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-info-btn,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-notes-btn,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-speak-btn,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-visibility-btn {
    border-color: var(--cas-structure-highlight-green-border) !important;
    color: var(--cas-structure-highlight-green) !important;
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-info-btn:active,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-notes-btn:active,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-speak-btn:active,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-visibility-btn:active {
    border-color: var(--cas-structure-highlight-green) !important;
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-speak-btn img,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-notes-btn img,
body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-visibility-btn img {
    filter: var(--cas-structure-action-icon-filter);
    opacity: 1;
}

body.cas-has-model.cas-structure-selected.cas-structures-open .structures-slot #switches-box {
    display: block;
    width: 100%;
}

body.cas-has-model.cas-structure-selected.cas-structures-open #cas-structure-actions-bar {
    display: none !important;
}

body.cas-structures-open details.menu > summary.structures-summary.has-selection .structures-summary-default {
    display: flex !important;
}

body.cas-has-model details.menu > summary.structures-summary.has-selection {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-height: 0;
    height: auto;
    width: 100%;
    max-width: none;
    justify-content: stretch;
}

body.cas-has-model details.menu[open] > summary.structures-summary.has-selection {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.cas-has-model .structures-summary-selected {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
}

body.cas-has-model .structure-selected-name {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: var(--cas-bar-btn-h);
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--cas-structure-highlight-green-border);
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    color: var(--cas-structure-highlight-green);
    font-family: var(--va-font-ui);
    font-size: clamp(14px, 3.6vw, 17px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    box-shadow: none;
}

body.cas-structures-open details.menu[open] > summary.structures-summary.has-selection .structure-selected-name {
    color: var(--cas-structure-highlight-green);
}

/* Négy akció gomb — teljes szélesség, egyenlő oszlopok (telefon + tablet) */
.cas-structure-actions-bar {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}

.cas-structure-actions-bar[hidden] {
    display: none !important;
}

.cas-structure-actions-bar .structure-row-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--cas-bar-gap);
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

body.cas-has-model .cas-structure-actions-bar .structure-row-actions {
    width: 100%;
    justify-content: stretch;
}

body.cas-has-model .cas-structure-actions-cluster {
    display: contents;
}

.cas-structure-actions-bar .structure-info-btn,
.cas-structure-actions-bar .structure-notes-btn,
.cas-structure-actions-bar .structure-speak-btn,
.cas-structure-actions-bar .structure-visibility-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: var(--cas-bar-btn-h);
    border: 1px solid var(--va-chrome-btn-border);
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    box-shadow: none;
    color: var(--va-text-primary);
    cursor: default;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cas-structure-actions-bar .structure-info-btn:active,
.cas-structure-actions-bar .structure-notes-btn:active,
.cas-structure-actions-bar .structure-speak-btn:active,
.cas-structure-actions-bar .structure-visibility-btn:active {
    background: var(--va-chrome-btn-bg-active);
    border-color: var(--va-chrome-btn-border-active);
}

.cas-structure-actions-bar .structure-info-btn {
    font: 600 15px/1 Georgia, "Times New Roman", serif;
    font-style: italic;
}

.cas-structure-actions-bar .structure-speak-btn img,
.cas-structure-actions-bar .structure-notes-btn img,
.cas-structure-actions-bar .structure-visibility-btn img {
    filter: var(--cas-btn-icon-filter);
}

/* Szem gomb — egyszerre csak egy ikon: nyitott szem = látszik, áthúzott = rejtve */
.structure-visibility-btn .structure-visibility-icon-off {
    display: none !important;
}

.structure-visibility-btn.is-visible .structure-visibility-icon-on {
    display: block !important;
}

.structure-visibility-btn.is-hidden .structure-visibility-icon-on {
    display: none !important;
}

.structure-visibility-btn.is-hidden .structure-visibility-icon-off {
    display: block !important;
}

/* Lab boncolt — nincs képletenkénti szem/hide (preparátum + szűrt lista) */
body.cas-lab-no-structure-visibility .structure-visibility-btn,
body.cas-lab-no-structure-visibility .cas-structure-actions-bar .structure-visibility-btn,
body.cas-lab-no-structure-visibility details.menu .structure-visibility-btn {
    display: none !important;
}

body.cas-has-model:not(.cas-structure-selected) #cas-structure-selection-bar,
body.cas-has-model.cas-structures-open #cas-structure-selection-bar {
    display: none !important;
}

body.cas-has-model.cas-structure-selected:not(.cas-structures-open) #cas-structure-selection-bar:not([hidden]) {
    display: flex !important;
}

/* Második sor — kijelölt képlet neve, teljes szélesség, zöld keret */
body.cas-has-model .cas-structure-selection-bar:not([hidden]) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    gap: 0;
    padding-left: calc(var(--cas-bar-pad) + var(--cas-safe-left));
    padding-right: calc(var(--cas-bar-pad) + var(--cas-safe-right));
}

body.cas-has-model .cas-structure-selection-name {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cas-bar-btn-h);
    margin: 0;
    padding: 0 12px;
    background: var(--va-chrome-btn-bg);
    border: 1px solid var(--cas-structure-highlight-green-border);
    border-radius: var(--va-radius-sm);
    box-shadow: none;
    color: var(--cas-structure-highlight-green);
    font-family: var(--va-font-ui);
    font-size: clamp(14px, 3.6vw, 17px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    backdrop-filter: blur(8px) saturate(115%);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
}

body.cas-has-model .cas-structure-selection-name.cas-bridge-purple,
body.cas-has-model.cas-bridge-focus .cas-structure-selection-name {
    color: #a878dc;
    border-color: rgba(168, 120, 220, 0.55);
}

body.cas-has-model .cas-structure-selection-actions {
    display: none !important;
}

.cas-structure-selection-bar .structure-row-actions {
    gap: var(--cas-bar-gap);
}

.cas-structure-selection-bar .structure-info-btn,
.cas-structure-selection-bar .structure-notes-btn,
.cas-structure-selection-bar .structure-speak-btn,
.cas-structure-selection-bar .structure-visibility-btn {
    width: var(--cas-bar-btn-h);
    height: var(--cas-bar-btn-h);
    border: 1px solid var(--va-chrome-btn-border);
    border-radius: var(--va-radius-sm);
    background: var(--va-chrome-btn-bg);
    box-shadow: none;
    color: var(--va-text-primary);
    transition: background var(--va-transition), border-color var(--va-transition);
}

.cas-structure-selection-bar .structure-info-btn:active,
.cas-structure-selection-bar .structure-notes-btn:active,
.cas-structure-selection-bar .structure-speak-btn:active,
.cas-structure-selection-bar .structure-visibility-btn:active {
    background: var(--va-chrome-btn-bg-active);
    border-color: var(--va-chrome-btn-border-active);
}

.cas-structure-selection-bar .structure-speak-btn img,
.cas-structure-selection-bar .structure-notes-btn img,
.cas-structure-selection-bar .structure-visibility-btn img {
    filter: none;
    opacity: 1;
}

/* 3D canvas — háttér egyezik a UI-val, nincs letterbox csík kijelölés váltáskor */
#render-canvas {
    display: block;
    background: var(--va-bg-canvas);
    outline: none;
    border: none;
    box-sizing: border-box;
}

/* ── No hover chrome fill (tablet-first) — egy réteg; feedback = :active ── */
@media (hover: hover) and (pointer: fine) {
    .bar-btn:hover,
    .bar-btn.ripple:hover,
    .bar-btn-top-portal:hover,
    .bar-btn-top-portal.ripple:hover,
    .ripple:hover,
    #cas-top-bar .bar-btn:hover,
    #cas-top-bar .bar-btn.ripple:hover,
    #cas-top-bar .bar-btn-top-portal:hover,
    #cas-top-bar .bar-btn-top-portal:has(.bar-btn.ripple:hover),
    #cas-bottom-bar .bar-btn:hover,
    #cas-bottom-bar .bar-btn.ripple:hover,
    #cas-va-menu-bar.cas-va-menu-popup button:hover,
    #cas-stand-bar button:hover,
    #cas-stand-bar.cas-stand-bar-popup button:hover,
    #cas-lab-aspect-bar.cas-lab-aspect-bar-popup button:hover,
    #cas-model-bar.cas-model-bar-popup button:hover,
    #cas-model-bar.cas-model-bar-popup .cas-model-choice-btn:hover,
    #cas-view-bar button:hover,
    #viewatlas-portal.bar-btn-top-portal.ripple:hover,
    body.cas-has-model #viewatlas-portal.bar-btn-top-portal.ripple:hover:not(.is-picker-open),
    .cas-model-picker > .cas-model-toggle-btn.ripple:hover,
    body.cas-has-model .cas-model-picker > .cas-model-toggle-btn.ripple:hover:not(.is-picker-open),
    body.cas-has-model .cas-top-viewer-btn:hover:not(:disabled):not(.is-picker-open),
    body.cas-has-model .cas-top-viewer-btn.ripple:hover:not(:disabled):not(.is-picker-open),
    #cas-viewer-model-bar.cas-viewer-model-bar-popup .cas-viewer-model-choice:hover,
    body.cas-has-model #cas-bottom-bar .bar-btn:hover,
    body.cas-has-model #cas-bottom-bar .bar-btn.ripple:hover,
    body.cas-has-model #cas-stand-bar.cas-stand-bar-popup button:hover,
    body.cas-has-model #cas-lab-aspect-bar.cas-lab-aspect-bar-popup button:hover,
    .cas-model-picker > .cas-model-toggle-btn.bar-btn.ripple:hover,
    .cas-top-auth-slot .cas-sign-in-btn:hover:not(:disabled):not([aria-disabled="true"]),
    .cas-top-auth-slot .cas-open-viewer-top-btn:hover,
    details.menu > summary.structures-summary:hover,
    details.menu > summary:hover,
    details.menu .structure-info-btn:hover,
    details.menu .structure-notes-btn:hover,
    details.menu .structure-speak-btn:hover,
    details.menu .structure-visibility-btn:hover,
    body.cas-structures-open details.menu .structure-info-btn:hover,
    body.cas-structures-open details.menu .structure-notes-btn:hover,
    body.cas-structures-open details.menu .structure-speak-btn:hover,
    body.cas-structures-open details.menu .structure-visibility-btn:hover,
    body.cas-structures-open .structures-seen-btn:hover,
    .structures-seen-btn:hover,
    body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-info-btn:hover,
    body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-notes-btn:hover,
    body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-speak-btn:hover,
    body.cas-structures-open details.menu .structure-row:has(.structure-label.hl) .structure-visibility-btn:hover,
    .cas-structure-actions-bar .structure-info-btn:hover,
    .cas-structure-actions-bar .structure-notes-btn:hover,
    .cas-structure-actions-bar .structure-speak-btn:hover,
    .cas-structure-actions-bar .structure-visibility-btn:hover,
    .cas-structure-selection-bar .structure-info-btn:hover,
    .cas-structure-selection-bar .structure-notes-btn:hover,
    .cas-structure-selection-bar .structure-speak-btn:hover,
    .cas-structure-selection-bar .structure-visibility-btn:hover,
    .cas-notes-toolbar .bar-btn:hover,
    .cas-info-tool-btn:hover,
    #cas-page-a-atlas-myology-btn.ripple:hover,
    body.cas-no-model .cas-page-b-entry.ripple:hover {
        background: var(--va-chrome-btn-bg) !important;
        background-image: none !important;
        background-size: auto !important;
        border-color: var(--va-chrome-btn-border) !important;
        box-shadow: none !important;
        filter: none;
    }

    /* Lista-sor: egy háttér (nem gomb-réteg) — marad enyhe hover a soron */
    body.cas-structures-open details.menu .structure-row:hover {
        background: var(--va-chrome-btn-bg-hover) !important;
        background-image: none !important;
        border-color: var(--va-chrome-btn-border-hover) !important;
    }

    body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-info-btn:hover,
    body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-notes-btn:hover,
    body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-speak-btn:hover,
    body.cas-has-model.cas-structure-selected:not(.cas-structures-open) .cas-structure-actions-bar .structure-visibility-btn:hover {
        border-color: var(--cas-structure-highlight-green) !important;
    }

    body.cas-structures-open .structures-seen-btn:hover,
    .structures-seen-btn:hover {
        border-color: rgba(232, 197, 71, 0.45) !important;
    }

    body.cas-structures-open .structures-seen-btn.is-active:hover,
    .structures-seen-btn.is-active:hover {
        border-color: rgba(232, 197, 71, 0.85) !important;
    }

    #cas-viewer-model-bar.cas-viewer-model-bar-popup .cas-viewer-model-choice:active,
    #cas-va-menu-bar.cas-va-menu-popup button:active {
        background: var(--va-chrome-btn-bg-active) !important;
        border-color: var(--va-chrome-btn-border-active) !important;
    }
}