/* Local interface styles; Bootstrap CSS is loaded first. */
body { max-width: 1280px; padding: 16px; color: #212529; background: #fff; }
.workspace-home { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.tutorial-toast { position: fixed; right: 12px; top: calc(var(--workspace-overlay-top, 72px) + 160px); z-index: 5; display: flex; align-items: flex-start; gap: 12px; width: 320px; max-width: calc(100vw - 24px); padding: 16px; background: #fff; color: #212529; border: 1px solid #adb5bd; border-radius: 8px; box-shadow: 0 4px 20px #00000026; }
.tutorial-toast a { flex: 1; overflow-wrap: anywhere; }
.tutorial-toast .btn-close { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0; background-position: center; }
@media (max-width: 575.98px) { .tutorial-toast { top: calc(var(--workspace-overlay-top, 72px) + 120px); padding: 12px; } }
.warning { background: #eaf1fb; padding: 12px; border-radius: 6px; margin-bottom: 20px; }
.warning p { margin-bottom: 6px; text-align: left; }
.warning a { overflow-wrap: anywhere; }
.config-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.settings-column, .preview-column { min-width: 0; }
#viewer .parametersdiv { border: 0; padding: 0; width: 100%; }
.configuration-panel { border: 1px solid #adb5bd; border-radius: 6px; margin-bottom: 12px; overflow: hidden; }
.configuration-panel h2 { margin: 0; font-size: 1rem; }
.panel-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 12px 16px; border: 0; background: #edf2f7; color: #212529; text-align: left; font-weight: 600; }
.panel-toggle::after { content: '+'; font-size: 1.3rem; }
.panel-toggle[aria-expanded="true"]::after { content: '−'; }
.panel-body { padding: 16px; }
.quick-controls { margin-bottom: 12px; padding: 12px; border: 1px solid #adb5bd; border-radius: 8px; background: #fff; }
.quick-controls .parameter-field:last-child { margin-bottom: 0; }
[hidden], #viewer [hidden] { display: none !important; }
.parameter-field { margin-bottom: 16px; }
.parameter-field label, .panel-body > label, .color-field label { display: block; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.parameter-value { min-width: 0; }
#viewer .form-control, #viewer .form-select { width: 100%; min-height: 44px; font-size: 1rem; }
#viewer textarea { width: 100%; min-height: 120px; }
#viewer .form-check-input { float: none; margin: 0; width: 24px; height: 24px; }
.parameter-field:has(.form-check-input) { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.parameter-field:has(.form-check-input) label { flex: 1; min-height: 44px; display: flex; align-items: center; margin: 0; }
#viewer .form-range { min-height: 44px; }
.field-help { font-size: .875rem; font-weight: 400; line-height: 1.5; margin: 8px 0 16px; padding: 10px 12px; border-left: 3px solid #adb5bd; border-radius: 4px; background: #f1f3f5; }
#viewer .btn { min-height: 44px; white-space: normal; }
.generate-model { width: 100%; }
#viewer .viewer { width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 4 / 3; background: #fffff7; }
#viewer canvas { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0; }
#viewer .statusdiv { width: 100%; display: flow-root; }
#viewer .statusdiv > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; float: none !important; max-width: 100%; margin-top: 8px; }
.color-field { display: grid; grid-template-columns: 1fr 64px; gap: 6px 12px; align-items: center; margin-top: 16px; }
.color-field label { margin: 0; }
.color-field input { width: 64px; height: 44px; padding: 3px; }
.color-field output { grid-column: 1 / -1; font-family: monospace; }
#viewer pre { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 16px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #0a58ca; outline-offset: 3px; }
#viewer [aria-invalid="true"] { border: 2px solid #b42318; }
@media (min-width: 992px) { .config-layout { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); } }
@media (max-width: 575.98px) { body { padding: 12px; } .tutorial-left, .tutorial-right { width: 100%; text-align: left; } }

body { font-size: 16px; line-height: 1.5; }
.preview-column > div { max-width: 100%; }

.configuration-group + .configuration-group, .group-divider { border-top: 1px solid #adb5bd; margin-top: 16px; padding-top: 16px; }
.configuration-group h3, .panel-body > h3 { font-size: 1rem; font-weight: 600; margin-bottom: 16px; }
.range-value { display: block; font-variant-numeric: tabular-nums; margin-top: 4px; }
.export-actions .btn { width: 100%; }
.export-model svg { margin-right: 6px; vertical-align: middle; }
.generation-progress { margin-top: 16px; }
.generation-progress label { display: block; }
.generation-progress progress { display: block; width: 100%; height: 16px; }

#viewer .viewer { position: relative; }
.view-navigation { position: absolute; top: 8px; right: 8px; width: 112px; z-index: 2; }
.view-cube-scene { height: 104px; display: flex; align-items: center; justify-content: center; perspective: 400px; }
.view-cube { position: relative; width: 56px; height: 56px; transform-style: preserve-3d; }
.view-cube-face { position: absolute; inset: 0; width: 56px; height: 56px; border: 1px solid #adb5bd; background: #edf2f7; color: #212529; font-size: 10px; font-weight: 600; padding: 2px; backface-visibility: hidden; }
.cube-front { transform: translateZ(28px); }
.cube-back { transform: rotateY(180deg) translateZ(28px); }
.cube-right { transform: rotateY(90deg) translateZ(28px); }
.cube-left { transform: rotateY(-90deg) translateZ(28px); }
.cube-top { transform: rotateX(90deg) translateZ(28px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(28px); }
#viewer .view-select { min-height: 44px; font-size: .875rem; padding-left: 6px; }
@media (max-width: 575.98px) { .view-navigation { width: 100px; } .view-cube-scene { height: 88px; } }
@media (prefers-reduced-motion: reduce) { .view-cube { transition: none; } }

/* Full viewport workspace; tools remain non-modal floating windows. */
html, body { width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: 0; max-width: none; overflow: hidden; }
#viewer.config-layout { position: fixed; inset: 0; display: block; margin: 0; width: 100%; height: 100%; }
.preview-column { position: absolute; inset: 0; }
#viewer .viewer { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; }
#viewer .viewer canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto; border: 0; margin: 0; }
.workspace-toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 4; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #adb5bd; box-shadow: 0 2px 8px #00000014; }
.workspace-toolbar h1 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; }
.workspace-toolbar nav { display: flex; gap: 8px; flex-shrink: 0; }
.workspace-toolbar .btn { min-height: 44px; }
.floating-window { position: fixed; left: 12px; top: 72px; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow: auto; overscroll-behavior: contain; padding: 16px; background: #fff; color: #212529; border: 1px solid #adb5bd; border-radius: 8px; box-shadow: 0 4px 20px #00000026; z-index: 3; }
.floating-window > h2 { font-size: 1rem; font-weight: 600; margin: 0 0 16px; }
.about-window { width: 480px; }
.about-window .tutorial-left, .about-window .tutorial-right { display: block; width: 100%; text-align: left; }
.about-window a { overflow-wrap: anywhere; }
.view-navigation { top: 72px; right: 12px; }
.zoom-slider-control { position: absolute; bottom: 12px; right: 12px; width: 240px; max-width: calc(100vw - 24px); padding: 10px 12px; background: #fff; border: 1px solid #adb5bd; border-radius: 8px; box-shadow: 0 2px 10px #0000001a; z-index: 2; }
.zoom-slider-control label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.zoom-slider-control .form-range { min-height: 44px; margin: 0; }
.zoom-slider-control output { font-size: .875rem; font-variant-numeric: tabular-nums; }
.workspace-toolbar { flex-wrap: wrap; }
.workspace-toolbar h1 { flex: 1 1 160px; min-width: 0; }
.workspace-toolbar nav { max-width: 100%; flex-wrap: wrap; }
.workspace-toolbar .btn { max-width: 100%; overflow-wrap: anywhere; }
.floating-window { top: var(--workspace-overlay-top, 72px); max-height: calc(100vh - var(--workspace-overlay-top, 72px) - 12px); max-height: calc(100dvh - var(--workspace-overlay-top, 72px) - 12px); }
.view-navigation { top: var(--workspace-overlay-top, 72px); }
@media (max-width: 575.98px) {
    .workspace-toolbar { gap: 8px; }
    .workspace-toolbar h1 { font-size: .875rem; }
    .workspace-toolbar nav { gap: 4px; }
    .workspace-toolbar .btn { padding-left: 8px; padding-right: 8px; font-size: .875rem; }
    .floating-window { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 55vh; max-height: 55dvh; }
    .zoom-slider-control { top: var(--workspace-overlay-top, 72px); bottom: auto; left: 12px; right: auto; width: calc(100vw - 148px); max-width: 240px; padding: 8px; }
}

/* Preserve content width when the tools scrollbar consumes space. */
#tools-window { width: calc(360px + var(--tools-scrollbar-width, 0px)); scrollbar-width: thin; scrollbar-color: #adb5bd transparent; }
#tools-window::-webkit-scrollbar { width: 6px; }
#tools-window::-webkit-scrollbar-track { background: transparent; }
#tools-window::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 999px; }
#tools-window::-webkit-scrollbar-thumb:hover { background: #6c757d; }
.export-actions { display: flex; flex-direction: column; gap: 8px; }
.generation-progress { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: 280px; max-width: calc(100vw - 24px); margin: 0; padding: 12px 16px; background: #fff; border: 1px solid #adb5bd; border-radius: 8px; box-shadow: 0 2px 10px #0000001a; pointer-events: none; z-index: 4; }
@media (max-width: 575.98px) {
    #tools-window { width: auto; }
    .generation-progress { bottom: var(--mobile-tools-clearance, 12px); }
}

/* Small screens reserve a model region before the tools and other panels. */
.mobile-preview-controls { display: none; }
@media (max-width: 767.98px) {
    html, body { height: auto; min-height: 100dvh; overflow: auto; }
    .workspace-toolbar { position: relative; box-shadow: none; }
    #viewer.config-layout { position: relative; height: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 12px 12px; }
    .preview-column { position: relative; inset: auto; width: 100%; }
    #viewer .viewer { position: relative; inset: auto; height: 45vh !important; height: 45dvh !important; min-height: 260px; }
    .mobile-preview-controls { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; }
    .mobile-preview-controls .view-navigation { position: relative; inset: auto; width: 100%; }
    .mobile-preview-controls .view-cube-scene { height: 88px; }
    .mobile-preview-controls .zoom-slider-control { position: relative; inset: auto; width: 100%; max-width: none; padding: 8px; }
    #tools-window, #viewer .floating-window, #viewer .tutorial-toast, #viewer .error-toasts, #viewer .generation-progress {
        position: relative; inset: auto; width: 100%; max-width: 100%; max-height: none; margin: 0; transform: none; overflow: visible;
    }
    .floating-window { flex-shrink: 0; }
    .generation-progress { margin-top: 8px; }
    #viewer .error-toast { max-height: none; }
    #viewer .parameter-value, #viewer .panel-body { min-width: 0; }
}