:root {
  --bg: #eceff3;
  --panel: #ffffff;
  --ink: #1c2530;
  --muted: #6b7785;
  --line: #d8dee6;
  --accent: #2f6fed;
  --accent-soft: #e6efff;
  --wall: #2b3440;
  --paper: #fbfbf8;
  --grid: #e3e7ec;
  --grid-strong: #cdd4dc;
  --dim: #b23b3b;
  --select: #2f6fed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
}

body {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;            /* app shell never scrolls; panels scroll internally */
}

/* ---------- Header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.title { display: flex; align-items: baseline; gap: 10px; }
.title .logo { font-size: 20px; color: var(--accent); }
.title h1 { font-size: 17px; margin: 0; font-weight: 650; }
.subtitle { color: var(--muted); font-size: 12px; }
.header-actions { display: flex; gap: 16px; }
.toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); cursor: pointer; }

/* panel toggle buttons — hidden on desktop, shown on mobile */
.panel-toggle {
  display: none;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 11px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--ink);
}
.panel-toggle:active { background: var(--accent-soft); }
.backdrop { display: none; }

/* ---------- Layout ---------- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr 380px;
  min-height: 0;
}

.toolbar, .side-panel {
  background: var(--panel);
  overflow-y: auto;
  padding: 14px;
  min-height: 0;   /* allow the grid cell to shrink below content height */
}
.toolbar { border-right: 1px solid var(--line); }
.side-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; }

.toolbar h2, .side-panel h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 0 8px;
}
.toolbar h2:first-child { margin-top: 0; }

.furniture-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.furniture-buttons button {
  font-size: 12px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  text-align: center;
  transition: all 0.12s;
}
.furniture-buttons button:hover { border-color: var(--accent); background: var(--accent-soft); }
.furniture-buttons button .ico { display: block; font-size: 16px; margin-bottom: 2px; }

/* ---------- Layout versions ---------- */
.versions { display: flex; flex-direction: column; gap: 6px; }
.versions select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 13px; background: #fff;
}
.version-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.version-actions button {
  padding: 6px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 12px;
}
.version-actions button:hover { border-color: var(--accent); background: var(--accent-soft); }
.version-actions button.danger { color: #b23b3b; border-color: #f0c9c9; }
.version-actions button.danger:hover { background: #fdf0f0; border-color: #e0a0a0; }

.muted { color: var(--muted); font-size: 12px; }
.small { font-size: 11px; }

/* ---------- Selection & room panels ---------- */
.selection-panel, .room-panel { display: flex; flex-direction: column; gap: 7px; }
.selection-panel label, .room-panel label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; color: var(--ink);
}
.selection-panel input, .room-panel input, .selection-panel select {
  width: 92px; padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 5px; font-size: 12px; text-align: right;
}
.selection-panel select { text-align: left; }
.sel-row-full { width: 100%; }
.sel-actions { display: flex; gap: 6px; margin-top: 4px; }
.sel-actions button {
  flex: 1; padding: 6px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; cursor: pointer; font-size: 12px;
}
.sel-actions button.danger { color: #b23b3b; border-color: #f0c9c9; }
.sel-actions button:hover { background: #f4f6f9; }

/* ---------- Canvas ---------- */
.canvas-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;               /* let the canvas shrink instead of forcing page height */
  padding: 24px;
  touch-action: none;          /* our pinch/pan owns touch gestures here */
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.05) 1px, transparent 0);
  background-size: 22px 22px;
}
.plan-host { width: 100%; height: 100%; display: flex; }

/* 3D view canvas (hidden until toggled) */
.view3d { position: absolute; inset: 0; width: 100%; height: 100%; display: none; touch-action: none; }
.mode-3d .view3d { display: block; }
.mode-3d .plan-host { display: none; }
/* hide 2D-only overlays while in 3D */
.mode-3d .canvas-tools, .mode-3d .zoom-controls, .mode-3d .delete-fab, .mode-3d .hint { display: none; }

.view-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  padding: 9px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.view-toggle:hover { border-color: var(--accent); color: var(--accent); }
.view-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.plan-host svg { width: 100%; height: 100%; user-select: none; touch-action: none; }

/* zoom controls */
.zoom-controls {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}
.zoom-controls button {
  width: 42px; height: 42px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.zoom-controls button:hover { border-color: var(--accent); color: var(--accent); }
.zoom-controls button:active { background: var(--accent-soft); }

/* canvas tool buttons (top-left): measure, lock */
.canvas-tools { position: absolute; top: 12px; left: 12px; z-index: 6; display: flex; gap: 8px; }
.tool-btn {
  width: 42px; height: 42px; border: 1px solid var(--line); background: #fff;
  border-radius: 8px; font-size: 18px; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.tool-btn.active { background: #ffe3cf; border-color: #e8590c; }
#lock-btn.active { background: var(--accent-soft); border-color: var(--accent); }
.plan-host.measuring svg { cursor: crosshair; }

/* on-canvas delete button (shown when something is selected) */
.delete-fab {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  padding: 9px 16px; border: none; border-radius: 22px; cursor: pointer;
  background: #d6483b; color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.delete-fab:hover { background: #c0392b; }
.delete-fab[hidden] { display: none; }
.hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: var(--muted); background: rgba(255,255,255,0.85);
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line);
}
kbd {
  background: #fff; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; font-size: 11px; font-family: ui-monospace, monospace;
}

/* ---------- Code panel ---------- */
.side-head { display: flex; align-items: center; justify-content: space-between; }
.btn-copy {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: 6px; cursor: pointer;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy.copied { background: var(--accent); color: #fff; border-color: var(--accent); }
.code-block {
  flex: 1; margin: 10px 0; padding: 12px; overflow: auto;
  background: #0f1622; color: #d6e2f0; border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5;
}
.code-block code { white-space: pre; }
.code-edit {
  width: 100%; border: 1px solid #243043; resize: none; tab-size: 2;
  white-space: pre; min-height: 200px; outline: none;
}
.code-edit:focus { border-color: var(--accent); }
.code-actions { display: flex; align-items: center; gap: 10px; }
.btn-apply {
  font-size: 13px; padding: 7px 14px; border: none; border-radius: 6px;
  background: var(--accent); color: #fff; cursor: pointer; font-weight: 600;
}
.btn-apply:hover { background: #2257c9; }
.btn-reset {
  font-size: 12px; padding: 7px 12px; border: 1px solid var(--line);
  background: #fff; color: var(--muted); border-radius: 6px; cursor: pointer;
}
.btn-reset:hover { border-color: var(--dim); color: var(--dim); }
.code-msg { font-size: 12px; }
.code-msg.ok { color: #2e9e5b; }
.code-msg.err { color: #c0392b; }

/* ---------- Google Drive ---------- */
.drive-actions { flex-wrap: wrap; }
.drive-picker {
  border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px;
  min-width: 280px; max-width: 90vw; color: var(--ink);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}
.drive-picker::backdrop { background: rgba(0, 0, 0, 0.35); }
.drive-picker h3 { margin: 0 0 12px; font-size: 15px; }
.drive-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 50vh; overflow: auto; }
.drive-list li { margin: 0 0 6px; }
.drive-list button {
  width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line);
  background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.drive-list button:hover { border-color: var(--accent); background: var(--accent-soft); }
.drive-picker-foot { display: flex; justify-content: flex-end; }

/* ---------- SVG element styling ---------- */
.furniture-group { cursor: grab; }
.furniture-group.dragging { cursor: grabbing; }
.furniture-group.selected .fp-outline { stroke: var(--select); }
.rotate-handle { cursor: grab; }

/* ============================ Mobile ================================== */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }        /* contain the off-canvas drawers */
  .app-header { padding: 8px 10px; gap: 8px; }
  .subtitle { display: none; }
  .title h1 { font-size: 15px; }
  .header-actions { display: none; }        /* view toggles live in tools drawer space */
  .panel-toggle { display: inline-flex; align-items: center; }

  /* canvas takes the whole screen */
  .layout { grid-template-columns: 1fr; }
  .canvas-wrap { padding: 8px; }
  .hint { display: none; }                 /* keyboard shortcuts aren't relevant on touch */
  .zoom-controls { bottom: calc(12px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right)); }
  .delete-fab { top: calc(12px + env(safe-area-inset-top)); }
  .canvas-tools { top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); }
  .view-toggle { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }

  /* toolbar + code become slide-in drawers over the canvas */
  .toolbar, .side-panel {
    position: fixed; top: 0; bottom: 0; z-index: 50;
    width: 86vw; max-width: 340px; padding-top: 56px;
    transition: transform 0.25s ease;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.28);
  }
  .toolbar { left: 0; transform: translateX(-100%); }
  .side-panel { right: 0; transform: translateX(100%); }
  .toolbar.open, .side-panel.open { transform: none; }

  .app-header { position: relative; z-index: 60; }  /* stay above drawers */

  .backdrop {
    display: none; position: fixed; inset: 0; z-index: 40;
    background: rgba(15, 22, 34, 0.4);
  }
  .backdrop.show { display: block; }

  .code-block { min-height: 160px; }
}