/* Workstyle: top-bar button + popover (sits right after Showcase in the PDF Editor app bar).
   Prefix "ws" = Workstyle UI. Logic lives in js/59-workstyle.js and js/60-workstyle-pdf.js,
   the panel wiring in js/61-workstyle-ui.js. */
.ws-panel{ position:absolute; top:calc(100% + 8px); left:0; z-index:900; width:340px; max-width:92vw; background:var(--bg2); border:1px solid var(--border2); border-radius:12px; padding:14px; box-shadow:0 12px 32px rgba(0,0,0,0.35); display:none; }
.ws-panel.open{ display:block; }
.ws-panel h4{ margin:0 0 4px; font-size:13px; color:var(--text); display:flex; align-items:center; gap:6px; }
.ws-badge{ font-size:9px; font-weight:800; letter-spacing:.04em; background:rgba(0,194,255,0.15); color:#00c2ff; border-radius:5px; padding:2px 6px; }
.ws-sub{ font-size:10.5px; color:var(--text3); line-height:1.4; margin:0 0 10px; }
.ws-panel input[type="text"]{ width:100%; box-sizing:border-box; background:var(--surface2); border:1px solid var(--border2); border-radius:7px; padding:7px 8px; font-size:12px; color:var(--text); }
.ws-panel input[type="text"]::placeholder{ color:var(--text3); }
.ws-scope{ display:flex; gap:6px; margin:8px 0; }
.ws-scope label{ flex:1; display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; color:var(--text2); border:1px solid var(--border2); border-radius:7px; padding:6px 4px; cursor:pointer; background:var(--surface2); }
.ws-scope input{ accent-color:#00c2ff; margin:0; }
.ws-scope label.on{ border-color:#00c2ff; color:var(--text); }
.ws-actions{ display:flex; gap:8px; }
.ws-actions button, .ws-del{ font-size:11px; font-weight:700; border-radius:7px; padding:8px 8px; cursor:pointer; border:1px solid var(--border2); background:var(--surface2); color:var(--text2); }
.ws-actions button{ flex:1; }
.ws-actions button.primary{ background:#00c2ff; border-color:#00c2ff; color:#001018; }
.ws-actions button:disabled{ opacity:.55; cursor:default; }
.ws-or{ font-size:10px; color:var(--text3); text-align:center; margin:8px 0; letter-spacing:.06em; }
.ws-list{ margin-top:12px; border-top:1px solid var(--border); padding-top:8px; max-height:200px; overflow:auto; }
.ws-list-title{ font-size:10.5px; font-weight:700; color:var(--text3); margin-bottom:4px; }
.ws-item{ display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--border); }
.ws-item:first-of-type{ border-top:none; }
.ws-item-main{ flex:1; min-width:0; }
.ws-item-name{ font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-item-meta{ font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-del{ padding:4px 8px; font-size:10.5px; }
.ws-build{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:7px; border:1px solid #00c2ff; background:#00c2ff; color:#001018; cursor:pointer; }
.ws-del:hover{ color:#ef4444; border-color:rgba(239,68,68,.5); }
.ws-del.sure{ background:rgba(239,68,68,.15); color:#ef4444; border-color:rgba(239,68,68,.5); }
.ws-empty{ font-size:11px; color:var(--text3); padding:6px 0; line-height:1.4; }
.ws-status{ font-size:10.5px; color:var(--text3); margin-top:8px; line-height:1.4; min-height:14px; }
.ws-status.ok{ color:#16a34a; }
.ws-status.err{ color:#ef4444; }
.ws-soon{ margin-top:10px; font-size:10.5px; color:var(--text3); border:1px dashed var(--border2); border-radius:7px; padding:6px 8px; line-height:1.4; }
@media (max-width:640px){
  .ws-panel{ position:fixed; left:8px; right:8px; top:64px; width:auto; max-width:none; }
}

/* Reference + content flow */
.ws-step{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--text); margin:12px 0 6px; }
.ws-num{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#00c2ff; color:#001018; font-size:10.5px; font-weight:800; }
.ws-panel textarea{ width:100%; box-sizing:border-box; resize:vertical; min-height:96px; max-height:240px; background:var(--surface2); border:1px solid var(--border2); border-radius:7px; padding:8px; font:inherit; font-size:12px; line-height:1.45; color:var(--text); }
.ws-panel textarea::placeholder{ color:var(--text3); }
.ws-row{ display:flex; align-items:center; gap:8px; margin:6px 0 10px; min-height:20px; }
.ws-link{ background:none; border:0; padding:0; font:inherit; font-size:11px; font-weight:700; color:#00c2ff; cursor:pointer; text-decoration:underline; }
.ws-link:disabled{ opacity:.55; cursor:default; }
.ws-fname{ font-size:10.5px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.ws-list{ margin-top:8px; border-top:0; padding-top:0; max-height:150px; }
.ws-item{ border:1px solid var(--border2); border-radius:8px; padding:4px 6px 4px 8px; margin-top:5px; background:var(--surface2); }
.ws-item:first-of-type{ border-top:1px solid var(--border2); }
.ws-item.on{ border-color:#00c2ff; box-shadow:0 0 0 1px #00c2ff inset; }
.ws-pick{ flex:1; min-width:0; text-align:left; background:none; border:0; padding:2px 0; font:inherit; cursor:pointer; color:inherit; }
.ws-actions button.primary{ padding:10px 8px; font-size:12px; }

/* drag a file onto the reference list or the content box */
.ws-drop{ outline:2px dashed #00c2ff; outline-offset:2px; }

/* ── Minimal side-by-side upload boxes: Reference | Your file (each shows its format logo) ── */
.ws-cards{ display:flex; gap:10px; margin-top:2px; }
.ws-card{ flex:1; min-width:0; }
.ws-lab{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text2); margin:0 0 6px; }
.ws-zone{ position:relative; height:148px; box-sizing:border-box; border:1.5px dashed var(--border2); border-radius:12px; background:var(--surface2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:10px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; outline:none; }
.ws-zone:hover, .ws-zone:focus-visible, .ws-zone.ws-drop{ border-color:#00c2ff; background:rgba(0,194,255,0.07); }
.ws-zone.ws-drop{ outline:none; }
.ws-zone.full{ border-style:solid; border-color:#00c2ff; }
.ws-zone.ws-off{ opacity:.55; pointer-events:none; }
.ws-plus{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:#00c2ff; }
.ws-up{ font-size:11.5px; font-weight:700; color:var(--text); }
.ws-hint{ font-size:10px; color:var(--text3); line-height:1.35; }
.ws-logos{ display:flex; align-items:center; justify-content:center; height:56px; }
.ws-logo{ position:relative; display:inline-flex; align-items:flex-end; justify-content:center; box-sizing:border-box; width:42px; height:52px; padding-bottom:6px; border-radius:7px; color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; box-shadow:0 4px 10px rgba(0,0,0,0.35); }
.ws-logo::before{ content:""; position:absolute; top:0; right:0; width:12px; height:12px; background:rgba(0,0,0,0.25); border-bottom-left-radius:5px; }
.ws-logos .ws-logo + .ws-logo{ margin-left:-14px; }
.ws-logo.sm{ width:22px; height:26px; padding-bottom:3px; border-radius:4px; font-size:7px; box-shadow:none; flex:none; }
.ws-logo.sm::before{ width:7px; height:7px; border-bottom-left-radius:3px; }
.ws-more{ margin-left:6px; font-size:11px; font-weight:800; color:var(--text2); }
.ws-fn{ max-width:100%; font-size:11.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-fm{ max-width:100%; font-size:10px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-x{ position:absolute; top:6px; right:6px; width:22px; height:22px; padding:0; font:inherit; font-size:14px; line-height:1; border:1px solid var(--border2); border-radius:7px; background:var(--surface2); color:var(--text2); cursor:pointer; }
.ws-x:hover{ color:#ef4444; border-color:rgba(239,68,68,.5); }
.ws-panel > .ws-link{ display:block; margin:10px 0 0; }
.ws-mini{ margin-top:10px; }
.ws-mini summary{ font-size:11px; font-weight:700; color:#00c2ff; cursor:pointer; list-style:none; }
.ws-mini summary::-webkit-details-marker{ display:none; }
.ws-mini textarea{ margin-top:6px; min-height:80px; }
.ws-panel .ws-actions{ margin-top:12px; }
.ws-fine{ margin-top:8px; font-size:10px; color:var(--text3); line-height:1.4; }
.ws-list{ margin-top:10px; max-height:130px; }
.ws-item .ws-pick{ display:flex; align-items:center; gap:8px; }
.ws-item .ws-item-name{ flex:1; min-width:0; }