/* palace-studio — voidblack, Fable-palace usability. Full-bleed scene, minimal glass. */
:root{
  --void-black:#030d0d; --void-dark:#001a18; --void-deep:#001510;
  --teal:#00f5e4; --teal-mid:#00c8bb; --teal-dim:#00a89a; --teal-trace:#005550; --teal-dark:#004d47;
  --txt:#a8e8e4; --dim:#4a6a68; --err:#e06c75;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,Menlo,monospace;
  --glass:rgba(0,21,16,.82);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void-black);color:var(--txt);font-family:var(--mono);overflow:hidden}
button,input,select{font-family:var(--mono)}
#app{position:fixed;inset:0}
canvas#c{position:absolute;inset:0;display:block;width:100%;height:100%}

/* faint PCB grid over the void, behind the 3D canvas edges */
#app::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--teal-dark) .5px,transparent .5px),linear-gradient(90deg,var(--teal-dark) .5px,transparent .5px);
  background-size:26px 26px;opacity:.05}

/* ── floating glass primitive ── */
.glass{background:var(--glass);border:1px solid var(--teal-trace);border-left:2px solid var(--teal);
  backdrop-filter:blur(7px);border-radius:8px;box-shadow:0 6px 30px rgba(0,0,0,.5),inset 0 0 30px rgba(0,245,228,.03)}

/* ── brand ── */
#brand{position:absolute;left:18px;top:16px;z-index:10;font-size:11px;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;user-select:none}
#brand b{color:var(--teal)}
#brand .heb{color:var(--teal-mid);letter-spacing:0}

/* ── top-right buttons ── */
#topright{position:absolute;right:16px;top:14px;z-index:10;display:flex;gap:8px}
.pill{background:var(--glass);border:1px solid var(--teal-trace);color:var(--teal-mid);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;backdrop-filter:blur(7px);transition:color .12s,border-color .12s}
.pill:hover,.pill.on{color:var(--teal);border-color:var(--teal)}

/* ── the one creation bar (bottom center) ── */
#bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:10;
  display:flex;gap:8px;align-items:center;padding:8px 10px;width:min(520px,calc(100vw - 40px))}
#prompt{flex:1;background:var(--void-deep);border:1px solid var(--teal-trace);color:var(--txt);
  padding:10px 13px;border-radius:7px;font-size:13px;outline:none;transition:border-color .15s}
#prompt::placeholder{color:var(--dim)}
#prompt:focus{border-color:var(--teal);box-shadow:0 0 14px rgba(0,245,228,.12)}
.btn{border:0;border-radius:7px;cursor:pointer;font-size:13px;font-weight:700;padding:10px 14px;
  letter-spacing:.03em;transition:filter .12s,border-color .12s,color .12s,box-shadow .15s;white-space:nowrap}
.btn.primary{background:linear-gradient(160deg,#00f5e4,#00b3a6);color:#02201d;
  box-shadow:0 0 10px rgba(0,245,228,.28), inset 0 1px 0 rgba(255,255,255,.25);font-size:15px;padding:9px 15px}
.btn.primary:hover{filter:brightness(1.1);box-shadow:0 0 18px rgba(0,245,228,.45), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:transparent;border:1px solid var(--teal-trace);color:var(--teal-mid);font-weight:600}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.ghost.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 10px rgba(0,245,228,.25)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}

/* ── object card (appears when an image is ready) ── */
/* ── options dropdown (top-right, voidblack) ── */
#optsmenu{position:absolute;right:16px;top:60px;z-index:14;display:none;flex-direction:column;
  gap:14px;padding:16px;width:280px}
#optsmenu.show{display:flex}
.mini{background:none;border:1px solid var(--teal-trace);color:var(--dim);
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:11px;text-transform:uppercase;font-family:var(--mono)}
.mini:hover{color:var(--teal);border-color:var(--teal)}
.mini.danger:hover{color:var(--err);border-color:var(--err)}
/* ── resize / rotate handles ── */
.handle{position:fixed;z-index:22;display:none;width:22px;height:22px;align-items:center;justify-content:center;
  background:var(--void-deep);border:1px solid var(--teal);color:var(--teal);border-radius:50%;
  font-size:13px;cursor:grab;user-select:none;box-shadow:0 0 10px rgba(0,245,228,.3)}
.handle:active{cursor:grabbing;background:var(--teal-dark)}
#h-resize{cursor:nwse-resize}
/* ── autosave dot ── */
#savedot{width:8px;height:8px;border-radius:50%;background:var(--teal-trace);align-self:center;
  transition:background .3s,box-shadow .3s}
#savedot.on{background:var(--teal);box-shadow:0 0 8px var(--teal)}
#optsmenu .row{display:flex;gap:6px}
#optsmenu .row .mini{flex:1}
/* ── sessions menu (compact bar dropdown) ── */
#sessmenu{position:absolute;top:60px;z-index:15;display:none;flex-direction:column;gap:6px;padding:8px;width:196px}
#sessmenu.show{display:flex}
#sessmenu .opt{gap:3px}
#sessmenu .opt label{font-size:9px}
.sess-cur{color:var(--teal);font-size:12px;font-weight:700;padding:0 2px}
#sessmenu input[type=text]{flex:1;min-width:0;background:var(--void-deep);border:1px solid var(--teal-trace);
  color:var(--txt);padding:4px 7px;border-radius:5px;font-size:11px;outline:none}
#sessmenu input[type=text]:focus{border-color:var(--teal)}
#sessmenu .row{display:flex;gap:4px}
#sessmenu .mini{padding:4px 8px;font-size:10px}
#sess-list{display:flex;flex-direction:column;gap:1px;max-height:150px;overflow-y:auto}
.sess-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:11px}
.sess-row:hover{background:#00332e66}
.sess-row .nm{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-row .dt{color:var(--dim);font-size:9px}
.sess-row.cur .nm{color:var(--teal)}
/* ── 📍 pinned viewpoints menu (mirrors sessions) ── */
#viewsmenu{position:absolute;top:60px;z-index:15;display:none;flex-direction:column;gap:6px;padding:8px;width:196px}
#viewsmenu.show{display:flex}
#viewsmenu .opt{gap:3px}
#viewsmenu .opt label{font-size:9px}
#viewsmenu input[type=text]{flex:1;min-width:0;background:var(--void-deep);border:1px solid var(--teal-trace);
  color:var(--txt);padding:4px 7px;border-radius:5px;font-size:11px;outline:none}
#viewsmenu input[type=text]:focus{border-color:var(--teal)}
#viewsmenu .row{display:flex;gap:4px}
#viewsmenu .mini{padding:4px 8px;font-size:10px}
#views-list{display:flex;flex-direction:column;gap:1px;max-height:150px;overflow-y:auto}
.view-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:11px}
.view-row:hover{background:#00332e66}
.view-row .nm{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-row .del{color:var(--dim);font-size:10px;padding:0 3px}
.view-row .del:hover{color:var(--err)}
.view-row.home .nm{color:var(--teal)}

/* ── right-click context menu ── */
#ctxmenu{position:absolute;z-index:40;display:none;flex-direction:column;min-width:170px;padding:6px;gap:2px}
#ctxmenu.show{display:flex}
#ctxmenu button{background:none;border:0;color:var(--txt);text-align:left;padding:9px 12px;
  border-radius:6px;cursor:pointer;font-size:13px;font-family:var(--mono)}
#ctxmenu button:hover{background:var(--teal-dark);color:var(--teal)}
#ctxmenu button.danger:hover{background:#2a0f12;color:var(--err)}
.opt{display:flex;flex-direction:column;gap:5px}
.opt label{font-size:11px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between}
.opt label b{color:var(--teal-mid)}
.opt select{background:var(--void-deep);border:1px solid var(--teal-trace);color:var(--txt);padding:8px;border-radius:6px}
select option{background:var(--void-deep);color:var(--txt)} /* no white dropdowns */
.opt input[type=range]{width:100%;accent-color:var(--teal)}
.opt.check{flex-direction:row;align-items:center;gap:8px}
.opt.check input{accent-color:var(--teal);width:16px;height:16px}
.opt.check label{text-transform:none;color:var(--txt);font-size:12px}

/* ── scene footer (object count + clear) ── */
#scenefoot{position:absolute;right:16px;bottom:26px;z-index:10;display:flex;gap:8px;align-items:center;
  font-size:11px;color:var(--dim);letter-spacing:.08em}
#scenefoot b{color:var(--teal-mid)}
#scenefoot .mini{background:none;border:1px solid var(--teal-trace);color:var(--dim);
  padding:6px 10px;border-radius:6px;cursor:pointer;font-size:11px;text-transform:uppercase}
#scenefoot .mini:hover{color:var(--teal);border-color:var(--teal)}

/* ── hint (fades) ── */
#hint{position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:9;color:var(--dim);
  font-size:11px;letter-spacing:.08em;pointer-events:none}

/* ── toast/status ── */
#toast{position:absolute;left:50%;bottom:168px;transform:translateX(-50%);z-index:12;
  max-width:min(640px,calc(100vw - 40px));padding:9px 16px;border-radius:8px;font-size:12px;
  color:var(--teal-mid);background:var(--glass);border:1px solid var(--teal-trace);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .18s;text-align:center;pointer-events:none;white-space:pre-wrap}
#toast.show{opacity:1}
#toast.err{color:var(--err);border-color:var(--err)}

/* ── Claude chat (right dock, hidden) ── */
#chat{position:absolute;right:16px;top:60px;bottom:26px;width:320px;z-index:11;display:none;flex-direction:column}
#chat.show{display:flex}
#chat h3{font-size:11px;letter-spacing:.14em;color:var(--teal);padding:12px 14px;
  border-bottom:1px solid var(--teal-trace);text-transform:uppercase;display:flex;justify-content:space-between}
#chat h3 .x{cursor:pointer;color:var(--dim)} #chat h3 .x:hover{color:var(--err)}
#chat-log{flex:1;overflow-y:auto;padding:12px;font-size:12px;line-height:1.55;display:flex;flex-direction:column;gap:8px}
#chat-log .you{color:var(--teal)} #chat-log .claude{color:var(--txt)}
#chat-log .sys{color:var(--dim)} #chat-log .err{color:var(--err)}
#chat-log b{opacity:.8;font-weight:700}
#chat-row{display:flex;border-top:1px solid var(--teal-trace)}
#chat-input{flex:1;background:transparent;border:0;color:var(--txt);padding:12px;font-size:13px;outline:none}
#chat-input::placeholder{color:var(--dim)}
#chat-send{background:var(--teal);color:#022;border:0;padding:0 16px;cursor:pointer;font-weight:700}
#chat-eye{background:transparent;border:0;border-left:1px solid var(--teal-trace);color:var(--teal-mid);
  padding:0 12px;cursor:pointer;font-size:15px}
#chat-eye:hover{color:var(--teal)}
#chat-log .snap-thumb{display:block;max-width:130px;border:1px solid var(--teal-trace);border-radius:5px;margin-top:4px}

/* ── draw overlay (Fabric) ── */
#drawpanel{position:absolute;inset:0;background:rgba(3,13,13,.94);z-index:30;display:none;flex-direction:column;padding:14px;gap:12px}
#drawpanel.show{display:flex}
#drawbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#drawbar .tool{background:var(--void-dark);border:1px solid var(--teal-trace);color:var(--teal-mid);
  padding:9px 13px;border-radius:7px;cursor:pointer;font-size:13px}
#drawbar .tool:hover,#drawbar .tool.on{border-color:var(--teal);color:var(--teal)}
#drawbar input[type=color]{width:40px;height:36px;padding:0;border:1px solid var(--teal-trace);
  background:var(--void-deep);border-radius:7px;cursor:pointer}
#drawbar .sp{flex:1}
#drawwrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto}
#draw{background-color:var(--void-deep);border:1px solid var(--teal-trace);border-radius:6px;
  background-image:linear-gradient(45deg,#04211d 25%,transparent 25%),linear-gradient(-45deg,#04211d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#04211d 75%),linear-gradient(-45deg,transparent 75%,#04211d 75%);
  background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}

/* ── snapshot preview modal (centered, dimmed backdrop) ── */
#snapmodal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;
  display:none;flex-direction:column;gap:14px;padding:16px;max-width:min(80vw,860px)}
#snapmodal.show{display:flex}
#snapmodal::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(3,13,13,.72);backdrop-filter:blur(3px)}
#snapmodal h3{font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
#snapmodal h3 .x{cursor:pointer;color:var(--dim)} #snapmodal h3 .x:hover{color:var(--err)}
#snap-preview-wrap{display:flex;align-items:center;justify-content:center}
#snap-preview-img{max-width:70vw;max-height:70vh;border:1px solid var(--teal-trace);
  border-radius:6px;box-shadow:0 0 18px rgba(0,245,228,.12)}
#snap-actions{display:flex;gap:10px;justify-content:center}

/* ── rename dialog (centered, dimmed backdrop — mirrors the snapshot modal) ── */
#renamemodal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:46;
  display:none;flex-direction:column;gap:12px;padding:16px;width:min(80vw,420px)}
#renamemodal.show{display:flex}
#renamemodal::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(3,13,13,.72);backdrop-filter:blur(3px)}
#renamemodal h3{font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
#renamemodal h3 .x{cursor:pointer;color:var(--dim)} #renamemodal h3 .x:hover{color:var(--err)}
#rn-input{background:var(--void-deep);border:1px solid var(--teal-trace);border-radius:6px;
  color:var(--txt);font:inherit;padding:9px 10px;resize:vertical;min-height:44px;outline:none}
#rn-input:focus{border-color:var(--teal);box-shadow:0 0 10px rgba(0,245,228,.18)}
#rn-hint{font-size:10px;color:var(--dim);letter-spacing:.04em}
#rn-actions{display:flex;gap:10px;justify-content:center}
#rn-actions .btn.armed{outline:2px solid var(--teal);outline-offset:1px}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--teal-trace);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}