/* Generator 3D — editor layout. Dark editor panels (work in either site theme). */
#mg-section { --mg-bg:#12151b; --mg-panel:#1b1f27; --mg-line:#2c3340; --mg-txt:#e7ebf2; --mg-mut:#9aa3b2; --mg-acc:#3aa831; }
#mg-section .container-fluid { max-width: 1500px; }

.mg-app {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 290px;
    gap: 10px;
    height: min(72vh, 720px);
    text-align: left;
    margin-top: 6px;
}
.mg-left, .mg-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.mg-stage { position: relative; background: var(--mg-bg); border: 1px solid var(--mg-line); border-radius: 12px; overflow: hidden; min-height: 0; }
#mg-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.mg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mg-mut); background: var(--mg-bg); z-index: 2; }
.mg-overlay.mg-hidden { display: none; }
.mg-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--mg-mut); background: rgba(0,0,0,.35); padding: 3px 8px; border-radius: 7px; pointer-events: none; max-width: 70%; }

/* viewport overlay: gizmo mode buttons + per-selection actions */
.mg-tools, .mg-sel-actions { position: absolute; top: 8px; z-index: 3; display: flex; gap: 6px; }
.mg-tools { left: 8px; }
.mg-sel-actions { right: 8px; }
.mg-sel-actions.mg-hidden { display: none; }
.mg-tools button, .mg-sel-actions button { width: 42px; height: 42px; border-radius: 10px; background: rgba(20,24,31,.82); color: var(--mg-txt); border: 1px solid var(--mg-line); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.mg-tools button:hover, .mg-sel-actions button:hover { border-color: var(--mg-acc); }
.mg-tools button.is-active { border-color: var(--mg-acc); color: var(--mg-acc); background: rgba(58,168,49,.18); }
#mg-del-sel:hover { border-color: #ff8080; color: #ff8080; }

/* undo / redo (bottom-right of the viewport) */
.mg-history { position: absolute; bottom: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; }
.mg-history button { width: 42px; height: 42px; border-radius: 10px; background: rgba(20,24,31,.82); color: var(--mg-txt); border: 1px solid var(--mg-line); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.mg-history button:not(:disabled):hover { border-color: var(--mg-acc); }
.mg-history button:disabled { opacity: .35; cursor: default; }

.mg-block, .mg-ai { background: var(--mg-panel); border: 1px solid var(--mg-line); border-radius: 12px; padding: 10px; color: var(--mg-txt); }
.mg-h { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mg-mut); margin-bottom: 8px; }
.mg-h small { color: var(--mg-acc); text-transform: none; letter-spacing: 0; }

/* AI box */
#mg-prompt { width: 100%; resize: vertical; background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 8px; padding: 8px; font-size: 13px; }
.mg-ai-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.mg-ai-row .btn { white-space: nowrap; }
#mg-provider { flex: 1; min-width: 0; background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 8px; padding: 6px 8px; font-size: 12px; cursor: pointer; }
#mg-key { flex: 1; min-width: 0; background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.mg-status { font-size: 12px; margin-top: 6px; min-height: 16px; color: var(--mg-mut); }
.mg-status.err { color: #ff8080; }
.mg-status.ok { color: var(--mg-acc); }

/* add-shape buttons */
.mg-add-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mg-add-btns button { background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 8px; padding: 7px 4px; font-size: 13px; cursor: pointer; }
.mg-add-btns button:hover { border-color: var(--mg-acc); }

/* parts list */
.mg-parts { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
.mg-part-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mg-part-list li { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px; }
.mg-part-list li:hover { background: #0e1117; }
.mg-part-list li.sel { background: #0e1117; border-color: var(--mg-acc); }
.mg-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); flex: none; }
.mg-part-list .mg-pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mg-txt); }
.mg-part-list .mg-pmir { font-size: 10px; color: var(--mg-acc); }
.mg-part-list .mg-del { color: var(--mg-mut); border: 0; background: none; cursor: pointer; }
.mg-part-list .mg-del:hover { color: #ff8080; }

/* inspector */
.mg-inspector { color: var(--mg-txt); font-size: 13px; }
.mg-empty { color: var(--mg-mut); font-size: 12px; margin: 0; }
.mg-field { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mg-field > label { width: 34px; color: var(--mg-mut); font-size: 12px; }
.mg-vec { display: flex; gap: 4px; flex: 1; }
.mg-vec input, .mg-field select, .mg-field input[type=text] { width: 100%; background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 6px; padding: 4px 5px; font-size: 12px; }
.mg-field input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--mg-line); border-radius: 6px; background: #0e1117; }
.mg-row2 { display: flex; gap: 8px; align-items: center; }
.mg-row2 > * { flex: 1; }
.mg-chk { display: flex; align-items: center; gap: 5px; color: var(--mg-mut); font-size: 12px; }

/* materials */
.mg-mat-list { display: flex; flex-direction: column; gap: 6px; }
.mg-mat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mg-txt); }
.mg-mat input[type=text] { flex: 1; min-width: 0; background: #0e1117; color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 6px; padding: 3px 5px; }
.mg-mat input[type=color] { width: 26px; height: 24px; padding: 0; border: 1px solid var(--mg-line); border-radius: 6px; }
.mg-mat input[type=range] { width: 56px; }
.mg-mini { background: #0e1117; color: var(--mg-mut); border: 1px dashed var(--mg-line); border-radius: 7px; padding: 4px 8px; font-size: 12px; cursor: pointer; margin-top: 8px; }
.mg-mini:hover { color: var(--mg-acc); border-color: var(--mg-acc); }

/* export bar */
.mg-export { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 12px; }
.mg-export button, .mg-export select, .mg-name { background: var(--mg-panel); color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 8px; padding: 7px 11px; font-size: 13px; cursor: pointer; }
.mg-export button:hover { border-color: var(--mg-acc); }
.mg-export .mg-danger:hover { border-color: #ff8080; color: #ff8080; }
.mg-name { cursor: text; width: 150px; }
.mg-sep { width: 1px; height: 22px; background: var(--mg-line); margin: 0 4px; }

/* output / import overlay */
.mg-out { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 1200; }
.mg-out.mg-hidden { display: none; }
.mg-out-inner { width: min(760px, 92vw); background: var(--mg-panel); border: 1px solid var(--mg-line); border-radius: 14px; padding: 14px; }
.mg-out-hd { display: flex; justify-content: space-between; align-items: center; color: var(--mg-txt); margin-bottom: 8px; font-weight: 600; }
.mg-out-hd button { background: none; border: 0; color: var(--mg-mut); font-size: 18px; cursor: pointer; }
#mg-out-text { width: 100%; height: 46vh; background: #0e1117; color: #cfe3d0; border: 1px solid var(--mg-line); border-radius: 8px; padding: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: pre; }
.mg-out-actions { display: flex; gap: 8px; margin-top: 10px; }

/* mobile toggle button — only shown on small screens */
.mg-mobile-panel { display: none; }

/* responsive (phones/small): viewport + gizmo are the whole UI; side panels collapse behind a toggle */
@media (max-width: 920px) {
    .mg-app { display: block; height: auto; }
    .mg-mobile-panel { display: block; width: 100%; margin-bottom: 8px; background: var(--mg-panel); color: var(--mg-txt); border: 1px solid var(--mg-line); border-radius: 10px; padding: 12px; font-size: 14px; cursor: pointer; text-align: center; }
    .mg-mobile-panel:active { border-color: var(--mg-acc); }
    .mg-left { display: none; overflow: visible; margin-bottom: 8px; }
    #mg-app.panel-open .mg-left { display: flex; }
    .mg-right { display: none; }            /* inspector + materials hidden — the gizmo replaces them */
    .mg-parts { display: none; }            /* select parts by tapping them in the scene */
    .mg-stage { height: 62vh; }
}

/* touch screens: bigger hit targets everywhere the finger has to land */
@media (pointer: coarse) {
    .mg-tools button, .mg-sel-actions button, .mg-history button { width: 52px; height: 52px; font-size: 20px; }
    .mg-part-list li { padding: 12px 9px; font-size: 14px; }
    .mg-part-list .mg-del { padding: 6px 10px; font-size: 18px; }
    .mg-add-btns button { padding: 11px 4px; font-size: 14px; }
    .mg-vec input, .mg-field select, .mg-field input[type=text] { padding: 8px 6px; font-size: 14px; }
    .mg-field input[type=color] { width: 38px; height: 34px; }
    .mg-mat input[type=color] { width: 34px; height: 30px; }
    .mg-export button, .mg-export select, .mg-name { padding: 10px 13px; font-size: 14px; }
}