/* ============================================================
   BUILDER WORKSPACE — app-shell redesign for the Studio Builder
   Loads after widget-builder.css and overrides its 3-column
   "webpage panels" layout with a Figma/Photoshop-style app:
   toolbar, icon rail, canvas, tabbed inspector. widget-builder.js
   is untouched — every id/class it depends on (#wbStage, #wbProps,
   .wb-pal, .wb-chip, etc.) still exists, just re-homed and restyled.
   ============================================================ */

.bd-editor { display: flex; flex-direction: column; height: 100%; }
.bd-editor[hidden] { display: none; }

/* ─── Toolbar ─── */
.bd-toolbar { flex-shrink: 0; gap: 0.6rem; }
.bd-toolbar__group { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.4rem; }
.bd-toolbar__btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    padding: 0.4rem 0.75rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.bd-toolbar__btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.bd-toolbar__btn.wb-btn--primary { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }

.bd-filemenu { position: relative; }
.bd-filemenu__panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
    width: 260px; background: #1B1916; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 0.9rem; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.bd-filemenu__panel[hidden] { display: none; }
.bd-filemenu__label { display: block; font-family: var(--st-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 0.4rem; }
.bd-filemenu__row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.bd-filemenu__row .wb-btn { flex: 1; }
.bd-filemenu .wb-btn--primary { width: 100%; margin-top: 0.6rem; }

.bd-toolbar__help {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
}
.bd-toolbar__help:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ─── Workspace grid ─── */
.bd-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 68px 1fr 300px; }

/* ─── Left rail — icon palette, no panel chrome ─── */
.bd-rail {
    background: #1B1916; border-right: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto; padding: 0.6rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.bd-railbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    width: 100%; aspect-ratio: 1; padding: 0.3rem; border-radius: 10px;
    background: transparent; border: 1px solid transparent; color: #E8E2D8; cursor: grab;
    font: 500 0.58rem var(--font-body); touch-action: none; transition: background 0.12s ease, border-color 0.12s ease;
}
.bd-railbtn:hover { background: rgba(255,77,20,0.14); border-color: var(--clr-red); color: #fff; }
.bd-railbtn:active { cursor: grabbing; }
.bd-railicon { display: block; width: 18px; height: 18px; position: relative; }
.bd-railicon--label::before { content: 'T'; font: 700 13px var(--font-body); }
.bd-railicon--bar { border-radius: 2px; background: currentColor; width: 16px; height: 6px; margin-top: 6px; }
.bd-railicon--arc { border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-45deg); }
.bd-railicon--led { border-radius: 50%; background: currentColor; width: 10px; height: 10px; margin: 4px auto; }
.bd-railicon--panel { border-radius: 3px; border: 2px solid currentColor; width: 16px; height: 12px; margin-top: 3px; }
.bd-railicon--line { border-top: 2px solid currentColor; width: 16px; margin-top: 8px; transform: rotate(-20deg); }
.bd-railicon--img { border-radius: 3px; border: 2px dashed currentColor; width: 14px; height: 14px; margin: 2px auto; }
.bd-railicon--qr { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; width: 14px; height: 14px; margin: 2px auto; }
.bd-railicon--qr span { background: currentColor; }
.bd-railicon--qr span:nth-child(2), .bd-railicon--qr span:nth-child(4), .bd-railicon--qr span:nth-child(6), .bd-railicon--qr span:nth-child(8) { background: transparent; }
.bd-railicon--btn { border-radius: 4px; border: 2px solid currentColor; width: 16px; height: 10px; margin-top: 4px; }
.bd-railicon--toggle { border-radius: 20px; background: currentColor; width: 18px; height: 9px; position: relative; margin-top: 4px; }
.bd-railicon--toggle::after { content: ''; position: absolute; top: 1.5px; right: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: #1B1916; }
.bd-railicon--slider { width: 18px; height: 3px; background: currentColor; border-radius: 2px; margin-top: 8px; position: relative; }
.bd-railicon--slider::after { content: ''; position: absolute; left: 65%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bd-railbtn__label { font-size: 0.56rem; letter-spacing: 0.01em; opacity: 0.85; }

/* ─── Canvas — infinite-canvas feel ─── */
.bd-canvas {
    --wb-scale: 2;
    background:
        radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0/22px 22px,
        #0e0c0b;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
    overflow: auto; padding: 2rem;
}
.bd-canvas .wb-device__label { margin-top: 0.5rem; }
@media (max-width: 900px)  { .bd-canvas { --wb-scale: 1.5; } }
@media (max-width: 460px)  { .bd-canvas { --wb-scale: 1.25; } }
@media (max-width: 380px)  { .bd-canvas { --wb-scale: 1.1; } }

/* ─── Right panel — tabbed inspector, no stacked sub-panels ─── */
.bd-rightpanel {
    background: #1B1916; border-left: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column; min-height: 0;
}
.bd-tabs { flex-shrink: 0; display: flex; border-bottom: 1px solid rgba(255,255,255,0.07); }
.bd-tab {
    flex: 1; font-family: var(--font-body); font-size: 0.76rem; font-weight: 600; color: rgba(255,255,255,0.4);
    background: none; border: none; padding: 0.75rem 0.5rem; cursor: pointer; position: relative;
    transition: color 0.15s ease;
}
.bd-tab:hover { color: rgba(255,255,255,0.7); }
.bd-tab.is-active { color: #fff; }
.bd-tab.is-active::after { content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: -1px; height: 2px; background: var(--clr-red); border-radius: 2px 2px 0 0; }
.bd-tabpanel { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.1rem; }
.bd-tabpanel[hidden] { display: none; }
.bd-subhead {
    font-family: var(--st-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    color: rgba(255,255,255,0.4); margin: 1.1rem 0 0.6rem;
}
.bd-tabpanel > .wb-hint:first-child, .bd-tabpanel > .bd-subhead:first-child { margin-top: 0; }
.bd-subhead-row { display: flex; align-items: center; justify-content: space-between; margin: 1.1rem 0 0.6rem; }
.bd-subhead-row .bd-subhead { margin: 0; }

/* ─── Help modal (install steps, out of the main flow) ─── */
.bd-help {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.bd-help[hidden] { display: none; }
.bd-help__panel {
    background: #1B1916; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    max-width: 620px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 1.8rem 2rem;
}
.bd-help__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.bd-help__head h3 { font-family: var(--font-logo, 'Arial Black', sans-serif); color: #fff; font-size: 1.3rem; letter-spacing: -0.02em; margin: 0; }
.bd-help__close {
    width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,0.08); color: #fff;
    font-size: 1.1rem; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.bd-help .wb-install__steps { grid-template-columns: 1fr; margin: 0; }
.bd-help .wb-install__docs { margin-top: 1rem; margin-bottom: 0; }

/* ─── Responsive ─── */
@media (max-width: 1080px) {
    .bd-workspace { grid-template-columns: 60px 1fr 260px; }
}
@media (max-width: 760px) {
    .bd-workspace { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    .bd-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
    .bd-railbtn { width: 56px; flex-shrink: 0; }
    .bd-rightpanel { border-left: none; border-top: 1px solid rgba(255,255,255,0.07); max-height: 46vh; }
    .bd-toolbar__group { margin-left: 0; }
    .bd-toolbar__meta { display: none; }
    .bd-filemenu__panel { left: auto; right: 0; }
}

/* ===== LIGHT MODE (html.pb-light) ===== */
html.pb-light .bd-toolbar { background: #FFFFFF; }
html.pb-light .bd-toolbar__btn { color: rgba(0,0,0,0.7); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
html.pb-light .bd-toolbar__btn:hover { background: rgba(0,0,0,0.09); color: #000; }
html.pb-light .bd-toolbar__btn.wb-btn--primary { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
html.pb-light .bd-filemenu__panel { background: #FFFFFF; border-color: rgba(0,0,0,0.12); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
html.pb-light .bd-filemenu__label { color: rgba(0,0,0,0.45); }
html.pb-light .bd-toolbar__help { background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.12); }
html.pb-light .bd-toolbar__help:hover { color: #000; background: rgba(0,0,0,0.09); }
html.pb-light .bd-rail { background: #EDEAE3; border-right-color: rgba(0,0,0,0.08); }
html.pb-light .bd-railbtn { color: #4a453e; }
html.pb-light .bd-railbtn:hover { background: rgba(255,77,20,0.12); border-color: var(--clr-red); color: #000; }
html.pb-light .bd-railicon--toggle::after { background: #EDEAE3; }
html.pb-light .bd-canvas {
    background: radial-gradient(circle, rgba(0,0,0,0.09) 1px, transparent 1px) 0 0/22px 22px, #E7E3DB;
}
html.pb-light .bd-rightpanel { background: #FFFFFF; border-left-color: rgba(0,0,0,0.08); }
html.pb-light .bd-tabs { border-bottom-color: rgba(0,0,0,0.08); }
html.pb-light .bd-tab { color: rgba(0,0,0,0.45); }
html.pb-light .bd-tab:hover { color: rgba(0,0,0,0.7); }
html.pb-light .bd-tab.is-active { color: #1d1d1f; }
html.pb-light .bd-subhead { color: rgba(0,0,0,0.45); }
html.pb-light .bd-help { background: rgba(0,0,0,0.4); }
html.pb-light .bd-help__panel { background: #FFFFFF; border-color: rgba(0,0,0,0.12); }
html.pb-light .bd-help__head h3 { color: #1d1d1f; }
html.pb-light .bd-help__close { background: rgba(0,0,0,0.06); color: #1d1d1f; }