/* Geist Variable Font — Editor und Export sehen identisch aus. */
@font-face {
    font-family: "Geist";
    src: url("fonts/GeistVF.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Onest — Title-Font (Pano-UI Handoff) */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — Body / Caption-Font (Pano-UI Handoff) */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — Eyebrow / Counter / Index (Monospace) */
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: var(--vp-font-family);
    background: var(--page-bg);
    color: var(--page-text);
}

/* viewer-tokens.css definiert --vp-* in :root und html.dark.
   Hier mappen wir die Legacy-Variablen-Namen auf die Tokens, damit der
   restliche style.css unveraendert weiter funktioniert.
   --page-bg / --page-text bleiben LOKAL — sie betreffen nur den
   Standalone-Export-Body und sind absichtlich NICHT im Token-Scope. */
:root {
    --page-bg: #f0f4f8;
    --page-text: #0f172a;

    --glass-bg:       var(--vp-glass-bg);
    --glass-border:   var(--vp-glass-border);
    --glass-shadow:   var(--vp-glass-shadow);

    --accent:         var(--vp-accent);
    --accent-strong:  var(--vp-accent-strong);
    --accent-glow:    var(--vp-accent-glow);
    --text-muted:     var(--vp-text-muted);

    --button-bg:      var(--vp-button-bg);
    --button-border:  var(--vp-button-border);
    --button-text:    var(--vp-button-text);

    --strip-radius:       var(--vp-strip-radius);
    --strip-item-radius:  var(--vp-strip-item-radius);
}

html.dark {
    /* Token-Vars werden in viewer-tokens.css selbst auf dark umgeschaltet.
       Hier bleiben nur die echten lokalen Body-Farben. */
    --page-bg: #080b11;
    --page-text: #e8f2ff;
}

/* ── Layout ──────────────────────────────────────────────────── */

#app {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#viewer {
    position: absolute;
    inset: 0;
    cursor: grab;
    touch-action: none;
}

/* ── Glass ──────────────────────────────────────────────────── */

.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
}

/* ── Top bar ─────────────────────────────────────────────────── */

#topBar {
    position: absolute;
    top: var(--vp-topbar-inset);
    left: var(--vp-topbar-inset);
    right: var(--vp-topbar-inset);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vp-topbar-gap);
    z-index: 20;
    pointer-events: none;
}

/* .top-center/.top-right Padding und Radius kommen aus viewer-tokens.css.
   .top-left ist NUR Layout-Wrapper — die Logo-Pille (kleine rounded glass) lebt im
   #projectLogo selbst (matches Editor: <img className="rounded pillCls px-1.5 py-1">). */
#topBar .top-left {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
}

#topBar .top-center {
    pointer-events: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    border-radius: var(--vp-pill-radius);
    max-width: min(480px, calc(100vw - 200px));
    text-align: center;
}

#topBar .top-right {
    pointer-events: auto;
    border-radius: var(--vp-pill-radius);
    display: flex;
    align-items: center;
    margin-left: auto;
}

.tool-buttons {
    display: inline-flex;
    align-items: center;
}

/* ── Buttons ─────────────────────────────────────────────────── */

/* Background, Border und Hover-Ring kommen aus viewer-tokens.css.
   Hier bleiben nur Layout (Groesse, Radius, Cursor, Transition). */
.icon-button {
    width: var(--vp-btn-size);
    height: var(--vp-btn-size);
    border-radius: var(--vp-pill-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--button-text);
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.16s, color 0.16s, transform 0.12s;
}

.icon-button svg {
    width: var(--vp-icon-size);
    height: var(--vp-icon-size);
}

/* Theme toggle removed (2026-07): keep CSS guard for older exports */
#themeBtn {
    display: none !important;
}

.icon-button:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

.icon-button.is-active {
    color: var(--accent);
}

.icon-button:disabled,
.icon-button.is-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.ghost-button {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--button-bg);
    border: 1px solid var(--button-border);
    color: var(--button-text);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.ghost-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── Business card (vp-bc-*) ─────────────────────────────────────────── */

.vp-bc-btn {
    overflow: hidden;
    padding: 0;
}

.vp-bc-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vp-bc-panel {
    position: absolute;
    top: 60px;
    right: 8px;
    z-index: 9000;
    min-width: 200px;
    max-width: 270px;
    pointer-events: auto;
    display: none;
    padding: 12px;
    border-radius: 14px;

    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    box-shadow: var(--vp-glass-shadow);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));

    color: var(--page-text);
    font-family: inherit;
    font-size: 13px;
    animation: vp-bc-in 0.15s ease;
}

.vp-bc-panel.visible {
    display: block;
}

@keyframes vp-bc-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.vp-bc-logo {
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
    height: auto;
    max-width: 100%;
}

.vp-bc-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.vp-bc-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vp-bc-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

a.vp-bc-row {
    color: inherit;
    text-decoration: none;
}

a.vp-bc-row:hover {
    color: var(--accent);
}

.vp-bc-row-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: 0.85;
    margin-top: 1px;
}

.vp-bc-row-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vp-bc-row-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-bc-row--text {
    color: var(--text-muted);
    line-height: 1.35;
}

.vp-bc-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.vp-bc-social-link {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--vp-glass-border);
    background: var(--vp-glass-bg);
    text-decoration: none;
    color: inherit;
}

.vp-bc-social-link:hover {
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.vp-bc-social-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.vp-bc-social-icon[data-ic-kind="brand"] {
    fill: currentColor;
}

.vp-bc-social-icon[data-ic-kind="fallback"] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vp-bc-disclaimer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--vp-glass-border);
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── TopBar map button (hidden on desktop, visible on mobile) ──── */

.topbar-map-btn {
    display: none;
}

/* ── Logo ─────────────────────────────────────────────────────── */
/* Synced mit Editor-Logo-Pille (max-h-8 max-w-[100px] rounded pillCls px-1.5 py-1). */

#projectLogo {
    display: none;
    box-sizing: border-box;
    max-width: var(--vp-logo-max-w);
    max-height: var(--vp-logo-max-h);
    width: auto;
    height: auto;
    object-fit: contain;
    padding: var(--vp-logo-pad-y) var(--vp-logo-pad-x);
    border-radius: var(--vp-logo-radius);
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
}

/* ── Scene meta (centered pill) ──────────────────────────────── */

#sceneMeta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    align-items: center;
}

#title {
    font-size: var(--vp-title-size);
    font-weight: var(--vp-title-weight);
    letter-spacing: var(--vp-title-tracking);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

#description {
    font-size: 10px;
    color: var(--text-muted);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Title overlay pill ──────────────────────────────────────── */
/* Shows current scene name when the strip is collapsed          */

#titleOverlay {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 220px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
}

#titleOverlay.visible {
    opacity: 1;
}

/* ── Bottom strip ─────────────────────────────────────────────── */

#bottomStrip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 20;
    display: none;          /* JS sets display:flex to show */
    flex-direction: column;
    align-items: center;
    max-width: min(860px, calc(100vw - 32px));
    /* no glass bg on container — split between toggle + .strip-scenes */
}

#bottomStrip[style*="flex"] {
    display: flex !important;
}

/* Toggle pill — always visible, even when strip is collapsed.
   Background/Border/Blur kommen aus den gleichen Tokens wie alle Pills. */
.strip-toggle {
    position: static !important;
    transform: none !important;
    top: auto !important;
    border-radius: 9999px 9999px 0 0;
    width: 52px;
    height: 22px;
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    border-bottom: none;
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--button-text);
    flex-shrink: 0;
    transition: border-color 0.16s, color 0.16s;
    z-index: 1;
}

/* Scenes area — collapses independently */
.strip-scenes {
    position: relative;
    overflow: hidden;
    max-height: 120px;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    /* matches Editor PreviewSceneStrip: px-3 pt-3 pb-2 */
    padding: 12px 12px 8px;
    border-radius: 0;
    width: max-content;
    max-width: 100%;
}

/* When collapsed: scenes slide up, toggle stays visible */
#bottomStrip.collapsed .strip-scenes {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#bottomStrip.collapsed {
    /* strip stays at bottom, no slide-out */
    pointer-events: auto;
    opacity: 1;
}

/* ── Scene Selector (floating button + popup) ─────────────────── */

/* Position: bottom-left, aber rechts von Minimap (falls sichtbar).
   Minimap ist left:16px, w:280px → Selector bei left:16px wenn Minimap hidden,
   sonst JS verschiebt ihn. Fallback: immer unten-links. */
#sceneSelector {
    position: absolute;
    bottom: 18px;
    left: 16px;
    z-index: 24;
    display: none;
    transition: left 0.2s ease;
}

#sceneSelector.active {
    display: block;
}

/* Scene-Selector-Button: matches Editor SceneSelectorWidget
   (rounded-full px-3 py-2 gap-1.5 text-xs font-medium) */
.scene-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--vp-pill-radius);
    border: 1px solid var(--vp-glass-border);
    background: var(--vp-glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--vp-glass-shadow);
    color: var(--button-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.16s, box-shadow 0.16s, transform 0.12s;
    user-select: none;
}

/* Hover matches Editor btnCls: text-akzent + 2px ring + 1px lift,
   KEIN border-color-shift (Editor faerbt den Border nicht um). */
.scene-selector-btn:hover {
    color: var(--accent);
    box-shadow: 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring), var(--vp-glass-shadow);
    transform: translateY(-1px);
}

/* Editor kennt KEINEN .open-State am Button — Button bleibt unveraendert,
   nur der Popup oeffnet sich. Daher kein Override hier. */

.scene-selector-btn svg {
    width: 16px;
    height: 16px;
    opacity: 1;
}

/* Popup panel: matches Editor SceneSelectorWidget Popup
   (rounded-xl p-3 min-w-[200px] max-w-[260px] + pillCls = Token-Glass) */
.scene-selector-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 260px;
    padding: 12px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--vp-glass-border);
    background: var(--vp-glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--vp-glass-shadow);
    transform-origin: bottom left;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.95) translateY(6px);
    pointer-events: none;
}

.scene-selector-popup.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

/* Header: matches Editor "Сцены" — text-xs font-semibold opacity-60 mb-1 */
.scene-selector-popup-header {
    padding: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--button-text);
    opacity: 0.60;
}

/* Liste: Wrapper hat schon padding 12px, daher hier 0 */
.scene-selector-list {
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}

.scene-selector-list::-webkit-scrollbar {
    width: 4px;
}

.scene-selector-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}

.scene-selector-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--page-text);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s;
    font-family: inherit;
}

/* Item-Hover matches Editor btnCls (text-akzent + Akzent-Ring + Lift) —
   kein eigenes Hintergrund-Tint, weil das Popup schon glass-bg hat. */
.scene-selector-item:hover {
    color: var(--accent);
    box-shadow: 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(-1px);
}

/* Active: blue ring statt Akzent-Tint — matches Editor ring-1 ring-blue-500 */
.scene-selector-item.active {
    background: transparent;
    box-shadow: inset 0 0 0 1px #3b82f6;
}

.scene-selector-thumb {
    width: 48px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    border: none;
}

.scene-selector-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scene-selector-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--button-bg);
    font-size: 11px;
    color: var(--text-muted);
}

.scene-selector-label {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aktiver Eintrag faerbt den Text NICHT um — Editor kennzeichnet
   die Auswahl nur mit dem Blau-Ring (siehe oben). */

/* ── Strip toggle pill ───────────────────────────────────────── */

.strip-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.22s ease;
}

/* When strip is collapsed, flip chevron to point upward */
#bottomStrip.collapsed .strip-toggle svg {
    transform: rotate(180deg);
}

/* Toggle-Hover matches Editor btnCls (text-akzent + 2px ring + lift, kein Border-Shift) */
.strip-toggle:hover {
    color: var(--accent);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.10), 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(-1px);
}

/* ── Scroll arrows ───────────────────────────────────────────── */

.strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--vp-btn-size);
    height: var(--vp-btn-size);
    border-radius: var(--vp-pill-radius);
    background: var(--vp-glass-bg);
    border: 1px solid var(--vp-glass-border);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    color: var(--button-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21;
    box-shadow: var(--vp-glass-shadow);
    transition: box-shadow 0.16s, color 0.16s, transform 0.12s, opacity 0.16s;
}

.strip-arrow svg {
    width: var(--vp-icon-size);
    height: var(--vp-icon-size);
}

.strip-arrow.left {
    left: 6px;
}

.strip-arrow.right {
    right: 6px;
}

/* Arrow-Hover matches Editor btnCls (akzent-text + ring + lift, kein Border-Shift) */
.strip-arrow:hover {
    color: var(--accent);
    box-shadow: var(--vp-glass-shadow), 0 0 0 var(--vp-hover-ring-width) var(--vp-accent-ring);
    transform: translateY(calc(-50% - 1px));
}

.strip-arrow:disabled {
    opacity: 0.30;
    cursor: not-allowed;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* ── Scene list (horizontal scroll container) ────────────────── */

#sceneList {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
    scroll-snap-type: x mandatory;
    scroll-padding: 10px;
    /* prevent height from changing during scroll */
    align-items: stretch;
}

#sceneList::-webkit-scrollbar {
    height: 4px;
}

#sceneList::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}

/* ── Scene cards ─────────────────────────────────────────────── */

/* Scene-Cards angeglichen an Editor PreviewSceneStrip:
   - kein eigener Hintergrund (Glass-Container scheint durch)
   - 1px Border statt 1.5px
   - Active: einfaches Blau-Ring statt Akzent-Glow */
.scene-card {
    flex: 0 0 auto;
    padding: 0;
    width: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.scene-card:hover {
    border-color: rgba(255, 255, 255, 0.40);
    transform: translateY(-2px);
}

.scene-card.active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 1px #3b82f6;
}

.scene-thumb {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
    transition: opacity 0.14s;
}

/* Editor aendert die Thumb-Opacity beim Hover NICHT — keine Regel hier. */

/* Scene-Title-Pille (Editor: bg-black/40 text-white/80 px-1.5 py-1 text-[10px]) */
.scene-title {
    padding: 4px 6px;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.40);
    color: rgba(255, 255, 255, 0.80);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Info side panel (schwebendes Seitenfenster) ─────────────── */

.info-panel {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: 340px;
    max-width: calc(100vw - 32px);
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-panel.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

.info-panel-inner {
    height: 100%;
    border-radius: 16px;
    padding: 24px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
    position: relative;
}

.info-panel-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.14s, background 0.14s;
}

.info-panel-close svg {
    width: 16px;
    height: 16px;
}

.info-panel-close:hover {
    color: var(--page-text);
    background: var(--button-bg);
}

.info-panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    padding-right: 32px;
}

.info-panel p {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--page-text);
    opacity: 0.85;
}

#infoLink {
    display: inline-block;
    margin-top: 4px;
    color: var(--accent);
    font-weight: 500;
    font-size: 13px;
    text-decoration: none;
    transition: opacity 0.14s;
}

#infoLink:hover {
    opacity: 0.75;
}

.info-media {
    margin: 12px 0;
}

.info-media.hidden {
    display: none;
}

.info-media img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 10px;
}

.info-media video {
    width: 100%;
    max-height: 300px;
    border-radius: 10px;
    background: #000;
}

.info-media audio {
    width: 100%;
    margin-top: 4px;
}

/* Legacy .primary button kept for other modals */
.primary {
    margin-top: 20px;
    padding: 10px 22px;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: opacity 0.16s;
}

.primary:hover {
    opacity: 0.88;
}

/* ── Info panel mobile ── */
@media (max-width: 640px) {
    .info-panel {
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        max-width: none;
        transform: translateY(20px);
    }
    .info-panel.open {
        transform: translateY(0);
    }
    .info-panel-inner {
        padding: 20px 16px;
        border-radius: 14px;
    }
}

/* ── Minimap ─────────────────────────────────────────────────── */

#minimapContainer {
    position: absolute;
    bottom: 18px;
    left: 16px;
    z-index: 22;
    border-radius: 14px;
    overflow: hidden;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease;
    width: 280px;
    height: 220px;
}

/* Embedded minimap (<=1100px, popup-mode): minimap is moved into #scenePanel via JS.
   In this mode it must behave like a normal block inside the panel (not absolute). */
html.minimap-embedded #minimapContainer {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    /* IMPORTANT: width:auto so margins don't overflow the panel (100% + margins would clip) */
    width: auto;
    height: 220px;
    margin: 10px 12px;
    border-radius: 14px;
}

/* Keep “enlarged” usable in embedded mode too (a bit taller, still within panel). */
html.minimap-embedded #minimapContainer.enlarged {
    width: auto;
    height: 320px;
}

/* When UI auto-hide is active, keep embedded minimap visible (it is part of the scenes UI).
   Export-Viewer: `ui-auto-hide` wird am #app gesetzt (nicht am <html>).
   Im Embedded-Modus soll die Minimap im Scene-Panel weiterhin sichtbar/benutzbar bleiben,
   sonst ist das Panel kaum nutzbar. */
html.minimap-embedded #app.ui-auto-hide #minimapContainer {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#minimapContainer.enlarged {
    width: 560px;
    height: 440px;
}

#minimapContainer.hidden {
    display: none;
}

#minimapCanvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#minimapControls {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.minimap-btn {
    width: 26px !important;
    height: 26px !important;
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    transition: border-color 0.14s, color 0.14s, box-shadow 0.14s;
}

.minimap-btn:hover {
    opacity: 1;
    border-color: var(--accent) !important;
    color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.minimap-btn svg {
    width: 13px !important;
    height: 13px !important;
}

/* ── Controls toolbar ───────────────────────────────────────── */

#controlsToolbar {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 22;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
    transition: opacity 0.32s ease, transform 0.28s ease;
}

#controlsToolbar .icon-button {
    width: 36px;
    height: 36px;
}

#controlsToolbar .icon-button svg {
    width: 17px;
    height: 17px;
}

/* ── Audio player bar ───────────────────────────────────────── */

.audio-player {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 23;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    transition: opacity 0.22s ease;
}

.audio-player.hidden {
    display: none !important;
}

.audio-pp,
.audio-mute {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--button-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.14s;
}

.audio-pp:hover,
.audio-mute:hover {
    color: var(--accent);
}

.audio-pp svg,
.audio-mute svg {
    width: 16px;
    height: 16px;
}

.audio-pp svg.hidden,
.audio-mute svg.hidden {
    display: none;
}

.audio-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: var(--button-border);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.audio-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--glass-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
}

.audio-vol::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--glass-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    border: none;
}

/* ── Scene counter ──────────────────────────────────────────── */

#sceneCounter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--button-text);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease;
    display: none;
}

#sceneCounter.visible {
    opacity: 1;
    display: block;
}

/* ── Auto-hide UI ───────────────────────────────────────────── */

.ui-auto-hide #topBar,
.ui-auto-hide #bottomStrip,
.ui-auto-hide #controlsToolbar,
.ui-auto-hide #minimapContainer,
.ui-auto-hide #sceneCounter,
.ui-auto-hide #sceneSelector,
.ui-auto-hide .audio-player {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Share toast */

.share-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    pointer-events: none;
    animation: toastFade 1.6s ease forwards;
}

@keyframes toastFade {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Generic modal overlay (used by share modal) ──────────────── */

/*
 * viewer.js toggles visibility via `.classList.remove("hidden")`.
 * Our redesigned export template still uses the legacy markup:
 *   <div id="shareModal" class="modal hidden"> ...
 * Without these base styles, the modal would render below the fullscreen app
 * and look like it "doesn't open".
 */
.modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal.hidden {
    display: none !important;
}

.modal-content {
    border-radius: 16px;
    padding: 18px;
    max-height: calc(100vh - 48px);
    overflow: auto;
}

/* ── Powered by ─────────────────────────────────────────────── */

#poweredBy {
    position: absolute;
    bottom: 4px;
    right: 16px;
    z-index: 18;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.16s;
    pointer-events: auto;
}

#poweredBy:hover {
    opacity: 1;
    color: var(--accent);
}

/* ── Share modal ─────────────────────────────────────────────── */

.share-modal-content {
    max-width: 420px;
    width: min(92%, 420px);
}

.share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.share-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.share-header .icon-button {
    width: 30px;
    height: 30px;
}

.share-header .icon-button svg {
    width: 15px;
    height: 15px;
}

.share-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.share-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.share-url-row {
    display: flex;
    gap: 6px;
}

.share-url-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--page-text);
    font-size: 12px;
    font-family: monospace;
    outline: none;
}

.share-url-input:focus {
    border-color: var(--accent);
}

.share-qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-qr-wrap {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    padding: 12px;
}

.share-qr-wrap canvas,
.share-qr-wrap img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.share-qr-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

.share-social-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.share-social-btn {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.16s;
    text-decoration: none;
}

.share-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.share-social-btn svg {
    width: 22px;
    height: 22px;
}

.share-tg {
    background: #2AABEE;
}

.share-vk {
    background: #4C75A3;
}

.share-wa {
    background: #25D366;
}

/* MAX (max.ru) — neutral dark button */
.share-max {
    background: #111827;
}

/* Ensure social svg inherits white fill */
.share-social-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: currentColor;
}

/* ── Mobile ──────────────────────────────────────────────────── */

/* ── Mobile Layout ────────────────────────────────────────────
   ┌──────────────────────────────────┐
   │ [🗺]     [Titel]          [ℹ]   │  Map links oben, Info rechts oben
   │ [Minimap]                        │  links oben (wenn offen)
   │                                  │
   │      [PANORAMA fullscreen]       │
   │                                  │
   │                      [Controls]  │  rechts unten
   │ [⊞ 1/5]                         │  links unten
   │ ════ [♪  ▬▬▬▬▬  🔇] ═══════   │  full-width ganz unten
   └──────────────────────────────────┘
────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root {
        --m-edge: 10px;
        --m-audio-h: 0px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
    }

    /* ── Top Bar ── */
    #topBar {
        left: var(--m-edge);
        right: var(--m-edge);
        top: var(--m-edge);
        gap: 6px;
    }
    #topBar .top-left { padding: 0; border-radius: 0; gap: 6px; display: flex; align-items: center; }
    /* Logo bleibt auf Mobile Token-gestützt — keine extra Verkleinerung mehr (matches Editor). */
    /* TopBar Map-Button nicht auf Mobile */
    .topbar-map-btn { display: none !important; }
    #topBar .top-center {
        max-width: calc(100vw - 140px);
        padding: 5px 14px;
    }
    #topBar .top-center #title { font-size: 11px; }
    #topBar .top-center #description { display: none; }
    #topBar .top-right { padding: 4px; border-radius: 999px; }

    /* ── Minimap: schwebt über dem Button (rechts unten) ── */
    /* Größe exakt = JS-Konstanten MINIMAP_MOBILE_SMALL 200×160 */
    #minimapContainer {
        top: auto;
        left: auto;
        right: 10px;
        bottom: calc(56px + var(--m-audio-h) + var(--m-safe-b));
        width: 200px;
        height: 160px;
        border-radius: 10px;
        border: none;
        padding: 0;
        transform-origin: bottom right;
        transition: opacity 0.18s ease,
                    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #minimapContainer.hidden {
        /* Default mobile: keep element for fade-out animation (floating minimap). */
        display: block !important;
        opacity: 0;
        transform: scale(0.95) translateY(6px);
        pointer-events: none;
    }

    /* IMPORTANT:
       If the minimap is embedded into the scene panel (html.minimap-embedded),
       the container is in normal flow. In that case we MUST fully remove it,
       otherwise it keeps empty space and scenes don't move up when the user
       closes the map on mobile.
     */
    html.minimap-embedded #minimapContainer.hidden {
        display: none !important;
    }
    /* Enlarged: volle Breite mit gleichen Lücken */
    #minimapContainer.enlarged {
        left: 10px;
        right: 10px;
        width: auto;
        height: 280px;
    }

    /* ── Legacy "Unified bottom bar" (V1 Mobile) ──────────────────
       Dieses Layout kollidiert mit dem V2 Dock/Right-Rail Handoff
       (popup-mode/strip-mode) aus `panorama-ui-glass.css`.
       Deshalb nur aktivieren, wenn KEIN Mode-Class gesetzt ist.
    ───────────────────────────────────────────────────────────── */

    /* Audio: full-width bar am Boden (Hintergrund der Leiste) */
    html:not(.strip-mode):not(.popup-mode) .audio-player {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        transform: none;
        z-index: 25;
        border-radius: 0;
        padding: 8px 10px;
        padding-right: 180px; /* Platz für Controls rechts */
        padding-bottom: calc(8px + var(--m-safe-b));
        gap: 6px;
        justify-content: flex-start;
    }
    html:not(.strip-mode):not(.popup-mode) .audio-pp,
    html:not(.strip-mode):not(.popup-mode) .audio-mute { width: 28px; height: 28px; }
    html:not(.strip-mode):not(.popup-mode) .audio-pp svg,
    html:not(.strip-mode):not(.popup-mode) .audio-mute svg { width: 14px; height: 14px; }
    html:not(.strip-mode):not(.popup-mode) .audio-vol { width: 50px; flex: 0 0 50px; }

    /* Controls: horizontal, rechte Seite der Bottom-Bar */
    html:not(.strip-mode):not(.popup-mode) #controlsToolbar {
        position: fixed;
        right: 6px;
        bottom: calc(2px + var(--m-safe-b));
        left: auto;
        top: auto;
        flex-direction: row;
        gap: 2px;
        padding: 3px;
        border-radius: 999px;
        z-index: 26;
        /* Transparent wenn Audio sichtbar (Audio-Bar ist der Hintergrund) */
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
        box-shadow: none;
    }
    /* Wenn Audio sichtbar: Controls ohne eigenen Hintergrund */
    html:not(.strip-mode):not(.popup-mode) .audio-player:not(.hidden) ~ #controlsToolbar,
    html:not(.strip-mode):not(.popup-mode) .audio-player:not(.hidden) + * + * + #controlsToolbar {
        background: transparent;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    html:not(.strip-mode):not(.popup-mode) #controlsToolbar .icon-button { width: 32px; height: 32px; }
    html:not(.strip-mode):not(.popup-mode) #controlsToolbar .icon-button svg { width: 15px; height: 15px; }

    /* ── Scene-Selector: LINKS UNTEN, über der Bar ── */
    html:not(.strip-mode):not(.popup-mode) #sceneSelector {
        bottom: calc(10px + var(--m-audio-h) + var(--m-safe-b));
        left: var(--m-edge);
        z-index: 24;
    }
    html:not(.strip-mode):not(.popup-mode) .scene-selector-btn { min-height: 38px; padding: 7px 12px; font-size: 11px; }
    html:not(.strip-mode):not(.popup-mode) .scene-selector-popup {
        position: fixed;
        bottom: calc(54px + var(--m-audio-h) + var(--m-safe-b));
        left: var(--m-edge);
        width: min(260px, calc(100vw - 70px));
        max-height: 60vh;
        transform-origin: bottom left;
    }
    html:not(.strip-mode):not(.popup-mode) .scene-selector-list { max-height: 50vh; }

    /* ── Rest ── */
    /* Legacy-Mobile-Layout (pre Dock/Handoff): hide strip UI.
       New UI uses html.strip-mode/html.popup-mode + panorama-ui-glass.css.
       So we only hide bottomStrip if NO mode class is present. */
    html:not(.strip-mode):not(.popup-mode) #bottomStrip { display: none !important; }
    html:not(.strip-mode):not(.popup-mode) #sceneCounter { display: none !important; }
    html:not(.strip-mode):not(.popup-mode) #poweredBy {
        right: var(--m-edge);
        bottom: calc(2px + var(--m-audio-h) + var(--m-safe-b));
    }

    /* ── No-Audio Layout ────────────────────────────────────────── */
    html:not(.strip-mode):not(.popup-mode).no-audio #minimapContainer {
        bottom: calc(56px + var(--m-safe-b));
    }
    html:not(.strip-mode):not(.popup-mode).no-audio #poweredBy {
        bottom: calc(4px + var(--m-safe-b));
    }
}

#controlsToolbar:empty { display: none; }

/* ── Tour floating button (bottom-center, independent of all other UI) ── */

#tourFloatBtn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.tour-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    -webkit-backdrop-filter: blur(var(--vp-blur)) saturate(var(--vp-saturate));
    box-shadow: var(--glass-shadow);
    color: var(--button-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s, box-shadow 0.16s, color 0.16s, transform 0.12s;
    user-select: none;
}

.tour-pill-btn svg {
    flex-shrink: 0;
}

.tour-pill-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), var(--glass-shadow);
    transform: translateY(-1px);
}

.tour-pill-stop {
    border-color: rgba(220, 50, 50, 0.5);
    color: #f87171;
}

.tour-pill-stop:hover {
    border-color: rgba(220, 50, 50, 0.85);
    color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.18), var(--glass-shadow);
}

.tour-counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 2px;
    min-width: 28px;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Auto-hide: Tour button fades with the rest of the UI */
.ui-auto-hide #tourFloatBtn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@media (max-width: 640px) {
    #tourFloatBtn {
        bottom: calc(10px + var(--m-audio-h, 0px) + var(--m-safe-b, 0px));
    }
    .tour-pill-btn {
        font-size: 12px;
        padding: 7px 13px;
        gap: 6px;
    }
}

/* ── Tour mobile toolbar button ──────────────────────────────── */
/* Hidden on desktop; CSS shows it on mobile inside #controlsToolbar */

.tour-toolbar-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #16a34a;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.16s, box-shadow 0.16s, transform 0.12s;
}

.tour-toolbar-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.tour-toolbar-btn:hover {
    background: #15803d;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.30);
    transform: translateY(-1px);
}

.tour-toolbar-btn.is-playing {
    background: #dc2626;
}

.tour-toolbar-btn.is-playing:hover {
    background: #b91c1c;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}

/* On mobile: hide float pill, show toolbar button */
@media (max-width: 640px) {
    #tourFloatBtn {
        display: none !important;
    }

    .tour-toolbar-btn {
        display: inline-flex !important;
    }
}