/* ==========================================================================
   OLE DYO Creator Widget — host page styling
   --------------------------------------------------------------------------
   Defines two layout patterns on `#OLE-container`:
     .layout-left-right   — canvas left (39%, sticky), creator right (61%)
     .layout-top-bottom   — canvas top (full-width, 400px), creator below
   The third widget-config layout value (`charms`) shares iframe positioning
   with `top_bottom`, so charms widgets render under .layout-top-bottom — no
   separate `.layout-charms` rule is needed.
   The runtime layout class is set by the inline IIFE in creator.html and
   overridden by the iframe's LAYOUT_CONFIG postMessage handler.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

#OLE-container {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   LAYOUT: LEFT-RIGHT (default)
   ========================================================================== */
@media screen and (min-width: 768px) {
    #OLE-container.layout-left-right {
        flex-direction: row;
        gap: 1%;
        align-items: flex-start;
    }
    .layout-left-right #canvas-container {
        display: -webkit-flex;
        display: flex;
        flex: 0 0 39%;
        width: 39%;
        position: sticky;
        top: 0;
        height: 450px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        align-self: flex-start;
    }
    .layout-left-right #model-container {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-left-right #creator-container {
        flex: 1;
        width: 60%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }
    .layout-left-right #creator-page {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1100px;
    }
}

/* 1024–1221: previously fell through to `min-height: 100vh`, which paired with
   the iframe's `overflow: hidden` clipped the bottom of the kira stacked form
   (NEXT/TOTAL unreachable). Match the tablet height so content fits and the
   parent page handles vertical scroll. */
@media screen and (min-width: 1024px) and (max-width: 1221.98px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1100px;
    }
}

@media screen and (min-width: 1222px) {
    .layout-left-right #creator-container,
    .layout-left-right #creator-page {
        min-height: 1100px;
    }
}

@media screen and (max-width: 767.98px) {
    #OLE-container.layout-left-right {
        flex-direction: column;
    }
    .layout-left-right #canvas-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 280px;
        max-height: inherit;
        margin: 0;
        padding: 0;
        display: flex;
        z-index: 100;
        background: #fff;
    }
    .layout-left-right #model-container {
        width: 100%;
        height: 270px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-left-right #creator-container {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 0;
    }
    .layout-left-right #creator-page {
        width: 100%;
        height: 100%;
        min-height: 1220px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 360px) {
    .layout-left-right #canvas-container {
        height: 256px;
        max-height: 256px;
    }
    .layout-left-right #creator-page {
        min-height: 1300px;
    }
}

/* ==========================================================================
   LAYOUT: TOP-BOTTOM (also used for `charms` widgets — same iframe positioning)
   ========================================================================== */
@media screen and (min-width: 768px) {
    #OLE-container.layout-top-bottom {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
    .layout-top-bottom #canvas-container {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 400px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #model-container {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-top-bottom #creator-container {
        flex: 1;
        width: 100%;
        min-height: 50vh;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #creator-page {
        width: 100%;
        height: 100%;
        min-height: 50vh;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
    .layout-top-bottom #creator-container,
    .layout-top-bottom #creator-page {
        min-height: 550px;
    }
}

@media screen and (min-width: 1222px) {
    .layout-top-bottom #creator-container,
    .layout-top-bottom #creator-page {
        min-height: 500px;
    }
}

@media screen and (max-width: 767.98px) {
    #OLE-container.layout-top-bottom {
        flex-direction: column;
    }
    .layout-top-bottom #canvas-container {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 280px;
        max-height: inherit;
        margin: 0;
        padding: 0;
        display: flex;
        z-index: 100;
        background: #fff;
    }
    .layout-top-bottom #model-container {
        width: 100%;
        height: 270px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .layout-top-bottom #creator-container {
        width: 100%;
        min-height: 50vh;
        margin: 0;
        padding: 0;
    }
    .layout-top-bottom #creator-page {
        width: 100%;
        height: 100%;
        min-height: 700px;
        border: 0;
        display: block;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
}

@media screen and (max-width: 360px) {
    .layout-top-bottom #canvas-container {
        height: 256px;
        max-height: 256px;
    }
    .layout-top-bottom #creator-page {
        min-height: 800px;
    }
}

/* ==========================================================================
   LAYOUT MODIFIER: GB (applied ALONGSIDE .layout-left-right)
   --------------------------------------------------------------------------
   Old GB keeps the stacked (canvas-on-top) layout for the whole tablet band
   and only goes side-by-side at >=1024px, while the shared .layout-left-right
   rules switch at 768px. This modifier — set by creator.blade.php for gb
   widgets and kept in sync by applyLayout() in creator-widget.js — restores
   old GB's switching points for the 768–1023 band without touching kira /
   left_right widgets. Values mirror the old GB host page at these widths:
   canvas full-width 300px (not sticky), creator full-width 950px.
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
    #OLE-container.layout-left-right.layout-gb {
        flex-direction: column;
        gap: 0;
    }
    .layout-left-right.layout-gb #canvas-container {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        height: 300px;
        padding-top: 10px;
    }
    .layout-left-right.layout-gb #creator-container,
    .layout-left-right.layout-gb #creator-page {
        width: 100%;
        min-height: 950px;
    }
}

/* GB canvas geometry — mirrors the old GB host page (test.html / GB CMS).
   Old GB gives #canvas-container width:70% next to a width:100% creator with
   no gap; flex shrink resolves that to 70/170 = 41.18% vs 58.82% (measured
   1048px at a 2560 viewport, 415px at 1024). Height is 500px including a
   10px top padding, so the canvas iframe itself is 490px. */
@media screen and (min-width: 1024px) {
    /* 12px visual gap between canvas and creator card (matches the inset
       inspected on live GB; the host columns themselves touch there, with the
       inset carried by the creator content). Canvas keeps its exact 41.18%,
       so the 12px comes out of the flexible creator column. */
    #OLE-container.layout-left-right.layout-gb {
        gap: 12px;
    }
    .layout-left-right.layout-gb #canvas-container {
        flex: 0 0 41.1765%;
        width: 41.1765%;
        height: 500px;
        padding-top: 10px;
    }
}

/* Old GB mobile canvas is effectively 300px tall: its mobile rule says 256px,
   but the overlapping 320–1023px rule's min-height:300px wins (measured 300 at
   a 375px viewport). Shared .layout-left-right uses 280/270 — override both,
   and lift the shared ≤360px max-height:256px cap old GB doesn't have. */
@media screen and (max-width: 767.98px) {
    .layout-left-right.layout-gb #canvas-container {
        height: 300px;
        max-height: none;
    }
    .layout-left-right.layout-gb #model-container {
        height: 300px;
    }
}