/* ===== Token system =====
   Base ink   #14171C   panel #1B1F26   line-dim #3A4048
   Brass accent #C9A961  Teal accent #5FB4C4
   Text primary #E8E6E1  Text muted #8B8F98
*/
:root{
  --ink: #14171C;
  --panel: #1B1F26cc;
  --panel-solid: #1B1F26;
  --line-dim: #3A4048;
  --brass: #C9A961;
  --brass-dim: #C9A96166;
  --teal: #5FB4C4;
  --white-hot: #F4F1EA;
  --text: #E8E6E1;
  --text-muted: #8B8F98;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --mono: "SF Mono", "Roboto Mono", "IBM Plex Mono", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body{ margin:0; padding:0; height:100%; background:var(--ink); overflow:hidden; }
body{ font-family: var(--sans); color: var(--text); }
button{ font-family: inherit; cursor:pointer; }

#viewport{ position:fixed; inset:0; touch-action: none; }
#viewport canvas{ display:block; width:100%; height:100%; }

/* Safe-area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)){
  #toolbar{ bottom: calc(14px + env(safe-area-inset-bottom)); }
  #compass{ bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(ellipse at center, #1a1e25 0%, var(--ink) 72%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-frame{ text-align:center; }
.loader-mark{ margin-bottom: 20px; animation: loaderBreathe 2.6s ease-in-out infinite; }
@keyframes loaderBreathe{ 0%,100%{ transform: scale(1); opacity:.92; } 50%{ transform: scale(1.035); opacity:1; } }
#loaderRing{ stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .25s linear; }
.loader-title{ font-family: var(--serif); letter-spacing: 7px; font-size: 21px; color: var(--text); }
.loader-sub{ font-family: var(--mono); letter-spacing: 3px; font-size: 10px; color: var(--text-muted); margin-top: 7px; transition: opacity .3s ease; }
.loader-bar{ width: 220px; height: 1px; background: var(--line-dim); margin: 24px auto 9px; position:relative; overflow:hidden; }
.loader-bar-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--brass); transition: width .2s ease; box-shadow: 0 0 8px var(--brass-dim); }
.loader-pct{ font-family: var(--mono); font-size: 11px; color: var(--brass); letter-spacing: 3px; }

/* ---------- Corner frame (signature element) ---------- */
#frame{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.corner{ fill:none; stroke: var(--brass-dim); stroke-width: 1; }

/* ---------- Top bar ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; gap: 18px;
  padding: 26px 34px 0 34px;
  pointer-events:none;
}
.wordmark{ display:flex; align-items:baseline; gap:12px; pointer-events:auto; }
.wordmark-title{ font-family: var(--serif); font-size: 18px; letter-spacing: 4px; color: var(--text); }
.wordmark-rule{ width: 26px; height: 1px; background: var(--brass); display:inline-block; }
.wordmark-sub{ font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--text-muted); }

/* ---------- Floor selector ---------- */
.floor-selector{ position:relative; pointer-events:auto; }
.floor-selector-btn{
  display:flex; align-items:center; gap:8px;
  background: var(--panel); backdrop-filter: blur(6px); border: 1px solid var(--line-dim);
  color: var(--text); font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  padding: 9px 14px; transition: all .2s ease;
}
.floor-selector-btn:hover{ border-color: var(--brass-dim); }
.floor-selector-btn svg:first-child{ color: var(--brass); }
.floor-selector-menu{
  position:absolute; top: calc(100% + 6px); left:0; min-width: 100%;
  background: var(--panel-solid); border: 1px solid var(--line-dim);
  opacity:0; visibility:hidden; transform: translateY(-4px);
  transition: all .2s ease;
}
.floor-selector.open .floor-selector-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.floor-option{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  width:100%; padding: 10px 14px; background:transparent; border:none;
  color: var(--text-muted); font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  white-space:nowrap;
}
.floor-option:hover{ background: #ffffff0a; color: var(--text); }
.floor-option svg{ color: var(--brass); opacity:0; }
.floor-option.active{ color: var(--text); }
.floor-option.active svg{ opacity:1; }

/* ---------- Compass ---------- */
#compass{
  position:fixed; left: 30px; bottom: 30px; z-index:30;
  pointer-events:none;
}
.compass-n{ fill: var(--brass); font-family: var(--mono); font-size: 9px; letter-spacing:1px; }
#compassNeedle{ transform-origin: 30px 30px; }

/* ---------- Bottom-center pill toolbar (Matterport-style) ---------- */
#toolbar{
  position:fixed; left:50%; bottom: 26px; transform: translateX(-50%); z-index:35;
  display:flex; align-items:center; gap: 4px;
  background: var(--panel); backdrop-filter: blur(10px);
  border: 1px solid var(--line-dim);
  border-radius: 999px;
  padding: 6px;
}
.tool-btn{
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: none;
  color: var(--text-muted); display:flex; align-items:center; justify-content:center;
  transition: all .18s ease; position:relative;
}
.tool-btn:hover{ color: var(--text); background: #ffffff0f; }
.tool-btn.active{ background: var(--brass); color: var(--ink); }
.tool-btn.active:hover{ background: var(--brass); }
.tool-btn:disabled{ pointer-events:none; opacity:.3; }
.tool-sep{ width:1px; height: 22px; background: var(--line-dim); margin: 0 4px; }

.tool-more-wrap{ position:relative; }
.more-menu{
  position:absolute; bottom: calc(100% + 10px); right: 0; min-width: 168px;
  background: var(--panel-solid); border: 1px solid var(--line-dim);
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: all .2s ease;
}
.more-menu.open{ opacity:1; visibility:visible; transform: translateY(0); }
.more-item{
  display:flex; align-items:center; gap: 10px; width:100%;
  padding: 11px 14px; background:transparent; border:none;
  color: var(--text-muted); font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  border-bottom: 1px solid var(--line-dim);
}
.more-item:last-child{ border-bottom:none; }
.more-item:hover{ color: var(--text); background: #ffffff0a; }
.more-item svg{ color: var(--brass); flex-shrink:0; }
.more-item.active{ color: var(--brass); }

/* ---------- Hint overlay ---------- */
#hint{
  position:fixed; inset:0; z-index:40;
  background: #14171Ccc; backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s ease, visibility .35s ease;
}
#hint.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.hint-inner{
  background: var(--panel-solid); border: 1px solid var(--line-dim);
  padding: 30px 34px; min-width: 300px;
}
.hint-row{ display:flex; justify-content:space-between; gap: 30px; padding: 9px 0; border-bottom: 1px solid var(--line-dim); font-size: 13px; }
.hint-row:last-of-type{ border-bottom:none; }
.hint-row b{ color: var(--brass); font-family: var(--mono); font-weight:600; font-size: 11px; letter-spacing: .5px; white-space:nowrap; }
.hint-row span{ color: var(--text-muted); text-align:right; }
#hintClose{
  margin-top: 20px; width:100%; padding: 11px 0;
  background:transparent; border: 1px solid var(--brass); color: var(--brass);
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  transition: all .2s ease;
}
#hintClose:hover{ background: var(--brass); color: var(--ink); }

/* ---------- Measure toast + persistent labels ---------- */
#measureToast{
  position:fixed; left:50%; top: 26px; transform: translateX(-50%);
  z-index: 35; font-family: var(--mono); font-size: 12px; letter-spacing: 1px;
  background: var(--panel-solid); border: 1px solid var(--teal); color: var(--teal);
  padding: 8px 16px; opacity:0; pointer-events:none; transition: opacity .25s ease;
}
#measureToast.show{ opacity:1; }
#clearMeasurements{
  position:fixed; top: 66px; left:50%; transform: translateX(-50%);
  z-index: 35; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px;
  background: var(--panel-solid); border: 1px solid var(--line-dim); color: var(--text-muted);
  padding: 6px 14px; opacity:0; visibility:hidden; pointer-events:none; transition: all .25s ease;
}
#clearMeasurements.show{ opacity:1; visibility:visible; pointer-events:auto; }
#clearMeasurements:hover{ color: var(--teal); border-color: var(--teal); }
.measure-label{
  position:fixed; z-index: 34; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  background: var(--panel-solid); border: 1px solid var(--teal); color: var(--teal);
  padding: 3px 9px; white-space:nowrap; pointer-events:none;
}

/* ---------- Walk-mode hint banner ---------- */
#walkHint{
  position:fixed; top: 96px; left:50%; transform: translateX(-50%);
  z-index: 30; display:flex; align-items:center; gap:8px;
  background: var(--panel); border: 1px solid var(--line-dim); backdrop-filter: blur(6px);
  color: var(--text-muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .5px;
  padding: 8px 16px; opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
  pointer-events:none;
}
#walkHint svg{ color: var(--brass); flex-shrink:0; }
#walkHint.show{ opacity:1; visibility:visible; }

/* ---------- Modals (VR / Share) ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:60;
  background: #14171Ccc; backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.modal-backdrop.show{ opacity:1; visibility:visible; }
.modal-card{
  width: 340px; background: var(--panel-solid); border: 1px solid var(--line-dim);
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-dim);
  font-family: var(--serif); font-size: 16px; letter-spacing: 1px; color: var(--text);
}
.modal-close{
  background:none; border:none; color: var(--text-muted); font-size: 14px; padding: 4px;
}
.modal-close:hover{ color: var(--text); }
.modal-body{ padding: 28px 24px 8px; text-align:center; }
.modal-body-share{ padding: 24px; }
.vr-headset-icon{ margin-bottom: 16px; }
.modal-text{ font-size: 14px; color: var(--text); line-height: 1.5; margin: 0 0 8px; }
.modal-subtext{ font-family: var(--mono); font-size: 11px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.modal-actions{ display:flex; gap: 10px; padding: 20px 24px 24px; }
.modal-btn{
  flex:1; text-align:center; padding: 10px 0; font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  border: 1px solid var(--line-dim); background: transparent; color: var(--text-muted); text-decoration:none;
  transition: all .2s ease; cursor:pointer;
}
.modal-btn-ghost:hover{ color: var(--text); border-color: var(--brass-dim); }
.modal-btn-solid{ border-color: var(--brass); color: var(--brass); }
.modal-btn-solid:not(:disabled):hover{ background: var(--brass); color: var(--ink); }
.modal-btn-solid:disabled{ opacity: .35; cursor: not-allowed; }

/* Share modal specifics */
.share-icons{ display:flex; justify-content:center; gap: 12px; margin-bottom: 22px; }
.share-icon{
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-dim); color: var(--text-muted);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  transition: all .2s ease;
}
.share-icon:hover{ color: var(--brass); border-color: var(--brass-dim); }
.share-link-row{ display:flex; gap: 8px; margin-bottom: 16px; }
.share-link-input{
  flex:1; min-width:0; background: var(--ink); border: 1px solid var(--line-dim); color: var(--text-muted);
  font-family: var(--mono); font-size: 11px; padding: 10px 12px;
}
.share-copy-btn{ flex: none; width: 78px; }
.share-note{ text-align:left; }

/* ---------- Responsive — Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px){
  #topbar{ padding: 20px 24px 0; gap: 12px; }
  .wordmark-title{ font-size: 16px; letter-spacing: 3px; }
  .wordmark-sub{ font-size: 9px; }
  #toolbar{ bottom: 22px; gap: 3px; padding: 5px; }
  .tool-btn{ width: 40px; height: 40px; }
  .modal-card{ width: 320px; }
}

/* ---------- Responsive — Mobile (≤ 600px) ---------- */
@media (max-width: 600px){
  #topbar{
    padding: 12px 14px 0;
    gap: 8px;
    flex-wrap: wrap;
  }
  .wordmark-title{ font-size: 13px; letter-spacing: 2px; }
  .wordmark-rule{ width: 16px; }
  .wordmark-sub{ display:none; }

  /* Compass — move above toolbar */
  #compass{ left: 12px; bottom: 90px; }
  #compass svg{ width: 36px; height: 36px; }

  /* Toolbar — scrollable pill, full-width minus margin */
  #toolbar{
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 20px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
    flex-wrap: nowrap;
  }
  #toolbar::-webkit-scrollbar{ display:none; }
  .tool-btn{ width: 36px; height: 36px; flex-shrink: 0; }
  .tool-sep{ margin: 0 2px; }

  /* More menu — open upward, right-aligned to viewport edge */
  .more-menu{ right: 0; min-width: 150px; }
  .more-item{ font-size: 10px; padding: 10px 12px; }

  /* Measure / walk overlays */
  #measureToast{ font-size: 11px; padding: 7px 12px; top: 18px; }
  #clearMeasurements{ top: 56px; font-size: 10px; padding: 5px 12px; }
  #walkHint{ top: 72px; font-size: 10px; padding: 7px 12px; }

  /* Hint overlay */
  .hint-inner{ margin: 0 14px; padding: 22px 18px; }
  .hint-row{ font-size: 12px; gap: 16px; }

  /* Modals */
  .modal-card{ width: calc(100vw - 28px); max-width: 340px; }
  .modal-body{ padding: 20px 16px 6px; }
  .modal-body-share{ padding: 18px 16px; }
  .modal-actions{ padding: 14px 16px 18px; }
  .share-link-input{ font-size: 10px; }

  /* Floor selector — compact */
  .floor-selector-btn{ padding: 7px 10px; font-size: 10px; }
}