npm - nodebb-plugin-pdf-secure - Versions diffs - 1.2.6 → 1.2.8 - Mend

nodebb-plugin-pdf-secure 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/static/viewer.html CHANGED Viewed

@@ -3,1050 +3,18 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>PDF Viewer</title>
     <!-- PDF.js -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf_viewer.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf_viewer.min.js"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf_viewer.min.js"></script>
-    <style>
-        /* Microsoft Edge / Dark Theme */
-        :root {
-            --bg-primary: #1f1f1f;
-            --bg-secondary: #2d2d2d;
-            --bg-tertiary: #3d3d3d;
-            --text-primary: #ffffff;
-            --text-secondary: #a0a0a0;
-            --accent: #0078d4;
-            --accent-hover: #1a86d9;
-            --border-color: #404040;
-            --toolbar-height: 48px;
-            --sidebar-width: 200px;
-        }
+    <!-- Viewer styles -->
+    <link rel="stylesheet" href="viewer.css">
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        html,
-        body {
-            height: 100%;
-            background: var(--bg-primary);
-            font-family: "Segoe UI", system-ui, sans-serif;
-            font-size: 14px;
-            overflow: hidden;
-            color: var(--text-primary);
-            /* Security: prevent text selection globally */
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        /* Print Protection - hide everything when printing */
-        @media print {
-            html,
-            body,
-            #viewerContainer,
-            #viewer,
-            .pdfViewer,
-            .page {
-                display: none !important;
-                visibility: hidden !important;
-            }
-            body::before {
-                content: 'Bu içeriğin yazdırılması engellenmiştir.' !important;
-                display: block !important;
-                font-size: 24px;
-                padding: 50px;
-                text-align: center;
-                color: #666;
-            }
-        }
-        /* Loading Spinner Animation */
-        @keyframes spin {
-            from {
-                transform: rotate(0deg);
-            }
-            to {
-                transform: rotate(360deg);
-            }
-        }
-        .spin {
-            animation: spin 1s linear infinite;
-        }
-        .dropzone svg.spin {
-            fill: var(--accent);
-        }
-        /* Toolbar - Edge Style */
-        #toolbar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: var(--toolbar-height);
-            background: var(--bg-secondary);
-            border-bottom: 1px solid var(--border-color);
-            display: flex;
-            align-items: center;
-            padding: 0 12px;
-            gap: 4px;
-            z-index: 100;
-        }
-        .toolbarGroup {
-            display: flex;
-            align-items: center;
-            gap: 2px;
-        }
-        .toolbarBtn {
-            width: 36px;
-            height: 36px;
-            border: none;
-            background: transparent;
-            color: var(--text-primary);
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.1s;
-        }
-        .toolbarBtn:hover {
-            background: var(--bg-tertiary);
-        }
-        .toolbarBtn.active {
-            background: var(--accent);
-        }
-        .toolbarBtn svg {
-            width: 18px;
-            height: 18px;
-            fill: currentColor;
-        }
-        .separator {
-            width: 1px;
-            height: 24px;
-            background: var(--border-color);
-            margin: 0 8px;
-        }
-        /* Enhanced Tooltips */
-        .toolbarBtn {
-            position: relative;
-        }
-        .toolbarBtn::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #1a1a1a;
-            color: #fff;
-            padding: 6px 10px;
-            border-radius: 6px;
-            font-size: 12px;
-            white-space: nowrap;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.2s, visibility 0.2s;
-            z-index: 1000;
-            margin-top: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-            pointer-events: none;
-        }
-        .toolbarBtn::before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border: 6px solid transparent;
-            border-bottom-color: #1a1a1a;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.2s, visibility 0.2s;
-            z-index: 1001;
-            margin-top: -4px;
-        }
-        .toolbarBtn:hover::after,
-        .toolbarBtn:hover::before {
-            opacity: 1;
-            visibility: visible;
-        }
-        .toolbarBtn .shortcut {
-            display: inline;
-            opacity: 0.6;
-            margin-left: 8px;
-            padding: 2px 5px;
-            background: rgba(255, 255, 255, 0.15);
-            border-radius: 3px;
-            font-size: 10px;
-        }
-        /* Context Menu */
-        .contextMenu {
-            position: fixed;
-            background: #2d2d2d;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 6px 0;
-            min-width: 180px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            z-index: 2000;
-            display: none;
-        }
-        .contextMenu.visible {
-            display: block;
-        }
-        .contextMenuItem {
-            padding: 10px 16px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            color: var(--text-primary);
-            font-size: 13px;
-            transition: background 0.1s;
-        }
-        .contextMenuItem:hover {
-            background: var(--bg-tertiary);
-        }
-        .contextMenuItem svg {
-            width: 16px;
-            height: 16px;
-            fill: currentColor;
-            opacity: 0.8;
-        }
-        .contextMenuItem .shortcutHint {
-            margin-left: auto;
-            opacity: 0.5;
-            font-size: 11px;
-        }
-        .contextMenuDivider {
-            height: 1px;
-            background: var(--border-color);
-            margin: 6px 0;
-        }
-        /* Tool Dropdown Panel - Microsoft Edge Style */
-        .toolDropdown {
-            position: absolute;
-            top: calc(var(--toolbar-height) + 4px);
-            background: #2d2d2d;
-            border-radius: 8px;
-            padding: 16px;
-            min-width: 240px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-            display: none;
-            z-index: 200;
-        }
-        .toolDropdown.visible {
-            display: block;
-        }
-        .dropdownSection {
-            margin-bottom: 16px;
-        }
-        .dropdownSection:last-child {
-            margin-bottom: 0;
-        }
-        .dropdownLabel {
-            font-size: 13px;
-            font-weight: 600;
-            color: var(--text-primary);
-            margin-bottom: 12px;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        }
-        .dropdownLabel svg {
-            width: 14px;
-            height: 14px;
-            fill: var(--text-secondary);
-        }
-        /* Color Grid */
-        .colorGrid {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 8px;
-        }
-        .colorDot {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            border: 2px solid transparent;
-            cursor: pointer;
-            transition: transform 0.1s, border-color 0.1s;
-        }
-        .colorDot:hover {
-            transform: scale(1.1);
-        }
-        .colorDot.active {
-            border-color: var(--text-primary);
-        }
-        /* Stroke Preview Wave */
-        .strokePreview {
-            height: 50px;
-            background: #1f1f1f;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 16px;
-            overflow: hidden;
-        }
-        .strokePreview svg {
-            width: 100%;
-            height: 100%;
-        }
-        /* Thickness Slider */
-        .thicknessSlider {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .thicknessSlider input[type="range"] {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 100%;
-            height: 4px;
-            background: #555;
-            border-radius: 2px;
-            outline: none;
-        }
-        .thicknessSlider input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            background: #fff;
-            border-radius: 50%;
-            cursor: pointer;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-        }
-        .thicknessSlider input[type="range"]::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            background: #fff;
-            border-radius: 50%;
-            cursor: pointer;
-            border: none;
-        }
-        .thicknessLabels {
-            display: flex;
-            justify-content: space-between;
-            font-size: 12px;
-            color: var(--text-secondary);
-        }
-        /* Tool button with dropdown arrow */
-        .toolbarBtnWithDropdown {
-            position: relative;
-            display: flex;
-            align-items: center;
-        }
-        .toolbarBtnWithDropdown .toolbarBtn {
-            border-radius: 4px 0 0 4px;
-        }
-        .dropdownArrow {
-            width: 20px;
-            height: 36px;
-            border: none;
-            background: transparent;
-            color: var(--text-primary);
-            border-radius: 0 4px 4px 0;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .dropdownArrow:hover {
-            background: var(--bg-tertiary);
-        }
-        .toolbarBtnWithDropdown.active .toolbarBtn,
-        .toolbarBtnWithDropdown.active .dropdownArrow {
-            background: var(--accent);
-        }
-        .dropdownArrow svg {
-            width: 12px;
-            height: 12px;
-            fill: currentColor;
-        }
-        /* Shape Grid */
-        .shapeGrid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 8px;
-        }
-        .shapeBtn {
-            width: 48px;
-            height: 48px;
-            background: #1f1f1f;
-            border: 2px solid transparent;
-            border-radius: 8px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-primary);
-            transition: border-color 0.1s, background 0.1s;
-        }
-        .shapeBtn:hover {
-            background: #3d3d3d;
-        }
-        .shapeBtn.active {
-            border-color: var(--accent);
-            background: #3d3d3d;
-        }
-        .shapeBtn svg {
-            width: 28px;
-            height: 28px;
-        }
-        /* Page Info */
-        .pageInfo {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-left: auto;
-        }
-        #pageInput {
-            width: 40px;
-            height: 28px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            text-align: center;
-            font-size: 13px;
-        }
-        #pageCount {
-            color: var(--text-secondary);
-            font-size: 13px;
-        }
-        /* Sidebar - Thumbnails */
-        #sidebar {
-            position: fixed;
-            top: var(--toolbar-height);
-            left: 0;
-            bottom: 0;
-            width: var(--sidebar-width);
-            background: var(--bg-secondary);
-            border-right: 1px solid var(--border-color);
-            overflow-y: auto;
-            display: none;
-            z-index: 50;
-        }
-        #sidebar.open {
-            display: block;
-        }
-        .sidebarHeader {
-            padding: 12px 16px;
-            font-size: 13px;
-            font-weight: 600;
-            border-bottom: 1px solid var(--border-color);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .closeBtn {
-            background: none;
-            border: none;
-            color: var(--text-primary);
-            cursor: pointer;
-            font-size: 18px;
-        }
-        #thumbnailContainer {
-            padding: 12px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        .thumbnail {
-            background: var(--bg-tertiary);
-            border: 2px solid transparent;
-            border-radius: 4px;
-            cursor: pointer;
-            padding: 4px;
-            transition: border-color 0.15s;
-        }
-        .thumbnail:hover {
-            border-color: var(--accent);
-        }
-        .thumbnail.active {
-            border-color: var(--accent);
-        }
-        .thumbnail canvas {
-            width: 100%;
-            display: block;
-        }
-        .thumbnailNum {
-            text-align: center;
-            font-size: 11px;
-            color: var(--text-secondary);
-            margin-top: 4px;
-        }
-        /* Viewer Container */
-        #viewerContainer {
-            position: fixed;
-            top: var(--toolbar-height);
-            left: 0;
-            right: 0;
-            bottom: 0;
-            overflow: auto;
-            background: #525659;
-        }
-        #viewerContainer.withSidebar {
-            left: var(--sidebar-width);
-        }
-        .pdfViewer .page {
-            margin: 8px auto;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-            position: relative;
-            transition: filter 0.3s ease;
-        }
-        /* Sepia Reading Mode */
-        .pdfViewer.sepia .page canvas {
-            filter: sepia(40%) brightness(0.95) contrast(0.9);
-        }
-        .pdfViewer.sepia .page {
-            background: #f4ecd8 !important;
-        }
-        #viewerContainer.sepia {
-            background: #d4c9a8;
-        }
-        /* Annotation Layer */
-        .annotationLayer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            pointer-events: none;
-            z-index: 10;
-        }
-        .annotationLayer.active {
-            pointer-events: auto;
-            cursor: crosshair;
-        }
-        .annotationLayer path {
-            fill: none;
-            stroke-linecap: round;
-            stroke-linejoin: round;
-        }
-        /* Select tool cursor */
-        .annotationLayer.select-mode {
-            cursor: default;
-        }
-        .annotationLayer.select-mode path,
-        .annotationLayer.select-mode rect,
-        .annotationLayer.select-mode ellipse,
-        .annotationLayer.select-mode line,
-        .annotationLayer.select-mode text {
-            cursor: grab;
-            pointer-events: all;
-            transition: transform 0.1s ease, opacity 0.1s ease;
-        }
-        /* Invisible hit area for easier selection */
-        .annotationLayer.select-mode path,
-        .annotationLayer.select-mode line {
-            stroke-linecap: round;
-        }
-        .annotationLayer.select-mode path:hover,
-        .annotationLayer.select-mode rect:hover,
-        .annotationLayer.select-mode ellipse:hover,
-        .annotationLayer.select-mode line:hover,
-        .annotationLayer.select-mode text:hover {
-            opacity: 0.8;
-            cursor: grab;
-        }
-        /* Selected annotation element - use filter for SVG compatibility */
-        .annotation-selected {
-            filter: drop-shadow(0 0 4px #0078d4) drop-shadow(0 0 8px rgba(0, 120, 212, 0.6)) !important;
-            opacity: 1 !important;
-        }
-        /* Touch feedback */
-        .annotation-dragging {
-            opacity: 0.6;
-            cursor: grabbing !important;
-            filter: drop-shadow(0 4px 12px rgba(0, 120, 212, 0.5));
-        }
-        /* Tablet/Touch optimizations for select mode */
-        @media (pointer: coarse),
-        (max-width: 1024px) {
-            .annotationLayer.select-mode path,
-            .annotationLayer.select-mode rect,
-            .annotationLayer.select-mode ellipse,
-            .annotationLayer.select-mode line,
-            .annotationLayer.select-mode text {
-                /* Ensure touch-friendly interaction */
-                cursor: pointer;
-            }
-            /* Bigger toolbar buttons for touch */
-            .toolbarBtn {
-                width: 44px;
-                height: 44px;
-                min-width: 44px;
-            }
-        }
-        /* Touch selection ring animation */
-        @keyframes selectionPulse {
-            0% {
-                outline-color: rgba(0, 120, 212, 1);
-            }
-            50% {
-                outline-color: rgba(0, 120, 212, 0.5);
-            }
-            100% {
-                outline-color: rgba(0, 120, 212, 1);
-            }
-        }
-        .annotation-selected.just-selected {
-            animation: selectionPulse 0.6s ease-out;
-        }
-        /* Move handle for touch devices */
-        .annotation-move-handle {
-            position: absolute;
-            width: 36px;
-            height: 36px;
-            background: rgba(0, 120, 212, 0.9);
-            border-radius: 50%;
-            display: none;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-            cursor: grab;
-            z-index: 100;
-            touch-action: none;
-        }
-        .annotation-move-handle svg {
-            width: 20px;
-            height: 20px;
-            fill: white;
-        }
-        @media (pointer: coarse) {
-            .annotation-move-handle {
-                display: flex;
-            }
-        }
-        /* Ghost element while dragging */
-        .annotation-ghost {
-            opacity: 0.3;
-            pointer-events: none;
-        }
-        /* Selection toolbar for touch - action buttons */
-        .selection-toolbar {
-            position: fixed;
-            bottom: 24px;
-            left: 50%;
-            transform: translateX(-50%) translateY(100px);
-            background: linear-gradient(135deg, #363636 0%, #2d2d2d 100%);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            padding: 12px 16px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
-            z-index: 2000;
-            opacity: 0;
-            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
-            pointer-events: none;
-        }
-        .selection-toolbar.visible {
-            transform: translateX(-50%) translateY(0);
-            opacity: 1;
-            pointer-events: auto;
-        }
-        .selection-toolbar::before {
-            content: 'Seçili Öğe';
-            position: absolute;
-            top: -28px;
-            left: 50%;
-            transform: translateX(-50%);
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.6);
-            white-space: nowrap;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        .selection-toolbar button {
-            width: 52px;
-            height: 52px;
-            border: none;
-            background: rgba(255, 255, 255, 0.08);
-            color: white;
-            border-radius: 12px;
-            cursor: pointer;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            transition: all 0.15s ease;
-            position: relative;
-        }
-        .selection-toolbar button:hover {
-            background: rgba(255, 255, 255, 0.15);
-            transform: translateY(-2px);
-        }
-        .selection-toolbar button:active {
-            transform: translateY(0);
-            background: rgba(255, 255, 255, 0.2);
-        }
-        .selection-toolbar button.delete {
-            background: rgba(196, 43, 28, 0.8);
-        }
-        .selection-toolbar button.delete:hover {
-            background: #e03e2f;
-            transform: translateY(-2px);
-        }
-        .selection-toolbar button svg {
-            width: 22px;
-            height: 22px;
-            fill: currentColor;
-        }
-        .selection-toolbar button span {
-            font-size: 9px;
-            opacity: 0.8;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-        /* Toast notification for copy/paste */
-        .toast-notification {
-            position: fixed;
-            bottom: 80px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #323232;
-            color: white;
-            padding: 12px 24px;
-            border-radius: 8px;
-            font-size: 14px;
-            z-index: 3000;
-            animation: toastIn 0.3s ease, toastOut 0.3s ease 1.7s forwards;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-        }
-        @keyframes toastIn {
-            from {
-                opacity: 0;
-                transform: translateX(-50%) translateY(20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(-50%) translateY(0);
-            }
-        }
-        @keyframes toastOut {
-            from {
-                opacity: 1;
-                transform: translateX(-50%) translateY(0);
-            }
-            to {
-                opacity: 0;
-                transform: translateX(-50%) translateY(-20px);
-            }
-        }
-        /* Text Selection Highlight */
-        .textHighlight {
-            position: absolute;
-            pointer-events: none;
-            border-radius: 2px;
-        }
-        /* Selection Popup Button */
-        .highlightPopup {
-            position: absolute;
-            background: var(--bg-secondary);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 6px;
-            display: flex;
-            gap: 4px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-            z-index: 500;
-        }
-        .highlightPopup button {
-            width: 28px;
-            height: 28px;
-            border: none;
-            border-radius: 50%;
-            cursor: pointer;
-            transition: transform 0.1s;
-        }
-        .highlightPopup button:hover {
-            transform: scale(1.15);
-        }
-        /* Upload Overlay */
-        #uploadOverlay {
-            position: fixed;
-            top: var(--toolbar-height);
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: var(--bg-primary);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 40;
-        }
-        .dropzone {
-            width: 400px;
-            padding: 60px 40px;
-            background: var(--bg-secondary);
-            border: 2px dashed var(--border-color);
-            border-radius: 12px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .dropzone:hover {
-            border-color: var(--accent);
-            background: var(--bg-tertiary);
-        }
-        .dropzone svg {
-            width: 64px;
-            height: 64px;
-            fill: var(--text-secondary);
-            margin-bottom: 16px;
-        }
-        .dropzone h2 {
-            font-size: 18px;
-            font-weight: 500;
-            margin-bottom: 8px;
-        }
-        .dropzone p {
-            color: var(--text-secondary);
-            font-size: 13px;
-        }
-        /* Inline Text Editor */
-        .textEditorOverlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            z-index: 1000;
-        }
-        .textEditorBox {
-            position: absolute;
-            background: white;
-            border: 2px solid var(--accent);
-            border-radius: 4px;
-            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-            min-width: 200px;
-            max-width: 400px;
-        }
-        .textEditorInput {
-            padding: 12px 16px;
-            font-size: 14px;
-            font-family: 'Segoe UI', system-ui, sans-serif;
-            color: #333;
-            outline: none;
-            min-height: 40px;
-            word-wrap: break-word;
-        }
-        .textEditorInput:empty:before {
-            content: 'Buraya yazmaya başla...';
-            color: #999;
-        }
-        .textEditorToolbar {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-            padding: 8px 12px;
-            border-top: 1px solid #e0e0e0;
-            background: #f5f5f5;
-        }
-        .textEditorBtn {
-            width: 28px;
-            height: 28px;
-            border: none;
-            background: transparent;
-            border-radius: 4px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #333;
-            font-size: 12px;
-            font-weight: 600;
-        }
-        .textEditorBtn:hover {
-            background: #e0e0e0;
-        }
-        .textEditorBtn.delete {
-            color: #d32f2f;
-            margin-left: auto;
-        }
-        .textEditorColorDot {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            border: 2px solid transparent;
-            cursor: pointer;
-        }
-        .textEditorColorDot.active {
-            border-color: var(--accent);
-        }
-        /* Draggable text annotations */
-        .annotationLayer svg text {
-            cursor: move;
-            user-select: none;
-        }
-        .annotationLayer svg text.dragging {
-            opacity: 0.7;
-        }
-        .hidden {
-            display: none !important;
-        }
-        /* Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: var(--bg-secondary);
-        }
-        ::-webkit-scrollbar-thumb {
-            background: var(--bg-tertiary);
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-    </style>
 </head>
 <body>
@@ -1183,6 +151,30 @@
                     <path d="M7 2l12 11.2-5.8.5 3.3 7.3-2.2 1-3.2-7.4L7 18.5V2z" />
                 </svg>
             </button>
+            <div class="separator"></div>
+            <!-- Undo / Redo / Clear All -->
+            <button class="toolbarBtn" id="undoBtn" data-tooltip="Geri Al (Ctrl+Z)" disabled>
+                <svg viewBox="0 0 24 24">
+                    <path
+                        d="M12.5 8c-2.65 0-5.05 1.04-6.83 2.73L2.5 7.5v9h9l-3.19-3.19c1.29-1.25 3.04-2.02 5-2.02 3.24 0 5.97 2.13 6.89 5.07l2.36-.78C21.19 11.79 17.22 8 12.5 8z" />
+                </svg>
+            </button>
+            <button class="toolbarBtn" id="redoBtn" data-tooltip="Yinele (Ctrl+Y)" disabled>
+                <svg viewBox="0 0 24 24">
+                    <path
+                        d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13.5 16.5h9v-9l-4.1 3.1z" />
+                </svg>
+            </button>
+            <button class="toolbarBtn" id="clearAllBtn" data-tooltip="Tümünü Temizle">
+                <svg viewBox="0 0 24 24">
+                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+                </svg>
+            </button>
+            <div class="separator"></div>
             <button class="toolbarBtn" id="textBtn" data-tooltip="Metin Ekle (T)">
                 <svg viewBox="0 0 24 24">
                     <path d="M5 4v3h5.5v12h3V7H19V4H5z" />
@@ -1295,6 +287,42 @@
                         d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
                 </svg>
             </button>
+            <div class="separator"></div>
+            <!-- Fullscreen Toggle -->
+            <button class="toolbarBtn" id="fullscreenBtn" data-tooltip="Tam Ekran (F)">
+                <svg viewBox="0 0 24 24" id="fullscreenIcon">
+                    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+                </svg>
+            </button>
+            <div class="separator overflowSep"></div>
+            <div class="toolbarBtnWithDropdown" id="overflowWrapper">
+                <button class="toolbarBtn" id="overflowBtn" title="Daha Fazla">
+                    <svg viewBox="0 0 24 24">
+                        <circle cx="12" cy="5" r="2"/>
+                        <circle cx="12" cy="12" r="2"/>
+                        <circle cx="12" cy="19" r="2"/>
+                    </svg>
+                </button>
+                <div class="toolDropdown" id="overflowDropdown">
+                    <button class="overflowItem" id="overflowRotateLeft">
+                        <svg viewBox="0 0 24 24"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>
+                        <span>Sola Döndür</span>
+                    </button>
+                    <button class="overflowItem" id="overflowRotateRight">
+                        <svg viewBox="0 0 24 24"><path d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/></svg>
+                        <span>Sağa Döndür</span>
+                    </button>
+                    <div class="overflowDivider"></div>
+                    <button class="overflowItem" id="overflowSepia">
+                        <svg viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
+                        <span>Okuma Modu</span>
+                    </button>
+                </div>
+            </div>
         </div>
         <div class="pageInfo">
@@ -1303,6 +331,16 @@
         </div>
     </div>
+    <!-- Bottom Toolbar (Mobile Only) -->
+    <div id="bottomToolbar">
+        <div class="bottomToolbarInner" id="bottomToolbarInner">
+            <!-- Annotation tool buttons will be moved here on mobile via JS -->
+        </div>
+    </div>
+    <!-- Dropdown Backdrop (Mobile) -->
+    <div id="dropdownBackdrop"></div>
     <!-- Sidebar - Thumbnails -->
     <div id="sidebar">
         <div class="sidebarHeader">
@@ -1329,1962 +367,7 @@
         <div id="viewer" class="pdfViewer"></div>
     </div>
-    <script>
-        // IIFE to prevent global access to pdfDoc, pdfViewer
-        (function () {
-            'use strict';
-            // ============================================
-            // CANVAS EXPORT PROTECTION
-            // Block toDataURL/toBlob for PDF render canvas only
-            // Allows: thumbnails, annotations, other canvases
-            // ============================================
-            const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;
-            const originalToBlob = HTMLCanvasElement.prototype.toBlob;
-            HTMLCanvasElement.prototype.toDataURL = function () {
-                // Block only main PDF page canvases (inside .page elements in #viewerContainer)
-                if (this.closest && this.closest('.page') && this.closest('#viewerContainer')) {
-                    console.warn('[Security] Canvas toDataURL blocked for PDF page');
-                    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';  // 1x1 transparent
-                }
-                return originalToDataURL.apply(this, arguments);
-            };
-            HTMLCanvasElement.prototype.toBlob = function (callback) {
-                // Block only main PDF page canvases
-                if (this.closest && this.closest('.page') && this.closest('#viewerContainer')) {
-                    console.warn('[Security] Canvas toBlob blocked for PDF page');
-                    // Return empty blob
-                    if (callback) callback(new Blob([], { type: 'image/png' }));
-                    return;
-                }
-                return originalToBlob.apply(this, arguments);
-            };
-            pdfjsLib.GlobalWorkerOptions.workerSrc = '';
-            // State - now private, not accessible from console
-            let pdfDoc = null;
-            let pdfViewer = null;
-            let annotationMode = false;
-            let currentTool = null; // null, 'pen', 'highlight', 'eraser'
-            let currentColor = '#e81224';
-            let currentWidth = 2;
-            let isDrawing = false;
-            let currentPath = null;
-            let currentDrawingPage = null;
-            // Annotation persistence - stores SVG innerHTML per page
-            const annotationsStore = new Map();
-            // Store base dimensions (scale=1.0) for each page - ensures consistent coordinates
-            const pageBaseDimensions = new Map();
-            // Current SVG reference for drawing
-            let currentSvg = null;
-            // Elements
-            const container = document.getElementById('viewerContainer');
-            const uploadOverlay = document.getElementById('uploadOverlay');
-            const fileInput = document.getElementById('fileInput');
-            const sidebar = document.getElementById('sidebar');
-            const thumbnailContainer = document.getElementById('thumbnailContainer');
-            // Initialize PDFViewer
-            const eventBus = new pdfjsViewer.EventBus();
-            const linkService = new pdfjsViewer.PDFLinkService({ eventBus });
-            pdfViewer = new pdfjsViewer.PDFViewer({
-                container: container,
-                eventBus: eventBus,
-                linkService: linkService,
-                removePageBorders: true,
-                textLayerMode: 2
-            });
-            linkService.setViewer(pdfViewer);
-            // Track first page render for queue system
-            let firstPageRendered = false;
-            eventBus.on('pagerendered', function (evt) {
-                if (!firstPageRendered && evt.pageNumber === 1) {
-                    firstPageRendered = true;
-                    // Notify parent that PDF is fully rendered (for queue system)
-                    if (window.parent && window.parent !== window) {
-                        const config = window.PDF_SECURE_CONFIG || {};
-                        window.parent.postMessage({ type: 'pdf-secure-ready', filename: config.filename }, '*');
-                        console.log('[PDF-Secure] First page rendered, notifying parent');
-                    }
-                }
-            });
-            // File Handling
-            document.getElementById('dropzone').onclick = () => fileInput.click();
-            fileInput.onchange = async (e) => {
-                const file = e.target.files[0];
-                if (file) await loadPDF(file);
-            };
-            uploadOverlay.ondragover = (e) => e.preventDefault();
-            uploadOverlay.ondrop = async (e) => {
-                e.preventDefault();
-                const file = e.dataTransfer.files[0];
-                if (file?.type === 'application/pdf') await loadPDF(file);
-            };
-            async function loadPDF(file) {
-                uploadOverlay.classList.add('hidden');
-                const data = await file.arrayBuffer();
-                pdfDoc = await pdfjsLib.getDocument({ data }).promise;
-                pdfViewer.setDocument(pdfDoc);
-                linkService.setDocument(pdfDoc);
-                ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
-                    document.getElementById(id).disabled = false;
-                });
-                // Thumbnails will be generated on-demand when sidebar opens
-            }
-            // Load PDF from ArrayBuffer (for secure nonce-based loading)
-            async function loadPDFFromBuffer(arrayBuffer) {
-                uploadOverlay.classList.add('hidden');
-                pdfDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-                pdfViewer.setDocument(pdfDoc);
-                linkService.setDocument(pdfDoc);
-                ['zoomIn', 'zoomOut', 'pageInput', 'rotateLeft', 'rotateRight'].forEach(id => {
-                    document.getElementById(id).disabled = false;
-                });
-                // Thumbnails will be generated on-demand when sidebar opens
-            }
-            // Partial XOR decoder - must match backend encoding
-            function partialXorDecode(encodedData, keyBase64) {
-                const key = Uint8Array.from(atob(keyBase64), c => c.charCodeAt(0));
-                const data = new Uint8Array(encodedData);
-                const keyLen = key.length;
-                // Decrypt first 10KB fully
-                const fullDecryptLen = Math.min(10240, data.length);
-                for (let i = 0; i < fullDecryptLen; i++) {
-                    data[i] = data[i] ^ key[i % keyLen];
-                }
-                // Decrypt every 50th byte after that
-                for (let i = fullDecryptLen; i < data.length; i += 50) {
-                    data[i] = data[i] ^ key[i % keyLen];
-                }
-                return data.buffer;
-            }
-            // Auto-load PDF if config is present (injected by NodeBB plugin)
-            async function autoLoadSecurePDF() {
-                if (!window.PDF_SECURE_CONFIG || !window.PDF_SECURE_CONFIG.filename) {
-                    console.log('[PDF-Secure] No config found, showing file picker');
-                    return;
-                }
-                const config = window.PDF_SECURE_CONFIG;
-                console.log('[PDF-Secure] Auto-loading:', config.filename);
-                // Show loading state
-                const dropzone = document.getElementById('dropzone');
-                if (dropzone) {
-                    dropzone.innerHTML = `
-                    <svg viewBox="0 0 24 24" class="spin">
-                        <path d="M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z" />
-                    </svg>
-                    <h2>PDF Yükleniyor...</h2>
-                    <p>${config.filename}</p>
-                `;
-                }
-                try {
-                    // Nonce and key are embedded in HTML config (not fetched from API)
-                    // This improves security - key is ONLY in HTML source, not in any network response
-                    const nonce = config.nonce;
-                    const xorKey = config.dk;
-                    // Fetch encrypted PDF binary
-                    const pdfUrl = config.relativePath + '/api/v3/plugins/pdf-secure/pdf-data?nonce=' + encodeURIComponent(nonce);
-                    const pdfRes = await fetch(pdfUrl, { credentials: 'same-origin' });
-                    if (!pdfRes.ok) {
-                        throw new Error('PDF yüklenemedi (' + pdfRes.status + ')');
-                    }
-                    const encodedBuffer = await pdfRes.arrayBuffer();
-                    console.log('[PDF-Secure] Encrypted data received:', encodedBuffer.byteLength, 'bytes');
-                    // Step 3: Decode XOR encrypted data
-                    let pdfBuffer;
-                    if (xorKey) {
-                        console.log('[PDF-Secure] Decoding XOR encrypted data...');
-                        pdfBuffer = partialXorDecode(encodedBuffer, xorKey);
-                    } else {
-                        // Fallback for backward compatibility
-                        pdfBuffer = encodedBuffer;
-                    }
-                    console.log('[PDF-Secure] PDF decoded successfully');
-                    // Step 4: Load into viewer
-                    await loadPDFFromBuffer(pdfBuffer);
-                    // Step 5: Moved to pagerendered event for proper timing
-                    // Step 6: Security - clear references to prevent extraction
-                    pdfBuffer = null;
-                    // Security: Delete config containing sensitive data (nonce, key)
-                    delete window.PDF_SECURE_CONFIG;
-                    // Security: Remove PDF.js globals to prevent console manipulation
-                    delete window.pdfjsLib;
-                    delete window.pdfjsViewer;
-                    // Security: Block dangerous PDF.js methods
-                    if (pdfDoc) {
-                        pdfDoc.getData = function () {
-                            console.warn('[Security] getData() is blocked');
-                            return Promise.reject(new Error('Access denied'));
-                        };
-                        pdfDoc.saveDocument = function () {
-                            console.warn('[Security] saveDocument() is blocked');
-                            return Promise.reject(new Error('Access denied'));
-                        };
-                    }
-                    console.log('[PDF-Secure] PDF fully loaded and ready');
-                } catch (err) {
-                    console.error('[PDF-Secure] Auto-load error:', err);
-                    if (dropzone) {
-                        dropzone.innerHTML = `
-                        <svg viewBox="0 0 24 24" style="fill: #e81224;">
-                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                        </svg>
-                        <h2>Hata</h2>
-                        <p>${err.message}</p>
-                    `;
-                    }
-                }
-            }
-            // Run auto-load on page ready
-            autoLoadSecurePDF();
-            // Generate Thumbnails (deferred - only when sidebar opens)
-            let thumbnailsGenerated = false;
-            async function generateThumbnails() {
-                if (thumbnailsGenerated) return;
-                thumbnailsGenerated = true;
-                thumbnailContainer.innerHTML = '';
-                for (let i = 1; i <= pdfDoc.numPages; i++) {
-                    const page = await pdfDoc.getPage(i);
-                    const viewport = page.getViewport({ scale: 0.2 });
-                    const canvas = document.createElement('canvas');
-                    canvas.width = viewport.width;
-                    canvas.height = viewport.height;
-                    await page.render({
-                        canvasContext: canvas.getContext('2d'),
-                        viewport: viewport
-                    }).promise;
-                    const thumb = document.createElement('div');
-                    thumb.className = 'thumbnail' + (i === 1 ? ' active' : '');
-                    thumb.dataset.page = i;
-                    thumb.innerHTML = `<div class="thumbnailNum">${i}</div>`;
-                    thumb.insertBefore(canvas, thumb.firstChild);
-                    thumb.onclick = () => {
-                        pdfViewer.currentPageNumber = i;
-                        document.querySelectorAll('.thumbnail').forEach(t => t.classList.remove('active'));
-                        thumb.classList.add('active');
-                    };
-                    thumbnailContainer.appendChild(thumb);
-                }
-            }
-            // Events
-            eventBus.on('pagesinit', () => {
-                pdfViewer.currentScaleValue = 'page-width';
-                document.getElementById('pageCount').textContent = `/ ${pdfViewer.pagesCount}`;
-            });
-            eventBus.on('pagechanging', (evt) => {
-                document.getElementById('pageInput').value = evt.pageNumber;
-                // Update active thumbnail
-                document.querySelectorAll('.thumbnail').forEach(t => {
-                    t.classList.toggle('active', parseInt(t.dataset.page) === evt.pageNumber);
-                });
-            });
-            eventBus.on('pagerendered', (evt) => {
-                if (annotationMode) injectAnnotationLayer(evt.pageNumber);
-            });
-            // Page Navigation
-            document.getElementById('pageInput').onchange = (e) => {
-                const num = parseInt(e.target.value);
-                if (num >= 1 && num <= pdfViewer.pagesCount) {
-                    pdfViewer.currentPageNumber = num;
-                }
-            };
-            // Zoom
-            document.getElementById('zoomIn').onclick = () => pdfViewer.currentScale += 0.25;
-            document.getElementById('zoomOut').onclick = () => pdfViewer.currentScale -= 0.25;
-            // Sidebar toggle (deferred thumbnail generation)
-            const sidebarEl = document.getElementById('sidebar');
-            const sidebarBtnEl = document.getElementById('sidebarBtn');
-            const closeSidebarBtn = document.getElementById('closeSidebar');
-            sidebarBtnEl.onclick = () => {
-                const isOpening = !sidebarEl.classList.contains('open');
-                sidebarEl.classList.toggle('open');
-                sidebarBtnEl.classList.toggle('active');
-                // Generate thumbnails on first open (deferred loading)
-                if (isOpening && pdfDoc) {
-                    generateThumbnails();
-                }
-            };
-            closeSidebarBtn.onclick = () => {
-                sidebarEl.classList.remove('open');
-                sidebarBtnEl.classList.remove('active');
-            };
-            // Sepia Reading Mode
-            let sepiaMode = false;
-            document.getElementById('sepiaBtn').onclick = () => {
-                sepiaMode = !sepiaMode;
-                document.getElementById('viewer').classList.toggle('sepia', sepiaMode);
-                container.classList.toggle('sepia', sepiaMode);
-                document.getElementById('sepiaBtn').classList.toggle('active', sepiaMode);
-            };
-            // Page Rotation
-            const pageRotations = new Map(); // Store rotation per page
-            function rotatePage(delta) {
-                const pageNum = pdfViewer.currentPageNumber;
-                const currentRotation = pageRotations.get(pageNum) || 0;
-                const newRotation = (currentRotation + delta + 360) % 360;
-                pageRotations.set(pageNum, newRotation);
-                // Apply rotation only to the canvas (not the whole page div)
-                const pageView = pdfViewer.getPageView(pageNum - 1);
-                if (pageView?.div) {
-                    const canvas = pageView.div.querySelector('canvas');
-                    const textLayer = pageView.div.querySelector('.textLayer');
-                    const annotationLayer = pageView.div.querySelector('.annotationLayer');
-                    if (canvas) {
-                        canvas.style.transform = `rotate(${newRotation}deg)`;
-                        canvas.style.transformOrigin = 'center center';
-                    }
-                    if (textLayer) {
-                        textLayer.style.transform = `rotate(${newRotation}deg)`;
-                        textLayer.style.transformOrigin = 'center center';
-                    }
-                    if (annotationLayer) {
-                        annotationLayer.style.transform = `rotate(${newRotation}deg)`;
-                        annotationLayer.style.transformOrigin = 'center center';
-                    }
-                    // Also rotate text highlight container
-                    const textHighlightContainer = pageView.div.querySelector('.textHighlightContainer');
-                    if (textHighlightContainer) {
-                        textHighlightContainer.style.transform = `rotate(${newRotation}deg)`;
-                        textHighlightContainer.style.transformOrigin = 'center center';
-                    }
-                }
-            }
-            document.getElementById('rotateLeft').onclick = () => rotatePage(-90);
-            document.getElementById('rotateRight').onclick = () => rotatePage(90);
-            // Sidebar Toggle
-            document.getElementById('sidebarBtn').onclick = () => {
-                sidebar.classList.toggle('open');
-                container.classList.toggle('withSidebar', sidebar.classList.contains('open'));
-                document.getElementById('sidebarBtn').classList.toggle('active', sidebar.classList.contains('open'));
-            };
-            document.getElementById('closeSidebar').onclick = () => {
-                sidebar.classList.remove('open');
-                container.classList.remove('withSidebar');
-                document.getElementById('sidebarBtn').classList.remove('active');
-            };
-            // Tool settings - separate for each tool
-            let highlightColor = '#fff100';
-            let highlightWidth = 4;
-            let drawColor = '#e81224';
-            let drawWidth = 2;
-            let shapeColor = '#e81224';
-            let shapeWidth = 2;
-            let currentShape = 'rectangle'; // rectangle, circle, line, arrow
-            // Dropdown Panel Logic
-            const highlightDropdown = document.getElementById('highlightDropdown');
-            const drawDropdown = document.getElementById('drawDropdown');
-            const shapesDropdown = document.getElementById('shapesDropdown');
-            const highlightWrapper = document.getElementById('highlightWrapper');
-            const drawWrapper = document.getElementById('drawWrapper');
-            const shapesWrapper = document.getElementById('shapesWrapper');
-            function closeAllDropdowns() {
-                highlightDropdown.classList.remove('visible');
-                drawDropdown.classList.remove('visible');
-                shapesDropdown.classList.remove('visible');
-            }
-            function toggleDropdown(dropdown, e) {
-                e.stopPropagation();
-                const isVisible = dropdown.classList.contains('visible');
-                closeAllDropdowns();
-                if (!isVisible) {
-                    dropdown.classList.add('visible');
-                }
-            }
-            // Arrow buttons toggle dropdowns
-            document.getElementById('highlightArrow').onclick = (e) => toggleDropdown(highlightDropdown, e);
-            document.getElementById('drawArrow').onclick = (e) => toggleDropdown(drawDropdown, e);
-            document.getElementById('shapesArrow').onclick = (e) => toggleDropdown(shapesDropdown, e);
-            // Close dropdowns when clicking outside
-            document.addEventListener('click', (e) => {
-                if (!e.target.closest('.toolDropdown') && !e.target.closest('.dropdownArrow')) {
-                    closeAllDropdowns();
-                }
-            });
-            // Prevent dropdown from closing when clicking inside
-            highlightDropdown.onclick = (e) => e.stopPropagation();
-            drawDropdown.onclick = (e) => e.stopPropagation();
-            shapesDropdown.onclick = (e) => e.stopPropagation();
-            // Drawing Tools - Toggle Behavior
-            async function setTool(tool) {
-                // If same tool clicked again, deactivate
-                if (currentTool === tool) {
-                    currentTool = null;
-                    annotationMode = false;
-                    document.querySelectorAll('.annotationLayer').forEach(el => el.classList.remove('active'));
-                } else {
-                    currentTool = tool;
-                    annotationMode = true;
-                    // Set color and width based on tool
-                    if (tool === 'highlight') {
-                        currentColor = highlightColor;
-                        currentWidth = highlightWidth;
-                    } else if (tool === 'pen') {
-                        currentColor = drawColor;
-                        currentWidth = drawWidth;
-                    } else if (tool === 'shape') {
-                        currentColor = shapeColor;
-                        currentWidth = shapeWidth;
-                    }
-                    // BUGFIX: Save current annotation state BEFORE re-injecting layers
-                    // This prevents deleted content from being restored when switching tools
-                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                        const pageView = pdfViewer.getPageView(i);
-                        const svg = pageView?.div?.querySelector('.annotationLayer');
-                        if (svg) {
-                            const pageNum = i + 1;
-                            if (svg.innerHTML.trim()) {
-                                annotationsStore.set(pageNum, svg.innerHTML);
-                            } else {
-                                // Clear from store if empty (all content deleted)
-                                annotationsStore.delete(pageNum);
-                            }
-                        }
-                    }
-                    // Inject annotation layers (await all)
-                    const promises = [];
-                    for (let i = 0; i < pdfViewer.pagesCount; i++) {
-                        const pageView = pdfViewer.getPageView(i);
-                        if (pageView?.div) {
-                            promises.push(injectAnnotationLayer(i + 1));
-                        }
-                    }
-                    await Promise.all(promises);
-                }
-                // Update button states
-                highlightWrapper.classList.toggle('active', currentTool === 'highlight');
-                drawWrapper.classList.toggle('active', currentTool === 'pen');
-                shapesWrapper.classList.toggle('active', currentTool === 'shape');
-                document.getElementById('eraserBtn').classList.toggle('active', currentTool === 'eraser');
-                document.getElementById('textBtn').classList.toggle('active', currentTool === 'text');
-                document.getElementById('selectBtn').classList.toggle('active', currentTool === 'select');
-                // Toggle select-mode class on annotation layers
-                document.querySelectorAll('.annotationLayer').forEach(layer => {
-                    layer.classList.toggle('select-mode', currentTool === 'select');
-                });
-                // Clear selection when switching tools
-                if (currentTool !== 'select') {
-                    clearAnnotationSelection();
-                }
-            }
-            document.getElementById('drawBtn').onclick = () => setTool('pen');
-            document.getElementById('highlightBtn').onclick = () => setTool('highlight');
-            document.getElementById('shapesBtn').onclick = () => setTool('shape');
-            document.getElementById('eraserBtn').onclick = () => setTool('eraser');
-            document.getElementById('textBtn').onclick = () => setTool('text');
-            document.getElementById('selectBtn').onclick = () => setTool('select');
-            // Highlighter Colors
-            document.querySelectorAll('#highlightColors .colorDot').forEach(dot => {
-                dot.onclick = (e) => {
-                    e.stopPropagation();
-                    document.querySelectorAll('#highlightColors .colorDot').forEach(d => d.classList.remove('active'));
-                    dot.classList.add('active');
-                    highlightColor = dot.dataset.color;
-                    if (currentTool === 'highlight') currentColor = highlightColor;
-                    // Update preview
-                    document.getElementById('highlightWave').setAttribute('stroke', highlightColor);
-                };
-            });
-            // Pen Colors
-            document.querySelectorAll('#drawColors .colorDot').forEach(dot => {
-                dot.onclick = (e) => {
-                    e.stopPropagation();
-                    document.querySelectorAll('#drawColors .colorDot').forEach(d => d.classList.remove('active'));
-                    dot.classList.add('active');
-                    drawColor = dot.dataset.color;
-                    if (currentTool === 'pen') currentColor = drawColor;
-                    // Update preview
-                    document.getElementById('drawWave').setAttribute('stroke', drawColor);
-                };
-            });
-            // Highlighter Thickness Slider
-            document.getElementById('highlightThickness').oninput = (e) => {
-                highlightWidth = parseInt(e.target.value);
-                if (currentTool === 'highlight') currentWidth = highlightWidth;
-                // Update preview - highlighter uses width * 2 for display
-                document.getElementById('highlightWave').setAttribute('stroke-width', highlightWidth * 2);
-            };
-            // Pen Thickness Slider
-            document.getElementById('drawThickness').oninput = (e) => {
-                drawWidth = parseInt(e.target.value);
-                if (currentTool === 'pen') currentWidth = drawWidth;
-                // Update preview
-                document.getElementById('drawWave').setAttribute('stroke-width', drawWidth);
-            };
-            // Shape Selection
-            document.querySelectorAll('.shapeBtn').forEach(btn => {
-                btn.onclick = (e) => {
-                    e.stopPropagation();
-                    document.querySelectorAll('.shapeBtn').forEach(b => b.classList.remove('active'));
-                    btn.classList.add('active');
-                    currentShape = btn.dataset.shape;
-                };
-            });
-            // Shape Colors
-            document.querySelectorAll('#shapeColors .colorDot').forEach(dot => {
-                dot.onclick = (e) => {
-                    e.stopPropagation();
-                    document.querySelectorAll('#shapeColors .colorDot').forEach(d => d.classList.remove('active'));
-                    dot.classList.add('active');
-                    shapeColor = dot.dataset.color;
-                    if (currentTool === 'shape') currentColor = shapeColor;
-                };
-            });
-            // Shape Thickness Slider
-            document.getElementById('shapeThickness').oninput = (e) => {
-                shapeWidth = parseInt(e.target.value);
-                if (currentTool === 'shape') currentWidth = shapeWidth;
-            };
-            // Annotation Layer with Persistence
-            async function injectAnnotationLayer(pageNum) {
-                const pageView = pdfViewer.getPageView(pageNum - 1);
-                if (!pageView?.div) return;
-                // Remove old SVG if exists (may have stale reference)
-                const oldSvg = pageView.div.querySelector('.annotationLayer');
-                if (oldSvg) oldSvg.remove();
-                // Get or calculate base dimensions (scale=1.0) - FIXED reference
-                let baseDims = pageBaseDimensions.get(pageNum);
-                if (!baseDims) {
-                    const page = await pdfDoc.getPage(pageNum);
-                    const baseViewport = page.getViewport({ scale: 1.0 });
-                    baseDims = { width: baseViewport.width, height: baseViewport.height };
-                    pageBaseDimensions.set(pageNum, baseDims);
-                }
-                // Create fresh SVG with FIXED viewBox (always scale=1.0 dimensions)
-                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                svg.setAttribute('class', 'annotationLayer');
-                svg.setAttribute('viewBox', `0 0 ${baseDims.width} ${baseDims.height}`);
-                svg.setAttribute('preserveAspectRatio', 'none');
-                svg.style.width = '100%';
-                svg.style.height = '100%';
-                svg.dataset.page = pageNum;
-                svg.dataset.viewboxWidth = baseDims.width;
-                svg.dataset.viewboxHeight = baseDims.height;
-                svg.dataset.viewboxHeight = baseDims.height;
-                pageView.div.appendChild(svg);
-                // Restore saved annotations for this page
-                if (annotationsStore.has(pageNum)) {
-                    svg.innerHTML = annotationsStore.get(pageNum);
-                }
-                svg.addEventListener('mousedown', (e) => startDraw(e, pageNum));
-                svg.addEventListener('mousemove', draw);
-                svg.addEventListener('mouseup', () => stopDraw(pageNum));
-                svg.addEventListener('mouseleave', () => stopDraw(pageNum));
-                // Touch support for tablets
-                svg.addEventListener('touchstart', (e) => {
-                    // Prevent default to avoid scroll while drawing/selecting
-                    if (currentTool) e.preventDefault();
-                    startDraw(e, pageNum);
-                }, { passive: false });
-                svg.addEventListener('touchmove', (e) => {
-                    if (currentTool) e.preventDefault();
-                    draw(e);
-                }, { passive: false });
-                svg.addEventListener('touchend', () => stopDraw(pageNum));
-                svg.addEventListener('touchcancel', () => stopDraw(pageNum));
-                svg.classList.toggle('active', annotationMode);
-            }
-            // Save annotations for a page
-            function saveAnnotations(pageNum) {
-                const pageView = pdfViewer.getPageView(pageNum - 1);
-                const svg = pageView?.div?.querySelector('.annotationLayer');
-                if (svg && svg.innerHTML.trim()) {
-                    annotationsStore.set(pageNum, svg.innerHTML);
-                }
-            }
-            function startDraw(e, pageNum) {
-                if (!annotationMode || !currentTool) return;
-                e.preventDefault(); // Prevent text selection
-                const svg = e.currentTarget;
-                if (!svg || !svg.dataset.viewboxWidth) return; // Defensive check
-                // Handle select tool separately
-                if (currentTool === 'select') {
-                    if (handleSelectMouseDown(e, svg, pageNum)) {
-                        return; // Select tool handled the event
-                    }
-                }
-                isDrawing = true;
-                currentDrawingPage = pageNum;
-                currentSvg = svg; // Store reference
-                const rect = svg.getBoundingClientRect();
-                // Convert screen coords to viewBox coords
-                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                const scaleX = viewBoxWidth / rect.width;
-                const scaleY = viewBoxHeight / rect.height;
-                // Get coordinates from mouse or touch event
-                const coords = getEventCoords(e);
-                const x = (coords.clientX - rect.left) * scaleX;
-                const y = (coords.clientY - rect.top) * scaleY;
-                if (currentTool === 'eraser') {
-                    eraseAt(svg, x, y, scaleX);
-                    saveAnnotations(pageNum);
-                    return;
-                }
-                // Text tool - create/edit/drag text
-                if (currentTool === 'text') {
-                    // Check if clicked on existing text element
-                    const elementsUnderClick = document.elementsFromPoint(e.clientX, e.clientY);
-                    const existingText = elementsUnderClick.find(el => el.tagName === 'text' && el.closest('.annotationLayer'));
-                    if (existingText) {
-                        // Start dragging (double-click will edit via separate handler)
-                        startTextDrag(e, existingText, svg, scaleX, scaleY, pageNum);
-                    } else {
-                        // Create new text
-                        showTextEditor(e.clientX, e.clientY, svg, x, y, scaleX, pageNum);
-                    }
-                    return;
-                }
-                // Shape tool - create shapes
-                if (currentTool === 'shape') {
-                    isDrawing = true;
-                    // Store start position for shape drawing
-                    svg.dataset.shapeStartX = x;
-                    svg.dataset.shapeStartY = y;
-                    svg.dataset.shapeScaleX = scaleX;
-                    svg.dataset.shapeScaleY = scaleY;
-                    let shapeEl;
-                    if (currentShape === 'rectangle') {
-                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-                        shapeEl.setAttribute('x', x);
-                        shapeEl.setAttribute('y', y);
-                        shapeEl.setAttribute('width', 0);
-                        shapeEl.setAttribute('height', 0);
-                    } else if (currentShape === 'circle') {
-                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
-                        shapeEl.setAttribute('cx', x);
-                        shapeEl.setAttribute('cy', y);
-                        shapeEl.setAttribute('rx', 0);
-                        shapeEl.setAttribute('ry', 0);
-                    } else if (currentShape === 'line' || currentShape === 'arrow') {
-                        shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-                        shapeEl.setAttribute('x1', x);
-                        shapeEl.setAttribute('y1', y);
-                        shapeEl.setAttribute('x2', x);
-                        shapeEl.setAttribute('y2', y);
-                    }
-                    shapeEl.setAttribute('stroke', currentColor);
-                    shapeEl.setAttribute('stroke-width', currentWidth * scaleX);
-                    shapeEl.setAttribute('fill', 'none');
-                    shapeEl.classList.add('current-shape');
-                    svg.appendChild(shapeEl);
-                    return;
-                }
-                currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                currentPath.setAttribute('stroke', currentColor);
-                currentPath.setAttribute('fill', 'none');
-                if (currentTool === 'highlight') {
-                    // Highlighter uses stroke size * 5 for thicker strokes
-                    currentPath.setAttribute('stroke-width', String(currentWidth * 5 * scaleX));
-                    currentPath.setAttribute('stroke-opacity', '0.35');
-                } else {
-                    currentPath.setAttribute('stroke-width', String(currentWidth * scaleX));
-                    currentPath.setAttribute('stroke-opacity', '1');
-                }
-                currentPath.setAttribute('d', `M${x.toFixed(2)},${y.toFixed(2)}`);
-                svg.appendChild(currentPath);
-            }
-            function draw(e) {
-                if (!isDrawing || !currentSvg) return;
-                e.preventDefault(); // Prevent text selection
-                const svg = currentSvg; // Use stored reference
-                if (!svg || !svg.dataset.viewboxWidth) return;
-                const rect = svg.getBoundingClientRect();
-                // Convert screen coords to viewBox coords
-                const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                const scaleX = viewBoxWidth / rect.width;
-                const scaleY = viewBoxHeight / rect.height;
-                // Get coordinates from mouse or touch event
-                const coords = getEventCoords(e);
-                const x = (coords.clientX - rect.left) * scaleX;
-                const y = (coords.clientY - rect.top) * scaleY;
-                if (currentTool === 'eraser') {
-                    eraseAt(svg, x, y, scaleX);
-                    return;
-                }
-                // Shape tool - update shape size
-                if (currentTool === 'shape') {
-                    const shapeEl = svg.querySelector('.current-shape');
-                    if (!shapeEl) return;
-                    const startX = parseFloat(svg.dataset.shapeStartX);
-                    const startY = parseFloat(svg.dataset.shapeStartY);
-                    if (currentShape === 'rectangle') {
-                        const width = Math.abs(x - startX);
-                        const height = Math.abs(y - startY);
-                        shapeEl.setAttribute('x', Math.min(x, startX));
-                        shapeEl.setAttribute('y', Math.min(y, startY));
-                        shapeEl.setAttribute('width', width);
-                        shapeEl.setAttribute('height', height);
-                    } else if (currentShape === 'circle') {
-                        const rx = Math.abs(x - startX) / 2;
-                        const ry = Math.abs(y - startY) / 2;
-                        shapeEl.setAttribute('cx', (startX + x) / 2);
-                        shapeEl.setAttribute('cy', (startY + y) / 2);
-                        shapeEl.setAttribute('rx', rx);
-                        shapeEl.setAttribute('ry', ry);
-                    } else if (currentShape === 'line' || currentShape === 'arrow' || currentShape === 'callout') {
-                        shapeEl.setAttribute('x2', x);
-                        shapeEl.setAttribute('y2', y);
-                    }
-                    return;
-                }
-                if (currentPath) {
-                    currentPath.setAttribute('d', currentPath.getAttribute('d') + ` L${x.toFixed(2)},${y.toFixed(2)}`);
-                }
-            }
-            function stopDraw(pageNum) {
-                // Handle arrow marker
-                if (currentTool === 'shape' && currentShape === 'arrow' && currentSvg) {
-                    const shapeEl = currentSvg.querySelector('.current-shape');
-                    if (shapeEl && shapeEl.tagName === 'line') {
-                        // Create arrow head as a group
-                        const x1 = parseFloat(shapeEl.getAttribute('x1'));
-                        const y1 = parseFloat(shapeEl.getAttribute('y1'));
-                        const x2 = parseFloat(shapeEl.getAttribute('x2'));
-                        const y2 = parseFloat(shapeEl.getAttribute('y2'));
-                        // Calculate arrow head
-                        const angle = Math.atan2(y2 - y1, x2 - x1);
-                        const headLength = 15 * parseFloat(currentSvg.dataset.shapeScaleX || 1);
-                        const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                        const p1x = x2 - headLength * Math.cos(angle - Math.PI / 6);
-                        const p1y = y2 - headLength * Math.sin(angle - Math.PI / 6);
-                        const p2x = x2 - headLength * Math.cos(angle + Math.PI / 6);
-                        const p2y = y2 - headLength * Math.sin(angle + Math.PI / 6);
-                        arrowHead.setAttribute('d', `M${x2},${y2} L${p1x},${p1y} M${x2},${y2} L${p2x},${p2y}`);
-                        arrowHead.setAttribute('stroke', shapeEl.getAttribute('stroke'));
-                        arrowHead.setAttribute('stroke-width', shapeEl.getAttribute('stroke-width'));
-                        arrowHead.setAttribute('fill', 'none');
-                        currentSvg.appendChild(arrowHead);
-                    }
-                }
-                // Handle callout - arrow with text at the start, pointing to end
-                // UX: Click where you want text box, drag to point at something
-                if (currentTool === 'shape' && currentShape === 'callout' && currentSvg) {
-                    const shapeEl = currentSvg.querySelector('.current-shape');
-                    if (shapeEl && shapeEl.tagName === 'line') {
-                        const x1 = parseFloat(shapeEl.getAttribute('x1')); // Start - where text box goes
-                        const y1 = parseFloat(shapeEl.getAttribute('y1'));
-                        const x2 = parseFloat(shapeEl.getAttribute('x2')); // End - where arrow points
-                        const y2 = parseFloat(shapeEl.getAttribute('y2'));
-                        // Only create callout if line has been drawn (not just a click)
-                        if (Math.abs(x2 - x1) > 5 || Math.abs(y2 - y1) > 5) {
-                            const scaleX = parseFloat(currentSvg.dataset.shapeScaleX || 1);
-                            // Arrow head points TO the end (x2,y2) - where user wants to point at
-                            const angle = Math.atan2(y2 - y1, x2 - x1);
-                            const headLength = 12 * scaleX;
-                            const arrowHead = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                            const p1x = x2 - headLength * Math.cos(angle - Math.PI / 6);
-                            const p1y = y2 - headLength * Math.sin(angle - Math.PI / 6);
-                            const p2x = x2 - headLength * Math.cos(angle + Math.PI / 6);
-                            const p2y = y2 - headLength * Math.sin(angle + Math.PI / 6);
-                            arrowHead.setAttribute('d', `M${x2},${y2} L${p1x},${p1y} M${x2},${y2} L${p2x},${p2y}`);
-                            arrowHead.setAttribute('stroke', shapeEl.getAttribute('stroke'));
-                            arrowHead.setAttribute('stroke-width', shapeEl.getAttribute('stroke-width'));
-                            arrowHead.setAttribute('fill', 'none');
-                            arrowHead.classList.add('callout-arrow');
-                            currentSvg.appendChild(arrowHead);
-                            // Store references for text editor
-                            const svg = currentSvg;
-                            const currentPageNum = currentDrawingPage;
-                            const arrowColor = shapeEl.getAttribute('stroke');
-                            // Calculate screen position for text editor at START of arrow (x1,y1)
-                            // This is where the user clicked first - where they want the text
-                            const rect = svg.getBoundingClientRect();
-                            const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                            const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                            const screenX = rect.left + (x1 / viewBoxWidth) * rect.width;
-                            const screenY = rect.top + (y1 / viewBoxHeight) * rect.height;
-                            // Remove the current-shape class before showing editor
-                            shapeEl.classList.remove('current-shape');
-                            // Save first, then open text editor
-                            saveAnnotations(currentPageNum);
-                            // Open text editor at the START of the arrow (where user clicked)
-                            setTimeout(() => {
-                                showTextEditor(screenX, screenY, svg, x1, y1, scaleX, currentPageNum, null, arrowColor);
-                            }, 50);
-                            // Reset state
-                            isDrawing = false;
-                            currentPath = null;
-                            currentSvg = null;
-                            currentDrawingPage = null;
-                            return; // Exit early, text editor will handle the rest
-                        }
-                    }
-                }
-                // Remove the current-shape class
-                if (currentSvg) {
-                    const shapeEl = currentSvg.querySelector('.current-shape');
-                    if (shapeEl) shapeEl.classList.remove('current-shape');
-                }
-                if (isDrawing && currentDrawingPage) {
-                    saveAnnotations(currentDrawingPage);
-                }
-                isDrawing = false;
-                currentPath = null;
-                currentSvg = null;
-                currentDrawingPage = null;
-            }
-            // Text Drag-and-Drop
-            let draggedText = null;
-            let dragStartX = 0;
-            let dragStartY = 0;
-            let textOriginalX = 0;
-            let textOriginalY = 0;
-            let hasDragged = false;
-            function startTextDrag(e, textEl, svg, scaleX, scaleY, pageNum) {
-                e.preventDefault();
-                e.stopPropagation();
-                draggedText = textEl;
-                textEl.classList.add('dragging');
-                hasDragged = false;
-                const rect = svg.getBoundingClientRect();
-                dragStartX = e.clientX;
-                dragStartY = e.clientY;
-                textOriginalX = parseFloat(textEl.getAttribute('x'));
-                textOriginalY = parseFloat(textEl.getAttribute('y'));
-                function onMouseMove(ev) {
-                    const dx = (ev.clientX - dragStartX) * scaleX;
-                    const dy = (ev.clientY - dragStartY) * scaleY;
-                    if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
-                        hasDragged = true;
-                    }
-                    textEl.setAttribute('x', (textOriginalX + dx).toFixed(2));
-                    textEl.setAttribute('y', (textOriginalY + dy).toFixed(2));
-                }
-                function onMouseUp(ev) {
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', onMouseUp);
-                    textEl.classList.remove('dragging');
-                    if (hasDragged) {
-                        // Moved - save position
-                        saveAnnotations(pageNum);
-                    } else {
-                        // Not moved - short click = edit
-                        const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                        const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                        const svgX = parseFloat(textEl.getAttribute('x'));
-                        const svgY = parseFloat(textEl.getAttribute('y'));
-                        // Note: showTextEditor needs scaleX for font scaling logic, which we still have from arguments
-                        showTextEditor(ev.clientX, ev.clientY, svg, svgX, svgY, scaleX, pageNum, textEl);
-                    }
-                    draggedText = null;
-                }
-                document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', onMouseUp);
-            }
-            // Inline Text Editor
-            let textFontSize = 14;
-            function showTextEditor(screenX, screenY, svg, svgX, svgY, scale, pageNum, existingTextEl = null, overrideColor = null) {
-                // Remove existing editor if any
-                const existingOverlay = document.querySelector('.textEditorOverlay');
-                if (existingOverlay) existingOverlay.remove();
-                // Use override color (for callout) or current color
-                const textColor = overrideColor || currentColor;
-                // If editing existing text, get its properties
-                let editingText = null;
-                if (existingTextEl && typeof existingTextEl === 'object' && existingTextEl.textContent !== undefined) {
-                    editingText = existingTextEl.textContent;
-                    textFontSize = parseFloat(existingTextEl.getAttribute('font-size')) / scale || 14;
-                }
-                // Create overlay
-                const overlay = document.createElement('div');
-                overlay.className = 'textEditorOverlay';
-                // Create editor box
-                const box = document.createElement('div');
-                box.className = 'textEditorBox';
-                box.style.left = screenX + 'px';
-                box.style.top = screenY + 'px';
-                // Input area
-                const input = document.createElement('div');
-                input.className = 'textEditorInput';
-                input.contentEditable = true;
-                input.style.color = textColor;
-                input.style.fontSize = textFontSize + 'px';
-                if (editingText) {
-                    input.textContent = editingText;
-                }
-                // Toolbar
-                const toolbar = document.createElement('div');
-                toolbar.className = 'textEditorToolbar';
-                // Color indicator
-                const colorDot = document.createElement('div');
-                colorDot.className = 'textEditorColorDot active';
-                colorDot.style.background = textColor;
-                // Font size decrease
-                const decreaseBtn = document.createElement('button');
-                decreaseBtn.className = 'textEditorBtn';
-                decreaseBtn.innerHTML = 'A<sup>-</sup>';
-                decreaseBtn.onclick = (e) => {
-                    e.stopPropagation();
-                    if (textFontSize > 10) {
-                        textFontSize -= 2;
-                        input.style.fontSize = textFontSize + 'px';
-                    }
-                };
-                // Font size increase
-                const increaseBtn = document.createElement('button');
-                increaseBtn.className = 'textEditorBtn';
-                increaseBtn.innerHTML = 'A<sup>+</sup>';
-                increaseBtn.onclick = (e) => {
-                    e.stopPropagation();
-                    if (textFontSize < 32) {
-                        textFontSize += 2;
-                        input.style.fontSize = textFontSize + 'px';
-                    }
-                };
-                // Delete button - also deletes existing element if editing
-                const deleteBtn = document.createElement('button');
-                deleteBtn.className = 'textEditorBtn delete';
-                deleteBtn.innerHTML = '🗑️';
-                deleteBtn.onclick = (e) => {
-                    e.stopPropagation();
-                    if (existingTextEl) {
-                        existingTextEl.remove();
-                        saveAnnotations(pageNum);
-                    }
-                    overlay.remove();
-                };
-                toolbar.appendChild(colorDot);
-                toolbar.appendChild(decreaseBtn);
-                toolbar.appendChild(increaseBtn);
-                toolbar.appendChild(deleteBtn);
-                box.appendChild(input);
-                box.appendChild(toolbar);
-                overlay.appendChild(box);
-                document.body.appendChild(overlay);
-                // Focus input and select all if editing
-                setTimeout(() => {
-                    input.focus();
-                    if (editingText) {
-                        const range = document.createRange();
-                        range.selectNodeContents(input);
-                        const sel = window.getSelection();
-                        sel.removeAllRanges();
-                        sel.addRange(range);
-                    }
-                }, 50);
-                // Confirm on click outside or Enter
-                function confirmText() {
-                    const text = input.textContent.trim();
-                    if (text) {
-                        if (existingTextEl) {
-                            // Update existing text element
-                            existingTextEl.textContent = text;
-                            existingTextEl.setAttribute('fill', textColor);
-                            existingTextEl.setAttribute('font-size', String(textFontSize * scale));
-                        } else {
-                            // Create new text element
-                            const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-                            textEl.setAttribute('x', svgX.toFixed(2));
-                            textEl.setAttribute('y', svgY.toFixed(2));
-                            textEl.setAttribute('fill', textColor);
-                            textEl.setAttribute('font-size', String(textFontSize * scale));
-                            textEl.setAttribute('font-family', 'Segoe UI, Arial, sans-serif');
-                            textEl.textContent = text;
-                            svg.appendChild(textEl);
-                        }
-                        saveAnnotations(pageNum);
-                    } else if (existingTextEl) {
-                        // Empty text = delete existing
-                        existingTextEl.remove();
-                        saveAnnotations(pageNum);
-                    }
-                    overlay.remove();
-                }
-                overlay.addEventListener('click', (e) => {
-                    if (e.target === overlay) confirmText();
-                });
-                input.addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        confirmText();
-                    }
-                    if (e.key === 'Escape') {
-                        overlay.remove();
-                    }
-                });
-            }
-            function eraseAt(svg, x, y, scale = 1) {
-                const hitRadius = 15 * scale; // Scale hit radius with viewBox
-                // Erase paths, text, and shape elements (rect, ellipse, line)
-                svg.querySelectorAll('path, text, rect, ellipse, line').forEach(el => {
-                    const bbox = el.getBBox();
-                    if (x >= bbox.x - hitRadius && x <= bbox.x + bbox.width + hitRadius &&
-                        y >= bbox.y - hitRadius && y <= bbox.y + bbox.height + hitRadius) {
-                        el.remove();
-                    }
-                });
-                // Also erase text highlights (in separate container)
-                const pageDiv = svg.closest('.page');
-                if (pageDiv) {
-                    const highlightContainer = pageDiv.querySelector('.textHighlightContainer');
-                    if (highlightContainer) {
-                        const pageRect = pageDiv.getBoundingClientRect();
-                        const svgRect = svg.getBoundingClientRect();
-                        // Convert viewBox coords to screen coords, then to percentages
-                        const screenX = (x / scale) + svgRect.left - pageRect.left;
-                        const screenY = (y / scale) + svgRect.top - pageRect.top;
-                        const screenXPercent = (screenX / pageRect.width) * 100;
-                        const screenYPercent = (screenY / pageRect.height) * 100;
-                        highlightContainer.querySelectorAll('.textHighlight').forEach(el => {
-                            const left = parseFloat(el.style.left); // Already in %
-                            const top = parseFloat(el.style.top);
-                            const width = parseFloat(el.style.width);
-                            const height = parseFloat(el.style.height);
-                            if (screenXPercent >= left - 2 && screenXPercent <= left + width + 2 &&
-                                screenYPercent >= top - 2 && screenYPercent <= top + height + 2) {
-                                el.remove();
-                                // Save changes
-                                const pageNum = parseInt(pageDiv.dataset.pageNumber);
-                                saveTextHighlights(pageNum, pageDiv);
-                            }
-                        });
-                    }
-                }
-            }
-            // ==========================================
-            // TEXT SELECTION HIGHLIGHTING (Adobe/Edge style)
-            // ==========================================
-            let highlightPopup = null;
-            function removeHighlightPopup() {
-                if (highlightPopup) {
-                    highlightPopup.remove();
-                    highlightPopup = null;
-                }
-            }
-            function getSelectionRects() {
-                const selection = window.getSelection();
-                if (!selection || selection.isCollapsed || !selection.rangeCount) return null;
-                const range = selection.getRangeAt(0);
-                const rects = range.getClientRects();
-                if (rects.length === 0) return null;
-                // Find which page the selection is in
-                const startNode = range.startContainer.parentElement;
-                const textLayer = startNode?.closest('.textLayer');
-                if (!textLayer) return null;
-                const pageDiv = textLayer.closest('.page');
-                if (!pageDiv) return null;
-                const pageNum = parseInt(pageDiv.dataset.pageNumber);
-                const pageRect = pageDiv.getBoundingClientRect();
-                // Convert rects to page-relative coordinates
-                const relativeRects = [];
-                for (let i = 0; i < rects.length; i++) {
-                    const rect = rects[i];
-                    relativeRects.push({
-                        x: rect.left - pageRect.left,
-                        y: rect.top - pageRect.top,
-                        width: rect.width,
-                        height: rect.height
-                    });
-                }
-                return { pageNum, pageDiv, relativeRects, lastRect: rects[rects.length - 1] };
-            }
-            function createTextHighlights(pageDiv, rects, color) {
-                // Find or create highlight container
-                let highlightContainer = pageDiv.querySelector('.textHighlightContainer');
-                if (!highlightContainer) {
-                    highlightContainer = document.createElement('div');
-                    highlightContainer.className = 'textHighlightContainer';
-                    highlightContainer.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
-                    pageDiv.insertBefore(highlightContainer, pageDiv.firstChild);
-                }
-                // Get page dimensions for percentage calculation
-                const pageRect = pageDiv.getBoundingClientRect();
-                const pageWidth = pageRect.width;
-                const pageHeight = pageRect.height;
-                // Add highlight rectangles with percentage positioning
-                rects.forEach(rect => {
-                    const div = document.createElement('div');
-                    div.className = 'textHighlight';
-                    // Convert to percentages for zoom-independent positioning
-                    const leftPercent = (rect.x / pageWidth) * 100;
-                    const topPercent = (rect.y / pageHeight) * 100;
-                    const widthPercent = (rect.width / pageWidth) * 100;
-                    const heightPercent = (rect.height / pageHeight) * 100;
-                    div.style.cssText = `
-                    left: ${leftPercent}%;
-                    top: ${topPercent}%;
-                    width: ${widthPercent}%;
-                    height: ${heightPercent}%;
-                    background: ${color};
-                    opacity: 0.35;
-                `;
-                    highlightContainer.appendChild(div);
-                });
-                // Save to annotations store
-                const pageNum = parseInt(pageDiv.dataset.pageNumber);
-                saveTextHighlights(pageNum, pageDiv);
-            }
-            function saveTextHighlights(pageNum, pageDiv) {
-                const container = pageDiv.querySelector('.textHighlightContainer');
-                if (container) {
-                    const key = `textHighlight_${pageNum}`;
-                    localStorage.setItem(key, container.innerHTML);
-                }
-            }
-            function loadTextHighlights(pageNum, pageDiv) {
-                const key = `textHighlight_${pageNum}`;
-                const saved = localStorage.getItem(key);
-                if (saved) {
-                    let container = pageDiv.querySelector('.textHighlightContainer');
-                    if (!container) {
-                        container = document.createElement('div');
-                        container.className = 'textHighlightContainer';
-                        container.style.cssText = 'position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:5;';
-                        pageDiv.insertBefore(container, pageDiv.firstChild);
-                    }
-                    container.innerHTML = saved;
-                }
-            }
-            function showHighlightPopup(x, y, pageDiv, rects) {
-                removeHighlightPopup();
-                highlightPopup = document.createElement('div');
-                highlightPopup.className = 'highlightPopup';
-                highlightPopup.style.left = x + 'px';
-                highlightPopup.style.top = (y + 10) + 'px';
-                const colors = ['#fff100', '#16c60c', '#00b7c3', '#0078d4', '#886ce4', '#e81224'];
-                colors.forEach(color => {
-                    const btn = document.createElement('button');
-                    btn.style.background = color;
-                    btn.title = 'Vurgula';
-                    btn.onclick = (e) => {
-                        e.stopPropagation();
-                        createTextHighlights(pageDiv, rects, color);
-                        window.getSelection().removeAllRanges();
-                        removeHighlightPopup();
-                    };
-                    highlightPopup.appendChild(btn);
-                });
-                document.body.appendChild(highlightPopup);
-            }
-            // Listen for text selection
-            document.addEventListener('mouseup', (e) => {
-                // Small delay to let selection finalize
-                setTimeout(() => {
-                    const selData = getSelectionRects();
-                    if (selData && selData.relativeRects.length > 0) {
-                        const lastRect = selData.lastRect;
-                        showHighlightPopup(lastRect.right, lastRect.bottom, selData.pageDiv, selData.relativeRects);
-                    } else {
-                        removeHighlightPopup();
-                    }
-                }, 10);
-            });
-            // Remove popup on click elsewhere
-            document.addEventListener('mousedown', (e) => {
-                if (highlightPopup && !highlightPopup.contains(e.target)) {
-                    removeHighlightPopup();
-                }
-            });
-            // Load text highlights when pages render
-            eventBus.on('pagerendered', (evt) => {
-                const pageDiv = pdfViewer.getPageView(evt.pageNumber - 1)?.div;
-                if (pageDiv) {
-                    loadTextHighlights(evt.pageNumber, pageDiv);
-                }
-            });
-            // ==========================================
-            // SELECT/MOVE TOOL (Fixed + Touch Support)
-            // ==========================================
-            let selectedAnnotation = null;
-            let selectedSvg = null;
-            let selectedPageNum = null;
-            let copiedAnnotation = null;
-            let copiedPageNum = null;
-            let isDraggingAnnotation = false;
-            let annotationDragStartX = 0;
-            let annotationDragStartY = 0;
-            // Create selection toolbar for touch devices
-            const selectionToolbar = document.createElement('div');
-            selectionToolbar.className = 'selection-toolbar';
-            selectionToolbar.innerHTML = `
-            <button data-action="copy" title="Kopyala (Ctrl+C)">
-                <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
-                <span>Kopyala</span>
-            </button>
-            <button data-action="duplicate" title="Çoğalt">
-                <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
-                <span>Çoğalt</span>
-            </button>
-            <button data-action="delete" class="delete" title="Sil (Del)">
-                <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
-                <span>Sil</span>
-            </button>
-        `;
-            document.body.appendChild(selectionToolbar);
-            // Selection toolbar event handlers
-            selectionToolbar.addEventListener('click', (e) => {
-                const btn = e.target.closest('button');
-                if (!btn) return;
-                const action = btn.dataset.action;
-                if (action === 'copy') {
-                    copySelectedAnnotation();
-                    showToast('Kopyalandı!');
-                } else if (action === 'duplicate') {
-                    copySelectedAnnotation();
-                    pasteAnnotation();
-                    showToast('Çoğaltıldı!');
-                } else if (action === 'delete') {
-                    deleteSelectedAnnotation();
-                    showToast('Silindi!');
-                }
-            });
-            function showToast(message) {
-                const existingToast = document.querySelector('.toast-notification');
-                if (existingToast) existingToast.remove();
-                const toast = document.createElement('div');
-                toast.className = 'toast-notification';
-                toast.textContent = message;
-                document.body.appendChild(toast);
-                setTimeout(() => toast.remove(), 2000);
-            }
-            function updateSelectionToolbar() {
-                if (selectedAnnotation && currentTool === 'select') {
-                    selectionToolbar.classList.add('visible');
-                } else {
-                    selectionToolbar.classList.remove('visible');
-                }
-            }
-            function clearAnnotationSelection() {
-                if (selectedAnnotation) {
-                    selectedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
-                }
-                selectedAnnotation = null;
-                selectedSvg = null;
-                selectedPageNum = null;
-                isDraggingAnnotation = false;
-                updateSelectionToolbar();
-            }
-            function selectAnnotation(element, svg, pageNum) {
-                clearAnnotationSelection();
-                selectedAnnotation = element;
-                selectedSvg = svg;
-                selectedPageNum = pageNum;
-                element.classList.add('annotation-selected', 'just-selected');
-                // Remove pulse animation after it completes
-                setTimeout(() => {
-                    element.classList.remove('just-selected');
-                }, 600);
-                updateSelectionToolbar();
-            }
-            function deleteSelectedAnnotation() {
-                if (selectedAnnotation && selectedSvg) {
-                    selectedAnnotation.remove();
-                    saveAnnotations(selectedPageNum);
-                    clearAnnotationSelection();
-                }
-            }
-            function copySelectedAnnotation() {
-                if (selectedAnnotation) {
-                    copiedAnnotation = selectedAnnotation.cloneNode(true);
-                    copiedAnnotation.classList.remove('annotation-selected', 'annotation-dragging', 'just-selected');
-                    copiedPageNum = selectedPageNum;
-                }
-            }
-            function pasteAnnotation() {
-                if (!copiedAnnotation || !pdfViewer) return;
-                // Paste to current page
-                const currentPage = pdfViewer.currentPageNumber;
-                const pageView = pdfViewer.getPageView(currentPage - 1);
-                const svg = pageView?.div?.querySelector('.annotationLayer');
-                if (svg) {
-                    const cloned = copiedAnnotation.cloneNode(true);
-                    const offset = 30; // Offset amount for pasted elements
-                    // Offset pasted element slightly
-                    if (cloned.tagName === 'path') {
-                        // For paths, add/update transform translate
-                        const currentTransform = cloned.getAttribute('transform') || '';
-                        const match = currentTransform.match(/translate\(([^,]+),([^)]+)\)/);
-                        let tx = offset, ty = offset;
-                        if (match) {
-                            tx = parseFloat(match[1]) + offset;
-                            ty = parseFloat(match[2]) + offset;
-                        }
-                        cloned.setAttribute('transform', `translate(${tx}, ${ty})`);
-                    } else if (cloned.tagName === 'rect') {
-                        cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
-                        cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
-                    } else if (cloned.tagName === 'ellipse') {
-                        cloned.setAttribute('cx', parseFloat(cloned.getAttribute('cx')) + offset);
-                        cloned.setAttribute('cy', parseFloat(cloned.getAttribute('cy')) + offset);
-                    } else if (cloned.tagName === 'line') {
-                        cloned.setAttribute('x1', parseFloat(cloned.getAttribute('x1')) + offset);
-                        cloned.setAttribute('y1', parseFloat(cloned.getAttribute('y1')) + offset);
-                        cloned.setAttribute('x2', parseFloat(cloned.getAttribute('x2')) + offset);
-                        cloned.setAttribute('y2', parseFloat(cloned.getAttribute('y2')) + offset);
-                    } else if (cloned.tagName === 'text') {
-                        cloned.setAttribute('x', parseFloat(cloned.getAttribute('x')) + offset);
-                        cloned.setAttribute('y', parseFloat(cloned.getAttribute('y')) + offset);
-                    }
-                    svg.appendChild(cloned);
-                    saveAnnotations(currentPage);
-                    selectAnnotation(cloned, svg, currentPage);
-                }
-            }
-            // Get coordinates from mouse or touch event
-            function getEventCoords(e) {
-                if (e.touches && e.touches.length > 0) {
-                    return { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
-                }
-                if (e.changedTouches && e.changedTouches.length > 0) {
-                    return { clientX: e.changedTouches[0].clientX, clientY: e.changedTouches[0].clientY };
-                }
-                return { clientX: e.clientX, clientY: e.clientY };
-            }
-            // Handle select tool events (both mouse and touch)
-            function handleSelectPointerDown(e, svg, pageNum) {
-                if (currentTool !== 'select') return false;
-                const coords = getEventCoords(e);
-                const target = e.target;
-                if (target === svg || target.tagName === 'svg') {
-                    // Clicked on empty area - deselect
-                    clearAnnotationSelection();
-                    return true;
-                }
-                // Check if clicked on an annotation element
-                if (target.closest('.annotationLayer') && target !== svg) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    selectAnnotation(target, svg, pageNum);
-                    // Start drag
-                    const rect = svg.getBoundingClientRect();
-                    const viewBoxWidth = parseFloat(svg.dataset.viewboxWidth);
-                    const viewBoxHeight = parseFloat(svg.dataset.viewboxHeight);
-                    const scaleX = viewBoxWidth / rect.width;
-                    const scaleY = viewBoxHeight / rect.height;
-                    isDraggingAnnotation = true;
-                    annotationDragStartX = coords.clientX;
-                    annotationDragStartY = coords.clientY;
-                    target.classList.add('annotation-dragging');
-                    function onMove(ev) {
-                        if (!isDraggingAnnotation) return;
-                        ev.preventDefault();
-                        const moveCoords = getEventCoords(ev);
-                        const dx = (moveCoords.clientX - annotationDragStartX) * scaleX;
-                        const dy = (moveCoords.clientY - annotationDragStartY) * scaleY;
-                        // Move the element
-                        moveAnnotation(target, dx, dy);
-                        // Update start position for next move (CRITICAL FIX)
-                        annotationDragStartX = moveCoords.clientX;
-                        annotationDragStartY = moveCoords.clientY;
-                    }
-                    function onEnd(ev) {
-                        document.removeEventListener('mousemove', onMove);
-                        document.removeEventListener('mouseup', onEnd);
-                        document.removeEventListener('touchmove', onMove);
-                        document.removeEventListener('touchend', onEnd);
-                        document.removeEventListener('touchcancel', onEnd);
-                        target.classList.remove('annotation-dragging');
-                        isDraggingAnnotation = false;
-                        saveAnnotations(pageNum);
-                    }
-                    document.addEventListener('mousemove', onMove, { passive: false });
-                    document.addEventListener('mouseup', onEnd);
-                    document.addEventListener('touchmove', onMove, { passive: false });
-                    document.addEventListener('touchend', onEnd);
-                    document.addEventListener('touchcancel', onEnd);
-                    return true;
-                }
-                return false;
-            }
-            // moveAnnotation - applies delta movement to an annotation element
-            function moveAnnotation(element, dx, dy) {
-                if (element.tagName === 'path') {
-                    // Transform path using translate
-                    const currentTransform = element.getAttribute('transform') || '';
-                    const match = currentTransform.match(/translate\(([^,]+),\s*([^)]+)\)/);
-                    let tx = 0, ty = 0;
-                    if (match) {
-                        tx = parseFloat(match[1]);
-                        ty = parseFloat(match[2]);
-                    }
-                    element.setAttribute('transform', `translate(${tx + dx}, ${ty + dy})`);
-                } else if (element.tagName === 'rect') {
-                    element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
-                    element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
-                } else if (element.tagName === 'ellipse') {
-                    element.setAttribute('cx', parseFloat(element.getAttribute('cx')) + dx);
-                    element.setAttribute('cy', parseFloat(element.getAttribute('cy')) + dy);
-                } else if (element.tagName === 'line') {
-                    element.setAttribute('x1', parseFloat(element.getAttribute('x1')) + dx);
-                    element.setAttribute('y1', parseFloat(element.getAttribute('y1')) + dy);
-                    element.setAttribute('x2', parseFloat(element.getAttribute('x2')) + dx);
-                    element.setAttribute('y2', parseFloat(element.getAttribute('y2')) + dy);
-                } else if (element.tagName === 'text') {
-                    element.setAttribute('x', parseFloat(element.getAttribute('x')) + dx);
-                    element.setAttribute('y', parseFloat(element.getAttribute('y')) + dy);
-                }
-            }
-            // Legacy function for backwards compatibility (used elsewhere)
-            function handleSelectMouseDown(e, svg, pageNum) {
-                return handleSelectPointerDown(e, svg, pageNum);
-            }
-            // ==========================================
-            // KEYBOARD SHORTCUTS
-            // ==========================================
-            document.addEventListener('keydown', (e) => {
-                // Ignore if typing in input
-                if (e.target.tagName === 'INPUT' || e.target.contentEditable === 'true') return;
-                const key = e.key.toLowerCase();
-                // Tool shortcuts
-                if (key === 'h') { setTool('highlight'); e.preventDefault(); }
-                if (key === 'p') { setTool('pen'); e.preventDefault(); }
-                if (key === 'e') { setTool('eraser'); e.preventDefault(); }
-                if (key === 't') { setTool('text'); e.preventDefault(); }
-                if (key === 'r') { setTool('shape'); e.preventDefault(); }
-                if (key === 'v') { setTool('select'); e.preventDefault(); }
-                // Delete selected annotation
-                if ((key === 'delete' || key === 'backspace') && selectedAnnotation) {
-                    deleteSelectedAnnotation();
-                    e.preventDefault();
-                }
-                // Copy/Paste annotations
-                if ((e.ctrlKey || e.metaKey) && key === 'c' && selectedAnnotation) {
-                    copySelectedAnnotation();
-                    e.preventDefault();
-                }
-                if ((e.ctrlKey || e.metaKey) && key === 'v' && copiedAnnotation) {
-                    pasteAnnotation();
-                    e.preventDefault();
-                }
-                // Navigation
-                if (key === 's') {
-                    document.getElementById('sidebarBtn').click();
-                    e.preventDefault();
-                }
-                // Arrow key navigation
-                if (key === 'arrowleft' || key === 'arrowup') {
-                    if (pdfViewer && pdfViewer.currentPageNumber > 1) {
-                        pdfViewer.currentPageNumber--;
-                    }
-                    e.preventDefault();
-                }
-                if (key === 'arrowright' || key === 'arrowdown') {
-                    if (pdfViewer && pdfViewer.currentPageNumber < pdfViewer.pagesCount) {
-                        pdfViewer.currentPageNumber++;
-                    }
-                    e.preventDefault();
-                }
-                // Home/End
-                if (key === 'home') {
-                    if (pdfViewer) pdfViewer.currentPageNumber = 1;
-                    e.preventDefault();
-                }
-                if (key === 'end') {
-                    if (pdfViewer) pdfViewer.currentPageNumber = pdfViewer.pagesCount;
-                    e.preventDefault();
-                }
-                // Zoom shortcuts - prevent browser zoom
-                if ((e.ctrlKey || e.metaKey) && (key === '=' || key === '+' || e.code === 'Equal')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    pdfViewer.currentScale += 0.25;
-                    return;
-                }
-                if ((e.ctrlKey || e.metaKey) && (key === '-' || e.code === 'Minus')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    pdfViewer.currentScale -= 0.25;
-                    return;
-                }
-                if ((e.ctrlKey || e.metaKey) && (key === '0' || e.code === 'Digit0')) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    pdfViewer.currentScaleValue = 'page-width';
-                    return;
-                }
-                // Escape to deselect tool
-                if (key === 'escape') {
-                    if (currentTool) {
-                        setTool(currentTool); // Toggle off
-                    }
-                    closeAllDropdowns();
-                }
-                // Sepia mode
-                if (key === 'm') {
-                    document.getElementById('sepiaBtn').click();
-                    e.preventDefault();
-                }
-            });
-            // ==========================================
-            // CONTEXT MENU (Right-click)
-            // ==========================================
-            const contextMenu = document.createElement('div');
-            contextMenu.className = 'contextMenu';
-            contextMenu.innerHTML = `
-            <div class="contextMenuItem" data-action="highlight">
-                <svg viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM5 16h14l-3-10H8l-3 10z"/></svg>
-                Vurgula
-                <span class="shortcutHint">H</span>
-            </div>
-            <div class="contextMenuItem" data-action="pen">
-                <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
-                Kalem
-                <span class="shortcutHint">P</span>
-            </div>
-            <div class="contextMenuItem" data-action="text">
-                <svg viewBox="0 0 24 24"><path d="M5 4v3h5.5v12h3V7H19V4H5z"/></svg>
-                Metin Ekle
-                <span class="shortcutHint">T</span>
-            </div>
-            <div class="contextMenuDivider"></div>
-            <div class="contextMenuItem" data-action="zoomIn">
-                <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-                Yakınlaştır
-                <span class="shortcutHint">Ctrl++</span>
-            </div>
-            <div class="contextMenuItem" data-action="zoomOut">
-                <svg viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"/></svg>
-                Uzaklaştır
-                <span class="shortcutHint">Ctrl+-</span>
-            </div>
-            <div class="contextMenuDivider"></div>
-            <div class="contextMenuItem" data-action="sepia">
-                <svg viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
-                Okuma Modu
-                <span class="shortcutHint">M</span>
-            </div>
-        `;
-            document.body.appendChild(contextMenu);
-            // Show context menu on right-click in viewer
-            container.addEventListener('contextmenu', (e) => {
-                e.preventDefault();
-                contextMenu.style.left = e.clientX + 'px';
-                contextMenu.style.top = e.clientY + 'px';
-                contextMenu.classList.add('visible');
-            });
-            // Hide context menu on click
-            document.addEventListener('click', () => {
-                contextMenu.classList.remove('visible');
-            });
-            // Context menu actions
-            contextMenu.addEventListener('click', (e) => {
-                const item = e.target.closest('.contextMenuItem');
-                if (!item) return;
-                const action = item.dataset.action;
-                switch (action) {
-                    case 'highlight': setTool('highlight'); break;
-                    case 'pen': setTool('pen'); break;
-                    case 'text': setTool('text'); break;
-                    case 'zoomIn': pdfViewer.currentScale += 0.25; break;
-                    case 'zoomOut': pdfViewer.currentScale -= 0.25; break;
-                    case 'sepia': document.getElementById('sepiaBtn').click(); break;
-                }
-                contextMenu.classList.remove('visible');
-            });
-            // ==========================================
-            // ERGONOMIC FEATURES
-            // ==========================================
-            // Double-click on page for fullscreen
-            let lastClickTime = 0;
-            container.addEventListener('click', (e) => {
-                const now = Date.now();
-                if (now - lastClickTime < 300) {
-                    // Double click detected
-                    if (document.fullscreenElement) {
-                        document.exitFullscreen();
-                    } else {
-                        container.requestFullscreen().catch(() => { });
-                    }
-                }
-                lastClickTime = now;
-            });
-            // Mouse wheel zoom with Ctrl
-            container.addEventListener('wheel', (e) => {
-                if (e.ctrlKey) {
-                    e.preventDefault();
-                    if (e.deltaY < 0) {
-                        pdfViewer.currentScale += 0.1;
-                    } else {
-                        pdfViewer.currentScale -= 0.1;
-                    }
-                }
-            }, { passive: false });
-            console.log('PDF Viewer Ready');
-            console.log('Keyboard Shortcuts: H=Highlight, P=Pen, E=Eraser, T=Text, R=Shapes, S=Sidebar, M=ReadingMode, Arrows=Navigate');
-            // ==========================================
-            // SECURITY FEATURES
-            // ==========================================
-            (function initSecurityFeatures() {
-                console.log('[Security] Initializing protection features...');
-                // 1. Block dangerous keyboard shortcuts
-                document.addEventListener('keydown', function (e) {
-                    // Ctrl+S (Save)
-                    if (e.ctrlKey && e.key === 's') {
-                        e.preventDefault();
-                        console.log('[Security] Ctrl+S blocked');
-                        return false;
-                    }
-                    // Ctrl+P (Print)
-                    if (e.ctrlKey && e.key === 'p') {
-                        e.preventDefault();
-                        console.log('[Security] Ctrl+P blocked');
-                        return false;
-                    }
-                    // Ctrl+Shift+S (Save As)
-                    if (e.ctrlKey && e.shiftKey && e.key === 'S') {
-                        e.preventDefault();
-                        return false;
-                    }
-                    // F12 (DevTools)
-                    if (e.key === 'F12') {
-                        e.preventDefault();
-                        console.log('[Security] F12 blocked');
-                        return false;
-                    }
-                    // Ctrl+Shift+I (DevTools)
-                    if (e.ctrlKey && e.shiftKey && e.key === 'I') {
-                        e.preventDefault();
-                        return false;
-                    }
-                    // Ctrl+Shift+J (Console)
-                    if (e.ctrlKey && e.shiftKey && e.key === 'J') {
-                        e.preventDefault();
-                        return false;
-                    }
-                    // Ctrl+U (View Source)
-                    if (e.ctrlKey && e.key === 'u') {
-                        e.preventDefault();
-                        return false;
-                    }
-                    // Ctrl+Shift+C (Inspect Element)
-                    if (e.ctrlKey && e.shiftKey && e.key === 'C') {
-                        e.preventDefault();
-                        return false;
-                    }
-                }, true);
-                // 2. Block context menu (right-click) - EVERYWHERE
-                document.addEventListener('contextmenu', function (e) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    return false;
-                }, true);
-                // 3. Block copy/cut/paste
-                document.addEventListener('copy', function (e) {
-                    e.preventDefault();
-                    console.log('[Security] Copy blocked');
-                    return false;
-                }, true);
-                document.addEventListener('cut', function (e) {
-                    e.preventDefault();
-                    return false;
-                }, true);
-                // 4. Block drag events (prevent dragging content out)
-                document.addEventListener('dragstart', function (e) {
-                    e.preventDefault();
-                    return false;
-                }, true);
-                // 5. Block Print via window.print override
-                window.print = function () {
-                    console.log('[Security] Print function blocked');
-                    alert('Yazdırma bu belgede engellenmiştir.');
-                    return false;
-                };
-                // 6. Disable beforeprint event
-                window.addEventListener('beforeprint', function (e) {
-                    e.preventDefault();
-                    document.body.style.display = 'none';
-                });
-                window.addEventListener('afterprint', function () {
-                    document.body.style.display = '';
-                });
-                // 7. Block screenshot keyboard shortcuts
-                document.addEventListener('keyup', function (e) {
-                    // PrintScreen key
-                    if (e.key === 'PrintScreen') {
-                        navigator.clipboard.writeText('');
-                        console.log('[Security] PrintScreen clipboard cleared');
-                    }
-                }, true);
-                // 8. Visibility change detection (tab switching for screenshots)
-                document.addEventListener('visibilitychange', function () {
-                    if (document.hidden) {
-                        console.log('[Security] Tab hidden');
-                    }
-                });
-                console.log('[Security] All protection features initialized');
-            })();
-            // End of main IIFE - pdfDoc, pdfViewer not accessible from console
-        })();
-    </script>
+    <script defer src="viewer-app.js"></script>
 </body>
-</html>
+</html>