/* ── App Loading Overlay ── */
#app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#app-loading-overlay.alo-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.alo-inner {
  text-align: center;
}
.alo-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 4px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: alo-spin 0.8s linear infinite;
}
@keyframes alo-spin {
  to { transform: rotate(360deg); }
}
.alo-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
  letter-spacing: 0.02em;
}

/*
 * General Formatting
 */

html {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  height: 100%;
}
.container-fluid {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

div {
  margin: 0;
  padding: 0;
}

/*
 * Layout
 */

.main-row {
  display: flex !important;
  height: 100%;
  padding: 0;
}

/*
 * Sidebar
 */

.sidebar {
  width: 312px;
  min-width: 312px;
  max-width: 312px;
  flex: 0 0 312px;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid #e2e8f0;
  background: #fff;
  font-size: 14px;
  z-index: 100;
  transition: transform 0.3s ease;
}

.nav-sidebar {
  margin-right: -17px;
  margin-bottom: 16px;
  margin-left: -16px;
}

.nav-sidebar > li > a {
  padding: 10px 16px;
  font-size: 14px;
  color: #334155;
}

.nav-sidebar > li > a:hover {
  background: #f1f5f9;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #3b82f6;
}

/*
 * Context menu (item size controls)
 */

#context-menu {
  display: none;
}
#context-menu .ctx-inner {
  padding: 0 4px;
}
#context-menu .ctx-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#context-menu .ctx-buttons {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
#context-menu .ctx-buttons .btn {
  flex: 1;
  font-size: 12px;
  padding: 5px 0;
}
#context-menu .ctx-size {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
#context-menu .ctx-size-title {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
#context-menu .ctx-size-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
#context-menu .ctx-size-row label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  min-width: 14px;
  margin: 0;
}
#context-menu .ctx-size-row .form-control {
  height: 28px;
  padding: 2px 6px;
  font-size: 12px;
  flex: 1;
  min-width: 0;
}
#context-menu .ctx-lock {
  font-size: 12px;
  color: #475569;
  margin: 0;
  cursor: pointer;
}

/*
 * Main content
 */

.main {
  flex: 1 !important;
  width: auto !important;
  padding: 0;
}

/*
 * "Loading" modal
 */

#loading-modal {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: rgba(50, 50, 50, 0.9);
}

#loading-modal h1 {
  text-align: center;
  margin-top: 30%;
  color: #fff;
}

/*
 * Viewer / Floorplanner / Items
 */

#viewer {
  display: none;
  touch-action: none;
  position: relative;
  overflow: hidden;
  height: 100%;
}
#viewer canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
/* Ensure overlay controls inside viewer remain tappable */
#main-controls,
#room-info-panel,
#items-toolbar,
#roof-style-panel,
#ext-finish-panel,
#viewer-floor-tabs,
#cam-hint,
#loading-modal,
.foundation-panel,
#ground-select-panel,
#setback-panel {
  touch-action: auto;
}

#floorplanner {
  display: none;
}

#floorplanner-canvas {
  touch-action: none;
}

#add-items {
  display: none;
  padding: 16px;
  overflow-y: auto;
}

#main-controls {
  position: absolute;
  top: 56px;
  left: 16px;
  padding: 0;
  display: flex;
  gap: 6px;
  z-index: 12;
}

#main-controls .mc-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

#main-controls .mc-btn:hover {
  background: #fff;
  border-color: #cbd5e1;
  color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#main-controls .mc-btn:active {
  transform: scale(0.96);
}

#main-controls .mc-btn svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

#main-controls .mc-btn.btn-file {
  position: relative;
  overflow: hidden;
}

#main-controls .mc-btn.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: 0;
  cursor: pointer;
}

#camera-controls {
  position: absolute;
  bottom: 60px;
  right: 0;
  padding: 0 16px;
  text-align: right;
  z-index: 12;
}

#camera-controls .btn {
  background: rgba(255,255,255,0.92);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: all 0.15s;
}

#camera-controls .btn:hover {
  background: #fff;
  border-color: #cbd5e1;
  color: #3b82f6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#camera-controls .btn:active {
  transform: scale(0.96);
}

#camera-controls .btn-group-vertical .btn {
  border-radius: 0;
}

#camera-controls .btn-group-vertical .btn:first-child {
  border-radius: 8px 8px 0 0;
}

#camera-controls .btn-group-vertical .btn:last-child {
  border-radius: 0 0 8px 8px;
}

#floorplanner-controls {
  position: absolute;
  left: 0;
  top: 0;
  margin: 20px 0;
  padding: 0 20px;
  width: 100%;
}

#draw-walls-hint {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.50);
  color: #ffffff;
  padding: 5px 10px;
  z-index: 10;
  display: none;
}

.add-item {
  cursor: pointer;
}

.add-item img {
  max-width: 100%;
  height: auto;
}

.btn-file {
  display: inline-block;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

/*
 * Mobile sidebar toggle
 */

#sidebar-toggle {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 260;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  line-height: 1;
  text-align: center;
}

#sidebar-toggle:hover {
  background: #f8fafc;
}

/* Sidebar overlay for mobile */
#sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 99;
}

/*
 * Responsive: Tablet (<=1024px)
 */

@media (max-width: 1024px) {
  .sidebar {
    width: 264px;
    min-width: 264px;
    max-width: 264px;
    flex: 0 0 264px;
  }
}

/*
 * Responsive: Mobile (<=768px)
 */

@media (max-width: 768px) {
  #sidebar-toggle {
    display: block !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100% !important;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    z-index: 150;
    padding-top: calc(64px + env(safe-area-inset-top, 0px));
  }

  .sidebar.open {
    transform: translateX(0);
  }

  #sidebar-overlay.active {
    display: block;
  }

  .main {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  #main-controls {
    top: 50px;
    left: 10px;
    right: 10px;
    max-width: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    background: rgba(255,255,255,0.92);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  #main-controls::-webkit-scrollbar { height: 0; display: none; }

  #camera-controls {
    bottom: 10px;
    right: 0;
    padding: 0 10px;
  }

  #camera-controls .btn {
    padding: 8px 10px;
  }

  .sidebar .nav-sidebar {
    margin-top: 0;
    padding-top: 0 !important;
  }



  #main-controls .mc-btn span {
    display: none;
  }

  #main-controls .mc-btn {
    padding: 6px 8px;
  }

  #floorplanner-controls {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: rgba(255,255,255,0.97) !important;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
    z-index: 60 !important;
    box-sizing: border-box !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 60 !important;
    gap: 4px;
    align-items: center;
  }
  #floorplanner-controls::-webkit-scrollbar { height: 0; display: none; }
  #floorplanner-controls .btn {
    flex-shrink: 0 !important;
    white-space: nowrap;
  }

  #add-items .col-sm-4 {
    width: 50%;
    float: left;
  }

  #floorplanner-controls .btn {
    padding: 4px 8px;
    font-size: 12px;
  }
}

/*
 * Responsive: Small phone (<=480px)
 */

@media (max-width: 480px) {
  .sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }

  #add-items .col-sm-4 {
    width: 100%;
  }

  #camera-controls .btn-group-vertical {
    display: inline-block;
  }
}

/*
 * Items Toolbar (top of Design view)
 */

#items-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

#items-toolbar::-webkit-scrollbar {
  height: 4px;
}

#items-toolbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

#items-toolbar .tb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  max-width: 56px;
  padding: 4px 2px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s;
  flex-shrink: 0;
}

#items-toolbar .tb-item:hover {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

#items-toolbar .tb-item:active {
  background: #e2e8f0;
  transform: scale(0.95);
}

#items-toolbar .tb-item svg {
  width: 22px;
  height: 22px;
  color: #475569;
  stroke-width: 1.75;
}

#items-toolbar .tb-item:hover svg {
  color: #3b82f6;
}

#items-toolbar .tb-item span {
  font-size: 9px;
  color: #64748b;
  margin-top: 2px;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 54px;
}

#items-toolbar .tb-sep {
  width: 1px;
  height: 32px;
  background: #e2e8f0;
  margin: 0 4px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  #items-toolbar {
    padding: 4px 6px;
    gap: 1px;
  }
  #items-toolbar .tb-item {
    min-width: 48px;
    max-width: 48px;
  }
  #items-toolbar .tb-item svg {
    width: 18px;
    height: 18px;
  }
  #items-toolbar .tb-item span {
    font-size: 8px;
  }
  #main-controls {
    top: 56px !important;
  }
}

/*
 * Room Info Panel (standalone card)
 */

#room-info-panel {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 14;
  pointer-events: auto;
}

#room-info-panel #total-sqft {
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
}

#room-info-panel #total-sqft span {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
}

#room-info-panel #room-list {
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}

#room-info-panel #room-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}

#room-info-panel #room-list .room-name-label {
  color: #475569;
  cursor: pointer;
  font-weight: 500;
}

#room-info-panel #room-list .room-name-label:hover {
  color: #3b82f6;
}

@media (max-width: 768px) {
  #room-info-panel {
    left: 8px;
    padding: 12px 14px;
    min-width: 130px;
  }
  #room-info-panel #total-sqft {
    font-size: 22px;
  }
  #room-info-panel #room-list > div {
    font-size: 11px;
  }
}


/* Floorplanner tools separator */
.fp-tools-sep {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: #d1d5db;
  margin: 0 8px;
  vertical-align: middle;
}

/* Undo/Redo/Grid buttons */
#fp-undo, #fp-redo, #fp-grid-toggle {
  vertical-align: middle;
}
#fp-undo:disabled, #fp-redo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#fp-grid-toggle.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0284c7;
}
#fp-grid-toggle.active i {
  color: #fff;
}
#fp-grid-size {
  display: none;
  vertical-align: middle;
}
#fp-grid-toggle.active ~ #fp-grid-size {
  display: inline-block;
}

/* Add Label button */
#fp-add-label.active {
  background: #0ea5e9;
  color: #fff;
  border-color: #0284c7;
}
#fp-add-label.active i {
  color: #fff;
}


/* в”Ђв”Ђ Item Catalog Panel в”Ђв”Ђ */
.main {
  position: relative;
  overflow: hidden;
}
.item-catalog {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  margin: 0 -16px;
}
.item-catalog.open {
  display: flex;
}
.catalog-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
#catalog-search {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
#catalog-search:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
#catalog-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#catalog-close:hover {
  background: #e2e8f0;
  color: #ef4444;
}
.catalog-categories {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.catalog-categories::-webkit-scrollbar {
  width: 5px;
}
.catalog-categories::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.cat-section {
  margin-bottom: 4px;
}
.cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.cat-header:hover {
  background: #f8fafc;
}
.cat-header .cat-arrow {
  font-size: 10px;
  transition: transform 0.2s;
  color: #94a3b8;
}
.cat-header.collapsed .cat-arrow {
  transform: rotate(-90deg);
}
.cat-header .cat-count {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
}
.cat-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 12px;
}
.cat-items.collapsed {
  display: none;
}
.cat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}
.cat-item-num {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(51,65,85,0.8);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 4px;
  padding: 0 3px;
  z-index: 1;
  pointer-events: none;
}
.cat-item:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}
.cat-item:active {
  transform: scale(0.97);
}
.cat-item img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #f8fafc;
}
.cat-item .cat-item-name {
  font-size: 11px;
  color: #475569;
  text-align: center;
  line-height: 1.2;
  max-height: 2.4em;
  overflow: hidden;
  word-break: break-word;
}
.cat-item.hidden {
  display: none;
}
.cat-section.hidden {
  display: none;
}
.catalog-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 14px;
  display: none;
}
.catalog-empty.show {
  display: block;
}

@media (max-width: 768px) {
  .item-catalog {
    width: auto;
  }
}

/* Floorplan Square Footage Card */
#fp-room-info {
  position: absolute;
  top: 70px;
  right: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 14;
  pointer-events: auto;
}
#fp-total-sqft {
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
}
#fp-total-sqft span {
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
}
#fp-room-list {
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
  padding-top: 10px;
}
#fp-room-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
#fp-room-list .fp-room-name {
  color: #475569;
  font-weight: 500;
}
#fp-room-list .fp-room-area {
  color: #94a3b8;
}
@media (max-width: 768px) {
  #fp-room-info {
    top: 8px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    min-width: auto;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  #fp-total-sqft {
    font-size: 16px;
    white-space: nowrap;
  }
  #fp-room-list {
    display: none;
  }
}

.fp-zoom-label {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: rgba(255,255,255,0.9);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-left: 6px;
  min-width: 48px;
  text-align: center;
  user-select: none;
}


/* ========== Style Selector ========== */
#style-selector { position:absolute; top:0; left:0; right:0; bottom:0; background:#0f172a; z-index:40; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Pages */
.ss-page { min-height:100vh; padding:0; animation:ssFadeIn .3s ease; }
@keyframes ssFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* Page Header */
.ss-page-header { text-align:center; padding:40px 24px 24px; }
.ss-hero-title { font-size:36px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:-0.5px; }
.ss-hero-sub { font-size:16px; color:#94a3b8; margin:0; }
.ss-back-link { display:inline-flex; align-items:center; gap:6px; color:#818cf8; font-size:13px; font-weight:600; background:none; border:none; cursor:pointer; margin-bottom:16px; }
.ss-back-link:hover { color:#a5b4fc; }

/* PAGE 1: Style Gallery */
.ss-style-gallery { max-width:1200px; margin:0 auto; padding:0 24px; }
.ss-style-item { background:#1e293b; border-radius:16px; overflow:hidden; margin-bottom:20px; border:2px solid transparent; transition:all .25s; cursor:pointer; }
.ss-style-item:hover { border-color:#334155; }
.ss-style-item.selected { border-color:#6366f1; box-shadow:0 0 0 4px rgba(99,102,241,.2); }
.ss-style-hero { height:280px; overflow:hidden; position:relative; }
.ss-style-hero img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.ss-style-item:hover .ss-style-hero img { transform:scale(1.03); }
.ss-style-label { padding:20px 24px; display:flex; align-items:center; gap:16px; }
.ss-style-label h3 { font-size:20px; font-weight:700; color:#f1f5f9; margin:0; flex:1; }
.ss-style-label p { font-size:14px; color:#94a3b8; margin:0; flex:2; }
.ss-select-style-btn { padding:10px 24px; border-radius:10px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .2s; }
.ss-select-style-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(99,102,241,.4); }
.ss-style-item.selected .ss-select-style-btn { background:#22c55e; }
.ss-style-item.selected .ss-select-style-btn::after { content:' \2713'; }

/* Expand panel */
.ss-style-expand { padding:0 24px 24px; border-top:1px solid #334155; }
.ss-expand-gallery { display:flex; gap:10px; overflow-x:auto; padding:20px 0 12px; -webkit-overflow-scrolling:touch; }
.ss-expand-gallery img { height:140px; border-radius:10px; flex-shrink:0; object-fit:cover; }
.ss-expand-info { color:#cbd5e1; }
.ss-expand-info h4 { font-size:18px; font-weight:700; color:#f1f5f9; margin:0 0 10px; }
.ss-expand-info p { font-size:14px; line-height:1.7; margin:0 0 12px; }
.ss-expand-info ul { padding-left:20px; margin:0; }
.ss-expand-info li { font-size:13px; line-height:1.8; color:#94a3b8; }

/* Page Footer */
.ss-page-footer { text-align:center; padding:32px 24px 48px; }
.ss-next-btn { display:inline-flex; align-items:center; gap:10px; padding:16px 40px; border-radius:14px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; font-size:17px; font-weight:700; cursor:pointer; transition:all .2s; box-shadow:0 4px 20px rgba(99,102,241,.35); }
.ss-next-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,.5); }

/* PAGE 2: Customize */
.ss-customize-section { max-width:1100px; margin:0 auto 36px; padding:0 24px; }
.ss-section-title { font-size:22px; font-weight:700; color:#f1f5f9; margin:0 0 16px; }

/* Roof grid */
.ss-roof-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:900px){.ss-roof-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:500px){.ss-roof-grid{grid-template-columns:repeat(2,1fr);}}
.ss-roof-card { background:#1e293b; border-radius:14px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:all .2s; }
.ss-roof-card:hover { border-color:#475569; }
.ss-roof-card.active { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.ss-roof-img { height:120px; overflow:hidden; background:#334155; display:flex; align-items:center; justify-content:center; }
.ss-roof-img img { width:100%; height:100%; object-fit:cover; }
.ss-roof-info { padding:12px 14px; }
.ss-roof-info h4 { font-size:15px; font-weight:700; color:#f1f5f9; margin:0 0 4px; }
.ss-roof-info p { font-size:11px; color:#94a3b8; margin:0; line-height:1.4; }

/* Color grid */
.ss-color-grid { display:flex; flex-wrap:wrap; gap:12px; }
.ss-color-card { display:flex; align-items:center; gap:10px; padding:10px 18px; background:#1e293b; border-radius:12px; border:2px solid transparent; cursor:pointer; transition:all .2s; }
.ss-color-card:hover { border-color:#475569; }
.ss-color-card.active { border-color:#6366f1; background:#1e1b4b; }
.ss-color-swatch { width:36px; height:36px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.1); flex-shrink:0; }
.ss-color-card span { font-size:13px; font-weight:600; color:#e2e8f0; }

/* Tier + Window row */
.ss-customize-row { max-width:1100px; margin:0 auto 36px; padding:0 24px; display:flex; gap:24px; }
@media(max-width:700px){.ss-customize-row{flex-direction:column;}}
.ss-half { flex:1; }
.ss-tier-grid { display:flex; flex-direction:column; gap:10px; }
.ss-tier-card { background:#1e293b; border-radius:12px; padding:16px 18px; border:2px solid transparent; cursor:pointer; transition:all .2s; display:flex; align-items:flex-start; gap:14px; }
.ss-tier-card:hover { border-color:#475569; }
.ss-tier-card.active { border-color:#6366f1; background:#1e1b4b; }
.ss-tier-badge { width:40px; height:40px; border-radius:10px; background:#334155; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#a5b4fc; flex-shrink:0; }
.ss-tier-card.active .ss-tier-badge { background:#6366f1; color:#fff; }
.ss-tier-card h4 { font-size:15px; font-weight:700; color:#f1f5f9; margin:0 0 2px; }
.ss-tier-card p { font-size:12px; color:#94a3b8; margin:0; }

.ss-window-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ss-window-card { background:#1e293b; border-radius:12px; padding:18px 14px; border:2px solid transparent; cursor:pointer; transition:all .2s; text-align:center; }
.ss-window-card:hover { border-color:#475569; }
.ss-window-card.active { border-color:#6366f1; background:#1e1b4b; }
.ss-window-card i { color:#64748b; margin-bottom:6px; }
.ss-window-card.active i { color:#818cf8; }
.ss-window-card span { display:block; font-size:12px; font-weight:600; color:#cbd5e1; }

/* PAGE 3: Upload */
.ss-upload-zone { max-width:800px; margin:0 auto; padding:0 24px; }
.ss-upload-zone #backyard-upload-area { border:2px dashed #475569; border-radius:20px; background:#1e293b; min-height:300px; display:flex; align-items:center; justify-content:center; flex-direction:column; cursor:pointer; transition:all .2s; }
.ss-upload-zone #backyard-upload-area.dragover { border-color:#6366f1; background:#1e1b4b; }
.ss-upload-placeholder { text-align:center; padding:48px 24px; }
.ss-upload-icon { margin-bottom:16px; }
.ss-upload-title { font-size:18px; font-weight:700; color:#f1f5f9; margin-bottom:6px; }
.ss-upload-sub { font-size:13px; color:#64748b; }
.ss-preview-grid { display:flex; flex-wrap:wrap; gap:12px; padding:20px; }
.ss-preview-thumb { position:relative; width:140px; height:140px; border-radius:12px; overflow:hidden; }
.ss-preview-thumb img { width:100%; height:100%; object-fit:cover; }
.ss-preview-remove { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.7); color:#fff; border:none; cursor:pointer; font-size:14px; line-height:24px; text-align:center; }
.ss-add-more { width:140px; height:140px; border-radius:12px; border:2px dashed #475569; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#64748b; font-size:32px; transition:all .2s; }
.ss-add-more:hover { border-color:#6366f1; color:#818cf8; }

/* Generate button */
.ss-generate-btn { display:inline-flex; align-items:center; gap:10px; padding:18px 48px; border-radius:16px; background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; border:none; font-size:20px; font-weight:800; cursor:pointer; transition:all .2s; box-shadow:0 6px 24px rgba(99,102,241,.4); }
.ss-generate-btn:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(99,102,241,.55); }

/* PAGE 4: Result */
.ss-result-display { max-width:900px; margin:0 auto; padding:0 24px; }
.ss-result-display img { width:100%; border-radius:16px; box-shadow:0 8px 40px rgba(0,0,0,.4); }
.gen-spinner { width:48px; height:48px; border:4px solid #334155; border-top-color:#6366f1; border-radius:50%; animation:spin .8s linear infinite; margin:60px auto 16px; }
@keyframes spin { to{transform:rotate(360deg)} }
.gen-loading-text { text-align:center; font-size:18px; font-weight:700; color:#f1f5f9; }
.gen-loading-sub { text-align:center; font-size:13px; color:#64748b; margin-top:4px; }
.gen-error-text { text-align:center; padding:40px; color:#f87171; font-size:15px; background:#1e293b; border-radius:16px; }

.ss-result-actions { display:flex; justify-content:center; gap:14px; padding:24px; }
.ss-action-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .2s; }
.ss-action-download { background:#1e293b; color:#e2e8f0; }
.ss-action-download:hover { background:#334155; }
.ss-action-regen { background:#1e293b; color:#e2e8f0; }
.ss-action-regen:hover { background:#334155; }

.ss-final-footer { padding:48px 24px 64px; }
.ss-start-floorplan-btn { display:inline-flex; align-items:center; gap:12px; padding:22px 56px; border-radius:18px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none; font-size:22px; font-weight:800; cursor:pointer; transition:all .2s; box-shadow:0 8px 32px rgba(34,197,94,.4); }
.ss-start-floorplan-btn:hover { transform:translateY(-3px); box-shadow:0 12px 48px rgba(34,197,94,.55); }

@media(max-width:600px){
  .ss-hero-title{font-size:24px;}
  .ss-style-hero{height:180px;}
  .ss-style-label{flex-direction:column;gap:8px;padding:14px 16px;}
  .ss-style-label h3{font-size:17px;}
  .ss-roof-info p{display:none;}
  .ss-generate-btn{font-size:16px;padding:14px 32px;}
  .ss-start-floorplan-btn{font-size:18px;padding:18px 36px;}
}

/* Wall Height Controls */
.wh-btn {
  padding: 5px 12px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #fff; color: #475569; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.15s; min-width: 36px;
}
.wh-btn:hover { border-color: #6366f1; color: #6366f1; }
.wh-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.wh-custom { display: flex; align-items: center; gap: 4px; margin-left: 4px; border-left: 1px solid #e2e8f0; padding-left: 8px; }
#wh-custom-input {
  width: 52px; padding: 4px 6px; border-radius: 6px; border: 1.5px solid #e2e8f0;
  font-size: 12px; font-weight: 600; text-align: center; color: #334155;
}
#wh-custom-input:focus { outline: none; border-color: #6366f1; }
.wh-custom-go {
  padding: 4px 10px; border-radius: 6px; border: none;
  background: #6366f1; color: #fff; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.wh-custom-go:hover { background: #4f46e5; }

.ext-texture-thumbnail.ext-active { border-color: #059669 !important; background: #ecfdf5; }
.ext-texture-thumbnail:hover { border-color: #94a3b8 !important; }

/* Percentage scale slider */
#context-menu .ctx-scale {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
#context-menu .ctx-scale-title {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#context-menu .ctx-scale-title span {
  font-weight: 700;
  color: #16a34a;
  font-size: 13px;
}
#context-menu #item-scale-slider {
  width: 100%;
  margin: 4px 0;
  cursor: pointer;
  accent-color: #16a34a;
}



/* ================================================================
   RESPONSIVE FIX: Tablets, Small Laptops, Medium Screens
   (769px - 1440px) — excludes mobile <=768px
   ================================================================ */

/* Main controls flex-wrap moved into media queries */

/* -- Large laptop (<=1440px): compact button text -- */
@media (max-width: 1440px) {
  #main-controls {
    flex-wrap: wrap;
    max-width: calc(100% - 200px);
  }
  #floorplanner-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  #main-controls .mc-btn {
    padding: 5px 8px;
    font-size: 11px;
    gap: 4px;
  }
  #main-controls .mc-btn svg,
  #main-controls .mc-btn i {
    width: 13px;
    height: 13px;
  }
  #main-controls {
    gap: 4px;
    max-width: calc(100% - 180px);
  }
}

/* -- Medium screens (<=1280px): shrink further, hide some labels -- */
@media (max-width: 1280px) {
  #main-controls {
    gap: 3px;
    max-width: calc(100% - 170px);
  }
  #main-controls .mc-btn {
    padding: 5px 6px;
    font-size: 10px;
    gap: 3px;
  }
  #main-controls .mc-btn span {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Shrink room-info panel */
  #room-info-panel {
    padding: 12px 14px;
    min-width: 140px;
  }
  #room-info-panel #total-sqft {
    font-size: 22px;
  }
  #room-info-panel #room-list > div {
    font-size: 12px;
  }

  /* Camera hint: shorter text */
  #cam-hint {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
}

/* -- Small laptops & tablets (<=1024px): icon-only top controls -- */
@media (max-width: 1024px) {
  #main-controls {
    top: 50px;
    left: 8px;
    gap: 3px;
    max-width: calc(100% - 160px);
  }
  #main-controls .mc-btn span {
    display: none;
  }
  #main-controls .mc-btn {
    padding: 6px 7px;
    font-size: 0;
    gap: 0;
    border-radius: 6px;
  }
  #main-controls .mc-btn svg,
  #main-controls .mc-btn i {
    width: 14px;
    height: 14px;
  }

  /* Room info panel: smaller, tighter */
  #room-info-panel {
    left: 10px;
    padding: 10px 12px;
    min-width: 120px;
    max-width: 160px;
  }
  #room-info-panel #total-sqft {
    font-size: 20px;
  }
  #room-info-panel #total-sqft span {
    font-size: 11px;
  }
  #room-info-panel #room-list > div {
    font-size: 11px;
    padding: 2px 0;
  }

  /* Camera controls: compact */
  #camera-controls {
    bottom: 12px;
    padding: 0 8px;
  }
  #camera-controls .btn {
    padding: 6px 8px;
    font-size: 12px;
  }
  /* Hide camera hint on tablets */
  #cam-hint {
    display: none !important;
  }

  /* Floating panels: smaller and repositioned */
  #roof-style-panel {
    right: 10px !important;
    width: 210px !important;
    padding: 10px !important;
    top: 50px !important;
    max-height: 70vh !important;
  }
  #ext-finish-panel {
    right: 8px !important;
    width: 220px !important;
    padding: 10px !important;
    top: 50px !important;
    max-height: 70vh !important;
  }

  /* Floorplanner room info */
  #fp-room-info {
    top: 10px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    min-width: auto;
    border-radius: 20px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
  }
  #fp-total-sqft {
    font-size: 18px;
  }
  #fp-room-list {
    display: none;
  }


}

/* Floorplanner controls flex moved into media queries */
@media (max-width: 1280px) {
  #floorplanner-controls {
    padding: 0 10px;
  }
  #floorplanner-controls .btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  #floorplanner-controls .fp-tools-sep {
    height: 20px;
    margin: 0 4px;
  }
}
@media (max-width: 1024px) {
  #floorplanner-controls {
    padding: 0 6px;
    gap: 3px;
  }
  #floorplanner-controls .btn {
    padding: 3px 6px;
    font-size: 10px;
  }
  #floorplanner-controls .fp-tools-sep {
    display: none;
  }
  /* Floor tabs: above bottom controls */
  #floor-tabs {
    bottom: 54px !important;
    padding: 3px 6px !important;
  }
  #floor-tabs .floor-tab {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}



/* -- Prevent floating panels from going off-screen -- */
#roof-style-panel,
#ext-finish-panel {
  max-width: calc(100vw - 20px) !important;
}

/* -- Foundation dropdown panel safe positioning -- */
@media (max-width: 1024px) {
  .foundation-panel,
  [id*="foundation"] {
    max-width: 260px;
  }
}



/* -- Style Selector pages: already responsive via existing rules -- */

/* -- Ensure context menu in sidebar doesn't overflow -- */
#context-menu .ctx-inner {
  max-width: 100%;
  overflow: hidden;
}
#context-menu .ctx-size-row .form-control {
  min-width: 0;
}

/* -- Viewer floor tabs: safe position -- */
#viewer-floor-tabs {
  max-width: calc(100% - 20px);
  overflow-x: auto;
}

/* -- Small tablet / landscape (769px-900px): keep sidebar items at normal tablet size -- */
@media (min-width: 769px) and (max-width: 900px) {
  .sidebar {
    width: 264px;
    min-width: 264px;
    max-width: 264px;
    flex: 0 0 264px;
    padding: 16px;
    font-size: 14px;
  }
  .cat-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px 12px;
  }
  .cat-item img {
    width: 64px;
    height: 64px;
  }
  .cat-item .cat-item-name {
    font-size: 11px;
  }
  #main-controls {
    max-width: calc(100% - 130px);
  }
  #room-info-panel,
  #fp-room-info {
    max-width: 140px;
  }
}

/* -- Fixed modal panels: ensure they fit viewport on small screens -- */
#foundation-panel,
#setback-panel {
  max-width: calc(100vw - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
}

#ground-select-panel {
  max-width: calc(100vw - 40px) !important;
  max-height: 60vh !important;
}

@media (max-width: 1024px) {
  #ground-select-panel {
    top: 80px !important;
    right: 10px !important;
    width: 200px !important;
  }
  #foundation-panel {
    width: 240px !important;
    padding: 14px 16px !important;
  }
  #setback-panel {
    width: 260px !important;
    padding: 14px 16px !important;
  }
}

@media (max-width: 900px) {
  #ground-select-panel {
    width: 180px !important;
    top: 60px !important;
  }
}

/* Wall height wrap moved into media queries */
@media (max-width: 1024px) {
  #wall-height-panel {
    top: 8px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100% - 20px) !important;
    justify-content: center !important;
  }
}

/* -- Separator spans in main-controls: hide on wrap -- */
@media (max-width: 1280px) {
  #main-controls > span[style*="width:1px"] {
    display: none !important;
  }
}


@media (max-width: 1024px) {
  #items-toolbar {
    max-height: 56px;
  }
  #items-toolbar .tb-item {
    min-width: 44px;
    max-width: 44px;
    padding: 3px 1px;
  }
  #items-toolbar .tb-item svg {
    width: 16px;
    height: 16px;
  }
  #items-toolbar .tb-item span {
    font-size: 7px;
    max-width: 42px;
  }
}

/* Mobile "best on larger screens" banner */
#mobile-notice-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fbbf24;
  color: #78350f;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 40px 6px 12px;
  font-family: 'Inter', -apple-system, sans-serif;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}
#mobile-notice-banner .close-banner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #92400e;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
@media (max-width: 1024px) {
  #mobile-notice-banner {
    display: block;
  }
}

/* ── Notes Panel ── */
#notes-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
#notes-save-btn:hover {
  background: #4f46e5 !important;
}
@media (max-width: 768px) {
  #notes-panel {
    width: 95vw !important;
    border-radius: 12px !important;
  }
}

/* ── Sq Ft Toggle ── */
#sqft-show-btn:hover {
  background: #fff !important;
  color: #3b82f6 !important;
  border-color: #3b82f6 !important;
}
#sqft-hide-btn:hover {
  color: #ef4444 !important;
}

/* iOS touch fix - buttons only, no wildcard selectors that could hit canvas */
#main-controls button,
#main-controls a,
#floorplanner-controls button,
#floorplanner-controls a,
#floorplanner-controls select,
#sqft-show-btn,
#sqft-hide-btn,
#notes-btn,
#fp-notes-btn,
#notes-panel button,
#notes-panel textarea,
#fp-ceiling-btn,
#fp-ceiling-dropdown button,
#fp-ceiling-dropdown select,
#cam-hint,
#floor-tabs button,
#viewer-floor-tabs button,
.foundation-panel button,
.foundation-panel select,
#ground-select-panel button,
#items-toolbar button,
#items-toolbar a,
#roof-style-panel button,
#ext-finish-panel button,
#setback-panel button,
#setback-panel input,
#fp-room-info button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  cursor: pointer;
}

/* __ADU_MOBILE_TOOLBAR_BOTTOM_V2__ */
@media (max-width: 768px) {
  /* Bottom toolbar, full-width, scrollable, icons+text */
  #main-controls,
  html #main-controls,
  body #main-controls {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px !important;
    background: rgba(255,255,255,0.97) !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }
  #main-controls::-webkit-scrollbar { height: 0 !important; width: 0 !important; display: none !important; }

  /* Buttons: full icon + text, no shrink */
  #main-controls .mc-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    gap: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  /* CRITICAL: override 1024px display:none and 1280px max-width:60px span truncation */
  #main-controls .mc-btn span {
    display: inline !important;
    font-size: 12px !important;
    line-height: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #main-controls .mc-btn svg,
  #main-controls .mc-btn i {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    stroke-width: 2 !important;
  }

  /* Push floating controls above the bottom bar */
  #camera-controls { bottom: 64px !important; }
  #floorplanner-controls { bottom: 64px !important; }
  #room-info-panel { bottom: 72px !important; top: auto !important; }
}


/* __ADU_SIDEBAR_PERF_V1__ : iOS Safari smoother sidebar */
@media (max-width: 768px) {
  .sidebar {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    scroll-behavior: auto;
    /* promote to its own layer so transforms don't re-layout the whole tree */
    will-change: transform;
    transform: translateX(-100%) translateZ(0);
  }
  .sidebar.open {
    transform: translateX(0) translateZ(0);
  }
  /* Skip rendering off-screen category grids */
  .cat-items {
    content-visibility: auto;
    contain-intrinsic-size: 0 240px;
  }
  /* Async image decoding hint (the attribute is added in JS but this also
     helps browsers that don't support the attribute) */
  .cat-item img {
    content-visibility: auto;
    contain-intrinsic-size: 64px 64px;
  }
}

/* __ADU_HAMBURGER_SAFEAREA_V2__ keep a visible close toggle on iOS */
@media (max-width: 768px) {
  body.sidebar-open #sidebar-toggle {
    display: block !important;
    background: #0f172a;
    color: #fff;
    border-color: rgba(15, 23, 42, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.25);
  }
}


/* __ADU_MOBILE_HIDE_CAMCTRLS_V1__ */
@media (max-width: 768px) {
  /* Pinch-zoom, two-finger pan and one-finger rotate are active on
     mobile so the desktop camera control panel (zoom/move/reset)
     is redundant and eats screen space. Hide it. */
  #camera-controls { display: none !important; }

  /* When the sqft panel is opened it must sit above items-toolbar
     (z-index 15) and main-controls. */
  #room-info-panel { z-index: 30 !important; }
  #sqft-show-btn   { z-index: 30 !important; }
}

#loan-panel,
#rental-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f9fafb;
  z-index: 12;
}

#rental-results table {
  border-collapse: collapse;
}
#rental-results tr {
  transition: background 0.1s;
}
#rental-results thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 1;
}

/* Project pill: mobile-friendly */
@media (max-width: 768px) {
  #current-design-pill {
    max-width: 140px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    margin: 0 2px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  #current-design-pill i { display: none !important; }
  #fp-design-pill {
    max-width: 120px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  #fp-design-pill i { display: none !important; }
}

/* ADU-BACK-HOME-BOTTOM: anchor the "Back to Home" link to the bottom of the
   sidebar. The .sidebar is already a flex item (flex:0 0 312px); making it a
   flex column lets margin-top:auto on .sidebar-back-home push it down. */
.sidebar { display: flex; flex-direction: column; }
.sidebar-back-home { margin-top: auto !important; }

/* ADU-CAM-CONTROLS-TOGGLE: hide all camera controls except the eye button. */
#camera-controls.minimized > *:not(#cam-toggle-btn) { display: none !important; }

/* ADU-ADDITEMS-SIDEBAR-FIX: defensive flex rules so the primary nav,
   the catalog, and auxiliary panels never get squeezed to zero height
   in the flex-column sidebar. Combined with hiding stray
   #floorTexturesDiv / #wallTextures / #ext-finish-panel on tab switch,
   this fixes the intermittent 'Add Items unclickable after floor click'
   bug. */
.sidebar > .nav-sidebar { flex-shrink: 0; }
.sidebar > hr { flex-shrink: 0; }
#item-catalog.open { flex: 1 1 auto; min-height: 200px; }
#floorTexturesDiv, #wallTextures { flex-shrink: 0; }

/* ======================================================================
   __ADU_RESPONSIVE_TOOLBARS_V1__
   Scope: #main-controls (3D top bar) and #floorplanner-controls (2D top bar)
   Goal : never clip buttons on any supported desktop width (1024px-1920px+)
   Strategy:
     - ALWAYS flex-wrap so excess buttons flow onto a 2nd row (not off-screen)
     - Bound width by the viewport, not an arbitrary parent %
     - Progressive compression: full labels -> short -> truncated -> icon-only
     - Non-mobile only: keep the existing mobile rules (<=768px) untouched
   ====================================================================== */

@media (min-width: 769px) {

  /* ---- 3D view toolbar ------------------------------------------------ */
  #main-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    column-gap: 6px;
    row-gap: 6px;
    right: 16px;                                /* bound the right edge */
    max-width: calc(100vw - 32px);              /* viewport-bound, not parent-bound */
    box-sizing: border-box;
  }

  #main-controls .mc-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  #main-controls .mc-btn span {
    white-space: nowrap;
  }

  /* Vertical separator pills inside the toolbar shouldn't force overflow. */
  #main-controls > span[style*="width:1px"] {
    flex: 0 0 auto;
  }

  /* ---- 2D view toolbar ------------------------------------------------ */
  #floorplanner-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    column-gap: 5px;
    row-gap: 6px;
    box-sizing: border-box;
    max-width: 100vw;
  }
  #floorplanner-controls .btn,
  #floorplanner-controls > button,
  #floorplanner-controls > span,
  #floorplanner-controls > div {
    flex: 0 0 auto;
  }
}

/* ---- Medium laptop (<=1440px) --------------------------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
  #main-controls .mc-btn {
    padding: 5px 9px;
    font-size: 11.5px;
    gap: 4px;
  }
  #main-controls .mc-btn svg,
  #main-controls .mc-btn i {
    width: 14px;
    height: 14px;
  }
  #floorplanner-controls .btn {
    padding: 4px 9px;
    font-size: 11.5px;
  }
}

/* ---- Small laptop (<=1280px) ---------------------------------------- */
@media (min-width: 1025px) and (max-width: 1280px) {
  #main-controls {
    column-gap: 4px;
    row-gap: 5px;
  }
  #main-controls .mc-btn {
    padding: 5px 8px;
    font-size: 11px;
    gap: 3px;
  }
  #main-controls .mc-btn span {
    max-width: 74px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #floorplanner-controls .btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ---- Cramped desktop (<=1150px): hide labels on non-critical buttons */
/* Primary-action buttons (Save, Load, Share, Clear All, New, Deploy)
   keep their labels for clarity. Everything else goes icon-only to
   keep the toolbar on a single row or compact 2-row wrap.          */
@media (min-width: 1025px) and (max-width: 1150px) {
  #main-controls .mc-btn#undo-btn span,
  #main-controls .mc-btn#redo-btn span,
  #main-controls .mc-btn#notes-btn span,
  #main-controls .mc-btn#ceiling-btn span,
  #main-controls .mc-btn#ruler-btn span,
  #main-controls .mc-btn#foundation-btn span,
  #main-controls .mc-btn#exterior-view-btn span,
  #main-controls .mc-btn#ext-finish-btn span,
  #main-controls .mc-btn#ground-select-btn span,
  #main-controls .mc-btn#roof-style-btn span,
  #main-controls .mc-btn#setback-btn span,
  #main-controls .mc-btn#stack-floors-btn span,
  #main-controls .mc-btn#clear-furniture-btn span,
  #main-controls .mc-btn#export-pdf-3d span {
    display: none;
  }
  #main-controls .mc-btn {
    padding: 6px 8px;
  }
  /* Same treatment for 2D secondary actions */
  #floorplanner-controls #fp-undo,
  #floorplanner-controls #fp-redo,
  #floorplanner-controls #fp-rotate-cw,
  #floorplanner-controls #fp-notes-btn,
  #floorplanner-controls #fp-add-label,
  #floorplanner-controls #export-pdf-2d {
    font-size: 0;  /* hides the inline label text, icons still render */
    padding: 4px 8px;
  }
  #floorplanner-controls #fp-undo i,
  #floorplanner-controls #fp-redo i,
  #floorplanner-controls #fp-rotate-cw i,
  #floorplanner-controls #fp-notes-btn i,
  #floorplanner-controls #fp-add-label i,
  #floorplanner-controls #export-pdf-2d i {
    font-size: 14px;  /* icon size isn't affected by the zero-font trick */
  }
}

/* The existing (<=1024px) block already collapses labels site-wide for
   main-controls, so no further rules needed here. This appendix only
   fills the gap between 1024px and the base desktop rules.          */
/* __/ADU_RESPONSIVE_TOOLBARS_V1__ */

/* __ADU_TPL_ZFIX_V1__ hide all controls when templates panel is visible */
body.templates-open #main-controls,
body.templates-open #floorplanner-controls,
body.templates-open #viewer-floor-tabs,
body.templates-open #room-info-panel,
body.templates-open #sqft-show-btn,
body.templates-open #fp-room-info {
  display: none !important;
}


/* __ADU_MOBILE_USERMENU_FIX_V1__
 * Mobile: keep the top-right user menu cluster (pending-review pill,
 * submit-for-review button, bell, greeting, login/logout) from running
 * across the viewport and covering the left hamburger toggle.
 */
@media (max-width: 768px) {
  /* Reserve room for the hamburger (left:12px + 44px wide + gap). */
  #user-menu {
    left: auto !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    max-width: calc(100vw - 72px) !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    pointer-events: auto;
  }

  /* Hide the greeting text entirely on mobile — profile is implied. */
  #user-greeting { display: none !important; }

  /* Collapse "Submit for Review" to icon-only on mobile. */
  #adu-rn-submit {
    font-size: 0 !important;
    padding: 6px 8px !important;
    min-width: 36px;
    height: 36px;
    justify-content: center;
  }
  #adu-rn-submit svg { width: 16px !important; height: 16px !important; }

  /* Shorten the status pill so it can't push the cluster past the hamburger. */
  #adu-rn-status-pill {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Keep hamburger clickable above everything in the user-menu cluster. */
  #sidebar-toggle { z-index: 1001 !important; }
}

/* Very narrow phones: drop the status pill entirely to avoid a second row
   pushing the user-menu down over the 3D toolbar. */
@media (max-width: 420px) {
  #adu-rn-status-pill { display: none !important; }
}
/* /__ADU_MOBILE_USERMENU_FIX_V1__ */


/* __ADU_MOBILE_DESIGN_NAME_FIX_V1__
 * Show the full design name on mobile. The hosting toolbars
 * (#main-controls and #floorplanner-controls) already scroll horizontally,
 * so letting the pill grow just extends the scroll — no layout breakage.
 */
@media (max-width: 768px) {
  #current-design-pill {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
  }
  #current-design-pill-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  /* Re-show the pill's icon on mobile (earlier rule hid it). */
  #current-design-pill i { display: inline-block !important; }

  #fp-design-pill {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
  }
  #fp-design-pill-text {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  #fp-design-pill i { display: inline-block !important; }
}
/* /__ADU_MOBILE_DESIGN_NAME_FIX_V1__ */


/* __ADU_RENTAL_MOBILE_PAD_V1__
 * On mobile the floating user-menu cluster (bell, submit, logout,
 * hamburger) overlaps the top of the rental and loan panels because
 * those panels are position:absolute top:0. Pad the inner wrapper of
 * each panel down so the hero/header has room to breathe.
 */
@media (max-width: 768px) {
  /* The inner wrapper is the first descendant <div> with inline
     style starting `max-width:960px`. Target it generically by
     adding padding to the panel itself, which scrolls anyway. */
  #rental-panel > div:first-child,
  #loan-panel   > div:first-child {
    padding-top: 96px !important;
  }
}
/* /__ADU_RENTAL_MOBILE_PAD_V1__ */

/* __ADU_USERMENU_CTX_V1__
 * 1. On the rental and loan panels, the "Pending Review" status pill and
 *    the "Submit for Review" button do not belong (they are design-page
 *    UI). Hide them whenever <body> has class .adu-panel-open (toggled
 *    in example.js when those panels are shown/hidden).
 * 2. On mobile, when the left sidebar is open (body.sidebar-open), the
 *    fixed user-menu cluster (bell, submit, pill, greeting, logout) was
 *    floating on top of the sidebar drawer. Drop its z-index below the
 *    sidebar drawer (z=150) and below the sidebar overlay (z=99) so the
 *    open sidebar fully covers it.
 */
body.adu-panel-open #adu-rn-status-pill,
body.adu-panel-open #adu-rn-submit {
  display: none !important;
}

@media (max-width: 768px) {
  body.sidebar-open #user-menu {
    z-index: 50 !important;
  }
}
/* /__ADU_USERMENU_CTX_V1__ */

/* __ADU_RENTAL_HOVER_V1__
 * Hover affordances for rental-results rows + the View button.
 * These replace the inline onmouseenter/onmouseleave handlers that
 * were generated per row in renderTable() — those allocated handler
 * functions for every row (50 per search, multiplied across many
 * searches) and contributed to mobile memory pressure.
 */
.adu-rental-row:hover { background: #f8fafc; }
.adu-rental-view-btn:hover { background: #dbeafe !important; }
/* /__ADU_RENTAL_HOVER_V1__ */

/* __ADU_AUTH_TAP_FIX_V1__
 * Mobile UX: the "Sign in" / "Create account" inline links inside the
 * auth modal (#auth-modal) and the anonymous trial wall (#anon-wall)
 * had a ~50x16px tap target. When the modal content was taller than
 * the viewport on a phone, the surrounding scroll container ate the
 * first tap (iOS Safari interprets tiny tap targets as scroll starts).
 * The user had to tap several times before the click registered.
 *
 * Enlarge the tap area to ~44px (iOS HIG min), and set
 * touch-action: manipulation so the browser doesn't wait to see if
 * this is a double-tap-to-zoom gesture.
 */
#auth-modal #auth-switch-login,
#auth-modal #auth-switch-signup,
#anon-wall  a[href="/login"],
#anon-wall  a[href="/register"] {
  display: inline-block !important;
  padding: 10px 14px !important;
  margin: -6px -8px !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(37,99,235,0.18);
  position: relative;
  z-index: 1;
  min-height: 32px;
  line-height: 1.2;
}
/* Also widen the parent <div> line-height a touch so the larger inline
   block doesn't visually crowd the surrounding text. */
#auth-view-signup > div:has(> #auth-switch-login),
#auth-view-login  > div:has(> #auth-switch-signup),
#anon-view-signup > div:has(> a[href="/login"]) {
  line-height: 1.7 !important;
}
/* /__ADU_AUTH_TAP_FIX_V1__ */


/* __ADU_RENT_SPLIT_MODULES_V1__ */
#rent-estimate-panel {
  touch-action: auto;
}
#rent-estimate-panel button,
#rent-estimate-panel input {
  pointer-events: auto;
}
#rent-estimate-panel.collapsed #rent-card-body {
  display: none !important;
}
body.templates-open #rent-estimate-panel,
body.adu-panel-open #rent-estimate-panel {
  display: none !important;
}
@media (max-width: 768px) {
  #rent-estimate-panel {
    left: 8px !important;
    right: 8px !important;
    bottom: 132px !important;
    width: auto !important;
    z-index: 30 !important;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  #rent-estimate-panel {
    left: 180px !important;
    width: 250px !important;
  }
}


/* __ADU_RENT_POLISH_V1__ */
#rent-estimate-panel.collapsed #rent-card-body {
  display: none !important;
}
#rent-card-toggle:hover {
  background: #f8fafc !important;
}
#rent-address-clear:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}
.pac-container {
  z-index: 2147483647 !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 35px rgba(15,23,42,0.18) !important;
}


/* __ADU_RENTAL_ADDRESS_MAP_V1__ */
.adu-rental-price-label {
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(15,23,42,0.18);
  padding: 2px 6px;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}
#rf-address-clear:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}


/* __ADU_CLOSE_BUTTONS_V1__ */
#rent-card-close:hover,
#rental-panel-close:hover {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}
#rent-estimate-panel.collapsed #rent-card-close {
  display: none !important;
}


/* __ADU_RENT_COLLAPSE_HARDEN_V1__ */
#rent-estimate-panel.collapsed {
  max-height: 58px !important;
}
#rent-estimate-panel.collapsed #rent-card-body {
  display: none !important;
}
#rent-estimate-panel.collapsed #rent-card-close {
  display: none !important;
}


/* __ADU_RENT_MOBILE_COMPACT_V1__
 * Match the mobile square-footage card scale. Keep the rent preview compact
 * beside it, then widen only while the exact-rent address form is open.
 */
@media (max-width: 768px) {
  #rent-estimate-panel {
    left: auto !important;
    right: 8px !important;
    bottom: 72px !important;
    width: min(172px, calc(100vw - 162px)) !important;
    max-width: 172px !important;
    border-radius: 10px !important;
    z-index: 30 !important;
  }
  #rent-estimate-panel.rent-form-open {
    left: 8px !important;
    right: 8px !important;
    bottom: 132px !important;
    width: auto !important;
    max-width: none !important;
  }
  #rent-card-toggle {
    padding: 8px 28px 8px 10px !important;
    min-height: 50px !important;
  }
  #rent-card-close {
    top: 6px !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
  }
  #rent-estimate-range {
    font-size: 15px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }
  #rent-card-chevron {
    font-size: 12px !important;
  }
  #rent-card-body {
    padding: 0 10px 10px !important;
  }
  #rent-estimate-note {
    font-size: 10px !important;
    margin-bottom: 6px !important;
  }
  #rent-exact-toggle,
  #rent-address-submit,
  #rent-see-comps {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }
}


/* __ADU_RENT_MOBILE_TOOLBAR_V1__
 * On phones the rent estimate lives behind the first bottom-toolbar button,
 * matching the compact mobile control pattern instead of floating full-time.
 */
@media (max-width: 768px) {
  #mobile-rent-btn {
    display: inline-flex !important;
    order: -100 !important;
  }
  #mobile-rent-label {
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #rent-estimate-panel {
    display: none !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 74px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(56vh, 360px) !important;
    overflow: auto !important;
    z-index: 59 !important;
  }
  #rent-estimate-panel.mobile-open {
    display: block !important;
  }
  body.templates-open #rent-estimate-panel.mobile-open,
  body.adu-panel-open #rent-estimate-panel.mobile-open,
  body.sidebar-open #rent-estimate-panel.mobile-open {
    display: none !important;
  }
  #rent-estimate-panel.rent-form-open {
    bottom: 74px !important;
  }
  #rent-card-toggle {
    padding: 9px 34px 9px 12px !important;
  }
  #rent-estimate-range {
    font-size: 16px !important;
  }
}
@media (min-width: 769px) {
  #mobile-rent-btn {
    display: none !important;
  }
}


/* __ADU_MOBILE_SQFT_TOOLBAR_V1__
 * Put square footage beside Rent in the mobile 3D bottom toolbar. The old
 * floating sqft pill is desktop-only on mobile so it does not disappear under
 * the bottom toolbar.
 */
@media (max-width: 768px) {
  #mobile-sqft-btn {
    display: inline-flex !important;
    order: -99 !important;
  }
  #mobile-sqft-label {
    max-width: 88px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #sqft-show-btn {
    display: none !important;
  }
  #room-info-panel {
    bottom: 74px !important;
    left: 8px !important;
    top: auto !important;
    z-index: 59 !important;
  }
  #room-info-panel.mobile-open {
    display: block !important;
  }
}
@media (min-width: 769px) {
  #mobile-sqft-btn {
    display: none !important;
  }
}

/* __ADU_MOBILE_FLOORPLANNER_BOTTOM_FIX_V1__
 * Keep the 2D floorplanner controls pinned to the browser bottom like the
 * 3D toolbar. This overrides the older 64px offset rule.
 */
@media (max-width: 768px) {
  #floorplanner-controls,
  html #floorplanner-controls,
  body #floorplanner-controls {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px 8px 10px !important;
    border-radius: 0 !important;
    z-index: 60 !important;
  }
}


/* __ADU_MOBILE_ITEM_CONTEXT_V1__
 * Selected item controls must be reachable on phones even when the left
 * sidebar is closed. JS moves the existing #context-menu into <body> on
 * mobile, and these rules present it as a bottom sheet above the 3D toolbar.
 */
@media (max-width: 768px) {
  #context-menu.mobile-item-menu {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 64px !important;
    width: auto !important;
    max-height: min(48vh, 360px) !important;
    overflow: auto !important;
    z-index: 2147483000 !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px 14px 10px 10px !important;
    box-shadow: 0 -8px 28px rgba(15,23,42,0.22) !important;
    padding: 12px !important;
    pointer-events: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #context-menu.mobile-item-menu .ctx-inner {
    padding: 0 !important;
  }
  #context-menu.mobile-item-menu .ctx-name {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  #context-menu.mobile-item-menu .ctx-buttons {
    gap: 8px !important;
  }
  #context-menu.mobile-item-menu .ctx-buttons .btn {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row {
    gap: 6px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row .form-control {
    height: 36px !important;
    font-size: 14px !important;
  }
  #context-menu.mobile-item-menu #item-scale-slider {
    width: 100% !important;
    min-height: 34px !important;
  }
  #context-menu.mobile-item-menu button,
  #context-menu.mobile-item-menu input,
  #context-menu.mobile-item-menu label {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}


/* __ADU_MOBILE_ITEM_CONTEXT_COMPACT_V1__
 * Compact the selected-item bottom sheet so it does not take over the phone
 * viewport while preserving delete, duplicate, size, scale, and lock controls.
 */
@media (max-width: 768px) {
  #context-menu.mobile-item-menu {
    bottom: 58px !important;
    max-height: min(34vh, 238px) !important;
    padding: 8px 9px !important;
    border-radius: 12px 12px 8px 8px !important;
  }
  #context-menu.mobile-item-menu .ctx-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #context-menu.mobile-item-menu .ctx-name {
    font-size: 13px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-height: 32px !important;
  }
  #context-menu.mobile-item-menu .ctx-buttons {
    margin: 0 !important;
    gap: 6px !important;
  }
  #context-menu.mobile-item-menu .ctx-buttons .btn {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 5px 8px !important;
  }
  #context-menu.mobile-item-menu .ctx-size,
  #context-menu.mobile-item-menu .ctx-scale {
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-title,
  #context-menu.mobile-item-menu .ctx-scale-title {
    font-size: 11px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row {
    display: grid !important;
    grid-template-columns: 12px 1fr 12px 1fr 12px 1fr !important;
    gap: 4px !important;
    align-items: center !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row label {
    min-width: 0 !important;
    font-size: 10px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row .form-control {
    height: 28px !important;
    padding: 2px 4px !important;
    font-size: 12px !important;
  }
  #context-menu.mobile-item-menu #item-scale-slider {
    min-height: 24px !important;
    margin: 0 !important;
  }
  #context-menu.mobile-item-menu .ctx-lock {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}


/* __ADU_MOBILE_ITEM_CONTEXT_ULTRACOMPACT_V1__ */
@media (max-width: 768px) {
  #context-menu.mobile-item-menu {
    left: 6px !important;
    right: 6px !important;
    bottom: 56px !important;
    max-height: min(25vh, 178px) !important;
    padding: 6px 7px !important;
    border-radius: 10px 10px 8px 8px !important;
  }
  #context-menu.mobile-item-menu .ctx-inner {
    gap: 4px !important;
  }
  #context-menu.mobile-item-menu .ctx-name {
    font-size: 12px !important;
    line-height: 1.05 !important;
    max-height: 14px !important;
    margin: 0 !important;
  }
  #context-menu.mobile-item-menu .ctx-buttons .btn {
    min-height: 26px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 4px 6px !important;
  }
  #context-menu.mobile-item-menu .ctx-size,
  #context-menu.mobile-item-menu .ctx-scale {
    padding: 4px 6px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-title,
  #context-menu.mobile-item-menu .ctx-scale-title {
    font-size: 10px !important;
    margin-bottom: 2px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row {
    grid-template-columns: 10px 1fr 10px 1fr 10px 1fr !important;
    gap: 3px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row label {
    font-size: 9px !important;
  }
  #context-menu.mobile-item-menu .ctx-size-row .form-control {
    height: 24px !important;
    min-height: 24px !important;
    padding: 1px 3px !important;
    font-size: 11px !important;
  }
  #context-menu.mobile-item-menu #item-scale-slider {
    min-height: 20px !important;
    height: 20px !important;
  }
  #context-menu.mobile-item-menu .ctx-lock {
    font-size: 11px !important;
    line-height: 1 !important;
  }
}


/* __ADU_RENT_ADDRESS_TOUCH_FIX_V1__ */
@media (max-width: 768px) {
  #rent-estimate-panel.mobile-open,
  #rent-estimate-panel.mobile-open.rent-form-open {
    z-index: 2147482500 !important;
    pointer-events: auto !important;
    touch-action: auto !important;
  }
  #rent-address-form,
  #rent-address-form *,
  #rent-address-input,
  #rent-address-clear,
  #rent-address-submit,
  #rent-see-comps {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-user-select: text;
    user-select: text;
  }
  #rent-address-input {
    position: relative !important;
    z-index: 2 !important;
    min-height: 38px !important;
    font-size: 16px !important;
  }
}


/* ============================================================== */
/* __ADU_SIDEBAR_NAV_RESTORE_V1__                                   */
/* Restore the main sidebar menu rows to their original readable    */
/* size while keeping the rest of the sidebar layout intact.        */
/* ============================================================== */
@media (min-width: 992px) {
  .sidebar { padding: 12px 12px 14px; }

  .nav-sidebar { margin-bottom: 6px; margin-left: -12px; margin-right: -13px; }
  .nav-sidebar > li > a {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.42857143;
  }
  .nav-sidebar > li > a > i[data-lucide] {
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
  }
  /* Chevrons add visual noise without clarifying anything in this
     compacted layout. Hide them but keep markup for any selectors. */
  .nav-sidebar > li > a .glyphicon-chevron-right { display: none; }

  /* Pull the services list flush against the divider above it. */
  #services-hr { margin: 6px 0 4px; border-top-color: #e2e8f0; }
  #services-nav { margin-top: -4px !important; margin-bottom: 6px; }

  /* Generic <hr> separators in the sidebar: tighter. */
  .sidebar > hr { margin: 6px 0; }

  /* Catalog: a touch less padding around the search row. */
  #item-catalog .catalog-header { padding-top: 4px; padding-bottom: 4px; }

  /* Back-to-home gets less bottom padding so it doesn't cause overflow
     on shorter viewports. */
  .sidebar-back-home { padding: 10px 14px 12px !important; }
}


/* ============================================================ */
/* __ADU_USERMENU_SIDEBAR_BOTTOM_V1__                            */
/* User-menu (greeting / login / logout / notifications bell /   */
/* submit-for-review) was a fixed top-right cluster floating on  */
/* top of the 3D and 2D viewers. It now lives inside the         */
/* .sidebar at the bottom, right above the Back-to-Home link.    */
/* ============================================================ */
#user-menu {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: auto !important;
  flex-wrap: wrap !important;
}

/* Greeting takes the full width of the sidebar dock. */
#user-menu #user-greeting {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* Notification bell: keep round shape but smaller in the dock. */
#user-menu #adu-rn-bell {
  width: 32px;
  height: 32px;
}

/* Submit-for-review button: shrink to dock width. */
#user-menu #adu-rn-submit {
  font-size: 12px !important;
  padding: 6px 10px !important;
  height: 32px;
}

/* Status pill: cap so it can't push the row past the sidebar width. */
#user-menu #adu-rn-status-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notification panel was anchored to top:56px right:12px (floating menu);
   re-anchor near the sidebar bottom-left so it pops out of the new dock. */
#adu-rn-panel {
  top: auto !important;
  bottom: 80px !important;
  left: 12px !important;
  right: auto !important;
}

/* Mobile drawer: the dock is inside the drawer, so all old absolute-
   positioning rules are obsolete. Override them explicitly. */
@media (max-width: 768px) {
  #user-menu {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  body.sidebar-open #user-menu { z-index: auto !important; }

  /* Mobile: bring the greeting back (we hid it when the menu was top-right
     to save horizontal space; that constraint is gone). */
  #user-greeting { display: inline-block !important; }

  /* Notification panel: full-width sheet anchored to the drawer bottom. */
  #adu-rn-panel {
    bottom: 70px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }
}

/* Hide the legacy floating-menu top padding on rental/loan panels — that
   padding only existed to clear the old top-right cluster. */
@media (max-width: 768px) {
  #rental-panel > div:first-child,
  #loan-panel   > div:first-child {
    padding-top: 16px !important;
  }
}

/* __ADU_SQFT_PANEL_SMART_V1__
 * Make the bottom-left sqft panel + the 2D floorplanner sqft card resilient
 * to long room names and large square-footage numbers.
 *   - Name truncates with an ellipsis (full text on hover via JS title attr).
 *   - Sqft cell never wraps and is never compressed.
 *   - Panel grows up to a sensible max width before truncation kicks in.
 */
#room-info-panel {
  min-width: 200px !important;
  max-width: 300px !important;
}
#room-info-panel #total-sqft {
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
#room-info-panel #room-list > div {
  gap: 12px;
  min-width: 0;
}
#room-info-panel #room-list .room-name-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}
#room-info-panel #room-list > div > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#fp-room-info {
  min-width: 200px !important;
  max-width: 320px !important;
}
#fp-total-sqft {
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
#fp-room-list > div {
  gap: 12px;
  min-width: 0;
}
#fp-room-list .fp-room-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}
#fp-room-list .fp-room-area {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  #room-info-panel {
    min-width: 160px !important;
    max-width: calc(100vw - 24px) !important;
  }
  #fp-room-info {
    min-width: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* __ADU_SIDEBAR_ITEMS_COMPACT_V1__
 * On mobile (<= 768px), when the user opens the "Add Items" catalog
 * (#item-catalog.open) the sidebar's bottom dock pushes catalog items
 * out of view. Hide those bottom links while the catalog is open so
 * the items grid takes the full available height. Desktop is untouched.
 */
@media (max-width: 768px) {
  body:has(#item-catalog.open) #sidebar-tutorials-link,
  body:has(#item-catalog.open) #user-menu {
    display: none !important;
  }
}

/* Safari < 15.4 / older Chromium fallback: :has() unsupported. Use the
 * adjacent-sibling chain on the sidebar (which is where these elements
 * actually live).
 */
@media (max-width: 768px) {
  .sidebar #item-catalog.open ~ #sidebar-tutorials-link,
  .sidebar #item-catalog.open ~ #user-menu {
    display: none !important;
  }
}


/* __ADU_BOTTOM_BADGES_HARMONY_V1__
 * Harmonize the three floating widgets at the bottom-left of the 3D viewer
 * (sqft mini button, rent estimate panel, builder-quotes panel) so they
 * share the same collapsed size, shape, and rhythm. Also fixes mobile
 * positioning for the quotes panel, which was previously stranded at the
 * hard-coded desktop left:538px.
 */
:root {
  --adu-badge-bottom: 16px;
  --adu-badge-start: 16px;
  --adu-badge-gap: 12px;
  --adu-badge-min-w: 200px;
  --adu-badge-collapsed-h: 56px;
  /* Per-badge expanded-state slot widths. Positions are calculated from
   * these so badges never overlap when the user un-collapses one. */
  --adu-badge-sqft-w: 240px;
  --adu-badge-rent-w: 278px;
  --adu-badge-quote-w: 230px;
}

/* Desktop layout: tile the three widgets left-to-right with consistent gaps,
 * overriding the prior hard-coded left:16 / left:244 / left:538 positions.
 * Each badge's left is calculated from the previous badge's *expanded* slot
 * width, so opening a collapsed panel never overlaps its neighbor. */
@media (min-width: 1025px) {
  #sqft-show-btn {
    left: var(--adu-badge-start) !important;
    bottom: var(--adu-badge-bottom) !important;
  }
  #rent-estimate-panel {
    left: calc(var(--adu-badge-start) + var(--adu-badge-sqft-w) + var(--adu-badge-gap)) !important;
    bottom: var(--adu-badge-bottom) !important;
  }
  #quote-widget-panel {
    left: calc(var(--adu-badge-start) + var(--adu-badge-sqft-w) + var(--adu-badge-rent-w) + (var(--adu-badge-gap) * 2)) !important;
    bottom: var(--adu-badge-bottom) !important;
  }
}

/* Sqft mini button: restyle to match the rent/quote collapsed header so the
 * three pills read as siblings. Uses a small label + larger value, same as
 * the rent panel's collapsed display.
 * NOTE: We deliberately do NOT set `display` here. The button defaults to
 * display:none via inline style and is toggled to display:'' by JS; either
 * value renders correctly with this internal layout. */
#sqft-show-btn {
  box-sizing: border-box !important;
  min-width: var(--adu-badge-min-w) !important;
  min-height: var(--adu-badge-collapsed-h) !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  text-align: left !important;
  line-height: 1.15 !important;
}
#sqft-show-btn #sqft-mini-val {
  display: inline-block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin-right: 4px !important;
}
#sqft-show-btn > span:last-child {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Rent + quote panels when collapsed: clamp to the same compact footprint
 * as the sqft mini-button so they look like siblings. */
#rent-estimate-panel.collapsed,
#quote-widget-panel.collapsed {
  width: var(--adu-badge-min-w) !important;
  min-width: var(--adu-badge-min-w) !important;
  max-width: var(--adu-badge-min-w) !important;
  min-height: var(--adu-badge-collapsed-h) !important;
  max-height: var(--adu-badge-collapsed-h) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Tablet (769-1024): keep the existing left:180/width:250 rent override but
 * shift the quote panel inward so it does not overlap or float in a gap. */
@media (min-width: 769px) and (max-width: 1024px) {
  #quote-widget-panel {
    left: calc(180px + 250px + var(--adu-badge-gap)) !important;
    width: 220px !important;
    bottom: var(--adu-badge-bottom) !important;
  }
}

/* __ADU_MOBILE_QUOTE_TOOLBAR_V1__
 * On mobile the Builder Quotes badge is hidden in favor of the existing
 * #mobile-quote-btn in the bottom toolbar (which opens the quote modal
 * directly). Mirrors the rent/sqft mobile-toolbar pattern. */
@media (max-width: 768px) {
  #quote-widget-panel {
    display: none !important;
  }
  #mobile-quote-btn {
    display: inline-flex !important;
    order: -98 !important; /* sits after rent (-100) and sqft (-99) */
  }
  #mobile-quote-label {
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
@media (min-width: 769px) {
  #mobile-quote-btn {
    display: none !important;
  }
}

/* Clamp the default sqft + room-list panel to the same slot width as the
 * sqft mini-pill, so a long room list cannot bleed into the rent panel. */
@media (min-width: 1025px) {
  #room-info-panel {
    left: var(--adu-badge-start) !important;
    bottom: var(--adu-badge-bottom) !important;
    width: var(--adu-badge-sqft-w) !important;
    max-width: var(--adu-badge-sqft-w) !important;
    box-sizing: border-box !important;
  }
  /* If the room list ever exceeds the panel height budget, allow scroll
   * inside the panel instead of overflowing horizontally. */
  #room-info-panel #room-list {
    max-height: 180px;
    overflow-y: auto;
  }
}

/* __ADU_BADGES_BLUE_BORDER_V1__: paint a clear blue border around all
 * four bottom-row badges so they read as a related group. */
#sqft-show-btn,
#room-info-panel,
#rent-estimate-panel,
#quote-widget-panel {
  border: 2px solid #3B82F6 !important;
}
/* On hover/active states the existing rules sometimes change border-color;
 * keep the blue identity by re-asserting it on hover too. */
#sqft-show-btn:hover {
  border-color: #2563EB !important;
}
/* __END_ADU_BOTTOM_BADGES_HARMONY_V1__ */

/* __ADU_QUOTE_WIDGET_COLLAPSED_HIDES_BODY__: when the Builder Quotes panel
 * has .collapsed, hide its body + close button via CSS in addition to the
 * inline display:none JS toggle. This protects the collapsed state even if
 * some stray script clears body.style.display. The toggle button removes
 * the .collapsed class to expand, so this only applies when collapsed. */
#quote-widget-panel.collapsed #quote-widget-body { display: none !important; }
#quote-widget-panel.collapsed #quote-widget-close { display: none !important; }

/* __ADU_SIDEBAR_BOTTOM_COLLAPSE_V2__
 * Toggle-row + body-class approach. JS in js/sidebar-bottom-collapse.js
 * inserts a #sb-bottom-toggle-row right before #services-hr, then toggles
 * body.adu-sb-bottom-collapsed to hide the bottom group. */
#sb-bottom-toggle-row {
  /* Take over the bottom-anchoring role from #services-hr. With the row
     pinned to the sidebar bottom, the chevron stays visible whether the
     section is expanded or collapsed. The bottom padding lifts the
     button off the sidebar's bottom edge so it doesn't get clipped or
     blend into the viewport edge -- especially noticeable when the
     bottom group is collapsed and the chevron is the only thing there. */
  margin-top: auto !important;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 6px 4px 14px 0;
}
/* Even more bottom breathing room when collapsed (button is alone). */
body.adu-sb-bottom-collapsed #sb-bottom-toggle-row {
  padding-bottom: 22px;
  padding-top: 10px;
}
#sb-bottom-toggle {
  /* Slightly larger and bolder than V2-original so the chevron reads
     against the white sidebar. Tinted background draws the eye when the
     section is collapsed and this is the only control visible. */
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  border-radius: 8px;
  width: 32px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
body.adu-sb-bottom-collapsed #sb-bottom-toggle {
  /* When collapsed, make the button slightly more prominent so users
     find it. */
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}
#sb-bottom-toggle:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #2563eb;
}
#sb-bottom-toggle:active { transform: translateY(1px); }
.sb-bottom-chev { display: inline-flex; line-height: 1; }
.sb-bottom-chev svg { display: block; }

/* When body has .adu-sb-bottom-collapsed, hide the bottom group. The
 * toggle row stays visible (it is anchored to the bottom). */
body.adu-sb-bottom-collapsed #services-hr,
body.adu-sb-bottom-collapsed #services-nav,
body.adu-sb-bottom-collapsed #sidebar-tutorials-link,
body.adu-sb-bottom-collapsed #user-menu {
  display: none !important;
}



/* __ADU_BOTTOM_DOCK_V2__
 * Desktop: dock is a real flex item with `margin-top: auto` so the
 * whole dock floats to the sidebar's bottom; its `display: flex;
 * flex-direction: column` makes its children stack top-to-bottom
 * exactly as they did when they were direct children of .sidebar.
 *
 * Mobile (<=768px): dock becomes `position: absolute; bottom: 0` so
 * the bottom group is physically pinned to the drawer's bottom even
 * when iOS Safari's flex math fails. The sidebar gets iOS-safe
 * height fallbacks (-webkit-fill-available) so the drawer fills the
 * visible viewport even on old iOS Safari.
 */
#sidebar-bottom-dock {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  flex-shrink: 0;
}
/* Inside the dock, the toggle row no longer needs to own margin-top:auto
 * (the dock as a whole now does). Reset it so the toggle row sits at
 * the TOP of the dock, with services-hr / services-nav / etc below. */
#sidebar-bottom-dock > #sb-bottom-toggle-row {
  margin-top: 0 !important;
}
/* Restore flex-shrink:0 for dock children -- the old `.sidebar > hr`
 * and `.sidebar > .nav-sidebar` rules no longer match these elements
 * because their parent changed from .sidebar to #sidebar-bottom-dock. */
#sidebar-bottom-dock > hr,
#sidebar-bottom-dock > .nav-sidebar,
#sidebar-bottom-dock > #user-menu,
#sidebar-bottom-dock > #sidebar-tutorials-link {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sidebar {
    /* Older iOS doesn't support 100dvh; -webkit-fill-available works
       on iOS Safari back to ~iOS 12. Order: dvh > webkit > 100%. */
    height: 100% !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
  }
  #sidebar-bottom-dock {
    /* Physical bottom anchor: takes over from margin-top:auto. */
    margin-top: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 4px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e8f0;
    z-index: 5;
  }
  /* Reserve room at the bottom of the sidebar so the absolutely
     positioned dock doesn't visually clip the catalog's last item.
     JS publishes the dock's actual offsetHeight to --adu-sb-dock-h. */
  .sidebar {
    padding-bottom: var(--adu-sb-dock-h, 200px) !important;
  }
  body.adu-sb-bottom-collapsed .sidebar {
    padding-bottom: 56px !important;
  }
}