/**
 * Stapel-/Touch-Layout für Karteneditor-Seiten (nur mit body.is-touch-layout).
 * Breakpoint: max-width 720px (siehe card-editor-touch-layout.js) — Tablet nutzt weiter Blueprint-Desktop.
 *
 * Fixe Preview-Position (Stack): Unterkante des zweizeiligen fixen Chromes — wie welcome.css
 * (Navbar-Zeile + .server-management-header unter var(--kynx-navbar-offset), height:70px) plus kleiner Abstand und
 * env(safe-area-inset-top). Kein JS-Messen von sticky-top mehr (frühe getBoundingClientRect-Werte
 * konnten --card-editor-stack-preview-sticky-top unzuverlässig setzen → Preview wirkte „verschwunden“).
 *
 * --card-editor-stack-preview-pad — Höhe der fixierten Discord-Preview-Zeile (padding-top für
 * .blueprint-content), wird von card-editor-preview-stack-scale.js gesetzt (ResizeObserver, Skalierung).
 */

/* ——— Section & Canvas: kein Vollbild-Fixing, vertikal scrollbar ——— */
body.is-touch-layout [class$="-messages-section"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: 100vw;
    min-height: 0;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 max(0.5rem, 1.75vw) 1.25rem;
    box-sizing: border-box;
}

body.is-touch-layout .blueprint-canvas-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 240px;
    overflow: visible !important;
    cursor: default !important;
    z-index: 1;
}

body.is-touch-layout .blueprint-canvas-container:active {
    cursor: default !important;
}

body.is-touch-layout #blueprintCanvas.blueprint-canvas,
body.is-touch-layout .blueprint-canvas {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    cursor: default !important;
    transform: none !important;
    will-change: auto !important;
    /* perspective/transform-Ebenen können Sticky/Fixed-Kinder stören */
    perspective: none !important;
    transform-style: flat !important;
    backface-visibility: visible !important;
}

body.is-touch-layout #blueprintCanvas.blueprint-canvas:active,
body.is-touch-layout .blueprint-canvas:active,
body.is-touch-layout .blueprint-canvas.dragging {
    cursor: default !important;
}

/* Blueprint-Inhalt: eine Spalte, kein absolutes Node-Raster */
body.is-touch-layout #blueprintContent.blueprint-content,
body.is-touch-layout .blueprint-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

body.is-touch-layout .blueprint-content > .blueprint-node-element:not(.discord-message-container),
body.is-touch-layout .blueprint-content > .channel-actions-container.blueprint-node-element {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    cursor: default !important;
    flex-shrink: 0;
}

body.is-touch-layout .channel-actions-container.blueprint-node-element,
body.is-touch-layout .extended-settings.blueprint-node-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

body.is-touch-layout .extended-settings.blueprint-node-element {
    /* Unter der fixierten Live-Preview halten (Preset-Zeile nutzt sonst z-index 1001–1005, Gating bis 10110) */
    position: relative !important;
    z-index: 0 !important;
    isolation: isolate;
}

body.is-touch-layout .extended-settings.blueprint-node-element.dragging {
    z-index: 0 !important;
}

/* Preset-interne Layer nur relativ zur Panel-Ebene — nicht über fixierte Preview „ausdrücken“ */
body.is-touch-layout .extended-settings.blueprint-node-element .preset-container,
body.is-touch-layout .extended-settings.blueprint-node-element .preset-box,
body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview,
body.is-touch-layout .extended-settings.blueprint-node-element .preset-buttons,
body.is-touch-layout .extended-settings.blueprint-node-element .preset-btn {
    z-index: auto !important;
}

body.is-touch-layout .blueprint-content > .discord-message-container.blueprint-node-element {
    /* Sticky am html-Scrollport scheitert zuverlässig (u. a. backdrop-filter / WebKit) → fest unter festem Chrome.
       position:fixed = Viewport; Eltern (.blueprint-content, Canvas) mit transform:none → kein falscher Containing Block. */
    position: fixed !important;
    left: max(0.5rem, 1.75vw) !important;
    right: max(0.5rem, 1.75vw) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    cursor: default !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    /* Fest unter zweitem Header; Stack setzt dieselbe Formel als --card-editor-stack-preview-fixed-top auf <html> */
    top: var(--card-editor-stack-preview-fixed-top, calc(var(--kynx-navbar-offset) + 70px + 6px + env(safe-area-inset-top, 0px))) !important;
    /* Über Preset-Panel + Premium-Gating-Overlay (bis ca. 10110), unter globalem Vollblick (Navbar/Modals oft höher) */
    z-index: 12050;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 0.55rem 0.6rem !important;
    box-sizing: border-box;
}

/* Reserviert Platz unter der fixierten Preview, Höhe kommt aus --card-editor-stack-preview-pad (JS) */
html[data-card-editor-layout="stack"] body.is-touch-layout .blueprint-content {
    padding-top: calc(var(--card-editor-stack-preview-pad, 260px) + 0.5rem);
    box-sizing: border-box;
}

body.is-touch-layout .discord-message-container.blueprint-node-element h3 {
    margin-bottom: 0.38rem !important;
    padding: 0.28rem 0.45rem !important;
    font-size: 0.8125rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element h3 .header-left {
    gap: 0.35rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-live-indicator {
    padding: 0.15rem 0.45rem !important;
    gap: 0.3rem !important;
    font-size: 0.65rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .indicator-dot {
    width: 6px !important;
    height: 6px !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .indicator-text {
    font-size: 0.65rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-message {
    gap: 0.42rem !important;
    padding: 0.48rem 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-header {
    margin-bottom: 0.22rem !important;
    gap: 0.35rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-author {
    font-size: 0.875rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-timestamp {
    font-size: 0.72rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .bot-badge {
    font-size: 0.62rem !important;
    padding: 0.12rem 0.28rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .bot-avatar {
    width: 34px !important;
    height: 34px !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .discord-text {
    margin-bottom: 0.38rem !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .editable-message-container {
    margin-bottom: 0.38rem !important;
    gap: 0.35rem !important;
}

/* Sticky: kein Overflow-Clipping zwischen html-Scrollport und Preview-Kette */
body.is-touch-layout .editor-container .main-content,
body.is-touch-layout .main-content {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Drag-Zonen der Nodes: nicht bedienbar */
body.is-touch-layout .settings-panel-header h3,
body.is-touch-layout .channel-actions-container.blueprint-node-element h3,
body.is-touch-layout .extended-settings.blueprint-node-element h3 {
    cursor: default !important;
    pointer-events: none !important;
}

body.is-touch-layout .settings-panel-header button,
body.is-touch-layout .channel-actions-container button,
body.is-touch-layout .channel-actions-container select,
body.is-touch-layout .channel-actions-container input,
body.is-touch-layout .channel-actions-container .toggle-switch {
    pointer-events: auto !important;
}

body.is-touch-layout .channel-actions-container .global-actions,
body.is-touch-layout .channel-actions-container .channel-selection {
    pointer-events: auto !important;
}

/* Raster / Minimap */
body.is-touch-layout .simple-blueprint-grid,
body.is-touch-layout #main-blueprint-grid,
body.is-touch-layout .blueprint-minimap {
    display: none !important;
}

/* Zoom-Steuerung */
body.is-touch-layout .canvas-controls,
body.is-touch-layout #canvasZoomController,
body.is-touch-layout .zoom-controller {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Leerer Legacy-Grid-Container neben Canvas */
body.is-touch-layout .editor-main-container {
    display: none !important;
}

/* Hintergrund: statischer Verlauf statt WebGL-Schichten */
body.is-touch-layout #light-pillar-background,
body.is-touch-layout #fluid-background {
    display: none !important;
    visibility: hidden !important;
}

body.is-touch-layout {
    background: linear-gradient(165deg, #0a0a12 0%, #12121c 48%, #0e0f18 100%) fixed !important;
}

/* Leerer Platzhalter neben Nodes optional schmal halten */
body.is-touch-layout .right-side-container {
    display: none !important;
}

/* Dokument scrollbar: Basisseiten setzen html/body auf overflow hidden + body 100vh → kein vertikaler Scroll im Stack */
html[data-card-editor-layout="stack"] {
    /**
     * Navbar-/Subheader-Stack: .server-management-header an var(--kynx-navbar-offset), 70px hoch;
     * globale Navbar min-height = --kynx-navbar-height (72px), Offset per JS = Unterkante .navbar.
     * Preview direkt darunter: Navbar + Subheader + 6px Abstand + Safe Area.
     */
    --card-editor-stack-preview-fixed-top: calc(var(--kynx-navbar-offset) + 70px + 6px + env(safe-area-inset-top, 0px));
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

html[data-card-editor-layout="stack"] body.is-touch-layout {
    overflow-x: hidden;
    overflow-y: visible;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    touch-action: pan-y pinch-zoom;
}

body.is-touch-layout .editor-container {
    overflow-x: hidden;
    overflow-y: visible;
    min-height: 0;
}

/*
 * Haupt-Kartenpreview: gleiche Referenzfläche wie Desktop (800×400), Einpassen per transform:scale()
 * über shared/js/card-editor-preview-stack-scale.js (.card-editor-preview-scale-frame).
 */
body.is-touch-layout .discord-attachments {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.is-touch-layout .discord-attachments > [class$="-preview-container"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.is-touch-layout .card-editor-preview-scale-frame {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: visible;
    box-sizing: border-box;
}

body.is-touch-layout .discord-attachments > [class$="-preview-container"] > .card-editor-preview-scale-frame > [class$="-preview"] {
    width: 800px !important;
    height: 400px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Kein separates „contain“ für Bild/GIF — gleiche Box wie Desktop-Zoom, Overlay und Layer zusammen skaliert */
body.is-touch-layout .discord-attachments > [class$="-preview-container"] [class$="-preview"] .layer.background-image,
body.is-touch-layout .discord-attachments > [class$="-preview-container"] [class$="-preview"] .layer.gif-overlay {
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* Preset-Thumbnails: Touch gleiche Designfläche 800×400 + JS-scale wie Hauptpreview */
body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview {
    justify-content: flex-start !important;
}

body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview [class$="-preview"]:not(.preset-preview-placeholder) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform-origin: top center !important;
}

body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview > .card-editor-preview-scale-frame > [class$="-preview"] {
    width: 800px !important;
    height: 400px !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview [class$="-preview"] .layer.background-image,
body.is-touch-layout .extended-settings.blueprint-node-element .preset-preview [class$="-preview"] .layer.gif-overlay {
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

body.is-touch-layout .discord-message-container.blueprint-node-element .element img,
body.is-touch-layout .discord-attachments [class$="-preview"] .element img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 720px) {
    .discord-attachments {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .discord-attachments > [class$="-preview-container"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/**
 * Sprachumschalter — Welcome/Kick/Ban/Farewell/Timeout (wie Embeds/Birthdays).
 * Seiten-CSS hatte nach eefe2c91 keine .language-switcher-Regeln mehr; Kick hatte
 * den Switcher zusätzlich außerhalb .navbar (fixed → viewport-Mitte).
 */
@media (min-width: 901px) {
    body.kynx-dashboard-nav .language-switcher {
        position: fixed;
        right: 20px;
        top: 50%;
        left: auto;
        transform: translateY(-50%);
        margin-left: 0;
        z-index: 1006;
        flex-shrink: 0;
    }
}

@media (max-width: 900px) {
    body.kynx-dashboard-nav .hamburger {
        display: flex !important;
        margin-left: auto;
        z-index: 1005;
        position: relative;
        align-self: center;
        min-width: 30px;
        flex-shrink: 0;
    }

    body.kynx-dashboard-nav .nav-container {
        position: relative;
    }

    body.kynx-dashboard-nav .language-switcher {
        position: absolute;
        right: 60px;
        top: 50%;
        left: auto;
        transform: translateY(-50%);
        margin-left: 0;
        z-index: 1006;
        flex-shrink: 0;
    }
}