/* ============================================================
   app.css — merged (bottom-wins)
   Rule: If a property is defined multiple times for the same selector,
         the declaration that appears LOWER in this file takes precedence.
   Source order: 1) main.css  →  2) mobile.css at the very end
   This preserves your original cascade expectation.
============================================================ */

/* ================================
  🎨 CSS Variables
================================ */
:root {
    --bg: #101012;
    --bg-gradient: linear-gradient(126deg, #000 0%, #101010 35%, #161616 70%, #171717 100%);
    --bg-dark: #292929;
    --muted: #7c8494;
    --ink: #222;
    /* ehemals --light */
    --light: #f2f2f2;
    --accent: #fdb13e;
    --active: #3B45ED;
    --text: #cdcdcd;
}

/* ================================
  🔄 Base Styles
================================ */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    background: #000;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
}

h1 {
    margin: 0;
}

svg {
    width: 100%;
    max-width: 120px;
    fill: currentColor;
}

 #bottomBarBadge {
     display: none;
     /* Start unsichtbar */
     background: yellow;
     width: 50px;
     height: 50px;
     justify-content: center;
     align-items: center;
     color: black;
     font-size: 40px;
     border-radius: 100px;
     cursor: pointer;
 }

 #bottomBarBadge.show {
     display: flex;
     /* nur wenn "show" aktiv */
 }

/* ================================
  📦 Layout Wrappers
================================ */
.wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: transparent;
    border-radius: 25px;
}

.main-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    width: 100%;
    background: transparent;
    border-radius: 25px;
}

.main-wrapper .preset-select {
    width: 100%;
    padding: 0 50px;
}

main {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: transparent;
    border-radius: 25px;
    padding: 0;
    height: 100%;
    position: relative;
}

.app-wrapper {
    padding: 0;
}

#appContainer {
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
    padding: 50px 50px 50px 15px;
    display: flex;
    flex-direction: column;
    border-radius: 25px;
    box-sizing: border-box;
    width: 100%;
    height: 90dvh;
    align-items: flex-start;
}

.page-wrapper {
    height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background: #1b1d3785;
    border-radius: 25px;
    color: var(--text);
}

/* ================================
  🎛️ Header
================================ */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 30px;
    border-radius: 0;
    background: transparent;
    width: 100%;
    position: relative;

    .logo-wrapper {
        width: 50px;

        img {
            filter: brightness(5.2);
        }
    }

}

.nav-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

nav {
    display: flex;
    gap: 50px;
    padding-left: 50px;
}

.nav-wrapper a {
    text-decoration: none;
    color: var(--ink);
    text-transform: uppercase;
    font-weight: 100;
    font-size: 20px;
    letter-spacing: 2px;
}

.nav-wrapper a span.small {
    font-size: 10px;
}

div.info-container {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    width: 100%;
    margin-left: auto;
    justify-content: center;
}

div.info-container * {
    font-size: 14px;
}

#subheader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 15px;
    gap: 15px;
}

#subheader .actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ================================
  📂 Sidebar
================================ */
#sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 30px 15px;
    background: #5959591c;
    border-radius: 25px;
    transition: all 0.5s ease;
}

#sidebar ul {
    list-style: none;
    margin: 0;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 20px;
}

#sidebar.collapsed {
    width: fit-content;
    padding: 0;
}

#tabsContainer {
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: width 0.3s ease;
}

#sidebar #sidebarToggle {
    display: flex;
    justify-content: center;
    background: transparent;
    width: 60px;
    border: none;
    font-size: 37px;
    transform: rotate(-180deg);
}

#sidebar.collapsed #sidebarToggle {
    transform: rotate(0deg);
}

/* ================================
  📑 Tabs
================================ */
.tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent;
    margin-bottom: 12px;
    z-index: 2;
}

.tab {
    flex: 0 1 auto;
    padding: 7px 20px;
    width: max-content;
    text-align: left;
    border: none;
    background: transparent;
    font-size: 18px;
    font-family: inherit;
    font-weight: 200;
    color: var(--ink);
    border-radius: 25px;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab svg {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.tab.active,
.tab:focus-visible {
    color: #000;
    background: transparent;
    font-weight: 100;
}

.tab:hover:not(.active) {
    color: var(--ink);
    text-shadow: 0 0 10px #00000024;
}

/* ================================
  📝 Forms & Fields
================================ */
#formContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    padding-left: 50px;
}

#formContainer .field {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    background: transparent;
    border-radius: 25px;
    padding: 15px;
    position: relative;
}

#formContainer .field label {
    font-size: 18px;
    font-weight: 200;
    color: var(--light);
}

select,
input[type="text"],
textarea {
    appearance: none;
    padding: 10px 12px;
    font-size: 1rem;
    background: transparent;
    color: var(--light);
    width: 100%;
    border: none;
    border-bottom: 1px solid #ffffff5e;
    border-radius: 0;
}

textarea {
    resize: vertical;
}

/* ================================
  🔘 Chips
================================ */
.chips {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

label.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    user-select: none;
    padding: 4px 8px;
    background: transparent;
}

label.chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

label.chip::before {
    content: "";
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #bbb;
    border: 1px solid #999;
    transition: background .25s, border-color .25s;
}

label.chip::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: left .25s;
}

label.chip:has(input[type="checkbox"]:checked)::before {
    background: linear-gradient(168deg, #f9f1ff, #cd9cca);
    border-color: #222;
}

label.chip:has(input[type="checkbox"]:checked)::after {
    left: 18px;
}

/* ================================
  📂 Accordion
================================ */
.accordion {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 20px;
    background: #2b4bc7;
    border-radius: 25px;
}

.accordion summary {
    font-size: 24px;
    background: #5959591c;
    border-radius: 25px;
    width: fit-content;
}

.accordion summary::marker {
    content: "⟶ ";
}

/* ================================
  💬 Popup
================================ */
.popup {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    background: transparent;
    color: #f4f4fa;
    border-radius: 18px;
    padding: 2em;
    box-shadow: 0 8px 28px rgba(30, 24, 80, 0.13);
    z-index: 99;
}

.popup.show {
    display: block;
}

/* ================================
  🪟 Preview Container
================================ */
#previewContainer {
    position: fixed;
    top: 50%;
    right: -300px;
    width: 300px;
    height: 50vh;
    background: #2a2d35;
    border-left: 1px solid #ccc;
    box-shadow: 0px 0px 76px #000;
    transition: right 0.3s ease;
    z-index: 999;
    transform: translateY(-50%);
    padding: 20px;
    border-radius: 25px 0 0 25px;
}

#previewContainer::before {
    content: "Preview Output Container";
    position: absolute;
    top: 50%;
    left: -110px;
    transform: translateY(-50%) rotate(-90deg);
    background: #845e99;
    color: #fff;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    white-space: nowrap;
}

#previewContainer.active {
    right: 0;
}

/* ================================
  ⌨️ Bottom Bar
================================ */
#bottomBar {
    width: 100%;
    max-width: 1000px;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    border-radius: 25px;
    background: #2a2d34;
    height: fit-content;
    box-shadow: 0 150px 244px rgb(0 0 0);
    transition: transform 0.3s ease;
    z-index: 1000;
}

#bottomBar.hidden {
    transform: translateX(-50%) translateY(150%);
}

#bottomBar textarea[data-id="prompt"] {
    height: 90px;
    min-height: 1px;
}

/* ================================
  📋 Copy Button
================================ */
#copyBtn span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

#copyBtn span svg {
    height: 20px;
    width: 20px;
}

/* ================================
  📺 Landing Screen (mit Slideshow)
================================ */
#landing {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

/* Slides */
#landing .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fade 24s infinite;
    z-index: 0;
    /* liegen hinter Overlay */
}

/* deine Slides */
#landing .slide:nth-child(1) {
    background-image: url("../assets/scene.jpg");
    animation-delay: 0s;
}

#landing .slide:nth-child(2) {
    background-image: url("../assets/mystery.png");
    animation-delay: 6s;
}

#landing .slide:nth-child(3) {
    background-image: url("../assets/pose.jpg");
    animation-delay: 12s;
}

#landing .slide:nth-child(4) {
    background-image: url("../assets/scene.jpg");
    animation-delay: 18s;
}

/* Fade Animation */
@keyframes fade {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* 🔹 Schwarze Blockfläche hinter Slideshow */
#landing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    /* blockt alles darunter */
    z-index: -1;
}

/* 🔹 Overlay über Bilder */
#landing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.5), #000);
    z-index: 1;
}

.landing-content {
    position: relative;
    z-index: 2;
    /* bleibt ganz oben */
}

.landing-content img {
    width: 170px;
    margin: 0 auto;
}

.landing-content h1 {
    font-size: 17px;
    font-weight: 100;
    margin: 0 auto;
    width: 140px;
}

.landing-content p {
    font-size: 12px;
    margin: 0 auto 160px 0;
}

.landing-content button {
    padding: 8px 15px;
    font-size: 17px;
    border-radius: 100px;
    border: 1px solid #ECFC07;
    background: transparent;
    color: #ECFC07;
    cursor: pointer;
    transition: transform 0.2s;
    width: 200px;
}

.landing-content button:hover {
    transform: scale(1.05);
}

/* ================================
  📺 Tab-Groups –  Screen 2
================================ */
.preview-badge {
    border: 1px solid yellow;
    background: transparent;
    color: yellow;
    border-radius: 25px;
    padding: 6px 10px;
}

#overlayClose {
    display: none;
}

#tabsOverview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 1000px;

    .tab-group {
        background: #ffffff1a;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        border: 1px solid yellow;
        padding: 0 20px 20px 20px;
        border-radius: 25px;
        z-index: 1;
        position: relative;

        &::before {
            background: url(../assets/cosplay.png) center center / cover repeat fixed;
            content: "";
            position: absolute;
            inset: 0;
            filter: blur(35px) brightness(0.8);
            z-index: -1;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .group-header {
            width: fit-content;
            padding: 5px 20px;
            background: yellow;
            color: #000;
            border-radius: 0 0 25px 25px;
            font-size: 14px;
        }

        .tab-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            .tab-card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: calc(50% - 5px);
                padding: 5px;
                background: #0E101D;
                border-radius: 25px;

                img {
                    aspect-ratio: 1 / 1;
                    object-fit: cover;
                    width: 100%;
                    border-radius: 25px;
                }

                &[data-key="artStyle"] img {
                    object-position: top;
                }

                &[data-key="pose"] img {
                    object-position: bottom;
                }

                span {
                    font-size: 10px;
                    padding: 7px 10px 4px;
                }
            }
        }
    }
}

#tabDetailView {
    position: relative;
    padding: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.back-btn {
    background: transparent;

    color: #fff;
    font-weight: 100;
    font-size: 14px;
    margin-bottom: 1rem;
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 5px 15px;

    &:hover {
        text-decoration: underline;
    }
}

.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-wrapper {
    border: 1px solid #ff0;
    border-radius: 20px;
    margin-bottom: 1.2rem;
    overflow: hidden;
    position: relative;
    z-index: 1;

    &::before {
        content: '';
        background: url(../assets/model.jpg) 110px center / cover repeat fixed;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        filter: blur(44.1px) brightness(0.5);
        z-index: -1;
        overflow: hidden;
    }

    .collapsible-icon {
        width: 30px;
        margin-bottom: 10px;
    }
}

.collapsible-header {
    background: #ff0;
    color: #000;
    font-weight: bold;
    padding: 0.8rem 1rem;
    cursor: pointer;
    text-align: center;


}

.collapsible-header span {
    font-size: 1.2rem;
}

.collapsible-content {
    display: none;
    padding: 1rem;
    background: transparent;
}

.collapsible-wrapper.open .collapsible-content {
    display: block;
}

.save-btn {
    margin: 2rem auto;
    display: block;
    padding: 0.8rem 2rem;
    border-radius: 12px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 1.1rem;
}


.collapsible-wrapper {
    border: 1px solid #FFFF0080;
    border-radius: 100px;
    margin-bottom: 1.2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.collapsible-header {
    background: yellow;
    cursor: pointer;
    text-align: center;
    width: fit-content;
    height: fit-content;
    padding: 5px 45px;
    margin-bottom: 20px;
    border-radius: 0 0 25px 25px;
    border: none;
    color: #000;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.collapsible-header span {
    font-size: 1.1rem;
}

.collapsible-content {
    display: none;
    padding: 1rem;
    background: rgba(0, 0, 0, 0);
}

.collapsible-wrapper.open .collapsible-content {
    display: block;
}

.accordion {
    border: 1px solid rgba(255, 255, 0, 0.6);
    /* neon yellow border */
    border-radius: 999px;
    margin: 1rem 0;
    overflow: hidden;
    background: transparent;
}

.accordion summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    outline: none;
}

.accordion summary::-webkit-details-marker {
    display: none;
    /* hide default arrow */
}

/* The yellow badge */
.accordion summary::before {
    content: attr(data-section);
    display: inline-block;
    background: #faff00;
    /* neon yellow */
    color: #000;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0 0 30px 30px;
    position: relative;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Expanded state */
.accordion[open] summary::before {
    border-radius: 0 0 30px 30px;
}

/* Container inside the accordion */
.accordion .fields-container {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 0, 0.4);
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
    /* optional, fixiert die Höhe */
}

/* ================================
  SlimSelect Stylings
================================ */
.ss-main {
    border: 0px solid var(--ss-border-color) !important;
    background-color: var(--ink) !important;
    transition: background-color var(--ss-animation-timing);
    border-radius: 200px !important;
    color: #fafafafa !important;

    &[aria-expanded="true"] {
        border-radius: 200px 200px 0 0 !important;
    }
}

.ss-content {
    background: var(--ink) !important;
    border: none !important;
    border-radius: 0 0 25px 25px !important;

    .ss-list {
        background: var(--ink) !important;
        border: none !important;
        border-radius: 25px !important;
        padding: 10px !important;

        .ss-option {
            color: var(--light) !important;
        }

    }

    .ss-search {
        display: none !important;

    }
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
    background: white !important;
    border-radius: 25px;
    padding: 5px 20px;
    color: var(--ink) !important;
}

/* ================================
  🔘 Chips / Toggles (Freckles/Scar Style)
================================ */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

label.chip {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: var(--light);
    position: relative;
    user-select: none;
}

/* das eigentliche Input verstecken */
label.chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* die Toggle-Schiene */
label.chip::before {
    content: "";
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #1a1a1a;
    border: 1px solid #444;
    transition: background .25s, border-color .25s;
    flex-shrink: 0;
}

/* der Toggle-Knopf */
label.chip::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #111;
    border: 2px solid #fff;
    transition: left .25s, background .25s, border-color .25s;
}

/* checked state */
label.chip:has(input[type="checkbox"]:checked)::before {
    background: #faff00;
    border-color: #faff00;
}

label.chip:has(input[type="checkbox"]:checked)::after {
    left: 27px;
    background: #000;
    border-color: #faff00;
}

/* ================================
  📱 Mobile Overrides (from main.css)
================================ */
@media (max-width: 600px) {

    /* alles was nur mobil anders ist */
    #formContainer {
        padding-left: 0;
    }

    #sidebar {
        width: 100% !important;
        height: auto;
        padding: 0;
    }

    #previewContainer {
        position: static;
        width: 100%;
        height: auto;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    #bottomBar {
        max-width: 85vw;

    }

    aside {
        display: none !important;
    }

    #bottomBar textarea[data-id="prompt"] {
        height: 50px;
    }
}


/* PROMPT PREVIEW NEU*/
/* 🔹 Prompt Button */
.prompt-button-wrapper {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.generate-btn {
    padding: 0.8rem 2rem;
    border-radius: 100px;
    border: 1px solid #ECFC07;
    background: transparent;
    color: #ECFC07;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.generate-btn:hover {
    transform: scale(1.05);
}

/* 🔹 Prompt Overlay */
#promptOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    overflow: scroll;
    padding: 50px 0;
}

#promptOverlay.hidden {
    display: none;
}

.prompt-overlay-content {
    background: #1b1d37;
    padding: 2rem;
    border-radius: 20px;
    max-width: 800px;
    width: 90%;
    text-align: center;
    color: #fff;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    position: relative;
}

.prompt-overlay-content h2 {
    margin-bottom: 1rem;
}

.prompt-overlay-content textarea {
    width: 100%;
    height: 250px;
    background: #0E101D;
    color: #fff;
    border: 1px solid #ECFC07;
    border-radius: 10px;
    padding: 1rem;
    font-family: monospace;
    resize: none;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}



/* Preset Cards im Overlay */
.preset-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 1rem 0 2rem;
}

.preset-card {
    background: #0E101D;
    border: 1px solid #ECFC07;
    border-radius: 15px;
    padding: 0.8rem;
    min-width: 120px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
    font-size: 0.9rem;
    color: #fff;
}

.preset-card:hover {
    transform: scale(1.05);
    border-color: #fff700;
}

.preset-card.active {
    background: #ECFC07;
    color: #000;
    font-weight: bold;
}

#bottomBar {
    border: 1px solid yellow
}

#bottomBarcloseBtn {
    color: yellow;
    background: transparent;
    border: none;
    font-size: 31px;
}

/* ==================================================================
   APPENDED: mobile.css (placed at the very end so these overrides win)
================================================================== */
/* MOBILE LAYOUT OVERRIDES
   - Stack everything
   - Prevent overflow
   - Avoid redundant colors/backgrounds (kept transparent)
   - Keep styles minimal; rely on main.css for visuals
*/

/* Ultra-small screens */
@media (max-width: 600px) {

    #formContainer {
        display: flex;
        width: max-content;
        min-width: 250px;
        flex-direction: column;
        gap: 10px;
        padding: 0px;
        margin-bottom: 12px;
        border-radius: 0;
        justify-content: flex-start;
        height: 100%;
        width: 100%;
        border-left: 0px solid #5a5a5a;
        padding-left: 0;
    }

    summary {
        width: 100vw;
    }

    #formContainer summary+.fields-container>div {
        width: 100%;
    }

    #formContainer .accordion .field {
        width: 100%;
    }

    #overlayCopyBtn {
        background: yellow;
        border-radius: 100px;
        width: 100%;
        margin-top: 10px;
    }

    #overlayCopyBtn > span{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        padding: 10px;
    }

 

    /* --- universal overflow safety --- */

    *,
    *::before,
    *::after {
        max-width: 100%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    img,
    svg,
    video,
    canvas,
    iframe {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Flex children must be allowed to shrink to avoid overflow */
    .wrapper>*,
    .main-wrapper>*,
    main>* {
        min-width: 0;
    }

    /* --- header & nav --- */
    header {
        padding: 16px 20px;
        gap: 12px;
    }

    .logo-wrapper {
        width: 100px;
    }

    .nav-wrapper {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        display: none;
    }

    nav {
        padding-left: 0;
        gap: 16px;
        flex-wrap: wrap;
        width: 100%;
    }

    .nav-wrapper a {
        font-size: 16px;
    }

    #subheader {
        flex-wrap: wrap;
        gap: 10px;
    }

    #subheader .actions {
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    header .actions button {
        width: 31%;
        padding: 9px 5px;
        border-radius: 45px;
        color: #fff;
        border: 1px solid #845e99;
        background: #f6a0ff33;
    }

    header .actions button:hover {
        padding: 9px 5px;
        border-radius: 45px;
        color: #fff;
        border: 1px solid #845e99;
        background: #f6a0ff33;
        transform: scale(1.05);
    }

    /* --- info bar --- */
    .info-container {
        width: calc(100% - 130px) !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 6px;
        margin-left: 0;
    }

    /* --- outer wrappers --- */
    .wrapper {
        width: 100% !important;
        flex-direction: column !important;
        gap: 16px;
    }

    .main-wrapper {
        width: 100% !important;
        gap: 16px;
        padding: 0;
        flex-direction: column;
    }

    main {
        width: 100%;
        gap: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .app-wrapper {
        padding: 0;
    }

    /* app container height should not force overflow */
    #appContainer {
        width: 100%;
        padding: 20px;
        height: auto;
        min-height: 0;
    }

    /* --- sidebar & preview --- */
    #sidebar {
        width: 100% !important;
        height: auto;
        padding: 0;
    }

    #previewContainer {
        position: static;
        /* disable sticky on mobile to avoid overlap */
        width: 100%;
        height: auto;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    #promptPreview {
        width: 100%;
        min-height: 300px;
        /* responsive minimum */
        border-width: 1px;
        /* keep existing tone, no extra colors */
    }

           #overlayCopyBtn svg {
               max-width: 30px !important;
           }

    /* --- tabs --- */
    .tabs {
        position: static;
        width: 100%;
        border-right: none;
        gap: 0px;
        height: auto;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .tab {
        width: fit-content;
        padding: 10px 4px;
        font-size: 15px;
    }

    .tab.active {
        padding: 10px 4px;
    }

    .tab.active::after,
    .tab:hover:not(.active)::after {
        display: none;
        /* remove decorative line to prevent overflow */
    }

    /* --- form --- */
    #formContainer {
        width: 100% !important;
        min-width: 0;
        gap: 8px;
        margin-bottom: 12px;
    }

    .field {
        gap: 10px;
        margin-bottom: 14px;
    }

    #formContainer .field textarea {
        min-height: 160px;
        /* allow comfortable typing without forcing page height */
    }

    select,
    input[type="text"],
    textarea {
        width: 100%;
        /* keep backgrounds transparent; borders are defined in main.css */
    }

    /* --- chips --- */
    .chips {
        gap: 10px;
    }

    label.chip {
        /* keep transparent; ensure no overflow from absolute knob */
        padding: 6px 8px;
    }

    /* --- accordion --- */
    .accordion summary {
        padding: 14px 0 !important;
    }

    /* --- popup --- */
    .popup {
        position: fixed;
        /* keep it inside viewport */
        top: auto;
        bottom: 20px;
        left: 10px;
        right: 10px;
        padding: 16px;
        box-shadow: none;
        /* rely on main.css visuals */
    }

    /* --- misc layout fixes --- */
    #previewContainer,
    #sidebar,
    #formContainer,
    .tabs,
    .tab,
    .chips,
    .accordion,
    .nav-wrapper,
    nav,
    header,
    main,
    .main-wrapper,
    .wrapper {
        background: transparent !important;
        /* avoid duplicate color/bg */
    }

    /* data-id prompt area—avoid forcing viewport overflow */
    div:has([data-id="prompt"]) {
        height: auto;
    }

    [data-id="prompt"] {
        min-height: 0;
    }

    #sidebar #sidebarToggle {
        display: none;
    }

    #tabsContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    #tabsContainer .tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #tabsContainer .tab span {
        display: none;
    }

    /* --- custom horizontal scroll indicator for mobile tabs --- */
    .tabs-wrapper {
        position: relative;
        width: 100%;
    }

    /* hide native scrollbar */
    #tabsContainer {
        overflow-x: auto;
        scrollbar-width: none;
        /* Firefox */
    }

    #tabsContainer::-webkit-scrollbar {
        display: none;
        /* Chrome / Safari */
    }

    /* custom scrollbar track */
    .scrollbar {
        position: relative;
        height: 2px;
        display: none;
        background: #000;
        border-radius: 2px;
        margin-top: 6px;
    }

    /* draggable knob */
    .scrollbar .thumb {
        position: absolute;
        top: -3px;
        left: 0;
        width: 35px;
        height: 9px;
        background: #dda9df;
        border-radius: 100px;
        cursor: grab;
        transition: background 0.2s;
    }

    .scrollbar .thumb:active {
        cursor: grabbing;
        background: #222;
    }


    #bottomBar {
        max-width: 85vw;
    }

    #importBtn,
    #exportBtn {
        display: none;
    }

    #bottomBar {
        label {
            font-size: 12px;
        }

        #status {
            display: none;
        }
    }

    #bottomBar textarea[data-id="prompt"] {
        height: 50px;
    }

    #copyBtn {
        width: fit-content !important;
        min-width: 1px;

        span {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
            font-size: 0px;
            width: fit-content !important;

            svg {
                height: 20px;
                width: 20px;
            }
        }

    }
}

/* ================================
   💻 Desktop Layer (ab 1024px)
   -> ans Ende der Datei!
================================ */
@media (min-width: 1024px) {

    body {
        padding: 50px;
        height: auto;
    }

    header {
        .logo-wrapper {
            .logo {
                width: 100px;
            }
        }
    }

    /* Layout-Grundgerüst */
    .wrapper {
        flex-direction: row;
        gap: 50px;
    }

    .main-wrapper {
        flex-wrap: wrap;
        gap: 50px;
    }

    main {
        align-items: stretch;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* Sidebar dauerhaft sichtbar + Toggle */
    #sidebar {
        height: 100vh;
        padding: 30px 15px;
        width: 280px;
        display: none;
    }

    #sidebar #sidebarToggle {
        display: flex;
        justify-content: center;
        width: 60px;
        font-size: 37px;
        transform: rotate(-180deg);
    }

    #sidebar.collapsed #sidebarToggle {
        transform: rotate(0deg);
    }

    /* Tabs: Spalte statt Reihe */
    #tabsContainer {
        flex-direction: column;
        overflow: visible;
    }

    .tabs {
        flex-direction: column;
        gap: 10px;
    }

    .tab {
        font-size: 18px;
        padding: 7px 20px;
        width: max-content;
    }

    /* Inhalt */
    #appContainer {
        padding: 50px 50px 50px 15px;
        height: fit-content;
        align-items: flex-start;
    }

    #formContainer {
        padding-left: 50px;
        max-width: 100%;
        display: flex;
    }

    /* Preview rechts als Drawer */
    #previewContainer {
        position: fixed;
        top: 50%;
        right: -320px;
        width: 360px;
        height: 60vh;
        transform: translateY(-50%);
        padding: 20px;
        border-radius: 25px 0 0 25px;
        background: #2a2d35;
        border-left: 1px solid #ccc;
        box-shadow: 0 0 76px #000;
        transition: right .3s ease;
    }

    #previewContainer #promptPreview {
        min-height: 500px;
    }

    #previewContainer::before {
        content: "Preview";
        position: absolute;
        top: 50%;
        left: -50px;
        transform: translateY(-50%) rotate(-90deg);
        background: #845e99;
        color: #fff;
        font-size: 14px;
        padding: 6px 10px;
        border-radius: 6px 6px 0 0;
        white-space: nowrap;
    }

    .preview-badge, .preset-select, .actions {
        display: none;
    }

    #previewContainer.active {
        right: 0;
    }

    /* Nav & Subheader */
    .nav-wrapper {
        display: flex;
        gap: 30px;
    }

    
    nav {
        gap: 50px;
        padding-left: 50px;
    }

    .nav-wrapper a {
        font-size: 20px;
    }

    .info-container {
        margin-left: auto;
        width: fit-content;
        flex-wrap: nowrap;
    }

    /* Bottom Bar großzügiger */
    #bottomBar {
        max-width: 1000px;
    }

    #bottomBar textarea[data-id="prompt"] {
        height: 90px;
    }

    #importBtn,
    #exportBtn {
        display: inline-flex;
    }

    #bottomBar #status {
        display: inline;
    }

    /* Desktop-only Sichtbarkeit */
    aside {
        display: block !important;
    }

    #tabsOverview {
        width: 100%;
        max-width: 100%;

        & .tab-group {
            width: calc(50% - 10px);

            & .tab-cards {
                & .tab-card {
                    & span {
                        font-size: 18px;
                    }
                }
            }
        }
    }
        .generate-btn {
            height: 50px;
        }
}