/* Responsive tuning for the main 豆店通 editor (index.html). */

@media (max-width: 1100px) {
  .dd-mini3d {
    display: none !important;
  }
}

@media (max-width: 820px), (min-width: 821px) and (max-height: 620px) {
  .app-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 6px 10px !important;
    gap: 6px 10px !important;
  }

  .app-header .brand-group {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .app-header .header-account {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .app-header .header-account .account-status-area {
    min-width: 0 !important;
    max-width: min(62vw, 280px);
  }

  .app-header .header-account .account-status-button {
    width: auto !important;
    min-width: 92px;
    min-height: 32px !important;
    padding: 0 10px !important;
  }

  .app-header .header-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .app-header .header-actions::-webkit-scrollbar {
    display: none;
  }

  .app-header .header-actions .button {
    flex: 0 0 auto;
    min-height: 32px !important;
    padding: 0 8px !important;
  }

  .app-header .account-status-menu {
    top: calc(100% + 44px) !important;
  }
}

@media (max-width: 820px) {
  .guest-trial-banner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 6px 8px 0 !important;
    padding: 6px 8px !important;
    min-height: 0 !important;
  }

  .guest-trial-banner .guest-trial-message {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px !important;
    grid-template-columns: none !important;
  }

  .guest-trial-banner .guest-trial-message small {
    display: none !important;
  }

  .guest-trial-banner .guest-trial-message strong {
    font-size: 12px !important;
    line-height: 1.25;
  }

  .guest-trial-banner .guest-trial-label {
    padding: 3px 6px !important;
    font-size: 10px !important;
    line-height: 1.2;
  }

  .guest-trial-banner ul {
    display: none !important;
  }

  .guest-trial-banner .guest-trial-actions {
    width: auto !important;
  }

  .guest-trial-banner .guest-trial-actions button {
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  .workbench {
    min-height: 0 !important;
  }

  .workspace {
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
  }

  .canvas-stage {
    min-height: 0 !important;
  }

  .canvas-scroll {
    height: auto !important;
    max-height: none !important;
  }

  .dd-mini3d {
    display: none !important;
  }

  .tool-rail.is-collapsed {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px) {
  .app-header .header-actions {
    display: flex !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .app-header .header-actions .button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    gap: 3px !important;
    padding: 0 3px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .app-header .header-actions .button svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
  }

  .app-header .header-account .account-status-area {
    max-width: 58vw;
  }

  .view-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .view-tabs::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 821px) and (max-height: 620px) {
  .app-shell:not(.is-focus-mode) {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }

  .app-shell:not(.is-focus-mode) .workbench {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
    align-items: start;
  }

  .app-shell:not(.is-focus-mode) .workspace {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    overflow: visible !important;
  }

  .app-shell:not(.is-focus-mode) .canvas-stage {
    min-height: 0 !important;
  }

  .app-shell:not(.is-focus-mode) .canvas-scroll {
    height: auto !important;
    max-height: none !important;
  }

  .app-shell:not(.is-focus-mode) .inspector {
    height: auto !important;
    max-height: calc(100dvh - 96px) !important;
    overflow: auto !important;
  }

  .app-header {
    position: static !important;
  }

  .app-shell:not(.is-focus-mode) .canvas-controls {
    position: static !important;
  }

  .guest-trial-banner,
  .dd-mini3d {
    display: none !important;
  }
}

.xd-zoom-fitting .zoom-editor {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Mobile canvas controls: first row only until expanded. */
.canvas-controls-toggle {
  display: none !important;
}

@media (max-width: 820px) {
  .canvas-controls {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .canvas-controls:not(.is-mobile-expanded) > :nth-child(n + 4):not(.canvas-controls-toggle) {
    display: none !important;
  }

  .canvas-controls > .canvas-controls-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 4px;
    color: #b04d75 !important;
    background: #fff5f8 !important;
    border: 1px solid #f1cbdc !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    cursor: pointer;
  }

  .canvas-controls-toggle-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .16s ease;
  }

  .canvas-controls-toggle-less {
    display: none;
  }

  .canvas-controls.is-mobile-expanded .canvas-controls-toggle-caret {
    transform: rotate(180deg);
  }

  .canvas-controls.is-mobile-expanded .canvas-controls-toggle-more {
    display: none;
  }

  .canvas-controls.is-mobile-expanded .canvas-controls-toggle-less {
    display: inline;
  }

  .canvas-controls.is-mobile-expanded > .canvas-controls-toggle {
    order: -1;
    grid-column: 1 / -1;
    min-height: 36px;
    background: #fff !important;
    border-style: dashed !important;
  }
}

/* Mobile short labels for the 3D and gallery header entries. */
.xd-mobile-label {
  display: none;
}

@media (max-width: 720px) {
  body .header-actions > .xd-3d-build-trigger,
  body .header-actions > .xd-gallery-trigger {
    width: auto !important;
    padding: 0 8px !important;
    gap: 4px !important;
  }

  body .header-actions > .xd-3d-build-trigger .xd-desktop-label,
  body .header-actions > .xd-gallery-trigger .xd-desktop-label {
    display: none !important;
  }

  body .header-actions > .xd-3d-build-trigger .xd-mobile-label,
  body .header-actions > .xd-gallery-trigger .xd-mobile-label {
    display: inline !important;
  }
}