/* Wrap */
.enph-wrap {
  max-width: 1600px;           /* wider overall page area */
  margin: 24px auto;
  padding: 0 12px;
}

/* Top bar */
.enph-topbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#enph-load { padding: 8px 14px; }
.enph-tip { opacity: .75; }

/* Make the Upload PDF label/button wide from the start */
.enph-upload {
  display: inline-block;
  width: 300px;                /* adjust if you want it even wider */
  padding: 8px;
  font-size: 14px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
}
/* Hide the real file input but keep it clickable */
.enph-upload input[type="file"] { display: none; }

/* Upload status pill (dark green) */
#enph-upload-status {
  display: inline-block;
  margin-left: 10px;
  color: #006400;              /* dark green text */
  font-weight: bold;
}

/* Two-column layout: make PDF side much wider than sidebar */
.enph-grid {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(320px, 1fr); /* wider left panel */
  gap: 16px;
  min-height: 70vh;
  width: 100%;
  max-width: 100%;
}

/* Left viewer (PDF) */
.enph-viewer {
  position: relative;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0;              /* was 12px */
  overflow: hidden;        /* hide any tiny overflow */
  background: #111;
}
#enph-canvas-col { gap: 0; }  /* no gaps between pages */


/* Ensure the canvas fits the column width visually */
.enph-viewer canvas {
  position: relative !important;
  z-index: 1 !important;
  max-width: 100%;
  height: auto;
}

#enph-status { margin-top: 6px; font-size: .9rem; opacity: .8; }

/* Hide the button; we auto-explain on selection */
#enph-explain { display: none; }

/* Right sidebar */
.enph-side {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px;
  background: #0b0b0b;
  position: sticky;
  top: 12px;                          /* pinned while scrolling */
  max-height: calc(100vh - 24px);     /* fit viewport height */
  overflow: auto;                     /* internal scroll for long answers */
}
.enph-side h3 { margin-top: 0; }

/* Force explanation text to be white */
#enph-side-inner,
#enph-side-inner * {
  color: #ffffff !important;
}
.enph-empty {
  font-size: 1.05em;
  color: rgba(255,255,255,0.85) !important;
}

/* Explanation cards */
.enph-card { display: grid; gap: 8px; }
.enph-thumb { display: flex; align-items: flex-start; gap: 10px; }
.enph-thumb img {
  width: 80px; height: 80px;
  object-fit: cover; border-radius: 6px; border: 1px solid #333;
}

/* --- PDF.js text layer: selectable but (visually) invisible --- */
.textLayer {
  position: absolute !important;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: auto !important;
  z-index: 2 !important;              /* above the canvas */
  -webkit-user-select: text !important;
  user-select: text !important;
  line-height: 1;
  white-space: pre;
}
.textLayer > span {
  position: absolute;
  transform-origin: 0% 0%;
  white-space: pre;
  color: rgba(0,0,0,0.01);            /* nearly invisible so selection highlight shows */
  -webkit-text-fill-color: rgba(0,0,0,0.01); /* Safari */
}

/* Selection highlight while dragging */
.enph-viewer ::selection,
.textLayer > span::selection {
  background: rgba(82,156,255,0.45) !important;
  color: #000 !important;
}
.enph-viewer ::-moz-selection,
.textLayer > span::-moz-selection {
  background: rgba(82,156,255,0.45) !important;
  color: #000 !important;
}

/* Persistent highlight color (for <mark> we add in JS) */
.textLayer mark {
  background: rgba(0, 100, 0, 0.85);  /* very dark green */
  padding: 0 2px;
}

/* Keep two columns on smaller screens too (optional)
   If you want it to stack on mobile, you can add a media query later. */