/* Visualizer-specific components; brand ownership is in curio.css. */
.step { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.upload { cursor: pointer; }
.upload:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sample { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; }
.sample img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.sample span { display: block; padding: 6px 8px; font-size: .86rem; }
.sample:hover { border-color: var(--green); }
#photo-status { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.photo-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.segmented button { border: 0; background: transparent; padding: 8px 18px; cursor: pointer; font-weight: 600; min-height: 40px; }
.segmented button[aria-checked="true"] { background: var(--green); color: #fff; }

.surfaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.surface { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding-right: 6px; }
.surface.active, .surface:has(.surface-pick[aria-pressed="true"]) { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent); }
.surface-pick { flex: 1; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; padding: 9px 10px; cursor: pointer; text-align: left; min-width: 0; }
.surface-text { display: flex; flex-direction: column; min-width: 0; }
.surface-text strong { font-size: .92rem; }
.chip-dot { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.chip-dot[data-empty] { background: repeating-linear-gradient(45deg, var(--surface-2) 0 5px, transparent 5px 10px); }
.icon-mini { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; flex: none; }

.families { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.swatch { border: 1px solid var(--line); border-radius: 10px; padding: 0; background: var(--surface); cursor: pointer; overflow: hidden; text-align: left; }
.swatch-color { display: block; height: 54px; }
.swatch-name { display: block; padding: 5px 7px; font-size: .8rem; line-height: 1.2; }
.swatch[aria-pressed="true"] { outline: 3px solid var(--green); outline-offset: 1px; }
.custom { margin-top: 12px; }
.custom input[type="color"] { width: 64px; height: 40px; padding: 2px; }

.result-figure { margin: 14px 0 0; }
.compare { position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-2); user-select: none; }
.compare img { width: 100%; height: auto; }
.compare-after { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: fill; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); pointer-events: none; }
.compare-label { position: absolute; top: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; padding: 3px 9px; border-radius: 999px; }
.compare-label.left { left: 10px; } .compare-label.right { right: 10px; }
.compare-range { width: 100%; margin: 10px 0 6px; accent-color: var(--green); min-height: 32px; }
.overlay-canvas { width: 100%; height: auto; border-radius: 12px; }
.result-actions { margin-top: 8px; }
figcaption { color: var(--muted); }

.cta { margin-top: 22px; border-radius: var(--radius); background: var(--brand); color: var(--brand-ink); padding: 18px 20px; }
.cta h2 { display: block; }
.cta .button { border-color: rgba(255,255,255,.4); }
.cta .button:not(.primary) { background: transparent; color: inherit; }
.cta .button.primary { background: var(--gold); border-color: var(--gold); color: #1d2a22; }
.chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

@media (max-width: 600px) {
  .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .surfaces { grid-template-columns: 1fr; }
}
.result-figure, .result-actions { max-width: 760px; margin-left: auto; margin-right: auto; }

/* Material faces: CSS sketches of each finish; the base color comes from the catalog. */
.swatches.material-grid, .swatches { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.swatch.material .swatch-color { height: 70px; }
[class*="pattern-"] { background-color: var(--base); }
.pattern-veins { background-image: linear-gradient(115deg, transparent 38%, rgba(120,110,95,.45) 40%, transparent 43%), linear-gradient(65deg, transparent 60%, rgba(176,141,87,.35) 61%, transparent 63%), linear-gradient(140deg, transparent 20%, rgba(140,140,140,.25) 21%, transparent 23%); }
.pattern-fine-veins { background-image: linear-gradient(120deg, transparent 45%, rgba(150,150,150,.35) 46%, transparent 47%), linear-gradient(70deg, transparent 25%, rgba(150,150,150,.25) 26%, transparent 27%), linear-gradient(160deg, transparent 70%, rgba(150,150,150,.25) 71%, transparent 72%); }
.pattern-veins-light { background-image: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 39%, transparent 41%), linear-gradient(60deg, transparent 65%, rgba(255,255,255,.35) 66%, transparent 67%); }
.pattern-speckle { background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px), radial-gradient(rgba(0,0,0,.3) 1px, transparent 1.5px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; }
.pattern-wood, .pattern-plank { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 9px, rgba(255,255,255,.07) 9px 11px, transparent 11px 17px); }
.pattern-plank { background-image: linear-gradient(90deg, rgba(0,0,0,.25) 1px, transparent 1px), repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px); background-size: 34px 100%, auto; }
.pattern-shaker { background-image: linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.14)), linear-gradient(var(--base), var(--base)); background-size: calc(100% - 20px) calc(100% - 20px), calc(100% - 24px) calc(100% - 24px); background-position: center; background-repeat: no-repeat; }
.pattern-raised { background-image: radial-gradient(ellipse at center, rgba(255,255,255,.18), transparent 60%), linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)); background-size: 100% 100%, calc(100% - 20px) calc(100% - 20px); background-position: center; background-repeat: no-repeat; }
.pattern-slab, .pattern-solid, .pattern-slab-match { background-image: linear-gradient(135deg, rgba(255,255,255,.12), transparent 55%); }
.pattern-subway { background-image: linear-gradient(rgba(150,150,150,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(150,150,150,.55) 1px, transparent 1px); background-size: 28px 14px, 28px 28px; }
.pattern-zellige { background-image: linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px), radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%); background-size: 16px 16px, 16px 16px, 16px 16px; }
.pattern-hex { background-image: radial-gradient(circle, transparent 5px, rgba(140,140,140,.5) 5.5px, transparent 6.5px); background-size: 12px 11px; }
.pattern-herringbone { background-image: repeating-linear-gradient(45deg, rgba(140,140,140,.45) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, rgba(140,140,140,.3) 0 1px, transparent 1px 24px); }
.pattern-stack { background-image: linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: 10px 100%, 100% 40px; }
.pattern-large-tile { background-image: linear-gradient(90deg, rgba(0,0,0,.2) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.2) 1px, transparent 1px); background-size: 60px 100%, 100% 30px; }
.pattern-checker { background-color: #f2f2f0; background-image: conic-gradient(var(--base) 25%, transparent 0 50%, var(--base) 0 75%, transparent 0); background-size: 20px 20px; }
.chip-dot[class*="pattern-"] { background-size: auto; }
@media (max-width: 600px) { .swatches { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .swatch.material .swatch-color { height: 56px; } }

.brief { border: 0; padding: 0; margin: 12px 0 0; }
.brief legend { font-size: .9rem; font-weight: 600; margin-bottom: 6px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.gallery-pick { border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; background: var(--surface); cursor: pointer; text-align: left; }
.gallery-pick img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery-pick span { display: block; padding: 5px 8px; font-size: .82rem; }
.gallery-pick[aria-pressed="true"] { outline: 3px solid var(--green); outline-offset: 1px; }
#intent-note { margin-top: 8px; }