@imagineio/configurator-sdk 0.1.0-beta.1

package/dist/239b619005.css

@@ -0,0 +1,1849 @@
+@layer sdk-base, vendor, sdk;
+@layer sdk {
+/* Floating sidebar container - positioned over the canvas */
+.sidebar-container {
+  display: flex;
+  width: var(--sidebar-width);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 14px;
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  bottom: 12px;
+  z-index: 15;
+}
+
+/* Chat kept, option panel hidden (`ui.hide('sidebar')` with `chat` still on). The container
+   normally spans top to bottom for the option panel; with only the chat card in it, anchor it
+   to the bottom at its own height so it does not reserve a column of empty space. */
+.sidebar-container--chat-only {
+  top: auto;
+  justify-content: flex-end;
+}
+
+/* Features/Options card */
+.sidebar--card {
+  display: flex;
+  width: var(--sidebar-width);
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  border-radius: 8px;
+  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.12);
+  background: var(--bg-primary);
+  overflow: hidden;
+  overflow-x: hidden;
+  min-height: 0;
+}
+
+/* Chat card */
+.sidebar-chat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex-shrink: 0;
+  align-self: stretch;
+  border-radius: 8px;
+  background: var(--bg-primary, #FFF);
+  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.12);
+  padding: 14px;
+}
+
+.sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  width: 100%;
+}
+
+/* Logo + title in sidebar header */
+.sidebar__logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sidebar__logo-icon {
+  width: 24px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.sidebar__logo-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--border-light, #E1E1E1);
+}
+
+.sidebar__logo-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary, #141414);
+  letter-spacing: -0.2px;
+  white-space: nowrap;
+}
+
+/* Undo/redo/reset actions in sidebar header */
+.sidebar__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+}
+
+.sidebar__action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-primary, #363636);
+  transition: background 0.15s ease;
+}
+
+.sidebar__action-btn:hover {
+  background: var(--bg-secondary, #f0f0f0);
+}
+
+.sidebar__action-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.sidebar__title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-800);
+}
+
+.sidebar__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sidebar-collapse-btn-size);
+  height: var(--sidebar-collapse-btn-size);
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
+  border: none;
+  background: transparent;
+  color: var(--icon-color-default);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.sidebar__collapse-btn:hover {
+  color: var(--text-primary);
+}
+
+.sidebar__collapse-btn svg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+
+.sidebar__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sidebar-content-padding);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.sidebar__content::-webkit-scrollbar {
+  display: none;
+}
+
+.sidebar__section {
+  margin-bottom: var(--sidebar-section-gap);
+  padding: var(--spacing-sm);
+  margin-left: calc(-1 * var(--spacing-sm));
+  margin-right: calc(-1 * var(--spacing-sm));
+  border-radius: var(--radius-xl);
+  transition: background-color var(--transition-slow), box-shadow var(--transition-slow);
+  overflow-x: hidden;
+}
+
+.sidebar__section:last-child {
+  margin-bottom: 0;
+}
+
+/* Highlighted section when selected from canvas */
+.sidebar__section--highlighted {
+  background-color: var(--color-selection-light);
+  box-shadow: 0 0 0 2px var(--color-selection-border);
+  animation: pulse-highlight 0.5s ease-in-out;
+}
+
+@keyframes pulse-highlight {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--color-selection-rgb), 0.6);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(var(--color-selection-rgb), 0.3);
+  }
+  100% {
+    box-shadow: 0 0 0 2px var(--color-selection-border);
+  }
+}
+
+.sidebar__section-title {
+  color: var(--color-neutral-900);
+  font-family: var(--font-family-heading);
+  font-size: var(--sidebar-section-title-size);
+  font-style: normal;
+  font-weight: var(--sidebar-section-title-weight);
+  line-height: 18px;
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin-bottom: var(--spacing-md);
+}
+
+.sidebar__hint {
+  font-size: var(--font-size-md);
+  color: var(--color-selection);
+  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-selection-light);
+  border-radius: var(--radius-lg);
+  border-left: 3px solid var(--color-selection);
+}
+
+.sidebar__hint--replace {
+  color: var(--color-brand-primary);
+  background: rgba(var(--color-brand-primary-rgb), 0.08);
+  border-left-color: var(--color-brand-primary);
+}
+
+/* Thumbnail Grid */
+.thumbnail-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--thumbnail-gap);
+  max-width: 100%;
+}
+
+.thumbnail-grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.thumbnail-grid--3col {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.thumbnail-grid--4col {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.thumbnail-grid--5col {
+  grid-template-columns: repeat(5, 1fr);
+}
+
+/* ============================================
+   LAYOUT THUMBNAILS - layout previews
+   ============================================ */
+.thumbnail-grid--layout {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.layout-thumbnail {
+  position: relative;
+  display: flex;
+  padding: 1px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--spacing-sm);
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  background: var(--thumbnail-bg);
+  overflow: visible;
+  cursor: pointer;
+  transition: border var(--transition-fast);
+}
+
+.layout-thumbnail:hover {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-hover);
+  background: var(--thumbnail-bg);
+}
+
+.layout-thumbnail--selected {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-selected);
+  background: var(--thumbnail-bg);
+}
+
+.layout-thumbnail__scene {
+  width: 100%;
+  aspect-ratio: 1/1;
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background: var(--thumbnail-bg);
+}
+
+.layout-thumbnail__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+
+/* Floor */
+.layout-thumbnail__floor {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 25%;
+  background: linear-gradient(to bottom, var(--preview-floor-light), var(--preview-floor-dark));
+}
+
+/* Cabinet representations */
+.layout-thumbnail__cabinets {
+  position: relative;
+  z-index: 1;
+  width: 75%;
+  height: 60%;
+}
+
+/* L-Shape (l_shaped from JSON) */
+.layout-thumbnail__cabinets--l_shape,
+.layout-thumbnail__cabinets--l_shaped {
+  background: linear-gradient(180deg, var(--preview-countertop) 0%, var(--preview-wood-light) 8%, var(--preview-wood) 100%);
+  clip-path: polygon(0 0, 60% 0, 60% 50%, 100% 50%, 100% 100%, 0 100%);
+  border-radius: var(--radius-xs);
+}
+
+/* U-Shape (u_shaped from JSON) */
+.layout-thumbnail__cabinets--u_shape,
+.layout-thumbnail__cabinets--u_shaped {
+  background: linear-gradient(180deg, var(--preview-countertop) 0%, var(--preview-wood-light) 8%, var(--preview-wood) 100%);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 70% 40%, 30% 40%, 30% 100%, 0 100%);
+  border-radius: var(--radius-xs);
+}
+
+/* Galley */
+.layout-thumbnail__cabinets--galley {
+  background: linear-gradient(180deg, var(--preview-countertop) 0%, var(--preview-wood-light) 8%, var(--preview-wood) 100%);
+  height: 30%;
+  width: 85%;
+  border-radius: var(--radius-xs);
+}
+
+/* Single Wall */
+.layout-thumbnail__cabinets--single_wall {
+  background: linear-gradient(180deg, var(--preview-countertop) 0%, var(--preview-wood-light) 8%, var(--preview-wood) 100%);
+  height: 30%;
+  width: 90%;
+  border-radius: var(--radius-xs);
+}
+
+/* Layout label - tooltip on hover */
+.layout-thumbnail__label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-size: var(--tooltip-font-size);
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-border-radius);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+  pointer-events: none;
+  margin-bottom: var(--spacing-xs);
+  z-index: var(--z-dropdown);
+}
+
+.layout-thumbnail__label::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--tooltip-bg);
+  border-bottom: none;
+}
+
+.layout-thumbnail:hover .layout-thumbnail__label {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ============================================
+   APPLIANCE THUMBNAILS - Light styled appliances
+   ============================================ */
+.hosted-product-thumbnail {
+  position: relative;
+  display: flex;
+  padding: 1px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  background: var(--thumbnail-bg);
+  aspect-ratio: 1/1;
+  overflow: visible;
+  cursor: pointer;
+  transition: border var(--transition-fast);
+}
+
+.hosted-product-thumbnail:hover {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-hover);
+  background: var(--thumbnail-bg);
+}
+
+.hosted-product-thumbnail--selected {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--color-selection);
+  background: var(--color-selection-light);
+  box-shadow: 0 0 0 3px var(--color-selection-medium);
+}
+
+.hosted-product-thumbnail--selected .hosted-product-thumbnail__icon {
+  color: var(--color-selection);
+}
+
+/* Replace mode - when a base cabinet is selected */
+.hosted-product-thumbnail--replace-mode {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--color-brand-primary);
+  background: rgba(var(--color-brand-primary-rgb), 0.08);
+}
+
+.hosted-product-thumbnail--replace-mode:hover {
+  background: rgba(var(--color-brand-primary-rgb), 0.15);
+  box-shadow: 0 0 0 3px rgba(var(--color-brand-primary-rgb), 0.2);
+}
+
+.hosted-product-thumbnail--replace-mode .hosted-product-thumbnail__icon {
+  color: var(--color-brand-primary);
+}
+
+.hosted-product-thumbnail--has-img {
+  padding: 0;
+}
+
+.hosted-product-thumbnail__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--thumbnail-border-radius);
+}
+
+.hosted-product-thumbnail__icon {
+  color: var(--icon-color-default);
+  width: 50%;
+  height: 50%;
+}
+
+.hosted-product-thumbnail__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Appliance label - tooltip on hover */
+.hosted-product-thumbnail__label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-size: var(--tooltip-font-size);
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-border-radius);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+  pointer-events: none;
+  margin-bottom: var(--spacing-xs);
+  z-index: var(--z-dropdown);
+}
+
+.hosted-product-thumbnail__label::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--tooltip-bg);
+  border-bottom: none;
+}
+
+.hosted-product-thumbnail:hover .hosted-product-thumbnail__label {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Placed appliance state - clickable to remove */
+.hosted-product-thumbnail--placed {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--badge-success-bg);
+  background: var(--thumbnail-bg);
+  cursor: pointer;
+}
+
+.hosted-product-thumbnail--placed:hover {
+  border: var(--thumbnail-border-width) solid var(--color-danger);
+  background: var(--color-danger-bg);
+}
+
+.hosted-product-thumbnail--placed:hover .hosted-product-thumbnail__badge {
+  background: var(--color-danger);
+  color: white;
+}
+
+.hosted-product-badge-remove {
+  display: none;
+}
+
+.hosted-product-thumbnail--placed:hover .hosted-product-badge-placed {
+  display: none;
+}
+
+.hosted-product-thumbnail--placed:hover .hosted-product-badge-remove {
+  display: inline;
+}
+
+.hosted-product-thumbnail--placed .hosted-product-thumbnail__icon {
+  color: var(--color-neutral-600);
+}
+
+/* Disabled appliance state - not compatible */
+.hosted-product-thumbnail--disabled {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--border-disabled);
+  background: var(--bg-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.hosted-product-thumbnail--disabled:hover {
+  border: var(--thumbnail-border-width) solid var(--border-disabled);
+  background: var(--bg-disabled);
+}
+
+.hosted-product-thumbnail--disabled .hosted-product-thumbnail__icon {
+  color: var(--color-neutral-disabled);
+}
+
+/* Placed badge */
+.hosted-product-thumbnail__badge {
+  position: absolute;
+  bottom: var(--spacing-xs);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--badge-success-bg);
+  color: var(--badge-success-text);
+  font-size: var(--badge-font-size);
+  font-weight: var(--font-weight-semibold);
+  padding: var(--badge-padding);
+  border-radius: var(--badge-border-radius);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.hosted-product-thumbnail__badge--replace {
+  background: var(--color-brand-primary);
+  color: var(--text-inverse);
+}
+
+.hosted-product-thumbnail__badge--disabled {
+  background: var(--border-disabled);
+  color: var(--color-neutral-disabled);
+}
+
+/* ============================================
+   PLACED APPLIANCES LIST
+   ============================================ */
+.placed-appliances {
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--border-default);
+}
+
+.placed-appliances__title {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-600);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  margin-bottom: var(--spacing-sm);
+}
+
+.placed-appliances__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+}
+
+.placed-appliances__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--thumbnail-bg);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-default);
+}
+
+.placed-appliances__name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-800);
+}
+
+.placed-appliances__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--btn-height-sm);
+  height: var(--btn-height-sm);
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-neutral-400);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.placed-appliances__remove:hover {
+  background: var(--color-danger-bg);
+  color: var(--color-danger);
+}
+
+.placed-appliances__remove svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+/* ============================================
+   FINISH THUMBNAILS - Square tile with texture/color
+   ============================================ */
+.thumbnail-grid--finish {
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.finish-thumbnail {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 1px;
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  background: var(--thumbnail-bg);
+  cursor: pointer;
+  transition: border var(--transition-fast), box-shadow var(--transition-fast);
+  overflow: visible;
+  /* As a grid item, `1fr` is really `minmax(auto, 1fr)`, so a cell's width can grow to
+     its CONTENT's max-content. A textured card (image content) then claimed more track
+     width than a colour-only card, so all-colour option sets rendered NARROWER (e.g.
+     40px vs 60px). `min-width: 0` forces every track to pure 1fr — equal width for every
+     finish card regardless of whether its content is an image or a flat colour. */
+  min-width: 0;
+}
+
+.finish-thumbnail:hover {
+  border: 2px solid var(--thumbnail-border-hover);
+}
+
+.finish-thumbnail--selected {
+  border: 2px solid var(--thumbnail-border-selected);
+}
+
+.finish-thumbnail--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: auto;
+}
+
+.finish-thumbnail--disabled:hover {
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  box-shadow: none;
+}
+
+.finish-thumbnail--disabled .finish-thumbnail__unavailable {
+  display: none;
+}
+
+.finish-thumbnail--disabled:hover .finish-thumbnail__unavailable {
+  display: block;
+}
+
+.finish-thumbnail__unavailable {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(var(--text-primary-rgb, 54, 54, 54), 0.85);
+  color: var(--bg-primary, #fff);
+  font-size: 10px;
+  padding: 2px 4px;
+  text-align: center;
+  border-radius: 0 0 var(--thumbnail-border-radius) var(--thumbnail-border-radius);
+}
+
+.finish-thumbnail__preview {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1/1;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+}
+
+.finish-thumbnail__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ── Thumbnail skeleton ("shadow" placeholder) ─────────────────────────────
+   Fills a thumbnail slot with an animated shimmer until the image loads, so an
+   option card always occupies its proper size and never collapses to unstyled
+   "dots" while thumbnails stream in. Shared by every theme (all use these cards).
+   The image fades in over it (inline opacity), then the skeleton unmounts. */
+.thumb-skeleton {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.05) 25%,
+    rgba(0, 0, 0, 0.10) 37%,
+    rgba(0, 0, 0, 0.05) 63%
+  );
+  background-size: 400% 100%;
+  animation: thumb-skeleton-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes thumb-skeleton-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: 0 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .thumb-skeleton { animation: none; }
+}
+.finish-thumbnail__img,
+.option-thumbnail__img,
+.layout-thumbnail__img { transition: opacity 0.25s ease; }
+/* Layout scene needs to anchor the absolute skeleton (finish preview + option card
+   are already position:relative). */
+.layout-thumbnail__scene { position: relative; }
+
+.finish-thumbnail__swatch {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-sm);
+}
+
+.finish-thumbnail__name {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-size: var(--tooltip-font-size);
+  font-weight: 500;
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-border-radius);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+  pointer-events: none;
+  margin-bottom: var(--spacing-xs);
+  z-index: var(--z-dropdown);
+}
+
+.finish-thumbnail__name::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--tooltip-bg);
+  border-bottom: none;
+}
+
+.finish-thumbnail:hover .finish-thumbnail__name {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* When toggle ON: show inline on card instead of tooltip */
+.finish-thumbnail--show-labels {
+  overflow: hidden;
+}
+
+.finish-thumbnail--show-labels .finish-thumbnail__name {
+  position: static;
+  transform: none;
+  background: none;
+  color: var(--color-neutral-700);
+  font-size: 9px;
+  padding: 0 2px 3px;
+  border-radius: 0;
+  white-space: nowrap;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  margin-bottom: 0;
+  z-index: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  text-align: center;
+}
+
+.finish-thumbnail--show-labels .finish-thumbnail__name::after {
+  display: none;
+}
+
+.finish-thumbnail--selected.finish-thumbnail--show-labels .finish-thumbnail__name {
+  color: var(--color-neutral-900);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ============================================
+   PRODUCT THUMBNAILS - For island/product selection
+   ============================================ */
+/* ============================================
+   Toggle Row - Island toggle
+   ============================================ */
+.sidebar__toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar__section-title--inline {
+  margin: 0;
+}
+
+.sidebar__toggle {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  border: none;
+  background: var(--border-dark, #d1d5db);
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s ease;
+}
+
+.sidebar__toggle--on {
+  background: var(--color-brand-primary, #ff5722);
+}
+
+.sidebar__toggle-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bg-primary, #fff);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease;
+}
+
+.sidebar__toggle--on .sidebar__toggle-thumb {
+  transform: translateX(18px);
+}
+
+/* ============================================
+   Island Controls - Tier & Width toggles
+   ============================================ */
+.sidebar__island-controls {
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sidebar__island-controls .option-thumbnail--has-img {
+  aspect-ratio: 1/1;
+  width: 72px;
+  height: 72px;
+}
+
+.sidebar__island-controls .thumbnail-grid--2col {
+  grid-template-columns: repeat(2, auto);
+  justify-content: start;
+}
+
+.sidebar__label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-neutral-600);
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* ---- Width slider ---- */
+.sidebar__label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+
+.sidebar__label-row .sidebar__label {
+  margin-bottom: 0;
+}
+
+.sidebar__label-value {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-brand-primary, #ff5722);
+}
+
+.sidebar__slider-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar__island-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 4px;
+  background: var(--border-default, #e5e7eb);
+  outline: none;
+  cursor: pointer;
+  accent-color: var(--color-brand-primary, #ff5722);
+}
+
+.sidebar__island-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-brand-primary, #ff5722);
+  cursor: pointer;
+  border: 2px solid var(--bg-primary, #fff);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  transition: transform 0.15s;
+}
+
+.sidebar__island-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.sidebar__island-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--color-brand-primary, #ff5722);
+  cursor: pointer;
+  border: 2px solid var(--bg-primary, #fff);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+
+.sidebar__slider-ticks {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--color-neutral-500);
+  font-weight: 500;
+}
+
+/* ============================================
+   Product Thumbnail (legacy)
+   ============================================ */
+.product-thumbnail {
+  position: relative;
+  display: flex;
+  padding: 1px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  background: var(--thumbnail-bg);
+  aspect-ratio: 1/1;
+  overflow: visible;
+  cursor: pointer;
+  transition: border var(--transition-fast);
+}
+
+.product-thumbnail:hover {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-hover);
+  background: var(--thumbnail-bg);
+}
+
+.product-thumbnail--selected {
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-selected);
+  background: var(--thumbnail-bg);
+}
+
+.product-thumbnail__icon {
+  color: var(--icon-color-default);
+  width: 40%;
+  height: 40%;
+}
+
+.product-thumbnail__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Product label - tooltip on hover */
+.product-thumbnail__label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-size: var(--tooltip-font-size);
+  padding: var(--tooltip-padding);
+  border-radius: var(--tooltip-border-radius);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-fast), visibility var(--transition-fast);
+  pointer-events: none;
+  margin-bottom: var(--spacing-xs);
+  z-index: var(--z-dropdown);
+}
+
+.product-thumbnail__label::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--tooltip-bg);
+  border-bottom: none;
+}
+
+.product-thumbnail:hover .product-thumbnail__label {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ============================================
+   BACK BUTTON - For cabinet selected view
+   ============================================ */
+.sidebar__back-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  border: none;
+  background: transparent;
+  color: var(--color-neutral-800);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--transition-fast);
+}
+
+.sidebar__content--mobile .sidebar__back-btn {
+  margin-bottom: 16px;
+}
+
+.sidebar__back-btn:hover {
+  color: var(--color-neutral-600);
+}
+
+.sidebar__back-btn svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+/* ============================================
+   WIDTH SLIDER - Cabinet width control
+   ============================================ */
+.width-slider {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  max-width: 100%;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.width-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  margin-left: 6px;
+  width: calc(100% - 12px);
+  height: var(--slider-track-height);
+  background: var(--slider-track-bg);
+  border-radius: var(--radius-xs);
+  max-width: 100%;
+  outline: none;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.width-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-primary);
+  border-radius: var(--radius-circle);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+
+.width-slider__input::-moz-range-thumb {
+  width: var(--slider-thumb-size);
+  height: var(--slider-thumb-size);
+  background: var(--color-primary);
+  border-radius: var(--radius-circle);
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.width-slider__input::-moz-range-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: 0 2px 8px rgba(var(--color-brand-primary-rgb), 0.4);
+}
+
+.width-slider__input::-moz-range-track {
+  height: var(--slider-track-height);
+  background: var(--slider-track-bg);
+  border-radius: var(--radius-xs);
+  border: none;
+}
+
+.width-slider__track-wrapper {
+  flex: 1;
+  min-width: 0;
+}
+
+.width-slider__ticks {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 2px 0;
+}
+
+.width-slider__tick {
+  text-align: center;
+  min-width: 24px;
+  font-size: var(--font-size-md);
+  color: var(--color-neutral-400);
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.25s ease, font-weight 0.25s ease;
+}
+
+.width-slider__tick:hover {
+  color: var(--color-neutral-600);
+}
+
+.width-slider__tick--active {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.width-slider__value {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-neutral-900);
+  white-space: nowrap;
+  flex-shrink: 0;
+  min-width: 40px;
+  text-align: right;
+  transition: color 0.15s ease;
+}
+
+/* ============================================
+   DOOR STYLE THUMBNAILS - Door panel options
+   ============================================ */
+.door-style-thumbnail {
+  position: relative;
+  display: flex;
+  padding: var(--spacing-sm);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--thumbnail-border-radius);
+  border: var(--thumbnail-border-width) solid var(--thumbnail-border);
+  background: var(--thumbnail-bg);
+  aspect-ratio: 1/1;
+  cursor: pointer;
+  transition: border var(--transition-fast);
+}
+
+.door-style-thumbnail:hover {
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-hover);
+}
+
+.door-style-thumbnail--selected {
+  border: var(--thumbnail-border-width-selected) solid var(--thumbnail-border-selected);
+}
+
+.door-style-thumbnail__preview {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.door-style-thumbnail__door {
+  width: 70%;
+  height: 85%;
+  background: var(--preview-wood-light);
+  border-radius: var(--radius-xs);
+}
+
+/* Shaker style - recessed panel */
+.door-style-thumbnail__door--shaker {
+  background: linear-gradient(135deg, var(--preview-wood-light) 0%, var(--preview-wood) 100%);
+  box-shadow: inset 3px 3px 0 rgba(0,0,0,0.1), inset -3px -3px 0 rgba(255,255,255,0.1);
+  border: 2px solid var(--preview-wood-dark);
+}
+
+/* Slab style - flat */
+.door-style-thumbnail__door--slab {
+  background: linear-gradient(180deg, var(--preview-slab-light) 0%, var(--preview-slab-dark) 100%);
+}
+
+/* Raised panel */
+.door-style-thumbnail__door--raised_panel {
+  background: linear-gradient(135deg, var(--preview-wood-light) 0%, var(--preview-wood) 100%);
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+/* Glass front */
+.door-style-thumbnail__door--glass {
+  background: linear-gradient(180deg, rgba(200,220,240,0.8) 0%, rgba(180,200,220,0.6) 100%);
+  border: 2px solid var(--preview-glass-border);
+}
+
+/* Louvered */
+.door-style-thumbnail__door--louvered {
+  background: repeating-linear-gradient(
+    0deg,
+    var(--preview-wood-light) 0px,
+    var(--preview-wood-light) 4px,
+    var(--preview-wood-dark) 4px,
+    var(--preview-wood-dark) 6px
+  );
+}
+
+/* ============================================
+   OPTION THUMBNAILS - Generic option buttons
+   ============================================ */
+.option-thumbnail {
+  position: relative;
+  display: flex;
+  padding: 8px 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  /* Use a 2px transparent border by default so hover/selected states
+   * (which add a 2px solid border) don't change the element's outer box
+   * and reflow neighboring cards. Only the border COLOR animates. */
+  border: 2px solid var(--border-light, #E1E1E1);
+  background: var(--bg-muted, #F7F7F7);
+  min-height: 48px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  overflow: hidden;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.option-thumbnail:hover {
+  border-color: var(--text-primary, #363636);
+  background: var(--bg-primary, #fff);
+}
+
+.option-thumbnail--selected {
+  border-color: var(--text-primary, #363636);
+  background: var(--bg-primary, #fff);
+}
+
+.option-thumbnail--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: auto;
+}
+
+/* Layout tiles disabled by the engine (optionAvailability) — same treatment as an
+   option thumbnail, since the tile is the same affordance in a different grid. */
+.layout-thumbnail--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.option-thumbnail--disabled:hover {
+  border-color: var(--border-light, #E1E1E1);
+  background: var(--bg-muted, #F7F7F7);
+}
+
+.option-thumbnail--disabled .option-thumbnail__coming-soon {
+  display: none;
+}
+
+.option-thumbnail--disabled:hover .option-thumbnail__coming-soon {
+  display: block;
+}
+
+.option-thumbnail__coming-soon {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(var(--text-primary-rgb, 54, 54, 54), 0.85);
+  color: var(--bg-primary, #fff);
+  font-size: 9px;
+  font-weight: 600;
+  text-align: center;
+  padding: 2px 0;
+  letter-spacing: 0.3px;
+}
+
+.option-thumbnail--has-img {
+  padding: 0;
+  min-height: 0;
+  aspect-ratio: 1/1;
+  overflow: hidden;
+}
+
+.option-thumbnail__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 3px;
+}
+
+.option-thumbnail__img-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
+  color: var(--bg-primary, #fff);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 8px 4px 3px;
+  text-align: center;
+  line-height: 1.2;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.option-thumbnail:hover .option-thumbnail__img-label {
+  opacity: 1;
+}
+
+.option-thumbnail--show-labels .option-thumbnail__img-label {
+  opacity: 1;
+}
+
+.option-thumbnail__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.option-thumbnail__name {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-primary, #363636);
+  line-height: 1.2;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  /* Name text renders inside the no-image branch — always show it so tiles
+     without a backend thumbnail still identify themselves. Previously hidden
+     by default with hover-reveal, which left every no-thumbnail tile blank
+     at rest. */
+  display: block;
+}
+
+.option-thumbnail--show-labels .option-thumbnail__name {
+  display: block;
+}
+
+/* Door type specific grid - smaller items */
+.thumbnail-grid--door-type {
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.thumbnail-grid--door-type .option-thumbnail {
+  padding: 6px 4px;
+  min-height: 40px;
+}
+
+.thumbnail-grid--door-type .option-thumbnail__name {
+  font-size: 9px;
+}
+
+.thumbnail-grid--handle {
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.thumbnail-grid--style {
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+/* ============================================
+   FRAME SIZE BUTTONS - Dimension selection
+   ============================================ */
+.frame-size-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.frame-size-btn {
+  flex: 0 0 auto;
+  padding: 6px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-primary, #363636);
+  background: var(--bg-muted, #F7F7F7);
+  border: 2px solid var(--border-light, #E1E1E1);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: border 0.15s, background 0.15s;
+  white-space: nowrap;
+}
+
+.frame-size-btn:hover {
+  border: 2px solid var(--text-primary, #363636);
+  background: var(--bg-primary, #fff);
+}
+
+.frame-size-btn--selected {
+  border: 2px solid var(--text-primary, #363636);
+  background: var(--bg-primary, #fff);
+}
+
+/* ============================================
+   COLOR SWATCHES - Color selection
+   ============================================ */
+.thumbnail-grid--color {
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.color-swatch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.color-swatch__color {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  transition: border 0.15s, transform 0.15s;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.color-swatch:hover .color-swatch__color {
+  border-color: var(--text-primary, #363636);
+  transform: scale(1.05);
+}
+
+.color-swatch--selected .color-swatch__color {
+  border-color: var(--text-primary, #363636);
+  box-shadow: 0 0 0 2px var(--bg-primary, #fff), 0 0 0 4px var(--text-primary, #363636);
+}
+
+.color-swatch__name {
+  font-size: 9px;
+  font-weight: 500;
+  color: var(--text-secondary, #666);
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.color-swatch--selected .color-swatch__name {
+  color: var(--text-primary, #363636);
+  font-weight: 600;
+}
+
+/* Sidebar overlay backdrop */
+.sidebar-overlay {
+  display: none;
+}
+
+/* ============================================
+   SMALL LAPTOP (1024-1365px)
+   ============================================ */
+@media (max-width: 1365px) and (min-width: 1024px) {
+  .thumbnail-grid--finish {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--handle {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--style {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--layout {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ============================================
+   TABLET (768-1023px)
+   ============================================ */
+@media (max-width: 1023px) and (min-width: 768px) {
+  .sidebar-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.25);
+    z-index: 14;
+  }
+
+  .main-layout__scene--sidebar-open {
+    padding-left: calc(var(--sidebar-width-tablet) + 24px) !important;
+  }
+
+  .sidebar-container {
+    width: var(--sidebar-width-tablet);
+  }
+
+  .sidebar--card {
+    width: var(--sidebar-width-tablet);
+  }
+
+  .sidebar__logo-text {
+    font-size: 12px;
+  }
+
+  .sidebar__content {
+    padding: 10px;
+  }
+
+  .thumbnail-grid {
+    gap: 6px;
+  }
+
+  .thumbnail-grid--finish {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--door-type {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--handle {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--style {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--color {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .thumbnail-grid--layout {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .sidebar-chat-card {
+    padding: 10px;
+  }
+}
+
+/* ============================================
+   MOBILE — Sidebar renders as bottom cards via JSX.
+   These styles apply to the mobile card content.
+   ============================================ */
+/* Sticky header for mobile cabinet detail view — outside the scroll container */
+.sidebar__mobile-header {
+  flex-shrink: 0;
+  padding: 12px 14px;
+  background: var(--bg-primary, #fff);
+}
+
+.sidebar__mobile-header .sidebar__back-btn {
+  font-size: var(--font-size-lg);
+}
+
+.sidebar__content--mobile {
+  padding: 14px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.sidebar__content--mobile::-webkit-scrollbar {
+  display: none;
+}
+
+.sidebar__content--mobile .thumbnail-grid {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+  gap: 6px;
+}
+
+.sidebar__content--mobile .thumbnail-grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.sidebar__content--mobile .thumbnail-grid--finish {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+}
+
+.sidebar__content--mobile .thumbnail-grid--door-type {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+  gap: 4px;
+}
+
+.sidebar__content--mobile .thumbnail-grid--handle {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+}
+
+.sidebar__content--mobile .thumbnail-grid--style {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+}
+
+.sidebar__content--mobile .thumbnail-grid--color {
+  grid-template-columns: repeat(auto-fill, minmax(var(--thumbnail-min-width), 1fr));
+}
+
+.sidebar__content--mobile .finish-thumbnail__name {
+  font-size: 12px;
+}
+
+.sidebar__content--mobile .sidebar__section-title {
+  font-size: 12px;
+}
+
+.sidebar__content--mobile .option-thumbnail__name {
+  font-size: 10px;
+}
+
+.sidebar__content--mobile .option-thumbnail__img-label {
+  font-size: 12px;
+}
+
+.sidebar__content--mobile .frame-size-btn {
+  padding: 6px 8px;
+  font-size: 12px;
+}
+
+.sidebar__content--mobile .sidebar__back-btn {
+  font-size: var(--font-size-lg);
+}
+
+/* Small mobile (< 400px) override no longer needed — auto-fill handles it */
+
+/* ============================================
+   ADD WALL CORNER BUTTON
+   ============================================ */
+.sidebar__add-btn {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px dashed var(--color-neutral-400);
+  border-radius: var(--border-radius-md, 6px);
+  background: transparent;
+  color: var(--color-neutral-700);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: center;
+}
+.sidebar__add-btn:hover {
+  border-color: var(--color-neutral-600);
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+/* Options loader — shown while a selected piece's bindings are being fetched, so the
+   sidebar doesn't flash the full/global option list before the narrowed per-piece list. */
+.sidebar__options-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 32px 16px;
+  color: var(--color-text-secondary, var(--text-tertiary, #888));
+  font-size: 13px;
+}
+.sidebar__options-loading-spinner {
+  width: 22px;
+  height: 22px;
+  border: 2px solid rgba(0, 0, 0, 0.12);
+  border-top-color: var(--color-primary, #3b82f6);
+  border-radius: 50%;
+  animation: sidebar-options-loading-spin 0.7s linear infinite;
+}
+@keyframes sidebar-options-loading-spin {
+  to { transform: rotate(360deg); }
+}
+:root[data-theme-mode="dark"] .sidebar__options-loading-spinner {
+  border-color: rgba(255, 255, 255, 0.18);
+  border-top-color: var(--color-primary, #6ea8fe);
+}
+
+/* ── Option-set presentations (accordion / popover) ─────────────────────────
+   Only apply to sets whose backend record asks for them; the default `inline`
+   presentation is untouched, which is what keeps the DOM-parity suite green. */
+
+.sidebar__section-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sidebar__section-chevron {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar__section-chevron { transition: none; }
+}
+/* accordion points down when closed, up when open; popover points sideways */
+[data-open="true"] > .sidebar__section-title .sidebar__section-chevron { transform: rotate(-135deg); }
+.sidebar__section--popover .sidebar__section-chevron { transform: rotate(-45deg); }
+
+/* The floating panel. Portalled to <body>, so it must carry its own surface
+   styling — it inherits nothing from the sidebar. z-index comes from the shared
+   token scale (styles/variables.css) so it cannot fight modals and toasts. */
+.sdk-popover {
+  z-index: var(--z-tooltip, 200);
+  max-width: min(420px, calc(100vw - 32px));
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  padding: 12px;
+  background: var(--color-surface, var(--bg-primary, #fff));
+  border: 1px solid var(--color-border, #e4e7ea);
+  border-radius: var(--radius-xl, 12px);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
+}
+
+
+/* ── Nested option-set flow ────────────────────────────────────────────────
+   `flow` (backend record or host override) decides the direction a section's
+   content runs. `column` is the historical stacked layout and stays the default,
+   so nothing changes unless a set asks for `row`. Both the option grid and a
+   GROUP's child sections honour it, which is what makes side-wise nesting work
+   without a custom component. */
+[data-part="option-set"][data-flow="row"] > [data-part="option-set/options"] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+/* A section's children live INSIDE its options container, not as direct children of the
+   section — so `row` is applied there, and the immediate children need explicit flex
+   sizing or block-level content makes each one claim a full line and wrap. */
+[data-part="option-set"][data-flow="row"] > [data-part="option-set/options"] > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+[data-part="option-set"][data-flow="row"] > [data-part="option-set/options"] { gap: 12px; }
+
+
+/* ── Nested option-set GROUPS ──────────────────────────────────────────────
+   A GROUP option set renders as a heading with its child option-set pickers
+   nested under it. Public styling hooks: `data-kind="group"` + `data-depth="N"`
+   on the section. Its children live in the group's `option-set/options`
+   container (each child is itself a full option-set section). Themes override
+   these; the tokens let a theme tune indent/heading without rewriting rules. */
+[data-part="option-set"][data-kind="group"] > [data-part="option-set/title"] {
+  font-weight: var(--os-group-title-weight, 700);
+  letter-spacing: 0.04em;
+}
+[data-part="option-set"][data-kind="group"] > [data-part="option-set/options"] {
+  padding-left: var(--os-group-indent, 12px);
+  border-left: 1px solid var(--os-group-border, var(--color-border, #e4e7ea));
+  margin-top: 6px;
+}
+/* Space stacked child sections. Scoped to NON-row flow: in `row` the children sit side by
+   side and the container's own `gap` spaces them, so a margin-top here offsets the second
+   child vertically instead — 10px down, which is exactly enough to stop it being "on the same
+   row". The :not() is what makes this match the sentence above it. */
+[data-part="option-set"][data-kind="group"]:not([data-flow="row"]) > [data-part="option-set/options"] > .sidebar__group-child + .sidebar__group-child {
+  margin-top: var(--os-group-gap, 10px);
+}
+
+}