/* Responsive, accessibility, and editor-mode overrides.
   Rules retain their original relative order from the legacy core stylesheet. */

@media (prefers-reduced-motion: reduce) {
  .msl-spinner { animation-duration: 1.8s; }
}

body.mode-menu-open .mode-picker-chevron { transform: rotate(180deg); }

body.mode-edit .submode-row { display: flex; }

@media (max-width: 720px) {
  .transform-context-bar { top:6px; gap:3px; max-width:calc(100% - 20px); padding:4px; overflow-x:auto; scrollbar-width:none; }
  .transform-context-bar::-webkit-scrollbar { display:none; }
  .tcb-label { font-size:8px; padding:0 1px; }
  .tcb-option { min-height:28px; padding:4px 4px; font-size:9px; }
  .snap-option { min-height:44px; font-size:12px; }
  .snap-step-option { min-width:42px; min-height:40px; font-size:11px; }
  .repeat-last-control { top:150px; }
  .repeat-last-button { min-height:34px; font-size:11px; }
  #snap-ab-hud { top:122px; max-width:calc(100% - 20px); width:max-content; gap:6px; padding:6px; }
  #snap-ab-status { font-size:11px; }
  #snap-ab-detail { max-width:132px; overflow:hidden; text-overflow:ellipsis; }
  .snap-ab-actions { gap:3px; }
  .snap-ab-merge { min-height:38px; padding:6px 7px; font-size:9px; }
  .snap-ab-merge input { width:16px; height:16px; }
  .snap-ab-actions button { min-height:38px; padding:6px 7px; font-size:9px; }
  #snap-ab-cancel { width:38px; }
}

body.measure-picking #viewport { cursor:crosshair !important; }

body.parenting-picking #viewport { cursor:crosshair !important; }

@media (max-width:720px) {
  #measure-hud { top:6px; max-width:calc(100% - 18px); min-height:44px; gap:7px; padding:5px 5px 5px 9px; }
  .measure-hud-copy { gap:5px; }
  .measure-hud-title { font-size:10px; }
  #measure-status { font-size:10px; }
  .measure-hud-actions button { min-height:40px; min-width:44px; padding:6px 8px; }
  #measure-cancel { min-width:40px; }
  #measure-distance-label { font-size:13px; padding:7px 10px; }
  #parenting-hud { top:66px; min-height:44px; gap:6px; padding:5px 5px 5px 9px; }
  #parenting-detail { max-width:150px; }
  .parenting-hud-actions button { min-height:40px; min-width:44px; }
}

body:not(.mode-sculpt) #sculpt-popup { display: none !important; }

@media (max-width: 720px) {
  .mat-panel-grid { grid-template-columns: 1fr 150px; gap: 10px; }
}

@media (max-width: 400px) {
  .mat-panel-grid { grid-template-columns: 1fr 130px; gap: 8px; }
}

/* Context-aware tab visibility:
   Object Mode → Object, Mat., Light, Render
   Animation   → Object, Mat., Anim., Light, Render
   Edit Mode   → Edit, Mat. */
body:not(.mode-edit) .tab-btn[data-tab="edit"]   { display: none; }

body.mode-edit        .tab-btn[data-tab="create"],
body.mode-edit        .tab-btn[data-tab="light"],
body.mode-edit        .tab-btn[data-tab="render"],
body.mode-edit        .tab-btn[data-tab="animation"] { display: none; }

body:not(.mode-edit) .tab-btn[data-tab="uv"]     { display: none; }

/* Texture Paint mode tab and toolbar visibility. */
body.mode-tpaint .tab-btn[data-tab="edit"]        { display: flex; }

body.mode-tpaint .tab-btn[data-tab="create"],
body.mode-tpaint .tab-btn[data-tab="light"],
body.mode-tpaint .tab-btn[data-tab="render"],
body.mode-tpaint .tab-btn[data-tab="animation"]   { display: none; }

body.mode-tpaint .tab-btn[data-tab="uv"]          { display: none; }

body:not(.mode-tpaint) .tab-btn[data-tab="texture"] { display: none; }

body.mode-tpaint  #ltool-transform,
body.mode-tpaint  #transform-fan,
body.mode-tpaint  #ltool-frame,
body.mode-tpaint  .left-tool-sep,
body.mode-tpaint  #ltool-actions,
body.mode-tpaint  #rb-tools               { display: none !important; }

body:not(.mode-tpaint) #ltool-paint-tools { display: none !important; }

body.mode-tpaint  #viewport               { cursor: crosshair !important; }

/* Sculpt mode tab, toolbar, and cursor visibility. */
body.mode-sculpt .tab-btn[data-tab="edit"]    { display: flex; }

body.mode-sculpt .tab-btn[data-tab="create"],
body.mode-sculpt .tab-btn[data-tab="light"],
body.mode-sculpt .tab-btn[data-tab="render"],
body.mode-sculpt .tab-btn[data-tab="animation"] { display: none; }

body.mode-sculpt .tab-btn[data-tab="uv"]      { display: none; }

body:not(.mode-sculpt) #sculpt-brush-cursor { display:none !important; }

body.mode-sculpt  #ltool-transform,
body.mode-sculpt  #transform-fan,
body.mode-sculpt  #ltool-frame,
body.mode-sculpt  .left-tool-sep,
body.mode-sculpt  #ltool-actions,
body.mode-sculpt  #rb-tools,
body.mode-sculpt  #ltool-paint-tools        { display: none !important; }

body:not(.mode-sculpt) #ltool-sculpt-tools  { display: none !important; }

body.mode-sculpt  #viewport                 { cursor: crosshair !important; }

/* Animation tab appears only while its workspace is active. */
.tab-btn[data-tab="animation"] { display: none; }

body.mode-animation .tab-btn[data-tab="animation"] { display: flex; }

@media (max-width:520px) {
  .anim-field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .anim-transport { grid-template-columns:repeat(6,minmax(32px,1fr)); }
  .anim-icon-btn { width:auto; }
}

body.mode-edit #vp-hint { bottom: 80px; }

@media (max-width: 480px) {
  .project-save-dialog { align-items: flex-end; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .project-save-card { width: 100%; border-radius: 13px; }
  .project-save-actions { display: grid; grid-template-columns: minmax(88px,.72fr) minmax(0,1.28fr); }
  .project-save-btn, .project-save-btn.primary { min-width: 0; width: 100%; }
}

/* Compact and narrow viewport overrides. */
@media (max-height: 720px) {
  .prim-btn { width: 54px; min-width: 54px; padding: 5px 4px; }
  .prim-btn svg { width: 22px; height: 22px; }
}

@media (max-height: 640px) {
  .left-tool { padding: 7px 0; }
  .left-tool svg { width: 16px; height: 16px; }
  .right-action { padding: 6px 0; }
  .right-action svg { width: 15px; height: 15px; }
  .axis-gizmo { width: 38px; height: 38px; }
  .right-outliner { max-height: 40%; }
  .left-tools { gap: 2px; }
  .right-actions { gap: 2px; }
}

@media (max-width: 380px) {
  .left-tool { width: 36px; }
  .right-action { width: 36px; }
  .tool-session-btn { width: 36px; }
  .right-outliner { width: 136px; }
}

/* ============================================================
   MOBILE LAYOUT PASS
   Portrait keeps the viewport dominant with a shallow bottom dock.
   Short landscape becomes a two-column editor with a right inspector.
   ============================================================ */
:root {
  --touch-target: 48px;
  --mobile-modebar-h: 54px;
}
#app { height: 100dvh; }
.top-btn {
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: 10px;
}
.top-btn svg { width: 20px; height: 20px; }
.top-btn:disabled {
  opacity: .32 !important;
  pointer-events: none;
}
.modebar {
  height: calc(var(--mobile-modebar-h) + env(safe-area-inset-top));
  gap: 2px;
  padding-left: 6px;
  padding-right: 4px;
}
.mode-toggle-split {
  min-width: 0;
  min-height: var(--touch-target);
}
.mode-toggle-btn {
  min-width: 0;
  min-height: var(--touch-target);
  padding: 6px 8px;
}
#sculpt-mirror-bar {
  top: calc(var(--mobile-modebar-h) + env(safe-area-inset-top) + 4px);
}
#mode-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (pointer: coarse), (max-width: 720px), (max-height: 600px) {
  .viewport-wrap { margin-left: 6px; margin-right: 6px; }
  .properties-panel { margin-left: 6px; margin-right: 6px; }

  .left-tool,
  .right-action,
  .tool-session-btn {
    width: var(--touch-target);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 8px 0;
    border-radius: 10px;
  }
  .left-tool svg,
  .right-action svg { width: 20px; height: 20px; }
  .left-tools { left: 8px; gap: 4px; }
  .right-actions { right: 8px; gap: 4px; }
  .axis-gizmo { width: 56px; height: 56px; }

  .sub-btn {
    width: 58px;
    min-height: 52px;
  }
  .submode-row { left: 8px; bottom: 8px; }
  .tool-session-bar { right: 64px; bottom: 8px; }

  .panel-min-btn {
    width: var(--touch-target);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
  }
  .tab-btn { min-height: 52px; padding: 6px 3px 8px; }
  .tab-btn svg { width: 19px; height: 19px; }
  .subtab-btn { min-height: var(--touch-target); }
  .btn { min-height: var(--touch-target); }
  .dropdown-item { min-height: var(--touch-target); }
  .sheet-close { min-width: var(--touch-target); min-height: var(--touch-target); }
  .anim-icon-btn,
  .anim-text-btn,
  .anim-channel-key { min-height: 44px; }

  .outliner-header { min-height: 44px; padding: 8px 10px; }
  /* Four real 44px touch targets require at least 176px.  The previous
     144/152px outliner clipped the Rendered shading button completely. */
  .right-outliner:not(.collapsed) { width: 184px; }
  .outliner-shading {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }
  .shading-btn {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    flex: none;
  }
  .outline-item { min-height: 44px; padding: 8px; }

}

/* Portrait phone: the dock defaults to 26% and can expand only to 32%,
   leaving roughly 60-70% of the full display for the working viewport. */
@media (orientation: portrait) and (max-width: 600px) {
  .viewport-wrap {
    min-height: 0;
    margin-bottom: 0;
  }
  .properties-panel {
    max-height: 72dvh;
    min-height: 52px;
    margin-top: 6px;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Compact phone dock: keep every control comfortably tappable without
     spending two oversized rows on navigation chrome. */
  .properties-panel .props-tab-bar {
    flex: 0 0 52px;
    min-height: 52px;
    position: relative;
    touch-action: pan-x;
    cursor: ns-resize;
  }
  .properties-panel .props-tab-bar::before { display:none; }
  .properties-panel .panel-min-btn {
    width: 44px;
    min-width: 44px;
    min-height: 52px;
  }
  .properties-panel .tab-btn {
    height: 52px;
    min-height: 52px;
    padding: 4px 2px 5px;
    gap: 1px;
  }
  .properties-panel .tab-btn svg { width: 18px; height: 18px; }
  .properties-panel .tab-create.active {
    color: var(--accent) !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom-color: var(--accent) !important;
  }
  #subtab-bar-outer .subtab-bar { min-height: 46px; }
  #subtab-bar-outer .subtab-btn {
    height: 46px;
    min-height: 46px;
    padding: 4px 5px 5px;
    gap: 5px;
    font-size: 11px;
  }
  #subtab-bar-outer .subtab-btn svg { width: 15px; height: 15px; }

  /* Object > Add opens a popup and has no inspector content.  In that
     landing state, keep only the two useful navigation rows instead of a
     large empty sheet. Other tabs automatically restore the working panel. */
  .properties-panel.panel-compact-empty {
    height: calc(98px + env(safe-area-inset-bottom)) !important;
    max-height: calc(98px + env(safe-area-inset-bottom));
  }
  .properties-panel.panel-compact-empty .props-inner { display: none !important; }
  .properties-panel.panel-collapsed #subtab-bar-outer,
  .properties-panel.panel-collapsed .props-inner { display: none !important; }

  .right-outliner { width: 184px; max-height: 42%; }
  .right-outliner.collapsed { width: 48px; }
  .vp-savepng { top: 6px; right: 192px; width: 44px; height: 44px; }
  .studio-lighting-fab { right: 198px; }
  /* Keep transient status away from the Scene/shading menu. */
  .toast {
    top: auto;
    bottom: calc(32dvh + 14px + env(safe-area-inset-bottom));
    max-width: min(72vw, 280px);
  }
  .properties-panel.panel-compact-empty ~ .toast {
    bottom: calc(110px + env(safe-area-inset-bottom));
  }
}

/* Phone landscape: the mode/history/file controls form one compact header
   over the viewport column only. The inspector owns the full right column
   from top to bottom instead of losing a row to the global header. */
@media (orientation: landscape) and (max-height: 600px) {
  #app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(248px, 30vw, 320px);
    grid-template-rows: calc(var(--mobile-modebar-h) + env(safe-area-inset-top)) minmax(0, 1fr);
  }
  #app.landscape-panel-collapsed {
    grid-template-columns: minmax(0, 1fr) 60px;
  }
  .modebar {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(140px, 38%) repeat(5, minmax(44px, 1fr));
  }
  .modebar .mode-toggle-split,
  .modebar .mode-toggle-btn,
  .modebar .top-btn {
    width: 100%;
    min-width: 0;
  }
  .viewport-wrap {
    grid-column: 1;
    grid-row: 2;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0 4px max(6px, env(safe-area-inset-bottom)) 6px;
  }
  .properties-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    width: auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    max-height: none;
    margin: 0 6px max(6px, env(safe-area-inset-bottom)) 4px;
    padding-bottom: 0;
  }
  .properties-panel.panel-collapsed #subtab-bar-outer,
  .properties-panel.panel-collapsed .props-inner {
    display: none !important;
  }
  #app.landscape-panel-collapsed .properties-panel .props-tab-bar {
    height: 100%;
    flex-direction: column;
    border-bottom: 0;
  }
  #app.landscape-panel-collapsed .properties-panel .panel-min-btn,
  #app.landscape-panel-collapsed .properties-panel .tab-btn {
    width: 100%;
    min-height: 48px;
    flex: 0 0 48px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin: 0;
    padding: 4px 2px;
  }
  .right-outliner { width: 184px; max-height: 44%; }
  .right-outliner.collapsed { width: 48px; }
  .vp-savepng { top: 6px; right: 192px; width: 44px; height: 44px; }
  .studio-lighting-fab { right: 198px; }

  /* A vertical rail cannot coexist with the Scene menu in a short
     landscape viewport.  Use a bottom action rail in this orientation. */
  .right-actions {
    right: 8px;
    bottom: 8px;
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .axis-gizmo { width: 48px; height: 48px; }
  .tool-session-bar { right: 8px; bottom: 64px; }

  /* The inspector column is intentionally narrow; do not let animation
     headings and their actions squeeze into overlapping columns. */
  .properties-panel .anim-panel { padding: 10px 10px 16px; }
  .properties-panel .anim-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .properties-panel .anim-head-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .properties-panel .anim-head-actions .anim-text-btn { flex: 1 1 120px; }
  .properties-panel .anim-head-actions .anim-icon-btn { flex: 0 0 48px; }
  .properties-panel .anim-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .toast {
    top: auto;
    left: 35vw;
    bottom: 14px;
    max-width: calc(60vw - 24px);
  }

}

@media (orientation: landscape) and (max-height: 420px) {
  :root { --mobile-modebar-h: 50px; }
  .top-btn,
  .mode-toggle-btn { height: 44px; min-height: 44px; }
  .modebar .top-btn { width: 100%; min-width: 44px; }
  .modebar .mode-toggle-btn { padding-left: 5px; padding-right: 26px; }
  .left-tool,
  .right-action { min-height: 44px; height: 44px; }
}

/* Extremely narrow landscape phones still keep every action at a 44px
   target; the mode icon yields space before the label or controls clip. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 700px) {
  .modebar { gap: 0; padding-left: 4px; padding-right: 2px; }
  .modebar { grid-template-columns: minmax(86px, 1fr) repeat(5, 44px); }
  .modebar .top-btn { width: 100%; min-width: 44px; }
  .modebar .mode-toggle-btn { padding: 4px; font-size: 11px; }
  .modebar .mode-toggle-btn #mode-icon { display: none; }
  .modebar .mode-picker-chevron { display: block; right: 7px; }
}

@media (max-width: 360px) {
  .modebar { gap: 0; padding-left: 4px; padding-right: 2px; }
  .mode-toggle-btn { padding: 4px; font-size: 11px; }
  .mode-toggle-btn #mode-icon { display: none; }
  .mode-picker-chevron { display: block; right: 7px; }
}

@media (pointer: coarse) {
  .right-outliner:not(.collapsed) {
    width: 184px;
  }
  .right-outliner.collapsed {
    width: 184px;
  }
  .outliner-shading {
    top: -44px;
    min-width: 184px;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
  }
  /* One docked top-right cluster: render icon + shading + outliner. */
  .vp-savepng {
    top: 6px;
    right: 192px;
  }
  .vp-view-controls { right: 192px; }
}

@media (orientation: portrait) and (max-width: 600px) {
  .right-outliner {
    top: 50px;
    max-height: calc(42% - 40px);
  }
  .right-outliner.collapsed {
    width: 184px;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  .right-outliner {
    top: 50px;
    max-height: calc(44% - 40px);
  }
  .right-outliner.collapsed {
    width: 184px;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  .properties-panel.panel-edit-compact {
    height: max(98px, 18dvh) !important;
    max-height: max(98px, 18dvh) !important;
  }
  .properties-panel.panel-tool-compact {
    height: max(98px, 18dvh) !important;
    max-height: max(98px, 18dvh) !important;
  }
  .properties-panel.panel-smart-sm {
    height: max(138px, 22dvh) !important;
    max-height: max(138px, 22dvh) !important;
  }
  .properties-panel.panel-smart-md {
    height: max(172px, 28dvh) !important;
    max-height: max(172px, 28dvh) !important;
  }
  .properties-panel.panel-smart-lg {
    height: max(208px, 34dvh) !important;
    max-height: max(208px, 34dvh) !important;
  }
}

@media (max-width: 600px) {
  .lighting-panel-summary { padding-top: 8px; }
}

/* Narrow screens stack property labels above their controls. */
@media (max-width: 430px) {
  .render-settings-grid, .render-effect-grid, .render-focus-row { grid-template-columns: 1fr; }
  .render-accordion-head { padding:10px 12px; }
  .render-accordion-body { padding:10px 12px 12px; }
  .render-summary-card { min-height:0; }
}

@media (max-width: 480px) {
  .property-row {
    grid-template-columns: 1fr 48px;
    row-gap: 2px;
  }
  .property-label { grid-column: 1 / -1; margin-bottom: -2px; }
}

@media (max-width: 600px) {
  .mat-edit-grid { grid-template-columns: 1fr; }
}

/* Cap property content width on wide screens. */
@media (min-width: 900px) {
  .props-inner { padding-left: max(12px, calc(50% - 490px)); padding-right: max(12px, calc(50% - 490px)); }
}

@media (max-width: 700px) {
  #vp-camera-preview { top: 132px; left: 55%; width: clamp(138px, 28vw, 180px); }
  #vp-camera-preview-hit { height: 98px; }
  #vp-camera-preview-canvas { max-height: 90px; }
}