#app{position:fixed; inset:0; height:100dvh; display:flex; flex-direction:column; background:var(--bg);}
#topbar{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px 16px; z-index:20; gap:10px;}
.divider-dot{width:3px;height:3px;border-radius:50%;background:var(--text-faint); flex:0 0 auto;}
#projectNameLabel{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:36vw;}
#topbar-actions{display:flex; gap:8px; flex:0 0 auto;}
#versionRow{flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; padding:0 14px 10px;}
.version-chip{flex:0 0 auto; padding:6px 12px; border-radius:100px; font-size:11.5px; font-weight:600; background:var(--panel); border:1px solid var(--border-soft); color:var(--text-dim); white-space:nowrap;}
.version-chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
#stage{position:relative; flex:1 1 auto; min-height:0; overflow:hidden; touch-action:none;}
#canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
#emptyState{position:absolute; inset:14px; border:1.5px dashed var(--border); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;}
#emptyState.hidden{display:none !important;}
#emptyState .glyph{width:52px;height:52px;border-radius:14px; background:var(--accent-dim); display:flex; align-items:center; justify-content:center;}
#emptyState .glyph svg{width:22px;height:22px; color:var(--accent);}
#emptyState h2{margin:0; font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600;}
#emptyState p{margin:0; color:var(--text-dim); font-size:13px; max-width:260px; line-height:1.5;}
#emptyState .cta{margin-top:4px; padding:9px 18px; border-radius:100px; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:700;}
#eyeBtn{position:absolute; right:14px; bottom:14px; width:46px; height:46px; border-radius:50%; background:var(--panel); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:15; transition:background .15s ease, transform .1s ease;}
#eyeBtn svg{width:19px;height:19px; color:var(--text);}
#eyeBtn.active{background:var(--accent); border-color:var(--accent);}
#eyeBtn.active svg{color:var(--accent-ink);}
#eyeBtn:active{transform:scale(.93);}
#reviewsBtn{position:absolute; right:14px; bottom:70px; width:46px; height:46px; border-radius:50%; background:var(--panel); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:15; transition:background .15s ease, transform .1s ease;}
#reviewsBtn svg{width:18px;height:18px; color:var(--text);}
#reviewsBtn:active{transform:scale(.93);}
#zoomReadout{position:absolute; left:14px; bottom:14px; padding:6px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--border-soft); font-size:11px; color:var(--text-dim); opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:14;}
#zoomReadout.show{opacity:1;}
#tray{position:relative; flex:0 0 auto; background:var(--panel); border-top:1px solid var(--border-soft); z-index:25; padding-bottom:env(safe-area-inset-bottom,0);}
#trayHandle{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:9px 0 7px;}
#trayHandle .grip{width:34px; height:4px; border-radius:2px; background:var(--border);}
#trayHandle .label{font-size:10.5px; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:6px;}
#trayHandle .label .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
#trayBody{max-height:0; overflow:hidden; transition:max-height .28s cubic-bezier(.2,.8,.2,1);}
#tray.open #trayBody{max-height:180px;}
#tray.open #trayHandle .grip{background:var(--accent);}
#toolsRow{display:flex; gap:8px; overflow-x:auto; padding:4px 14px 12px;}
.tool-btn{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; width:58px; padding:10px 4px 8px; border-radius:14px; background:var(--panel-2); border:1px solid var(--border-soft);}
.tool-btn svg{width:18px;height:18px; color:var(--text-dim);}
.tool-btn span{font-size:9.5px; color:var(--text-dim); letter-spacing:.02em;}
.tool-btn.active{background:var(--accent-dim); border-color:var(--accent-dim-2);}
.tool-btn.active svg, .tool-btn.active span{color:var(--accent);}
.tool-btn:active{transform:scale(.95);}
.tool-btn:disabled{opacity:.35; pointer-events:none;}
.tool-sep{flex:0 0 auto; width:1px; align-self:stretch; margin:6px 2px; background:var(--border-soft);}
.pin-chip{width:20px;height:20px;border-radius:6px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto;}
.sheet-title-wrap{min-width:0; display:flex; flex-direction:column;}
.sheet-title-flex{display:flex; align-items:center; gap:8px;}
.thread-list{display:flex; flex-direction:column; gap:12px; padding-bottom:6px;}
.thread-empty{padding:22px 4px; text-align:center; color:var(--text-dim); font-size:12.5px; line-height:1.6;}
.msg{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:14px; padding:10px 12px;}
.msg-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; gap:8px;}
.msg-author{font-size:12px; font-weight:700;}
.msg-role{font-size:9.5px; font-weight:600; color:var(--text-faint); text-transform:uppercase; letter-spacing:.03em; margin-left:4px;}
.msg-time{font-size:10px; color:var(--text-faint); white-space:nowrap;}
.msg-text{font-size:13px; line-height:1.5; color:var(--text);}
.composer{flex:0 0 auto; display:flex; gap:8px; align-items:flex-end; padding:12px 14px; border-top:1px solid var(--border-soft); background:var(--panel);}
.composer textarea{flex:1; resize:none; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:14px; padding:10px 12px; font-size:13.5px; line-height:1.4; color:var(--text); max-height:90px; min-height:40px; outline:none;}
.composer textarea:focus{border-color:var(--accent-dim-2);}
.send-btn{flex:0 0 auto; width:40px; height:40px; border-radius:12px; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; border:none;}
.send-btn:disabled{opacity:.35;}
.send-btn svg{width:17px;height:17px;}
#reviewsBtn{position:relative;}
#reviewsCount{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:100px; background:var(--accent); color:var(--accent-ink); font-size:9.5px; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;}
.review-row{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:14px; padding:12px; margin-bottom:8px;}
.review-body{flex:1; min-width:0;}
.review-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px;}
.review-type{font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.03em;}
.review-count{font-size:10.5px; color:var(--text-faint);}
.review-preview{display:block; font-size:12.5px; line-height:1.45; color:var(--text); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.review-author{font-weight:700; color:var(--text);}
.review-empty{color:var(--text-faint); font-style:normal;}
.hover-popover{position:absolute; z-index:30; width:250px; max-width:calc(100% - 20px); background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; box-shadow:var(--shadow); padding:10px;}
.hover-popover.hidden{display:none;}
.hp-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.hp-type{font-size:11.5px; font-weight:700; color:var(--text-dim); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hp-close{flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:var(--panel-2); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-dim);}
.hp-close svg{width:12px;height:12px;}
.hp-comments{max-height:130px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; margin-bottom:8px;}
.hp-empty{font-size:11.5px; color:var(--text-faint); padding:2px 0;}
.hp-msg{font-size:12px; line-height:1.4; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:8px; padding:6px 8px;}
.hp-msg-author{font-weight:700; color:var(--text); margin-right:4px;}
.hp-msg-text{color:var(--text);}
.hp-composer{display:flex; gap:6px; margin-bottom:6px;}
.hp-composer input{flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:8px; padding:7px 9px; font-size:12.5px; color:var(--text); outline:none;}
.hp-composer input:focus{border-color:var(--accent-dim-2);}
.hp-composer .hp-send{flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:var(--accent); color:var(--accent-ink); border:none; display:flex; align-items:center; justify-content:center;}
.hp-composer .hp-send svg{width:14px;height:14px;}
.hp-composer .hp-send:disabled{opacity:.4;}
.hp-viewfull{display:block; width:100%; text-align:center; background:none; border:none; font-size:11px; color:var(--text-dim); padding:2px 0 0; text-decoration:underline;}
.resolve-toggle{flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:100px; background:var(--panel-2); border:1px solid var(--border-soft); color:var(--text-dim); font-size:11.5px; font-weight:600; margin-right:8px;}
.resolve-toggle svg{width:13px;height:13px;}
.resolve-toggle.resolved{background:var(--accent-dim); border-color:var(--accent-dim-2); color:var(--accent);}
.resolve-toggle:active{transform:scale(.96);}
.resolve-toggle:disabled{opacity:.5; pointer-events:none;}
.reaction-bar{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;}
.reaction-btn{display:flex; align-items:center; gap:4px; padding:3px 7px; border-radius:100px; background:var(--panel); border:1px solid var(--border-soft); font-size:12px; line-height:1;}
.reaction-btn .re-emoji{font-size:13px;}
.reaction-btn .re-count{font-size:10px; font-weight:700; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
.reaction-btn.mine{background:var(--accent-dim); border-color:var(--accent-dim-2);}
.reaction-btn.mine .re-count{color:var(--accent);}
.reaction-btn:active{transform:scale(.92);}
.reviews-filter-row{display:flex; gap:6px; margin-bottom:12px;}
.reviews-filter-chip{flex:0 0 auto; padding:6px 13px; border-radius:100px; font-size:11.5px; font-weight:600; background:var(--panel-2); border:1px solid var(--border-soft); color:var(--text-dim);}
.reviews-filter-chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.review-row.resolved{opacity:.6;}
.review-row.resolved .pin-chip{background:var(--text-faint);}
@media (max-width:700px){
  .hover-popover{width:min(300px, calc(100vw - 24px)); max-height:min(62dvh,420px); padding:11px;}
  .hp-comments{max-height:min(30dvh,180px);}
  .hp-msg{font-size:12.5px; padding:7px 8px;}
  .hp-composer input{font-size:13px; min-height:34px;}
  .hp-composer .hp-send{width:34px; height:34px;}
}
input[type=file]{display:none;}