/* Mobile Viewer layout — P15 mobile release */
.mobile-only,
.mobile-topbar,
.mobile-bottom-nav,
.mobile-scrim,
.mobile-tools-panel,
.mobile-selection-card { display:none; }

@media (max-width: 820px) {
  :root {
    --mobile-top-h:58px;
    --mobile-nav-h:70px;
    --mobile-safe-top:env(safe-area-inset-top, 0px);
    --mobile-safe-bottom:env(safe-area-inset-bottom, 0px);
    --mobile-vv-top:0px;
    --mobile-vv-bottom:0px;
    --mobile-host-top:0px;
    --mobile-host-bottom:0px;
    --mobile-visible-height:100dvh;
    --mobile-top-offset:calc(var(--mobile-vv-top) + var(--mobile-host-top));
    --mobile-bottom-offset:calc(var(--mobile-vv-bottom) + var(--mobile-host-bottom));
  }

  html, body { width:100%; height:100%; min-height:100%; overflow:hidden; }
  body.mobile-layout { background:var(--scene-viewport,#e9eff8); overscroll-behavior:none; }
  body.mobile-layout .mobile-only { display:flex; }
  body.mobile-layout .workspace { display:block; width:100%; height:100%; position:relative; }
  body.mobile-layout .viewport {
    position:fixed; inset:0; width:100%; height:100%; min-width:0; min-height:0;
    grid-column:auto; z-index:1; background:var(--scene-viewport,#e9eff8);
  }
  body.mobile-layout canvas.viewer { width:100%; height:100%; touch-action:none; }

  body.mobile-layout .rail,
  body.mobile-layout #bottomToolbar,
  body.mobile-layout .resize-handle,
  body.mobile-layout .left-page[data-page="compare"],
  body.mobile-layout .left-page[data-page="filters"] { display:none !important; }

  .mobile-topbar {
    position:fixed; z-index:54; left:0; right:0; top:var(--mobile-top-offset);
    height:calc(var(--mobile-top-h) + var(--mobile-safe-top));
    padding:var(--mobile-safe-top) 10px 0;
    grid-template-columns:68px minmax(0,1fr) 42px;
    align-items:center; gap:8px;
    background:color-mix(in srgb,var(--surface-1) 94%,transparent);
    border-bottom:1px solid var(--border);
    box-shadow:0 4px 18px rgba(25,40,70,.08);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  body.mobile-layout .mobile-topbar { display:grid; }
  .mobile-brand-mark {
    width:66px; height:36px; display:grid; place-items:center; border-radius:10px;
    padding:4px 5px; background:rgba(255,255,255,.96); overflow:visible;
    border:1px solid color-mix(in srgb,var(--brand-600) 12%,var(--border));
  }
  .mobile-brand-mark img { width:56px; height:24px; object-fit:contain; object-position:center; }
  .mobile-project-copy { min-width:0; }
  .mobile-project-title { font-size:12px; line-height:1.2; font-weight:780; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-project-meta { margin-top:2px; font-size:9px; line-height:1.2; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-top-action {
    width:40px; height:40px; border:1px solid var(--border); border-radius:12px;
    display:grid; place-items:center; padding:0; color:var(--text); background:var(--surface-1);
  }

  .mobile-bottom-nav {
    position:fixed; z-index:56; left:0; right:0; bottom:var(--mobile-bottom-offset);
    height:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom));
    padding:6px 7px var(--mobile-safe-bottom);
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px;
    background:color-mix(in srgb,var(--surface-1) 97%,transparent);
    border-top:1px solid var(--border);
    box-shadow:0 -8px 26px rgba(30,45,76,.1);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  }
  body.mobile-layout .mobile-bottom-nav { display:grid; }
  .mobile-nav-btn {
    position:relative; min-width:0; height:56px; border:0; border-radius:13px; padding:5px 2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--muted); background:transparent; font-size:9px; font-weight:690;
  }
  .mobile-nav-btn > [data-icon] { width:24px; height:24px; display:grid; place-items:center; }
  .mobile-nav-btn > [data-icon] svg { width:20px; height:20px; }
  .mobile-nav-btn.active { color:var(--accent-2); background:var(--accent-soft); }
  .mobile-nav-badge {
    position:absolute; top:4px; left:calc(50% + 8px); min-width:16px; height:16px; padding:0 4px;
    border-radius:999px; display:none; place-items:center; background:var(--danger); color:#fff;
    border:2px solid var(--surface-1); font-size:8px; line-height:1;
  }
  .mobile-nav-badge.show { display:grid; }

  .mobile-scrim {
    position:fixed; z-index:59; inset:var(--mobile-top-offset) 0 calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset)) 0;
    background:rgba(8,16,30,.32); opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  body.mobile-layout .mobile-scrim { display:block; }
  .mobile-scrim.show { opacity:1; pointer-events:auto; }

  body.mobile-layout .left-panel,
  body.mobile-layout .inspector,
  body.mobile-layout .mobile-tools-panel {
    display:flex !important; position:fixed; z-index:62; left:0; right:0; top:auto;
    bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset));
    width:100%; min-width:0; max-width:none; height:min(76dvh,700px); max-height:calc(var(--mobile-visible-height) - var(--mobile-top-h) - var(--mobile-nav-h) - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 8px);
    border:1px solid var(--border); border-bottom:0; border-radius:22px 22px 0 0;
    background:var(--surface-1); box-shadow:0 -24px 58px rgba(13,28,55,.24);
    transform:translateY(calc(100% + 18px)); opacity:.98;
    transition:transform .25s cubic-bezier(.22,.74,.25,1), opacity .18s ease;
    overflow:hidden;
  }
  body.mobile-layout .left-panel.mobile-open,
  body.mobile-layout .inspector.mobile-open,
  body.mobile-layout .mobile-tools-panel.mobile-open { transform:translateY(0); opacity:1; }

  body.mobile-layout .left-panel > .panel-header,
  body.mobile-layout .inspector > .inspector-head,
  .mobile-tools-head {
    position:relative; flex:0 0 58px; min-height:58px; display:flex; align-items:center; gap:10px;
    padding:8px 12px 5px; border-bottom:1px solid var(--border); background:var(--surface-1);
  }
  body.mobile-layout .left-panel > .panel-header::before,
  body.mobile-layout .inspector > .inspector-head::before,
  .mobile-tools-head::before,
  body.mobile-layout .settings-drawer::before {
    content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
    width:42px; height:4px; border-radius:999px; background:var(--border-strong);
  }
  body.mobile-layout .panel-headings { min-width:0; padding-top:4px; }
  body.mobile-layout .panel-title { font-size:14px; }
  body.mobile-layout .panel-subtitle { font-size:9px; }
  .mobile-sheet-close { margin-left:auto; width:36px; height:36px; flex:0 0 auto; }

  body.mobile-layout .left-panel > .panel-body,
  body.mobile-layout .inspector > .inspector-body,
  .mobile-tools-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:10px 10px 18px; }
  body.mobile-layout .left-panel .left-page.active { display:block; overflow:visible; }
  body.mobile-layout .left-panel .left-page[data-page="models"].active { display:flex; }

  body.mobile-layout .model-project-summary { margin-bottom:8px; }
  body.mobile-layout .model-color-toolbar { grid-template-columns:1fr 1fr 36px; position:sticky; top:-10px; z-index:2; padding:4px 0 8px; margin:0; background:var(--surface-1); }
  body.mobile-layout .model-color-toolbar .btn { min-height:38px; height:auto; padding:5px 7px; font-size:10px; line-height:1.15; white-space:normal; }
  body.mobile-layout #loadedModels.model-tree { padding-right:1px; }
  body.mobile-layout .model-section { border-radius:14px; }
  body.mobile-layout .model-section-head { grid-template-columns:28px 24px 15px minmax(0,1fr) 32px; min-height:46px; padding:7px 7px 7px 4px; }
  body.mobile-layout .model-row { grid-template-columns:28px 15px minmax(0,1fr) 32px 32px; min-height:46px; padding:7px 6px 7px 4px; }
  body.mobile-layout .model-section-head [data-vis-section] svg,
  body.mobile-layout .model-row [data-vis-model] svg,
  body.mobile-layout .model-row > .icon-btn:disabled svg,
  body.mobile-layout .section-plane .sec-eye svg,
  body.mobile-layout .boundary-row #viewBoxEyeBtn svg,
  body.mobile-layout .datum-eye svg { width:9px !important; height:9px !important; }
  body.mobile-layout .model-section-head [data-vis-section],
  body.mobile-layout .model-row [data-vis-model],
  body.mobile-layout .model-row > .icon-btn:disabled,
  body.mobile-layout .section-plane .sec-eye,
  body.mobile-layout .datum-eye { width:27px; height:27px; display:grid; place-items:center; justify-self:start; }
  body.mobile-layout .section-toggle { width:24px; height:30px; }
  body.mobile-layout .model-title .name { font-size:10px; }
  body.mobile-layout .model-title .meta, body.mobile-layout .count { font-size:8px; }

  body.mobile-layout .left-page[data-page="views"] .page-actions { position:sticky; top:-10px; z-index:3; padding:4px 0 8px; background:var(--surface-1); }
  body.mobile-layout .view-item { grid-template-columns:minmax(0,1fr) auto; padding:7px 5px; }
  body.mobile-layout .folder-head { grid-template-columns:minmax(0,1fr) auto; min-height:45px; padding:8px 9px; }
  body.mobile-layout .view-item > .drag-handle,
  body.mobile-layout .folder-head > .drag-handle { display:none !important; }
  body.mobile-layout .folder { border-radius:14px; }
  body.mobile-layout .view-open { min-height:36px; padding:5px 7px; }
  body.mobile-layout .view-actions { gap:2px; }

  body.mobile-layout .inspector { border-left:1px solid var(--border); }
  body.mobile-layout .inspector-head { font-size:14px; padding-top:12px; }
  body.mobile-layout .inspector-tabs { flex:0 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px 8px; border-bottom:1px solid var(--border); background:var(--surface-1); }
  body.mobile-layout .inspector-tab { min-width:0; height:38px; padding:0 5px; justify-content:center; border:0; border-radius:11px; background:var(--surface-3); font-size:9px; }
  body.mobile-layout .inspector-tab.active { border:0; background:var(--accent-soft); color:var(--accent-2); }
  body.mobile-layout .inspector-tab.clash-only { display:flex; }
  body.mobile-layout .selection-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.mobile-layout .selection-actions .btn { min-height:40px; }
  body.mobile-layout .props-row { grid-template-columns:42% 58%; }

  .mobile-tools-panel { user-select:none; }
  body.mobile-layout .mobile-tools-panel { display:flex; }
  .mobile-tools-headings { min-width:0; padding-top:4px; }
  .mobile-tools-title { font-size:14px; font-weight:780; }
  .mobile-tools-subtitle { margin-top:2px; font-size:9px; color:var(--muted); }
  .mobile-tools-body { padding-bottom:24px; }
  .mobile-tool-section { margin-bottom:15px; }
  .mobile-tool-section:last-child { margin-bottom:0; }
  .mobile-tool-section-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 7px; color:var(--muted); font-size:9px; font-weight:760; text-transform:uppercase; letter-spacing:.07em; }
  .mobile-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .mobile-tool-card {
    min-width:0; min-height:68px; padding:8px 5px; border:1px solid var(--border); border-radius:13px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    color:var(--text); background:var(--surface-2); text-align:center; font-size:9px; line-height:1.15;
  }
  .mobile-tool-card > [data-icon] svg { width:20px; height:20px; }
  .mobile-tool-card.active,.mobile-tool-card.active-tool,.mobile-tool-card.on { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent) 48%,var(--border)); background:var(--accent-soft); }
  #fitBtn.mobile-tool-card { display:flex; }
  .mobile-tools-mount .section-create-toolbar { display:grid; grid-template-columns:auto repeat(3,40px) minmax(0,1fr); gap:6px; margin-bottom:8px; }
  .mobile-tools-mount .section-create-toolbar > span { align-self:center; }
  .mobile-tools-mount .section-create-toolbar .btn { min-width:0; }
  .mobile-tools-mount .section-list { margin-bottom:8px; }
  .mobile-tools-mount .section-plane { border-radius:14px; }
  .mobile-tools-mount .section-plane-head { grid-template-columns:28px minmax(0,1fr) auto; }
  .mobile-tools-mount .section-plane .sec-axis { width:122px; max-width:100%; }
  .mobile-tools-mount .level-row { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; }
  .mobile-tools-mount .level-row .datum-eye { order:-1; grid-column:1; grid-row:1; }
  .mobile-tools-mount .level-row .main { grid-column:2; grid-row:1; }
  .mobile-tools-mount #datumHostSelect { height:40px; }
  .mobile-tools-mount #byLevelsBtn { min-height:40px; }

  .mobile-selection-card {
    position:fixed; z-index:51; left:9px; right:9px;
    bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset) + 10px);
    min-height:58px; padding:8px; border:1px solid var(--border); border-radius:15px;
    grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px;
    background:color-mix(in srgb,var(--surface-1) 96%,transparent); box-shadow:var(--shadow);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  }
  body.mobile-layout .mobile-selection-card.show { display:grid; }
  .mobile-selection-copy { min-width:0; }
  .mobile-selection-title { font-size:10px; font-weight:760; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-selection-meta { margin-top:3px; font-size:8px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mobile-selection-actions { display:flex; gap:5px; }
  .mobile-selection-actions .icon-btn { width:34px; height:34px; }

  body.mobile-layout #toolStatus {
    left:9px; right:9px; bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset) + 10px);
    max-width:none; transform:none;
  }
  body.mobile-layout .where-popover {
    left:9px; right:9px; bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset) + 10px);
    width:auto; max-height:55dvh; overflow:auto;
  }
  body.mobile-layout .model-style-popover {
    left:9px !important; right:9px !important; top:auto !important;
    bottom:calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset) + 10px) !important;
    width:auto; max-width:none;
  }

  body.mobile-layout .settings-overlay { top:var(--mobile-top-offset); bottom:var(--mobile-bottom-offset); align-items:flex-end; justify-content:stretch; }
  body.mobile-layout .settings-drawer {
    position:relative; width:100%; height:min(70dvh,620px); border:1px solid var(--border); border-bottom:0;
    border-radius:22px 22px 0 0; box-shadow:0 -24px 58px rgba(13,28,55,.24);
    padding-bottom:var(--mobile-safe-bottom);
  }
  body.mobile-layout .drawer-header { height:60px; padding:10px 12px 4px; }
  body.mobile-layout .drawer-body { padding:11px; }
  body.mobile-layout #occlusionBtn,
  body.mobile-layout #perfHudBtn { display:none !important; }
  body.mobile-layout .theme-card { height:58px; }

  body.mobile-layout .perf-hud { display:none !important; }
}

@media (max-width:820px) and (orientation:landscape) {
  :root { --mobile-top-h:50px; --mobile-nav-h:60px; }
  body.mobile-layout .left-panel,
  body.mobile-layout .inspector,
  body.mobile-layout .mobile-tools-panel {
    left:auto; width:min(430px,72vw); height:calc(var(--mobile-visible-height) - var(--mobile-safe-top) - var(--mobile-nav-h) - var(--mobile-safe-bottom));
    max-height:none; border-radius:20px 0 0 0; border-right:0;
    transform:translateX(calc(100% + 20px));
  }
  body.mobile-layout .left-panel.mobile-open,
  body.mobile-layout .inspector.mobile-open,
  body.mobile-layout .mobile-tools-panel.mobile-open { transform:translateX(0); }
  .mobile-bottom-nav { left:auto; width:min(430px,72vw); }
  .mobile-selection-card { right:auto; width:min(390px,calc(100vw - 450px)); }
  .mobile-tool-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:820px) {
  #mobileClashBadge { left:calc(50% + 19px); background:var(--danger); }
  #mobileSelectionBadge { left:calc(50% + 6px); background:var(--accent); }
}
@media (max-width:820px) {
  body.mobile-layout .model-section-head [data-vis-section-eye] svg { width:9px !important; height:9px !important; }
  body.mobile-layout .model-section-head [data-vis-section-eye] { width:27px; height:27px; display:grid; place-items:center; justify-self:start; }
  body.mobile-layout .mobile-tools-mount .boundary-row { grid-template-columns:28px 28px minmax(0,1fr); }
  body.mobile-layout .mobile-tools-mount .boundary-row #viewBoxEyeBtn { grid-column:1; grid-row:1; justify-self:start; }
  body.mobile-layout .mobile-tools-mount .boundary-row #viewBoxBtn { grid-column:2; grid-row:1; }
  body.mobile-layout .mobile-tools-mount .boundary-row > div { grid-column:3; grid-row:1; }
}
@media (max-width:820px) {
  body.mobile-layout .left-panel > .panel-body { overflow:hidden; }
  body.mobile-layout .left-panel .left-page[data-page="models"].active { height:100%; min-height:0; overflow:hidden; }
  body.mobile-layout .left-panel .left-page[data-page="views"].active { height:100%; min-height:0; overflow:auto; }
}
@media (max-width:820px) {
  body.mobile-layout .left-panel,
  body.mobile-layout .inspector,
  body.mobile-layout .mobile-tools-panel { pointer-events:none; }
  body.mobile-layout .left-panel.mobile-open,
  body.mobile-layout .inspector.mobile-open,
  body.mobile-layout .mobile-tools-panel.mobile-open { pointer-events:auto; }
}
@media (max-width:820px) {
  body.mobile-layout .left-panel,
  body.mobile-layout .inspector,
  body.mobile-layout .mobile-tools-panel {
    flex-direction:column;
    transform:translateY(calc(100% + var(--mobile-nav-h) + var(--mobile-safe-bottom) + var(--mobile-bottom-offset) + 26px));
  }
  body.mobile-layout .left-panel.mobile-open,
  body.mobile-layout .inspector.mobile-open,
  body.mobile-layout .mobile-tools-panel.mobile-open { transform:translateY(0); }
}
@media (max-width:820px) and (orientation:landscape) {
  body.mobile-layout .left-panel,
  body.mobile-layout .inspector,
  body.mobile-layout .mobile-tools-panel { transform:translateX(calc(100% + 20px)); }
  body.mobile-layout .left-panel.mobile-open,
  body.mobile-layout .inspector.mobile-open,
  body.mobile-layout .mobile-tools-panel.mobile-open { transform:translateX(0); }
}
@media (max-width:360px) {
  .mobile-topbar { grid-template-columns:58px minmax(0,1fr) 40px; gap:6px; padding-left:7px; padding-right:7px; }
  .mobile-brand-mark { width:56px; padding-left:4px; padding-right:4px; }
  .mobile-brand-mark img { width:48px; height:22px; }
}

@media (max-width:820px) {
  body.mobile-layout .tool-pointer-ring.mobile-touch-target {
    width:24px; height:24px; border-width:3px;
    box-shadow:0 0 0 3px rgba(255,255,255,.82),0 5px 16px rgba(0,0,0,.3);
  }
  body.mobile-layout #toolStatus {
    min-height:44px; height:auto; padding:8px 11px; line-height:1.25;
  }
}

/* TZ 2.1: mobile compatibility for desktop side-tab inspector wrapper. */
@media (max-width:820px) {
  body.mobile-layout .inspector { flex-direction:column; }
  body.mobile-layout .inspector-content { display:contents; }
  body.mobile-layout .inspector > .inspector-head,
  body.mobile-layout .inspector .inspector-head { order:0; position:relative; flex:0 0 58px; min-height:58px; display:flex; align-items:center; gap:10px; padding:8px 12px 5px; border-bottom:1px solid var(--border); background:var(--surface-1); }
  body.mobile-layout .inspector .inspector-head::before { content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:42px; height:4px; border-radius:999px; background:var(--border-strong); }
  body.mobile-layout .inspector-tabs { order:1; width:auto; min-width:0; flex:0 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px 8px; border:0; border-bottom:1px solid var(--border); }
  body.mobile-layout .inspector-tab { width:auto; min-width:0; height:42px; padding:0 5px; flex-direction:row; gap:4px; border-radius:11px; font-size:10px; }
  body.mobile-layout .inspector-tab.active:before { display:none; }
  body.mobile-layout .inspector-tab .badge-number { position:static; }
  body.mobile-layout .inspector > .inspector-body,
  body.mobile-layout .inspector .inspector-body { order:2; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:10px 10px 18px; }
}