/* ════════════════════════════════════════
   VTT LAYOUT
════════════════════════════════════════ */
#view-vtt { z-index: 5; display:grid; grid-template-rows:44px 1fr; grid-template-columns:1fr 300px; }

/* Topbar */
#topbar { grid-column:1/-1; grid-row:1; display:flex; align-items:center;
  background:var(--color-bg-panel); border-bottom:1px solid var(--color-border); z-index:50; }
.tb-logo { padding:0 1.2rem; font-family:'Cinzel Decorative',serif; font-size:.8rem;
  color:var(--color-accent-primary); border-right:1px solid var(--color-border);
  height:100%; display:flex; align-items:center; cursor:pointer; transition:color .2s; white-space:nowrap; }
.tb-logo:hover { color:var(--color-grid); }
.tb-campaign { padding:0 1rem; font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.2em;
  color:var(--color-text-muted); text-transform:uppercase;
  border-right:1px solid var(--color-border); height:100%; display:flex; align-items:center; gap:.5rem; }
.tb-campaign span { color:var(--color-text-primary); }
.tb-code { padding:0 1rem; font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.25em;
  color:var(--color-text-muted); border-right:1px solid var(--color-border);
  height:100%; display:flex; align-items:center; gap:.4rem; cursor:pointer; transition:color .2s; }
.tb-code:hover { color:var(--color-accent-primary); }
.tb-tools { display:flex; align-items:center; height:100%; padding:0 .5rem; gap:2px; flex:1; }
.tool-btn { height:30px; min-width:30px; padding:0 .5rem; background:none; border:1px solid transparent;
  color:var(--color-text-muted); cursor:pointer; transition:all .15s; border-radius:4px;
  display:flex; align-items:center; justify-content:center; gap:.3rem;
  font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.1em; white-space:nowrap; }
.tool-btn:hover { background:rgba(90,169,255,.08); border-color:var(--color-border); color:var(--color-text-primary); filter:brightness(1.08); }
.tool-btn.active { background:rgba(90,169,255,.14); border-color:var(--color-accent-primary); color:var(--color-accent-primary);
  filter:drop-shadow(0 0 4px rgba(90,169,255,.25)); }
.tool-sep { width:1px; height:20px; background:var(--color-border); margin:0 4px; flex-shrink:0; }
.tb-right { display:flex; align-items:center; height:100%; padding:0 1rem; gap:.8rem;
  border-left:1px solid var(--color-border); margin-left:auto; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--color-success);
  box-shadow:0 0 6px var(--color-success); }
.status-text { font-family:'Cinzel',serif; font-size:.58rem; letter-spacing:.15em; color:var(--color-text-muted); }

/* Scene / canvas */
#scene { grid-column:1; grid-row:2; position:relative; overflow:hidden; background:var(--color-bg-primary); }
#scene-canvas, #grid-canvas { position:absolute; inset:0; }
#grid-canvas { pointer-events:none; }
#token-layer { position:absolute; inset:0; }
#lighting-canvas { position:absolute; inset:0; pointer-events:none; z-index:15; opacity:0; transition:opacity .4s ease; }
#lighting-canvas.active { opacity:1; }
#facing-layer { position:absolute; inset:0; pointer-events:none; z-index:22; }
.drop-overlay { position:absolute; inset:0; z-index:100; background:rgba(0,0,0,.65);
  border:2px dashed var(--color-accent-primary); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; opacity:0; pointer-events:none; transition:opacity .2s; }
.drop-overlay.active { opacity:1; pointer-events:all; }
.drop-overlay p { font-family:'Cinzel',serif; font-size:1.1rem; letter-spacing:.2em; color:var(--color-accent-primary); }
.scene-hint { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem; pointer-events:none; opacity:.18; }
.scene-hint p { font-family:'Cinzel',serif; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--color-text-muted); }
.scene-controls { position:absolute; bottom:3.5rem; right:1rem; display:flex; flex-direction:column; gap:4px; z-index:20; }
.sc-btn { width:30px; height:30px; background:var(--color-bg-panel); border:1px solid var(--color-border);
  color:var(--color-text-muted); font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s; border-radius:3px; }
.sc-btn:hover { border-color:var(--color-accent-primary); color:var(--color-accent-primary);
  filter:drop-shadow(0 0 4px rgba(90,169,255,.3)); }
.scene-info { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%);
  background:var(--color-bg-panel); border:1px solid var(--color-border);
  padding:.3rem .8rem; font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.15em;
  color:var(--color-text-muted); white-space:nowrap; z-index:20; pointer-events:none; border-radius:3px; }

/* Chat pop-up notifications on map */
#chat-notif-stack { position:absolute; bottom:8.5rem; right:1rem; z-index:30;
  display:flex; flex-direction:column-reverse; gap:5px; pointer-events:none; width:230px; }
.chat-notif { display:flex; align-items:flex-start; gap:.45rem;
  background:var(--color-bg-panel); border:1px solid var(--color-border-h);
  padding:.38rem .55rem; border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  opacity:0; transform:translateX(18px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none; }
.chat-notif.show { opacity:1; transform:translateX(0); }
.chat-notif.hide { opacity:0; transform:translateX(18px); }
.chat-notif-icon { font-size:1rem; line-height:1; flex-shrink:0; margin-top:.05rem; }
.chat-notif-body { flex:1; min-width:0; }
.chat-notif-name { font-family:'Cinzel',serif; font-size:.52rem; letter-spacing:.1em;
  color:var(--color-accent-primary); margin-bottom:.12rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.chat-notif-text { font-family:'Inter',sans-serif; font-size:.8rem;
  color:var(--color-text-muted); line-height:1.35;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

/* ── Sidebar ── */
#sidebar { grid-column:2; grid-row:2; display:flex; flex-direction:column;
  background:var(--color-bg-panel); border-left:1px solid var(--color-border); overflow:hidden; }
.sb-header { padding:.8rem 1rem; border-bottom:1px solid var(--color-border); }
.sb-title { font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; color:var(--color-accent-primary); }
.sb-tabs { display:flex; border-bottom:1px solid var(--color-border); overflow-x:auto; }
.sb-tabs::-webkit-scrollbar { height:2px; }
.s-tab { flex:1; padding:.55rem .5rem; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--color-text-muted); font-family:'Cinzel',serif; font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.s-tab.active { color:var(--color-accent-primary); border-bottom-color:var(--color-accent-primary); }
.s-tab:hover:not(.active) { color:var(--color-text-primary); }
.tab-panel { display:none; flex:1; flex-direction:column; overflow:hidden; }
.tab-panel.active { display:flex; }

/* Token sidebar */
.token-add-row { padding:.7rem .8rem; border-bottom:1px solid var(--color-border); }
.upload-btn { width:100%; padding:.55rem; background:rgba(90,169,255,.05); border:1px dashed var(--color-border);
  color:var(--color-text-muted); font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.15em;
  text-transform:uppercase; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.upload-btn:hover { border-color:var(--color-accent-primary); color:var(--color-accent-primary); background:rgba(90,169,255,.08); }
.token-list { flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.4rem; }
.token-list::-webkit-scrollbar { width:3px; }
.token-list::-webkit-scrollbar-thumb { background:var(--color-border); }
.token-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
  background:var(--color-bg-elevated); border:1px solid var(--color-border);
  cursor:pointer; transition:all .15s; border-radius:4px; }
.token-item:hover { border-color:var(--color-border-h); filter:brightness(1.05); }
.token-item.selected { border-color:var(--color-accent-primary);
  box-shadow:0 0 0 1px var(--color-accent-primary) inset; }
.token-thumb { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--color-border); flex-shrink:0; background:var(--color-bg-elevated); }
.token-thumb-ph { width:38px; height:38px; border-radius:50%; border:2px solid var(--color-border); flex-shrink:0; background:var(--color-bg-elevated); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.token-info { flex:1; min-width:0; }
.token-name-text { font-family:'Inter',sans-serif; font-size:.72rem; font-weight:500; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.token-meta { font-size:.7rem; font-style:italic; color:var(--color-text-muted); margin-top:1px; }
.token-hp-row { display:flex; align-items:center; gap:3px; margin-top:2px; }
.hp-bar { flex:1; height:3px; background:var(--color-bg-primary); border-radius:2px; overflow:hidden; }
.hp-fill { height:100%; border-radius:2px; transition:width .3s; }
.hp-text { font-family:'JetBrains Mono',monospace; font-size:.55rem; color:var(--color-text-muted); white-space:nowrap; }
.token-actions { display:flex; gap:3px; }
.tok-btn { width:22px; height:22px; background:none; border:1px solid transparent; color:var(--color-text-muted);
  font-size:.7rem; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:3px; transition:all .15s; }
.tok-btn:hover { border-color:var(--color-border); color:var(--color-accent-primary); background:rgba(90,169,255,.08); }
.drag-ghost { position:fixed; pointer-events:none; z-index:9999; width:44px; height:44px; border-radius:50%;
  border:2px solid var(--color-accent-primary); box-shadow:0 0 16px rgba(90,169,255,.5);
  opacity:.9; display:none; object-fit:cover; background:var(--color-bg-elevated); }

/* Scenes & Settings tabs */
.scene-list { flex:1; overflow-y:auto; padding:.5rem; display:flex; flex-direction:column; gap:.4rem; }
.scene-item { padding:.6rem .8rem; background:var(--color-bg-elevated); border:1px solid var(--color-border);
  cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:.6rem; border-radius:3px; }
.scene-item:hover { border-color:var(--color-border-h); }
.scene-item.active-scene { border-color:var(--color-accent-primary); }
.scene-item-name { font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.08em; flex:1; color:var(--color-text-primary); }
.scene-add-row { padding:.7rem .8rem; border-top:1px solid var(--color-border); margin-top:auto; }
.settings-body { flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.8rem; }
.settings-body::-webkit-scrollbar { width:4px; }
.settings-body::-webkit-scrollbar-thumb { background:var(--color-border); }
.setting-group { display:flex; flex-direction:column; gap:.4rem; }
.setting-label { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--color-accent-primary); }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.setting-input { flex:1; background:var(--color-bg-elevated); border:1px solid var(--color-border);
  color:var(--color-text-primary); font-family:'Inter',sans-serif; font-size:.9rem;
  padding:.35rem .6rem; outline:none; transition:border-color .2s; border-radius:3px; }
.setting-input:focus { border-color:var(--color-accent-primary); }
.setting-toggle { position:relative; width:34px; height:18px; cursor:pointer; }
.setting-toggle input { display:none; }
.toggle-track { position:absolute; inset:0; background:var(--color-bg-elevated); border:1px solid var(--color-border); border-radius:9px; transition:background .2s; }
.toggle-thumb { position:absolute; top:2px; left:2px; width:12px; height:12px; background:var(--color-text-muted); border-radius:50%; transition:transform .2s,background .2s; }
.setting-toggle input:checked ~ .toggle-track { background:rgba(72,187,120,.2); border-color:var(--color-success); }
.setting-toggle input:checked ~ .toggle-thumb { transform:translateX(16px); background:var(--color-success); }
.color-row { display:flex; gap:4px; }
.color-swatch { width:22px; height:22px; border-radius:3px; border:2px solid transparent; cursor:pointer; transition:border-color .15s; }
.color-swatch.active { border-color:var(--color-accent-primary); }
.s-divider { height:1px; background:var(--color-border); }

/* Canvas tokens */
.canvas-token { position:absolute; cursor:pointer; user-select:none; }
.canvas-token img,.canvas-token .token-emoji { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; pointer-events:none; }
.canvas-token .token-emoji { display:flex; align-items:center; justify-content:center; font-size:1.6em; background:var(--color-bg-elevated); border-radius:50%; }
.canvas-token svg.token-ring { position:absolute; top:-6px; left:-6px; width:calc(100% + 12px); height:calc(100% + 12px); pointer-events:none; overflow:visible; }
.canvas-token.selected-token { filter:drop-shadow(0 0 6px rgba(90,169,255,0.5)); }
.token-label-el { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:'Inter',sans-serif; font-size:.65rem; font-weight:500;
  color:var(--color-text-primary); background:rgba(15,18,23,.8); padding:1px 5px;
  border-radius:3px; pointer-events:none; }

/* HP bar on canvas */
.canvas-hp-bar { position:absolute; bottom:-7px; left:5%; width:90%; height:3px;
  background:rgba(0,0,0,.5); border-radius:2px; overflow:hidden; }
.canvas-hp-fill { height:100%; border-radius:2px; transition:width .3s; }

/* Condition badges */
.cond-badge { display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem; line-height:1; padding:1px 2px; }

/* Measurement overlay */
.measure-line { stroke:var(--color-grid); stroke-width:2; stroke-dasharray:6 3;
  opacity:.8; transition:opacity .15s ease; }
.measure-label { font-family:'JetBrains Mono',monospace; font-size:.7rem; fill:var(--color-grid);
  paint-order:stroke; stroke:var(--color-bg-primary); stroke-width:3; }

#stack-picker { display:none; position:fixed; z-index:460; }
.stack-picker-inner {
  background:var(--color-bg-panel); border:1px solid var(--color-border-h);
  padding:.35rem .3rem; box-shadow:0 8px 28px rgba(0,0,0,.5);
  min-width:160px; max-width:220px;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.stack-picker-title { font-family:'Cinzel',serif; font-size:.52rem; letter-spacing:.15em;
  color:var(--color-text-muted); padding:.1rem .45rem .4rem; border-bottom:1px solid var(--color-border); margin-bottom:.3rem; }
.stack-picker-item { display:flex; align-items:center; gap:.5rem; padding:.28rem .45rem; cursor:pointer; border-radius:3px; transition:background .12s; }
.stack-picker-item:hover { background:rgba(90,169,255,.1); }
.stack-picker-thumb { width:26px; height:26px; border-radius:50%; object-fit:cover;
  background:var(--color-bg-elevated); flex-shrink:0; font-size:1rem;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--color-border); }
.stack-picker-name { font-family:'Inter',sans-serif; font-size:.65rem; color:var(--color-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Facing arrow handle */
.facing-handle { position:absolute; width:16px; height:16px; z-index:22;
  cursor:grab; transform:translate(-50%,-50%); display:none; pointer-events:all; }
.facing-handle.visible { display:block; }
.facing-handle:active { cursor:grabbing; }
.facing-handle-inner { width:100%; height:100%;
  background:radial-gradient(circle, var(--color-grid) 30%, var(--color-accent-primary) 100%);
  border-radius:50%; border:2px solid rgba(79,209,197,.9);
  box-shadow:0 0 8px rgba(79,209,197,.6), 0 0 20px rgba(79,209,197,.2); }
.facing-handle:hover .facing-handle-inner { box-shadow:0 0 14px rgba(79,209,197,1), 0 0 28px rgba(79,209,197,.4); }

/* Move-mode hint banner */
#move-lock-hint { position:fixed; top:52px; left:50%; transform:translateX(-50%);
  font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.22em;
  color:var(--color-accent-primary); background:var(--color-bg-panel);
  border:1px solid var(--color-border); padding:.3rem 1rem;
  pointer-events:none; z-index:200; display:none; white-space:nowrap; border-radius:3px; }
#move-lock-hint.active { display:block; }

/* Token placement ghost */
#token-place-ghost { position:absolute; pointer-events:none; z-index:30; display:none; transform:translate(-50%,-50%); opacity:0.72; transition:left .05s linear, top .05s linear; }
#token-place-ghost.active { display:block; }
#place-hint { position:fixed; top:52px; left:50%; transform:translateX(-50%);
  font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.22em;
  color:var(--color-success); background:var(--color-bg-panel);
  border:1px solid rgba(72,187,120,.35); padding:.3rem 1rem;
  pointer-events:none; z-index:200; display:none; white-space:nowrap; border-radius:3px; }
#place-hint.active { display:block; }

/* Token action popup */