/* ═══════════════════════════════════════════════════
   MY SLIDES — Complete self-contained viewer styles
   Scoped tightly so nothing bleeds into study room
═══════════════════════════════════════════════════ */

/* Shell fills the room-vp absolutely */
.mys-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0c0c0e;
}

/* ── Drop screen ── */
.mys-drop-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: var(--bg-page);
}

.mys-shell[data-has-file="false"] .mys-drop-screen {
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.mys-drop-zone {
  width: 100%;
  max-width: 480px;
  border: 1.5px dashed rgba(255,255,255,0.12);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}
.mys-shell[data-has-file="false"] .mys-drop-zone {
  margin: 24px;
  align-self: center;
  justify-content: center;
}
.mys-drop-zone:hover,
.mys-drop-zone.drag-over {
  border-color: rgba(130,140,255,0.5);
  background: rgba(130,140,255,0.04);
}
.mys-drop-icon {
  width: 52px; height: 52px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #818cf8;
  margin-bottom: 4px;
}
.mys-drop-icon svg { width: 22px; height: 22px; }
.mys-drop-title {
  font-size: 1rem; font-weight: 700;
  color: #f0f0f0; margin: 0; letter-spacing: -0.01em;
}
.mys-drop-sub {
  font-size: 0.82rem; color: #888; margin: 0; line-height: 1.5;
}
.mys-browse-link {
  color: #818cf8; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.mys-drop-hint {
  font-size: 0.72rem; color: #555;
  margin: 0; font-family: monospace;
}
.mys-drop-status {
  font-size: 0.78rem; color: #818cf8;
  min-height: 1.2em; margin: 0;
}

/* ── Viewer shell — fills remaining space ── */
.mys-viewer-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 15px;

  /* Default: dark */
  --mys-doc-bg: #0c0c0e;
  --mys-doc-bar: #111115;
  --mys-doc-bar-text: #ccc;
  --mys-doc-bar-text-muted: #555;
  --mys-doc-bar-btn: #666;
  --mys-doc-bar-btn-hover: #ccc;
  --mys-doc-bar-btn-hover-bg: rgba(255,255,255,0.06);
  --mys-doc-bar-border: rgba(255,255,255,0.06);
  --mys-doc-bar-sep: rgba(255,255,255,0.08);
  --mys-doc-gutter: #1a1a1e;
  --mys-doc-scroll-thumb: rgba(255,255,255,0.15);
  --mys-doc-scroll-thumb-hover: rgba(255,255,255,0.25);
  --mys-doc-page-bg: #ffffff;
  --mys-doc-page-text: #111;
  --mys-doc-text-selection: rgba(20,115,230,0.2);
}

.mys-viewer-shell[data-doc-theme="light"] {
  --mys-doc-bg: #f7f7fb;
  --mys-doc-bar: #ffffff;
  --mys-doc-bar-text: #1a1a2e;
  --mys-doc-bar-text-muted: #888;
  --mys-doc-bar-btn: #999;
  --mys-doc-bar-btn-hover: #333;
  --mys-doc-bar-btn-hover-bg: rgba(0,0,0,0.06);
  --mys-doc-bar-border: rgba(0,0,0,0.08);
  --mys-doc-bar-sep: rgba(0,0,0,0.1);
  --mys-doc-gutter: #e9e9f2;
  --mys-doc-scroll-thumb: rgba(0,0,0,0.15);
  --mys-doc-scroll-thumb-hover: rgba(0,0,0,0.25);
  --mys-doc-page-bg: #ffffff;
  --mys-doc-page-text: #0f172a;
  --mys-doc-text-selection: rgba(20,115,230,0.2);
}


/* ── Top bar ── */
.mys-bar {
  flex-shrink: 0;
  height: 38px;
  background: var(--mys-doc-bar);
  border-bottom: 1px solid var(--mys-doc-bar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  gap: 8px;
  z-index: 2;
  margin-top: 10px;
}
.mys-bar-left {
  display: flex; align-items: center;
  gap: 8px; min-width: 0; flex: 1;
  overflow: hidden;
}
.mys-bar-name {
  font-size: 0.75rem; font-weight: 600;
  color: var(--mys-doc-bar-text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 220px;
}
.mys-bar-info {
  font-size: 0.68rem; color: var(--mys-doc-bar-text-muted);
  font-family: monospace; white-space: nowrap;
  flex-shrink: 0;
}
.mys-bar-right {
  display: flex; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.mys-bar-btn {
  width: 28px; height: 28px;
  background: none; border: none;
  color: var(--mys-doc-bar-btn); cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.mys-bar-btn:hover { color: var(--mys-doc-bar-btn-hover); background: var(--mys-doc-bar-btn-hover-bg); }
.mys-bar-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
#mysRemoveBtn:hover { color: #e74c3c; background: rgba(231,76,60,0.1); }
#mysFitBtn.is-active {
  color: var(--sr-primary, #818cf8);
  background: rgba(129,140,248,0.1);
}
#mysDownloadBtn:hover { color: var(--mys-doc-bar-btn-hover); }
.mys-zoom-label {
  font-size: 0.7rem; color: var(--mys-doc-bar-text-muted);
  font-family: monospace; min-width: 36px;
  text-align: center; user-select: none;
}
.mys-page-label {
  font-size: 0.72rem; color: var(--mys-doc-bar-text-muted);
  font-family: monospace; min-width: 36px;
  text-align: center; user-select: none; white-space: nowrap;
}
.mys-bar-sep {
  width: 1px; height: 18px;
  background: var(--mys-doc-bar-sep);
  margin: 0 4px;
}

/* ── THE SCROLL CONTAINER — this IS the iframe ── */
.mys-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: var(--mys-doc-gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--mys-doc-scroll-thumb) transparent;
}
.mys-scroll::-webkit-scrollbar { width: 7px; }
.mys-scroll::-webkit-scrollbar-track { background: transparent; }
.mys-scroll::-webkit-scrollbar-thumb {
  background: var(--mys-doc-scroll-thumb);
  border-radius: 4px;
}
.mys-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--mys-doc-scroll-thumb-hover);
}

/* ── Pages container ── */
.mys-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 32px;
  gap: 12px;
  min-height: 100%;
}

/* ── Each PDF page ── */
.mys-page {
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
  border-radius: 2px;
  background: #fff;
}
.mys-page canvas {
  display: block;
  border-radius: 2px;
}

/* PDF.js text layer — required for selectable text */
.mys-page .textLayer {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  border-radius: 2px;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.mys-page .textLayer span,
.mys-page .textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.mys-page .textLayer ::selection {
  background: var(--mys-doc-text-selection, rgba(130,140,255,0.35));
  color: transparent;
}

.mys-page .textLayer .highlight {
  background: rgba(255,220,0,0.25);
  border-radius: 2px;
}

/* ── Image viewer (for PNG/JPG uploads) ── */
.mys-image-page {
  max-width: 90%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
  border-radius: 4px;
}

/* ── Loading indicator per page ── */
.mys-page-loading {
  width: 800px;
  height: 560px;
  background: #1e1e22;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-size: 0.78rem;
  font-family: monospace;
}

/* ── Selection toolbar ── */
.mys-sel-toolbar {
  position: fixed;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #2a2a2e;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.15);
  pointer-events: auto;
}
.mys-sel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #c8c8cc;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mys-sel-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mys-sel-btn svg { display: block; }

.mys-sel-toast {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
  background: #2a2a2e;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.mys-sel-toast.show { opacity: 1; }

/* Hide EmbedPDF native selection floating toolbar (use its DOM position for ours) */
#embedpdf-container .border-border-subtle.bg-bg-elevated {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* AI processing overlay */
.mys-ai-status {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(10, 10, 16, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  padding: 24px;
}

.mys-ai-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.08);
  border-top-color: rgba(130,140,255,0.9);
  animation: mys-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes mys-spin { to { transform: rotate(360deg); } }

.mys-ai-text {
  font-size: 0.88rem;
  color: #dfe6ff;
  text-align: center;
  line-height: 1.5;
  max-width: 220px;
}

.mys-ai-action {
  margin-left: 0;
  background: rgba(130,140,255,0.1);
  border: 1px solid rgba(130,140,255,0.2);
  color: #9fb0ff;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  font-family: inherit;
}

.mys-ai-action:hover {
  background: rgba(130,140,255,0.18);
}

.mys-page canvas {
  display: block;
  border-radius: 2px;
  pointer-events: none;
  filter: none;
}

.mys-viewer-shell[data-doc-theme="dark"] .mys-page canvas {
  filter: invert(1) hue-rotate(180deg) saturate(0.9) brightness(0.95) contrast(1.05);
}

.mys-viewer-shell[data-doc-theme="light"] .mys-page canvas {
  filter: invert(0) hue-rotate(0deg) saturate(1) brightness(1) contrast(1);
}


/* Force textLayer to always fill the page regardless of PDF.js CSS variables */
.mys-page .textLayer {
  width: 100% !important;
  height: 100% !important;
}

/* ── LIGHT MODE OVERRIDES ──────────────────────────── */
[data-theme="light"] .mys-shell { background: var(--bg); }

[data-theme="light"] .mys-drop-zone {
  border-color: var(--border);
  background: var(--bg-card);
}
[data-theme="light"] .mys-drop-zone:hover,
[data-theme="light"] .mys-drop-zone.drag-over {
  border-color: var(--primary);
  background: var(--bg-hover);
}
[data-theme="light"] .mys-drop-icon {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--primary);
}
[data-theme="light"] .mys-drop-title { color: var(--text-primary); }
[data-theme="light"] .mys-drop-sub { color: var(--text-secondary); }
[data-theme="light"] .mys-drop-hint { color: var(--text-muted); font-family: monospace; }

[data-theme="light"] .mys-bar {
  background: var(--bg-card);
  border-bottom-color: var(--border);
}
[data-theme="light"] .mys-bar-name { color: var(--text-primary); }
[data-theme="light"] .mys-bar-info { color: var(--text-muted); }
[data-theme="light"] .mys-bar-btn { color: var(--text-muted); }
[data-theme="light"] .mys-bar-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
[data-theme="light"] #mysRemoveBtn:hover { color: #dc2626; background: rgba(220,38,38,0.08); }
[data-theme="light"] .mys-zoom-label { color: var(--text-muted); }
[data-theme="light"] .mys-page-label { color: var(--text-muted); }
[data-theme="light"] #mysFitBtn.is-active {
  color: var(--sr-primary, #5b4cdb);
  background: rgba(91,76,219,0.08);
}
[data-theme="light"] .mys-bar-sep { background: var(--border); }

[data-theme="light"] .mys-scroll {
  background: var(--bg-secondary);
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
[data-theme="light"] .mys-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] .mys-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

[data-theme="light"] .mys-page-loading {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

[data-theme="light"] .mys-sel-toolbar {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .mys-sel-btn { color: #666; }
[data-theme="light"] .mys-sel-btn:hover { background: rgba(0,0,0,0.06); color: #222; }
[data-theme="light"] .mys-sel-toast {
  background: #fff;
  color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

[data-theme="light"] .mys-page {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="light"] .mys-image-page {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme="light"] .mys-bar .mys-toggle-theme svg {
  stroke: var(--text-muted);
}

@media (max-width: 860px) {
  .mys-image-page {
    width: 100%;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
  }
  .mys-pages {
    padding: 8px 0 20px;
    gap: 8px;
  }
}

/* ── Triple-dot menu dropdown ── */
.mys-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.mys-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: #1e1e24;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  padding: 4px;
  min-width: 176px;
  display: none;
  flex-direction: column;
  gap: 1px;
  /* open via .is-open */
}
.mys-menu-dropdown.is-open {
  display: flex;
  animation: mys-menu-in 0.15s cubic-bezier(0.16,1,0.3,1);
}
@keyframes mys-menu-in {
  from { opacity:0; transform: translateY(-6px) scale(0.97); }
  to   { opacity:1; transform: translateY(0)  scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mys-menu-dropdown.is-open { animation: none; }
}
.mys-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 11px;
  background: none;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.mys-menu-item:hover,
.mys-menu-item:focus-visible {
  background: rgba(255,255,255,0.07);
  color: #eee;
  outline: none;
}
.mys-menu-item svg { flex-shrink: 0; }
.mys-menu-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 2px 8px;
}

/* Light mode overrides */
[data-theme="light"] .mys-menu-dropdown {
  background: #fff;
  border-color: var(--border, #e5e7eb);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.07);
}
[data-theme="light"] .mys-menu-item {
  color: var(--text-secondary, #555);
}
[data-theme="light"] .mys-menu-item:hover,
[data-theme="light"] .mys-menu-item:focus-visible {
  background: var(--bg-hover, rgba(0,0,0,0.04));
  color: var(--text-primary, #111);
}
[data-theme="light"] .mys-menu-divider {
  background: var(--border, #e5e7eb);
}

@media (max-width: 768px) {
  .mys-bar {
    display: none;
  }
  .mys-viewer-shell {
    padding: 0;
  }
  .mys-scroll {
    background: transparent;
  }
  .mys-page {
    box-shadow: none;
    border-radius: 0;
  }
  .mys-page canvas {
    border-radius: 0;
  }
  .mys-page .textLayer {
    border-radius: 0;
  }
  .mys-image-page {
    max-width: 100%;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
  }
  /* Bump tap targets to the ~44px minimum for touch (desktop's 32px is
     mouse-precision-sized, too small to reliably tap). */
  .mys-sel-btn {
    width: 44px;
    height: 44px;
  }
}

/* ── EmbedPDF bare viewer — blends with page ── */
.mys-pdf-host {
  background: var(--bg-page);
  border: none;
  outline: none;
  box-shadow: none;
}

#embedpdf-container {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Hide EmbedPDF's internal virtual-scroll scrollbar */
#embedpdf-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#embedpdf-container ::-webkit-scrollbar {
  display: none;
}
/* EmbedPDF's viewport div uses class bg-bg-app  */
#embedpdf-container [class*="bg-bg-app"] {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* EmbedPDF text selection highlight */
#embedpdf-container ::selection {
  background: rgba(20,115,230,0.2);
}

/* Hide any remaining EmbedPDF chrome that stripEmbedPDFChrome misses */
#embedpdf-container [data-epdf-i="main-toolbar"],
#embedpdf-container [data-epdf-i="status-bar"],
#embedpdf-container [data-epdf-i="panel"],
#embedpdf-container [data-epdf-i="copy-selection"] {
  display: none !important;
}

/* revert the old PDF.js text-layer selection — no longer used */
.mys-page .textLayer ::selection {
  background: transparent;
}