/* Floor Planner — original design system, round 2.
   One accent only (blue #2563eb, matching the canvas selection handles
   already used in app.js). White panels, cool-grey canvas surround,
   no beige. Layout: narrow mode rail + one panel + dominant canvas.
   The Details section lives inside the left panel, so the canvas is
   no longer squeezed between two permanent panels. */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; color: #1f2937; background: #f4f6f8; font-size: 14px; line-height: 1.45; }
button, input, select { font: inherit; }
button { cursor: pointer; padding: 8px 12px; border: 1px solid #d5dae0; background: #fff; color: #1f2937; border-radius: 8px; }
button:hover { background: #f4f6f8; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
button.active { background: #e8efff; color: #1d4ed8; border-color: #2563eb; font-weight: 600; }
.primary-btn { background: #2563eb; color: #fff; border-color: #2563eb; font-weight: 600; }
.primary-btn:hover { background: #1d4ed8; }

/* Slim top bar: white, one row, clear hierarchy.
   Save is the only solid primary button; everything else is quiet. */
.topbar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; background: #fff; color: #1f2937; border-bottom: 1px solid #e2e6eb; flex-wrap: nowrap; min-height: 52px; position: sticky; top: 0; z-index: 40; }
.topbar input { color: #1f2937; }
.brand { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.project-label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #667085; white-space: nowrap; }
.project-label input { width: 190px; padding: 7px 9px; border-radius: 8px; border: 1px solid #d5dae0; background: #f9fafb; }
.unit-btn, .view-btn { padding: 7px 11px; }
.unit-btn.active, .view-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.export-menu { position: relative; }
.export-dropdown { position: absolute; top: 110%; left: 0; z-index: 45; background: #fff; border: 1px solid #e2e6eb; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 170px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14); }
.export-dropdown button { text-align: left; border-color: transparent; }
.export-dropdown button:hover { background: #eef2ff; }
.view-toggle { display: flex; gap: 0; }
.view-toggle .view-btn { border-radius: 0; }
.view-toggle .view-btn:first-child { border-radius: 8px 0 0 8px; }
.view-toggle .view-btn:last-child { border-radius: 0 8px 0 8px; }

/* Layout: rail + one panel + canvas. No second permanent panel. */
.layout { display: grid; grid-template-columns: 84px 272px minmax(0, 1fr); grid-template-rows: minmax(0, calc(100vh - 53px)); min-height: calc(100vh - 53px); }
body.panel-collapsed .layout { grid-template-columns: 84px minmax(0, 1fr); }
body.panel-collapsed .mode-panel { display: none; }
.mode-rail { background: #f4f6f8; padding: 10px 6px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid #e2e6eb; }
.mode-btn { background: #fff; color: #344054; border-color: #e2e6eb; padding: 11px 4px; font-size: 12px; font-weight: 600; }
.mode-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.panel-toggle-btn { margin-top: auto; }
.panel { background: #fff; padding: 16px; overflow-y: auto; border-right: 1px solid #e2e6eb; min-height: 0; }
.panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #667085; margin: 20px 0 8px; padding-top: 16px; border-top: 1px solid #eef1f4; }
.panel h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.panel h3 { font-size: 13px; margin: 14px 0 6px; color: #344054; }
.hint { font-size: 12.5px; color: #667085; line-height: 1.55; }
.hint ol, .hint ul { padding-left: 18px; }
.next-step { font-size: 13px; background: #eef4ff; border: 1px solid #c7d7fe; color: #1e40af; padding: 10px 12px; border-radius: 8px; line-height: 1.5; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-btn { padding: 11px 8px; font-size: 13px; font-weight: 600; }
.collapse-btn { width: 100%; margin-bottom: 12px; color: #667085; }
.context-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.context-head h2 { margin: 0; padding: 0; border: none; }
.details-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef1f4; }
body.context-collapsed #contextBody { display: none; }

/* Canvas area: cool grey surround, white canvas, small status chip. */
.canvas-wrap { background: #e9edf1; position: relative; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
#view2d { position: relative; flex: 1; min-height: 0; }
#canvas { width: 100%; height: 100%; min-height: 320px; display: block; background: #fff; touch-action: none; }
.status-bar { position: absolute; left: 12px; top: 12px; z-index: 5; background: rgba(255, 255, 255, 0.96); padding: 7px 11px; border-radius: 8px; font-size: 12.5px; color: #344054; max-width: 60%; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.10); border: 1px solid #e2e6eb; }
.bottom-strip { display: flex; gap: 14px; align-items: center; padding: 8px 14px; background: #fff; border-top: 1px solid #e2e6eb; flex-wrap: wrap; font-size: 12.5px; color: #344054; }
.bottom-strip label { display: flex; gap: 5px; align-items: center; }
.locks-info { font-size: 12.5px; color: #667085; }
.scale-info { font-size: 12.5px; background: #eef4ff; border: 1px solid #c7d7fe; color: #1e40af; padding: 8px 10px; border-radius: 8px; }
.asset-category { margin-bottom: 10px; }
.asset-category > button { width: 100%; text-align: left; font-weight: 600; background: #f4f6f8; border-color: #e2e6eb; }
.asset-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.asset-item { font-size: 13px; padding: 9px 6px; text-align: center; }
.asset-item small { display: block; color: #667085; margin-top: 2px; }
.layer-row { display: flex; gap: 5px; align-items: center; padding: 6px 8px; background: #fff; border: 1px solid #e2e6eb; border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
.layer-row.active-layer { border-color: #2563eb; background: #eef4ff; }
.layer-row input[type="text"] { flex: 1; min-width: 0; border: none; background: transparent; }
.row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 100px; }
.panel label { display: block; margin: 10px 0; font-size: 13px; color: #344054; }
.panel label input, .panel label select { width: 100%; margin-top: 4px; padding: 8px 9px; border: 1px solid #d5dae0; border-radius: 8px; background: #fff; }
.panel label input[type="checkbox"], .panel label input[type="color"] { width: auto; }
#propsPanel { font-size: 13px; }
#propsPanel label { display: block; margin: 8px 0; }
#propsPanel input, #propsPanel select { width: 100%; margin-top: 3px; padding: 8px 9px; border: 1px solid #d5dae0; border-radius: 8px; }
.view3d-label { background: #eef4ff; border: 1px solid #c7d7fe; color: #1e40af; padding: 10px 12px; font-size: 13px; margin: 12px; border-radius: 8px; }
#threeContainer { height: calc(100vh - 230px); min-height: 480px; margin: 0 12px 12px; background: #111827; border-radius: 10px; overflow: hidden; }
#threeContainer canvas { display: block; }
.modal-overlay { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.5); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: #fff; padding: 22px; border-radius: 12px; width: 440px; max-width: 92vw; max-height: 88vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(17, 24, 39, 0.22); }
.modal-wide { width: 660px; }
.modal label { display: block; margin: 10px 0; font-size: 14px; }
.modal input, .modal textarea, .modal select { width: 100%; padding: 8px 9px; margin-top: 4px; border: 1px solid #d5dae0; border-radius: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.start-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.start-card { text-align: left; padding: 16px; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; }
.start-card:hover { border-color: #2563eb; background: #eef4ff; }
.start-card span { font-weight: normal; font-size: 13px; color: #667085; line-height: 1.45; }
.handle { cursor: pointer; }
.dim-label { cursor: pointer; }
.auth-area { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.auth-area button { background: #fff; color: #1f2937; border-color: #d5dae0; }
#authUser { font-size: 13px; }
.auth-error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: 8px; border-radius: 8px; font-size: 13px; }
.design-row { display: flex; gap: 5px; align-items: center; padding: 6px 8px; background: #fff; border: 1px solid #e2e6eb; border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
.design-row .design-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-row.active-design { border-color: #2563eb; background: #eef4ff; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 68px minmax(0, 1fr); }
  .canvas-wrap { grid-column: 1 / -1; }
  .start-grid { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
}

/* Demo round: canvas-first, floating clusters, focused states.
   Original styling only; no third-party layout, icon, or text copied. */
/* Wide-margin canvas: the white plan sheet sits inside a pale-grey
   surround, with breathing room on all sides. */
.canvas-wrap { background: #e7e9ec; }
#view2d { padding: 20px; }
#canvas { border-radius: 10px; box-shadow: 0 2px 14px rgba(17, 24, 39, 0.08); }
.panel { padding: 20px; }
/* Focused state: when a drawing tool or an item is active, the other
   tools and mode sections visually step back. Nothing is removed. */
body.tool-focused .tool-btn:not(.active) { opacity: 0.45; }
body.item-selected .mode-section { opacity: 0.55; }
body.item-selected .details-section { opacity: 1; }
/* Floating clusters at the canvas edges. */
.float-cluster { position: absolute; z-index: 6; background: rgba(255, 255, 255, 0.97); border: 1px solid #e2e6eb; border-radius: 10px; box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12); padding: 8px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #344054; }
.float-cluster label { display: flex; gap: 5px; align-items: center; }
.float-cluster input[type="checkbox"] { width: auto; }
.float-cluster select { padding: 6px; border: 1px solid #d5dae0; border-radius: 8px; }
.zoom-cluster { left: 12px; top: 50%; transform: translateY(-50%); flex-direction: column; padding: 6px; }
.zoom-cluster button { min-width: 34px; padding: 7px 6px; text-align: center; }
.zoom-cluster #zoomLabel { font-size: 12px; color: #667085; }
.view-cluster { left: 12px; bottom: 12px; max-width: 78%; flex-wrap: wrap; }
/* Top-right display settings dropdown (grid + canvas colour). */
.settings-menu { position: relative; }
.settings-menu .export-dropdown label { display: flex; gap: 8px; align-items: center; font-size: 13px; padding: 6px 8px; }
.settings-menu .export-dropdown input[type="checkbox"] { width: auto; }
.settings-menu .export-dropdown input[type="color"] { width: auto; padding: 0; }
.colour-presets { display: flex; gap: 6px; align-items: center; padding: 6px 8px; }
.colour-presets-label { font-size: 13px; color: #344054; }
.colour-swatch { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 6px; border: 1px solid #d5dae0; }
.colour-swatch:hover { border-color: #2563eb; }
/* Floating action bar above the selected item. */
.float-action-bar { position: absolute; z-index: 30; background: #fff; border: 2px solid #2563eb; border-radius: 10px; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.22); padding: 5px; gap: 5px; }
.float-action-bar button { padding: 7px 10px; font-size: 13px; }
/* Floating numeric field, only while drawing. */
.draw-field { position: absolute; z-index: 7; background: #fff; border: 1px solid #2563eb; border-radius: 10px; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.16); padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.draw-field input { width: 150px; padding: 6px 8px; border: 1px solid #d5dae0; border-radius: 8px; }
/* In-plan sample guidance chips; pointer-events none so they never
   block canvas clicks, and they vanish after first interaction. */
.sample-hint { position: absolute; z-index: 10; background: #fff; border: 2px solid #2563eb; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600; color: #1e40af; box-shadow: 0 4px 16px rgba(17, 24, 39, 0.18); pointer-events: none; white-space: nowrap; }
.sample-hint-1 { left: 170px; top: 92px; }
.sample-hint-2 { left: 330px; top: 250px; }