/* ==========================================================================
   STUDIO KREATIV (components/dashboard/Studio, StudioEditor)
   ==========================================================================
   Stejné stavební kameny jako zbytek přehledu (.panel, .btn, .form-input)
   a proměnné z acc.css - žádné nové barvy ani radiusy.

   Dvě stránky: seznam (.studio-*) a editor (.stu-*). Zkratka je jiná
   schválně - v editoru je tříd hodně a delší prefix by je nafoukl.
   ========================================================================== */

/* ========================================================================
   SEZNAM KREATIV
   ======================================================================== */

.page-header-akce {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-prazdno {
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

.studio-prazdno p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.studio-novy {
    padding: 20px;
    margin-bottom: 24px;
}

.studio-novy-nadpis {
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--text);
}

.studio-formaty {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.studio-format {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px;
    border: unset;
    outline: 0 solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
}

.studio-format:hover {
    outline-width: 2px;
}

.studio-format.active {
    outline-width: 2px;
    outline-color: var(--primary);
    background: var(--primary-light);
}

.studio-format-container {
    padding: 16px;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Náhled poměru stran. Říká o formátu víc než dvě čísla vedle sebe. */
.studio-format-tvar {
    outline: 2px solid var(--border);
    border: 2px solid white;
    border-radius: var(--radius-sm);
    background: var(--text-muted);
}

.studio-format-nazev {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.studio-format-rozmer {
    font-size: 11px;
    color: var(--text-muted);
}

.studio-novy-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.studio-novy-akce .form-input {
    flex: 1;
    min-width: 200px;
}

/* Výběr pozadí z řady - stejná dlaždicová logika jako .studio-format. */
.studio-rady-vyber {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.studio-pozadi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 90px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    cursor: pointer;
}

.studio-pozadi:hover {
    border-color: var(--primary);
}

.studio-pozadi.active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.studio-pozadi img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Zástupná ikona za chybějící náhled - použitá i v panelu Řad (series.css),
   proto není zavěšená jen pod .studio-pozadi. */
.studio-pozadi-prazdny {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

.studio-pozadi-nazev {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.studio-grid-container {
    position: relative;
}

.studio-mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.studio-dlazdice {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}

.studio-nahled {
    display: block;
    position: relative;
    width: 100%;
    background: var(--bg-hover);
}

.studio-nahled img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.studio-nahled-prazdny {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    color: var(--text-muted);
    font-size: 12px;
}

.studio-dlazdice-paticka {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}

.studio-dlazdice-texty {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.studio-dlazdice-nazev {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-dlazdice-meta {
    font-size: 11px;
    color: var(--text-muted);
}

/* ---------- sestavit karusel ---------- */

.studio-karusel {
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.studio-karusel-napoveda {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.studio-karusel-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.studio-karusel-polozka {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 84px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.studio-karusel-polozka img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.studio-karusel-polozka-cislo {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.studio-karusel-polozka-posun,
.studio-karusel-polozka-odebrat {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
}

.studio-karusel-polozka-posun:hover,
.studio-karusel-polozka-odebrat:hover {
    color: var(--text);
}

.studio-karusel-polozka-posun:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Číselná značka přes dlaždici v mřížce, dokud je v karuselu vybraná. */
.studio-karusel-znacka {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.studio-highlight-hint {
    position: absolute;
    bottom: calc(100% + 16px);
    display: none;
    min-width: 300px;
}

.highlighted .studio-highlight-hint {
    display: flex;
}

.studio-mrizka--vyber .studio-dlazdice {
    cursor: pointer;
}

.studio-mrizka--vyber .studio-dlazdice:hover {
    border-color: var(--primary);
}

.studio-dlazdice--vybrana {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}


/* ========================================================================
   EDITOR
   ======================================================================== */

.stu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.stu-tabs {
    padding: 12px 8px 0 8px;
    border-bottom: 2px solid var(--bg-hover);
}

.stu-tabs > * {
    border-radius: 8px 8px 0 0;
    padding: 4px 8px 2px 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.stu-tabs > *:hover,
.stu-tabs > .active {
    background: var(--bg-hover);
    cursor: pointer;
}

[data-tab-target] {
    height: 100%;
}


/* ---------- lišta ---------- */

.stu-listy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    position: relative;
}

.stu-nazev {
    width: 220px;
}

.stu-pridat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 10px;
    flex-wrap: wrap;
}

.stu-pridat-popis {
    font-size: 12px;
    color: var(--text-muted);
}

.stu-listy-vpravo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-top-button {
    display: none;
}

.save-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 100;
    background: #ffffff;
}

@media (min-width: 1300px) {
    .save-dropdown {
        padding: 12px 24px;
        box-shadow: var(--shadow-md);
        border-radius: 8px;
        border: 1px solid var(--border);
    }
}

@media (max-width: 1300px) {
    .mobile-top-button {
        display: block;
    }

    .stu-listy-vpravo {
        position: absolute;
        top: 10px;
        right: calc(51px + 14px + 14px);
        background: #ffffff;
        padding: 12px 24px;
        border-radius: 8px;
        z-index: 100;
        box-shadow: var(--shadow-md);
        flex-direction: column;
        align-items: flex-start;
        display: none;
        border: 1px solid var(--border);
    }

    .stu-listy-vpravo.show {
        display: flex;
    }

    .save-dropdown {
        position: static;
    }
}

.stu-stahnout {
    position: relative;
}

.save-dropdown {
    background: #ffffff;
}

.stu-stahnout {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stu-stahnout select {
    width: auto;
    padding: 6px 8px;
    font-size: 13px;
}

/* Prázdný, dokud se něco neděje - trvale svítící "uloženo" si nikdo nevšimne. */
.stu-stav {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 90px;
    text-align: right;
}

.stu-chyba {
    margin: 0;
}

/* ---------- plánování do kalendáře ---------- */

.stu-planovani[hidden] {
    display: none;
}

.stu-planovani {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    flex: none;
}

.stu-planovani-radek {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.stu-site {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stu-sit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 13px;
    cursor: pointer;
}

.stu-sit:has(input:checked) {
    border-color: var(--prop-barva, var(--primary));
    color: var(--prop-barva, var(--primary));
    background: color-mix(in srgb, var(--prop-barva, var(--primary)) 10%, transparent);
}

/* Obal sítě - jedna pilulka (jediný připojený účet), nebo jedna pilulka NA
   KAŽDÝ účet vedle sebe (víc připojených na jednu síť - viz
   post-account-picker.js). Vlastní flex řádek uvnitř toho vnějšího
   (.stu-site), ať se pilulky stejné sítě nerozhodí mezi ostatní sítě, i
   když se zabalí na další řádek. */
.stu-sit-skupina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.stu-planovani-akce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 0;
}

.stu-planovani-stav {
    font-size: 12px;
    color: var(--text-muted);
}

.stu-planovani-hotovo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text);
}

.stu-planovani-poznamka {
    margin: 4px 0 0;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- uložit jako pozadí řady ---------- */

.stu-pozadi-volba[hidden] {
    display: none;
}

.stu-pozadi-volba {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    flex: none;
}

.stu-pozadi-volba-radek {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.stu-pozadi-volba-radek .stu-pole {
    min-width: 220px;
}

.stu-pozadi-volba-akce {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 0;
}

.stu-pozadi-volba-stav {
    font-size: 12px;
    color: var(--text-muted);
}

/* ---------- tři sloupce ---------- */

.stu-telo {
    display: grid;
    grid-template-columns: 50px 1fr 450px;
    gap: 12px;
    flex: 1;
    min-height: 0; /* bez tohohle grid neposlechne a sloupce přetečou ven */
}

.stu-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}


.stu-tool {
    position: relative;
}

.stu-tool .icon {
    font-size: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

.stu-tool:hover .icon {
    background: var(--border);
    cursor: pointer;
}

.stu-tool .tooltip {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    background: #ffffff;
    padding: 8px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    display: none;
    pointer-events: none;
}

.stu-tool:hover .tooltip {
    display: block;
}

.stu-vlevo::before {
    display: none;
}
.stu-vlevo {
    overflow: unset !important;
    overflow-y: auto;
    overflow-x: visible;

    border-radius: var(--radius-md);
    gap: 4px;
    padding: 4px;
}

.stu-vpravo {
    overflow-y: auto;
}

.stu-sekce {
    border-bottom: 1px solid var(--border);
}

.stu-sekce-nadpis {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.stu-napoveda {
    margin: 0;
    padding: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ---------- seznam vrstev ---------- */

.stu-vrstvy {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stu-vrstva-radek {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: 13px;
}

.stu-vrstva-radek:hover {
    background: var(--bg-hover);
}

.stu-vrstva-radek.active {
    background: var(--primary-light);
    box-shadow: inset 3px 0 0 var(--primary);
}

.stu-ikona {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
}

.stu-ikona.vypnuto {
    opacity: 0.4;
}

.stu-ikona:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Šipky pro přeskládání vrstev přímo v seznamu - viz vykreslitSeznamVrstev()
   v assets/js/creative-studio.js. */
.stu-vrstva-poradi {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.stu-vrstva-poradi .stu-ikona {
    font-size: 9px;
    color: var(--text-muted);
}

.stu-vrstva-popis {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

.stu-vrstva-typ {
    font-size: 11px;
    color: var(--text-muted);
}

/* Krytí 0 % = vrstva je na plátně naprosto neviditelná, bez ohledu na text/
   barvu/písmo (viz vykreslitVarovaniKryti() v creative-studio.js) - nejčastější
   past za "proč se mi to nezobrazuje". Stejná barevná řeč jako .prop-znacka-chyba
   jinde v appce (červená = "tohle nefunguje, dokud to neopravíte"). */
.stu-varovani-kryti {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px;
    padding: 4px 6px 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--error);
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    white-space: nowrap;
}

/* V seznamu vrstev (bez opravného tlačítka) je to jen malý odznak vedle
   názvu, ne celý pruh přes šířku sloupce jako v inspektoru. */
.stu-vrstva-popis .stu-varovani-kryti {
    margin: 0 0 0 6px;
    padding: 1px 6px;
    font-size: 10px;
}

/* ---------- knihovna obrázků ---------- */

.stu-knihovna {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px 12px;
}

.stu-knihovna-dlazdice {
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    cursor: pointer;
}

.stu-knihovna-dlazdice:hover {
    border-color: var(--primary);
}

.stu-knihovna-dlazdice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Náhled se nepodařilo načíst (viz vykreslitKnihovnu() v creative-studio.js) -
   skrýt rozbitou ikonku prohlížeče a dát najevo, že dlaždice není prázdná
   záměrně, ale chybí jí obsah. */
.stu-knihovna-dlazdice--chybi {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--error-border);
    background: var(--error-bg);
}

.stu-knihovna-dlazdice--chybi img {
    display: none;
}

.stu-knihovna-dlazdice--chybi::after {
    content: '⚠';
    color: var(--error);
    font-size: 16px;
}

.stu-nahrat {
    cursor: pointer;
}

/* ---------- scéna a plátno ---------- */

.stu-scena {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 0;
    /* Šachovnice pod plátnem - hranice kreativy pak není potřeba nijak
       zvýrazňovat, je vidět sama. */
    background: repeating-conic-gradient(var(--bg-hover) 0% 25%, var(--bg-card) 0% 50%) 50% / 20px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
    padding: 16px;
}

/* Obal má rozměry PO zmenšení, plátno uvnitř rozměry dokumentu. Díky tomu
   zůstávají souřadnice vrstev v pixelech dokumentu a nikde se nepřepočítávají
   - úplně stejně jako na serveru, kde měřítko škáluje geometrii, ale nikdy
   sazbu. */
.stu-platno-obal {
    position: relative;
    flex: none;
    box-shadow: var(--shadow-lg);
}

.stu-platno {
    position: relative;
    transform-origin: top left;
    overflow: hidden;
}

.stu-vrstva {
    position: absolute;
    box-sizing: border-box; /* rámeček roste DOVNITŘ, stejně jako na serveru */
}

.stu-vrstva--bez-obrazku {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--error);
    background: var(--error-bg);
}

.stu-obrazek-chybi {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--error);
    text-align: center;
}

.stu-obrazek {
    display: block;
    width: 100%;
    height: 100%;
}

.stu-prekryv {
    position: absolute;
    inset: 0;
}

/* Text: blok se posouvá o `top` od serveru, každý řádek má pevnou výšku
   řádkového boxu. Glyfy v něm usadí prohlížeč podle metrik PÍSMA - tedy
   stejných, ze kterých počítá účaří renderer nad týmž .ttf souborem. */
.stu-text-blok {
    position: absolute;
    left: 0;
    right: 0;
}

.stu-radek {
    white-space: pre;
    overflow: visible;
}

/* Optimistický mezistav, než doběhne měření na serveru. */
.stu-text--odhad {
    opacity: 0.75;
}

.stu-napis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    white-space: pre;
}

/* ---------- výběr ---------- */

/* Rámeček je MIMO zmenšované plátno: kdyby byl uvnitř, zmenšily by se s ním
   i úchyty a při měřítku 0,3 by se do nich nedalo trefit.

   Sám nechytá myš (pointer-events: none) - jinak by překryl vybranou vrstvu
   a kliknutí doprostřed by nešlo do plátna, takže by se nedala vybrat vrstva
   ležící pod ním. Chytají jen úchyty. */
.stu-vyber {
    position: absolute;
    border: 1px solid var(--primary);
    pointer-events: none;
}

.stu-uchyt {
    position: absolute;
    pointer-events: auto;
    width: 10px;
    height: 10px;
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 2px;
}

.stu-uchyt--nw {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.stu-uchyt--n {
    top: -5px;
    left: calc(50% - 5px);
    cursor: ns-resize;
}

.stu-uchyt--ne {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.stu-uchyt--e {
    top: calc(50% - 5px);
    right: -5px;
    cursor: ew-resize;
}

.stu-uchyt--se {
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize;
}

.stu-uchyt--s {
    bottom: -5px;
    left: calc(50% - 5px);
    cursor: ns-resize;
}

.stu-uchyt--sw {
    bottom: -5px;
    left: -5px;
    cursor: nesw-resize;
}

.stu-uchyt--w {
    top: calc(50% - 5px);
    left: -5px;
    cursor: ew-resize;
}

/* ---------- překryv skutečným renderem ---------- */

.stu-truth {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stu-scena-listy {
    display: flex;
    justify-content: center;
    flex: none;
}

/* Vlastní `display` přebíjí to, co atribut `hidden` dělá sám od sebe -
   bez tohohle by byl ovládací pruh vidět pořád. Týká se každého prvku,
   který má v CSS display a v HTML hidden. */
.stu-truth-ovladani[hidden],
.stu-pole[hidden],
.studio-novy[hidden] {
    display: none;
}

.stu-truth-ovladani {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    font-size: 12px;
    color: var(--text-secondary);
}

.stu-truth-rozdil {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---------- asistent (AI) ----------
   Přes celou šířku editoru, přišpendlený dole (jako Claude/Gemini) - ne
   schovaný pod dlouhým panelem vlastností v úzkém pravém sloupci. Vstupní
   řádek (.stu-ai-vstup) je vidět VŽDYCKY; historii jde sbalit tlačítkem
   "Sbalit" (viz .stu-ai--sbaleno a assets/js/creative-ai.js), ať si
   nevytlačí plátno, jakmile konverzace naroste. */

.stu-ai {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.stu-ai-hlava {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.stu-ai-sbalit {
    margin-left: auto;
}

.stu-ai-cena {
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    padding: 4px 12px;
    color: var(--text-muted);
}

.stu-ai-vypis {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
}

/* Sbalený stav: historie i rozpracovaný návrh zmizí, zůstane jen hlavička
   a vstupní řádek - přesně to malé "políčko dole", které chtěl uživatel. */
.stu-ai--sbaleno .stu-ai-vypis,
.stu-ai--sbaleno .stu-ai-navrh {
    display: none;
}

.stu-ai-zprava {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 92%;
}

.stu-ai-zprava--ja {
    border-radius: var(--radius-md) var(--radius-md) 0 var(--radius-md);
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
}

.stu-ai-zprava--ai {
    border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 0;
    align-self: flex-start;
    background: var(--bg-hover);
    color: var(--text);
}

.stu-ai-zprava--chyba {
    background: var(--error-bg);
    color: var(--error);
}

.stu-ai-navrh[hidden] {
    display: none;
}

.stu-ai-navrh {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--primary-light);
}

.stu-ai-shrnuti {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.stu-ai-navrh-akce {
    display: flex;
    gap: 8px;
}

.stu-ai-rychle {
    display: flex;
    gap: 6px;
    padding: 0 12px 8px 12px;
    align-items: center;
    color: var(--text-secondary);
}

.stu-ai-vstup {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 10px 12px 0 12px;
    border-top: 1px solid var(--border);
}

.stu-ai-vstup textarea {
    flex: 1;
    resize: none;
    min-height: 44px;
}

.stu-ai-vstup button {
    margin-bottom: 10px;
}

/* ---------- inspektor ---------- */

.stu-inspektor-hlava {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--text);
}

.stu-poradi {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

/* Mřížka vlastností - krátká pole (X, Y, číslo, zaškrtávátko, dropdown) dvě
   vedle sebe, dlouhá (text, barva, písmo, obrázek) přes celou šířku. Které
   je které rozhoduje CSS podle .stu-pole--<typ>, co dal na štítek
   vykreslitPole() (assets/js/creative-studio.js) - tam se nic nerozhoduje. */
.stu-inspektor-mrizka {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
    padding: 6px 12px 14px;
}

.stu-pole {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* jinak grid sloupec nejde zúžit pod obsah (dlouhý select) */
}

.stu-pole--textarea,
.stu-pole--text,
.stu-pole--font,
.stu-pole--asset,
.stu-pole--color {
    grid-column: 1 / -1;
}

.stu-pole-popisek {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.stu-pole .form-input {
    width: 100%;
}

.stu-pole--bool {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Barva: tokeny stylu první, volný výběr až za nimi. Díky tokenům stačí
   u celé řady přepsat jednu barvu místo dvaceti vrstev. */
.stu-barva {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stu-barva-token {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.stu-barva-token.active {
    border-color: var(--text);
}

.stu-barva-vlastni {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.stu-pismo {
    display: flex;
    gap: 6px;
}

.stu-pismo select {
    flex: 1;
    min-width: 0;
}

/* ---------- úzká obrazovka ---------- */

@media (max-width: 1100px) {
    /* Tři sloupce vedle sebe nedávají pod 1100 px smysl - panely jdou pod
       plátno a scéna dostane pevnou výšku, aby se na ni pořád vešla. */
    .stu-telo {
        grid-template-columns: 50px 1fr 350px;
    }
}

.studio-editor-main {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 12px;
    margin: unset;
    max-width: unset;
}