/* ============================================================
   PDF VIEWER + ANNOTATION ENGINE — Styles
   Extrahiert aus app.html. Eingebunden via <link rel="stylesheet" href="/app/pdf-anno.css">
   CSS-Variablen (--bg2, --border, --cyan, etc.) werden aus :root in app.html geerbt.
   ============================================================ */

    .pdf-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      z-index: 900;   /* muss über pfit-overlay (820) und allen anderen Overlays liegen */
      justify-content: flex-end;
    }

    .pdf-overlay.active {
      display: flex;
    }

    .pdf-panel {
      background: var(--bg2);
      border-left: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      width: min(800px, 100vw);
      height: 100vh;
      animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
    }

    .pdf-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid var(--border);
      gap: 12px;
    }

    .pdf-title {
      font-weight: 600;
      color: var(--txt);
      flex: 1;
      word-break: break-word;
    }

    .pdf-content {
      flex: 1;
      overflow-y: auto;
      background: var(--bg3, #322f29);
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .pdf-content canvas {
      max-width: 100%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      background: #fff;
      display: block;
    }
    /* Annotations-Canvases (hl + ink) DUERFEN NICHT weiss sein — sonst verdecken sie die PDF */
    .pdf-content canvas.pdf-hl-canvas,
    .pdf-content canvas.pdf-ink-canvas,
    .pdf-content canvas.pdf-anno-canvas {
      background: transparent;
      box-shadow: none;
    }

    /* === PDF-Annotation: Zwei-Layer Canvas + Toolbar === */
    .pdf-page-slot {
      position: relative;
      isolation: isolate;            /* Multiply-Blend nur gegen pdfCanvas drunter */
    }
    /* iOS-Auswahl-Menue (Markieren/Kopieren auf Long-Press) komplett aussperren,
       wenn die PDF-Vorschau offen ist. Sonst nervt das Handballen-Press. */
    .pdf-overlay, .pdf-overlay * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }

    /* Highlight-Layer: blendet via mix-blend-mode multiply gegen die PDF darunter
       -> echter Textmarker-Effekt (Text bleibt scharf, Marker tönt) */
    .pdf-hl-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: multiply;
      pointer-events: none;
      background: transparent;
      z-index: 1;
    }
    /* Ink-Layer: Stift + Eraser; faengt Pointer-Events bei aktivem Zeichen-Tool */
    .pdf-ink-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;          /* default: Events fallen durch -> normales Scrollen */
      touch-action: auto;
      background: transparent;
      z-index: 2;
    }
    /* Zeichnen aktiv: Ink-Canvas faengt Events, Browser-Gesten aus */
    body.anno-active:not(.anno-hand) .pdf-ink-canvas {
      pointer-events: auto;
      touch-action: none;
      cursor: crosshair;
    }

    /* Tool-spezifische Cursor (data-Attribut wird in JS gesetzt).
       Hot-Spot ist die Spitze des Werkzeugs. */

    /* SCHREIBEN — schmaler Stift, schwarz, Spitze unten links */
    body[data-anno-tool="pen"] .pdf-ink-canvas {
      cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M2 26 L8 22 L22 8 L20 6 L6 20 Z' fill='%23222' stroke='white' stroke-width='1.2' stroke-linejoin='round'/><path d='M2 26 L6 24 L4 22 Z' fill='%23222'/><path d='M22 8 L24 6 L26 8 L24 10 Z' fill='%23ff3030' stroke='white' stroke-width='1' stroke-linejoin='round'/></svg>") 2 26, crosshair;
    }

    /* MARKIEREN — dicker Textmarker, gelb, schraeg */
    body[data-anno-tool="highlighter"] .pdf-ink-canvas {
      cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M2 30 L8 26 L24 10 L20 6 L4 22 Z' fill='%23f6e35a' stroke='%23222' stroke-width='1.4' stroke-linejoin='round'/><rect x='18' y='4' width='10' height='8' rx='1.5' transform='rotate(45 23 8)' fill='%23a3a3a3' stroke='%23222' stroke-width='1.2'/><path d='M2 30 L7 28 L4 25 Z' fill='%23ddc940'/></svg>") 2 30, crosshair;
    }

    /* RADIEREN — pinker Radiergummi-Block */
    body[data-anno-tool="eraser"] .pdf-ink-canvas {
      cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><rect x='4' y='10' width='22' height='14' rx='2' fill='%23ffb3c1' stroke='%23222' stroke-width='1.4'/><rect x='4' y='10' width='22' height='5' fill='%23d96380' stroke='%23222' stroke-width='1.4'/><line x1='10' y1='15' x2='10' y2='24' stroke='%23222' stroke-width='1' stroke-dasharray='2 2'/><line x1='16' y1='15' x2='16' y2='24' stroke='%23222' stroke-width='1' stroke-dasharray='2 2'/><line x1='22' y1='15' x2='22' y2='24' stroke='%23222' stroke-width='1' stroke-dasharray='2 2'/></svg>") 15 17, cell;
    }

    /* Hand-Tool oder Annotation aus: Events fallen durch zur PDF -> Scrollen/Zoomen normal */
    body.anno-hand .pdf-ink-canvas,
    body:not(.anno-active) .pdf-ink-canvas {
      pointer-events: none;
    }

    .pdf-toolbar {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 10;
      display: flex;
      gap: 4px;
      padding: 6px;
      background: rgba(25,28,38,0.94);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,.5);
      backdrop-filter: blur(8px);
      align-items: center;
    }
    .pdf-toolbar button {
      background: transparent;
      border: 1px solid transparent;
      color: var(--txt2);
      padding: 6px 9px;
      border-radius: 6px;
      cursor: pointer;
      font-size: .9rem;
      line-height: 1;
      min-width: 32px;
      display: flex; align-items: center; justify-content: center;
    }
    .pdf-toolbar button:hover { color: var(--txt); background: var(--bg3); }
    .pdf-toolbar button.active {
      background: var(--cyan);
      color: var(--bg);
      border-color: var(--cyan);
    }
    .pdf-toolbar .sep {
      width: 1px;
      height: 22px;
      background: var(--border);
      margin: 0 2px;
    }
    .pdf-toolbar input[type="color"] {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
      padding: 0;
    }
    .pdf-toolbar .anno-status {
      color: var(--txt2);
      font-size: .72rem;
      padding: 0 6px;
      white-space: nowrap;
      font-family: var(--font-mono);
    }
    .pdf-toolbar .anno-status.saving { color: var(--yellow); }
    .pdf-toolbar .anno-status.saved  { color: var(--green); }
    .pdf-toolbar .anno-status.error  { color: var(--red); }

    .pdf-loading {
      color: var(--txt2, #9c9586);
      font-size: 0.9rem;
      margin-top: 40px;
    }

    .pdf-nav {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      border-top: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--txt2);
    }

    .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--txt3);
      border-top-color: var(--cyan);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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