/* ── SDPal — Workspace Split-View ── */

/* ═══ CONTAINER ═══ */
.ws-container{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}
.ws-hidden{display:none!important}

/* ═══ DIVIDER ═══ */
.ws-divider{
  width:6px;cursor:col-resize;flex-shrink:0;
  position:relative;z-index:10;
  background:transparent;transition:background 0.15s;
  touch-action:none;
}
.ws-divider:hover,.ws-divider.dragging{background:var(--accent-dim)}
.ws-divider::after{
  content:'';position:absolute;left:2px;top:50%;transform:translateY(-50%);
  width:2px;height:32px;background:var(--border-hover);border-radius:1px;
  transition:background 0.15s;
}
.ws-divider:hover::after,.ws-divider.dragging::after{background:var(--accent)}

/* ═══ READER PANEL (left) ═══ */
.ws-reader{
  flex:0 0 50%;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  border-right:1px solid var(--border-subtle);
  display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
.ws-reader::-webkit-scrollbar{width:3px}
.ws-reader::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.04);border-radius:2px}

.ws-reader-content{padding:20px 24px;flex:1;min-height:0}

/* Page block */
.ws-page{margin-bottom:24px}
.ws-page-header{
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--border-subtle);
}
.ws-page-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-mid);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;flex-shrink:0;
}
.ws-page-title{font-size:12px;font-weight:600;color:var(--text-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-page-method{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  padding:2px 8px;border-radius:var(--r-full);flex-shrink:0;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-3);
}
.ws-page-delete{
  width:24px;height:24px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-3);font-size:14px;flex-shrink:0;
  opacity:0;transition:all var(--t);cursor:pointer;
}
.ws-page:hover .ws-page-delete{opacity:1}
.ws-page-delete:hover{background:var(--danger-dim);color:var(--danger)}

/* Page content — readable typography */
.ws-page-text{
  font-size:15px;line-height:1.85;color:var(--text-1);
  overflow-wrap:break-word;white-space:pre-wrap;
  user-select:text;-webkit-user-select:text;
}
.ws-page-text::selection{background:rgba(34,197,94,0.25)}

/* Page body variants */
.ws-page-body{margin-top:8px}

/* PDF rendering */
.ws-page-pdf{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.ws-pdf-canvas-wrap{position:relative;width:100%;overflow:hidden}
.ws-pdf-canvas{
  width:100%;height:auto;border-radius:var(--r-sm);
  border:1px solid var(--border);display:block;
  background:var(--bg-card);
}
.ws-pdf-page-label{
  position:absolute;bottom:8px;right:8px;
  padding:2px 8px;border-radius:var(--r-full);
  background:rgba(0,0,0,0.6);color:#fff;font-size:10px;font-weight:600;
}

/* Image rendering */
.ws-page-image-wrap{display:flex;justify-content:center;width:100%}
.ws-page-img{max-width:100%;max-height:80vh;height:auto;border-radius:var(--r-sm);border:1px solid var(--border);display:block}

/* Text toggle for PDF/image pages */
.ws-text-toggle{
  display:flex;align-items:center;gap:5px;margin-top:10px;padding:6px 0;
  font-size:11px;font-weight:600;color:var(--accent);cursor:pointer;
  background:none;border:none;font-family:var(--font);
}
.ws-text-toggle:hover{opacity:0.8}
.ws-text-toggle::before{content:'▸';font-size:10px;transition:transform 0.15s}
.ws-text-toggle.open::before{transform:rotate(90deg)}

/* Extracted text view */
.ws-extracted-text{
  margin-top:6px;padding:12px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;line-height:1.7;color:var(--text-1);
  max-height:300px;overflow-y:auto;
}

.ws-page-divider{border:none;border-top:1px solid var(--border-subtle);margin:20px 0}

/* Add page button (at end of content) */
.ws-add-page{
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:14px;
  background:var(--bg-1);border:1.5px dashed var(--border-hover);
  border-radius:var(--r-lg);color:var(--text-3);
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.18s;
}
.ws-add-page:hover{border-color:var(--accent-mid);color:var(--accent);background:var(--accent-dim)}
.ws-add-page:active{transform:scale(0.98)}
.ws-add-page svg{width:16px;height:16px}

/* Empty reader */
.ws-reader-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;gap:14px;text-align:center;padding:48px 24px;
}
.ws-reader-empty-icon{font-size:44px;opacity:0.35}
.ws-reader-empty-text{font-size:14px;color:var(--text-3);max-width:260px;line-height:1.6}

/* ═══ WORK PANEL (right) ═══ */
.ws-work{
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;min-width:0;min-height:0;
}

/* (action bar removed — replaced by tool grid) */

/* Tool area — must contain PhaseView properly */
.ws-tool-area{
  flex:1;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;position:relative;
  min-height:0;height:0;
}

/* Tool grid (welcome/home state of work panel) */
.ws-tool-grid{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding:16px;
}
.ws-tool-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-md);
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;transition:all 0.15s;text-align:left;width:100%;
}
.ws-tool-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.ws-tool-card:active{transform:translateY(0)}
.ws-tool-card-study{
  border-color:rgba(34,197,94,0.2);background:rgba(34,197,94,0.04);
}
.ws-tool-card-study:hover{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.08);box-shadow:var(--accent-glow-sm)}

.ws-tool-card-icon{
  width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;
}
.ws-tool-card-info{flex:1;min-width:0}
.ws-tool-card-name{font-size:13px;font-weight:600;color:var(--text-1);letter-spacing:-0.01em}
.ws-tool-card-desc{font-size:11px;color:var(--text-3);margin-top:1px;line-height:1.4}

.ws-tool-hint{
  padding:8px 16px 12px;font-size:11px;color:var(--text-3);text-align:center;
}

/* Previous results list */
.ws-prev-results{padding:0 16px 16px}
.ws-prev-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  color:var(--text-3);margin-bottom:8px;padding-left:2px;
}
.ws-prev-list{display:flex;flex-direction:column;gap:4px}
.ws-prev-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--r-md);
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;transition:all 0.15s;text-align:left;width:100%;
}
.ws-prev-item:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}
.ws-prev-item:active{transform:scale(0.99)}
.ws-prev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ws-prev-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ws-prev-name{font-size:13px;font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-prev-meta{font-size:11px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tool running header (back + name) */
.ws-tool-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;
}
.ws-tool-back{
  width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:all var(--t);cursor:pointer;flex-shrink:0;
}
.ws-tool-back:hover{background:rgba(255,255,255,0.05);color:var(--text-1)}
.ws-tool-header-name{font-size:13px;font-weight:600;flex:1}
.ws-tool-header-ctx{font-size:10px;color:var(--accent);font-weight:600;padding:2px 8px;border-radius:var(--r-full);background:var(--accent-dim);border:1px solid var(--accent-mid)}

@media(min-width:500px){
  .ws-tool-grid{grid-template-columns:1fr 1fr;gap:8px}
}

/* Output history tabs */
.ws-history{
  border-top:1px solid var(--border-subtle);flex-shrink:0;
  padding:8px 16px;display:flex;align-items:center;gap:6px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ws-history::-webkit-scrollbar{display:none}
.ws-history:empty{display:none;padding:0;border:none}

.ws-history-label{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--text-3);flex-shrink:0;margin-right:4px;
}
.ws-history-tab{
  padding:5px 12px;border-radius:var(--r-full);flex-shrink:0;
  font-size:11px;font-weight:600;color:var(--text-3);
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;transition:all var(--t);white-space:nowrap;
}
.ws-history-tab:hover{border-color:var(--border-hover);color:var(--text-1)}
.ws-history-tab.active{border-color:var(--accent-mid);color:var(--accent);background:var(--accent-dim)}

/* ═══ SELECTION CONTEXT MENU ═══ */
.ws-sel-toolbar{
  position:fixed;z-index:500;
  display:flex;gap:2px;padding:4px;
  background:var(--bg-4);border:1px solid var(--border);
  border-radius:var(--r-full);box-shadow:var(--shadow-lg);
  animation:fadeScaleIn 0.12s var(--ease);
  pointer-events:auto;
}
.ws-sel-toolbar.hidden{display:none}
.ws-sel-btn{
  padding:6px 12px;border-radius:var(--r-full);
  font-size:11px;font-weight:600;color:var(--text-2);
  white-space:nowrap;cursor:pointer;transition:all var(--t);
}
.ws-sel-btn:hover{background:var(--accent-dim);color:var(--accent)}
@keyframes fadeScaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}

/* ═══ MOBILE TOGGLE (<768px) ═══ */
.ws-mobile-toggle{
  display:none;padding:8px var(--page-px);padding-top:max(8px,env(safe-area-inset-top,0));
  border-bottom:1px solid var(--border-subtle);flex-shrink:0;
}
.ws-mobile-toggle-inner{
  display:flex;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-full);padding:3px;gap:2px;
}
.ws-mobile-toggle-btn{
  flex:1;padding:10px;border-radius:var(--r-full);
  font-size:13px;font-weight:600;color:var(--text-2);
  text-align:center;transition:all var(--t);cursor:pointer;
  min-height:44px;display:flex;align-items:center;justify-content:center;
}
.ws-mobile-toggle-btn:active{transform:scale(0.97)}
.ws-mobile-toggle-btn.active{background:var(--accent);color:var(--text-inv);box-shadow:var(--accent-glow-sm)}

/* Context label for selected text tools */
.ws-ctx-label{
  padding:8px 16px;font-size:12px;color:var(--text-3);
  border-bottom:1px solid var(--border-subtle);flex-shrink:0;
  display:flex;align-items:center;gap:6px;
}
.ws-ctx-label::before{content:'';width:3px;height:14px;border-radius:1px;background:var(--accent);flex-shrink:0}

/* Study flow step labels */
.ws-step-label{
  padding:12px 16px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);
  flex-shrink:0;
}

/* ═══ RESPONSIVE ═══ */

/* Phone: stack panels, show toggle */
@media(max-width:767px){
  .ws-container{flex-direction:column;height:100%}
  .ws-divider{display:none}
  .ws-reader{flex:1;border-right:none;min-height:0}
  .ws-work{flex:1;min-height:0}
  .ws-mobile-toggle{display:block}
  .ws-reader-content{padding:14px}
  .ws-page-img{max-height:60vh}

  /* Bigger touch targets */
  .ws-tool-back{width:44px;height:44px}
  .ws-tool-card{padding:14px 16px;gap:14px}
  .ws-tool-card-icon{width:40px;height:40px}
  .ws-tool-card-name{font-size:14px}
  .ws-tool-card-desc{font-size:12px}
  .ws-prev-item{padding:14px 14px;min-height:48px}
  .ws-prev-name{font-size:14px}
  .ws-history-tab{padding:8px 14px;min-height:36px;font-size:12px}

  /* Selection toolbar - narrower for phone */
  .ws-sel-toolbar{padding:3px;gap:1px;max-width:calc(100vw - 16px)}
  .ws-sel-btn{padding:8px 10px;font-size:12px}

  /* Page delete always visible on touch (no hover) */
  .ws-page-delete{opacity:0.5}

  /* Add page button bottom padding for bottom nav */
  .ws-add-page{margin-bottom:calc(var(--bnav-h) + env(safe-area-inset-bottom,0) + 8px)}

  /* Tool grid single column on very narrow */
  .ws-tool-grid{grid-template-columns:1fr;padding:12px}
}

/* Tablet: narrower reader */
@media(min-width:768px) and (max-width:1079px){
  .ws-reader{flex:0 0 40%}
  .ws-reader-content{padding:18px 20px}
}

/* Desktop: comfortable */
@media(min-width:1080px){
  .ws-reader{flex:0 0 50%}
  .ws-reader-content{padding:24px 28px}
}