/* viewer.css - Phase 1 shared viewer UI (evidence drawer / chips / trust badges / residue popup)
   Loaded after style.css on every enzyme page. Self-contained; does not modify style.css. */

/* ============ 1. Non-modal evidence drawer (replaces #refPanel) ============ */
#evidenceDrawer{
  position:fixed; top:72px; right:0; width:min(360px,calc(100% - 24px));
  max-height:calc(100% - 100px);
  background:rgba(11,17,33,.97); backdrop-filter:blur(10px);
  border:1px solid #24365c; border-left:3px solid #58c4ff;
  border-radius:12px 0 0 12px; box-shadow:-8px 0 40px rgba(0,0,0,.45);
  z-index:15; display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(calc(100% + 12px)); transition:transform .28s cubic-bezier(.6,0,.2,1);
  pointer-events:none;
}
#evidenceDrawer.open{ transform:translateX(0); pointer-events:auto; }
#evidenceDrawer .drawerHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-bottom:1px solid #1d2c4d; flex:0 0 auto;
}
#evidenceDrawer .drawerHead h3{ font-size:12.5px; color:#fff; letter-spacing:.03em; }
#drawerClose{ background:none; border:none; color:#7f96bd; cursor:pointer; font-size:14px; line-height:1; }
#drawerClose:hover{ color:#fff; }
#evidenceDrawer .drawerBody{ overflow-y:auto; padding:11px 13px 13px; flex:1 1 auto; }
#evidenceDrawer .drawerBody ul{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
#evidenceDrawer .drawerBody .drawerSub{
  margin:14px 0 7px; padding-top:9px; border-top:1px solid rgba(140,180,220,.14);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8fb2d4;
}
#evidenceDrawer .drawerBody li.evItem{
  padding:8px 10px; border-radius:8px; background:rgba(18,28,52,.55);
  border-left:3px solid #1f3a63;
}
#evidenceDrawer .drawerBody li.evItem .evTitle{
  display:block; font-size:11px; font-weight:700; color:#e8eefc; margin-bottom:3px;
  letter-spacing:.02em;
}
#evidenceDrawer .drawerBody li.evItem .evBody{
  display:block; font-size:10.5px; line-height:1.5; color:#a9bcdd;
}
#evidenceDrawer .drawerBody li.evItem .evBody u{ text-decoration-thickness:1px; text-underline-offset:2px; }
#evidenceDrawer .drawerBody a{ color:#8fd7ff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(143,215,255,.55); }
#evidenceDrawer .drawerBody a:hover{ color:#b5e6ff; text-decoration-color:#fff; }
#evidenceDrawer .drawerNote{ margin-top:6px; font-size:9.8px; color:#6b86a6; line-height:1.45; border-top:1px dashed #24365c; padding-top:8px; }

/* ============ 2. Evidence chips (in narration bar) ============ */
#narChips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.evChip{
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:10px;
  font-size:10.5px; font-weight:700; cursor:pointer; user-select:none; line-height:1.5;
  transition:filter .12s;
}
.evChip:hover{ filter:brightness(1.4); }
.evChip.pdb{ color:#58c4ff; border:1px solid #58c4ff; background:rgba(88,196,255,.08); }
.evChip.schem{ color:#ff8c42; border:1px dashed #ff8c42; background:rgba(255,140,66,.08); }
.evChip.ec{ color:#2ecc71; border:1px solid #2ecc71; background:rgba(46,204,113,.08); }
.evChip.crystal{ color:#58c4ff; border:1px solid #58c4ff; background:rgba(88,196,255,.08); }
.evChip.lit{ color:#8899aa; border:1px solid #8899aa; background:rgba(136,153,170,.08); }

/* ============ 3. Trust badges (in step list) ============ */
#steps li{ position:relative; padding-left:17px; }
.stepBadge{ position:absolute; left:3px; top:9px; width:8px; height:8px; border-radius:50%; pointer-events:none; }
.badge-pdb,.badge-crystal{ background:#58c4ff; box-shadow:0 0 5px rgba(88,196,255,.7); }
.badge-ec{ background:#2ecc71; box-shadow:0 0 5px rgba(46,204,113,.6); }
.badge-schem{ background:transparent; border:2px dashed #ff8c42; }
.badge-lit{ background:#8899aa; }

/* ============ 4. Residue click popup ============ */
#resPopup{
  position:fixed; z-index:30; max-width:250px;
  background:rgba(12,18,32,.94); backdrop-filter:blur(8px);
  border:1px solid #58c4ff; border-radius:9px; padding:10px 13px;
  box-shadow:0 8px 30px rgba(0,0,0,.5); pointer-events:none;
}
#resPopup.hidden{ display:none; }
#resPopup .resHead{ font-weight:700; color:#58c4ff; font-size:12.5px; margin-bottom:4px; }
#resPopup .resBody{ font-size:12px; color:#c8d6e5; line-height:1.5; }
#view3d{cursor:crosshair;}

/* responsive */
@media (max-width:900px){
  #evidenceDrawer{ width:min(320px,calc(100% - 16px)); }
}