/* Workstyle build: the reference docked beside the editor while Kadessa fills the real page.
   Prefix "wsb". Logic in js/62-workstyle-build.js. Kadessa's ring is the shared .kfx-ring in css/26-kadessa.css. */
.wsb-dock{ position:fixed; z-index:950; box-sizing:border-box; display:flex; flex-direction:column; background:var(--bg2, #0D1528); border-right:1px solid var(--border2, rgba(0,194,255,0.30)); box-shadow:6px 0 24px rgba(0,0,0,.25); }
.wsb-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border, rgba(0,194,255,0.12)); flex:0 0 auto; }
.wsb-ttl{ flex:1; min-width:0; font-size:12px; color:var(--text2, #7BA8C4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wsb-ttl b{ color:var(--text, #E8F4FF); font-weight:700; }
.wsb-btn{ font:inherit; font-size:11px; font-weight:700; padding:5px 10px; border-radius:7px; border:1px solid var(--border2, rgba(0,194,255,0.30)); background:var(--surface2, rgba(255,255,255,0.05)); color:var(--text2, #7BA8C4); cursor:pointer; }
.wsb-btn.primary{ background:#00c2ff; border-color:#00c2ff; color:#001018; }
.wsb-btn:disabled{ opacity:.55; cursor:default; }
.wsb-prog{ height:3px; background:var(--border, rgba(0,194,255,0.12)); flex:0 0 auto; }
.wsb-prog i{ display:block; height:100%; width:0; background:#00c2ff; transition:width .2s; }
.wsb-body{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px; overflow:hidden; }
.wsb-page{ position:relative; container-type:inline-size; box-shadow:0 8px 26px rgba(0,0,0,.45); border-radius:2px; flex:none; width:260px; height:368px; overflow:hidden; }
.wsb-el{ position:absolute; box-sizing:border-box; }
.wsb-t{ white-space:pre-wrap; word-break:break-word; line-height:1.25; }
.wsb-tb{ display:grid; overflow:hidden; }
.wsb-c{ display:flex; align-items:center; padding:0 1.2cqw; min-width:0; overflow:hidden; }
.wsb-im{ display:flex; align-items:center; justify-content:center; border:1.5px dashed #9aa7b5; background:#eef2f6; color:#6b7a89; font:600 2.6cqw sans-serif; border-radius:3px; }
.wsb-im.brand{ border:0; background:none; }
.wsb-im img{ width:100%; height:100%; object-fit:contain; }
.wsb-page .hot{ outline:2px solid #00c2ff; outline-offset:2px; background-color:rgba(0,194,255,.12); }
.wsb-foot{ flex:0 0 auto; padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:11.5px; color:var(--text2, #7BA8C4); min-height:34px; line-height:1.35; }
@media (max-width:759px){
  .wsb-dock{ border-right:0; border-bottom:1px solid var(--border2, rgba(0,194,255,0.30)); box-shadow:0 6px 20px rgba(0,0,0,.25); }
  .wsb-foot{ padding-top:4px; padding-bottom:6px; min-height:0; }
}