/* =====================================================
   WHITEBOARD CONTAINER
===================================================== */

.whiteboard-container {

    position: relative;

    flex:
        1 1 auto;

    width: 100%;

    height: 0;

    min-width: 0;

    min-height: 0;

    overflow: hidden;

    background: white;

    border:
        1px solid #d9e0e8;

    border-radius:
        0 0 9px 9px;
}


/* =====================================================
   CANVAS
===================================================== */

#whiteboard {

    position: absolute;

    left: 0;
    top: 0;

    display: block;

    width: 100%;
    height: 100%;

    background: white;

    cursor: crosshair;

    touch-action: none;

    user-select: none;
}


/* =====================================================
   ERASER CIRCLE
===================================================== */

.eraser-cursor {

    position: absolute;

    display: none;

    pointer-events: none;

    transform:
        translate(-50%, -50%);

    border:
        2px solid #ef4444;

    border-radius: 50%;

    background:
        rgba(239, 68, 68, 0.08);

    box-shadow:
        0 0 0 1px white;

    z-index: 100;
}


/* =====================================================
   PASTE HINT
===================================================== */

.paste-hint {

    position: absolute;

    left: 50%;

    bottom: 15px;

    transform:
        translateX(-50%);

    background:
        rgba(15, 23, 42, 0.75);

    color: white;

    padding:
        6px 12px;

    border-radius: 20px;

    font-size: 11px;

    pointer-events: none;

    opacity: 0.7;
}


/* =====================================================
   ERASER MODE
===================================================== */

.whiteboard-container.eraser-mode
#whiteboard {

    cursor: none;
}
/* =====================================================
   EDITABLE BOARD OBJECT LAYER
===================================================== */
.board-object-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}

.board-object {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    border: 1px dashed transparent;
    user-select: none;
    touch-action: none;
}
.board-object.selected { border-color: #2563eb; }
.board-object-content { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.formula-object .board-object-content { display:block; padding:2px; box-sizing:border-box; }
.formula-object .formula-object-title { display:block; }
.shape-object .board-object-content canvas { display:block; width:100%; height:100%; }
.formula-object { background:rgba(255,255,255,.96); border-radius:8px; padding:10px 14px; box-shadow:0 2px 8px rgba(15,23,42,.10); }
.formula-object.selected { box-shadow:0 0 0 2px rgba(37,99,235,.18); }
.formula-object-title { font-size:12px; font-weight:700; color:#64748b; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.formula-object-expression { font-size:22px; line-height:1.25; text-align:center; width:100%; overflow:hidden; }
.object-controls { display:none; position:absolute; inset:0; pointer-events:none; }
.board-object.selected .object-controls { display:block; }
.object-delete { pointer-events:auto; position:absolute; right:-11px; top:-11px; width:24px; height:24px; border:0; border-radius:50%; background:#ef4444; color:#fff; font-size:17px; line-height:24px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.object-resize { pointer-events:auto; position:absolute; right:-6px; bottom:-6px; width:14px; height:14px; border:2px solid #2563eb; background:#fff; border-radius:3px; cursor:nwse-resize; box-sizing:border-box; }
.board-object.selected:hover { cursor:move; }
.board-object { touch-action:none; }
.object-delete { z-index:5; }
.object-resize { z-index:5; }


/* Mobile/tablet usability */
.board-object-layer, #whiteboard { -webkit-user-select:none; user-select:none; }
.text-object-editor { width:100%; height:100%; box-sizing:border-box; padding:12px; outline:none; white-space:pre-wrap; overflow:auto; font-size:20px; line-height:1.4; color:#111827; background:rgba(255,255,255,.94); border-radius:8px; }
.text-object-editor:focus { box-shadow:inset 0 0 0 2px #2563eb; }
.sticker-object-content { font-size:64px; line-height:1; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.board-object.image-object img { width:100%; height:100%; object-fit:contain; }
.area-selection { position:absolute; border:2px dashed #2563eb; background:rgba(37,99,235,.10); pointer-events:none; z-index:80; box-sizing:border-box; }
.area-select-mode #whiteboard { cursor:crosshair; }
.zoomed { overflow:auto; }
.zoom-level { min-width:44px; text-align:center; font-size:11px; font-weight:700; }
.pdf-viewer { position:absolute; inset:0; z-index:200; background:#f1f5f9; display:flex; flex-direction:column; }
.pdf-viewer[hidden] { display:none; }
.pdf-viewer-toolbar { height:42px; flex:0 0 42px; display:flex; align-items:center; gap:8px; padding:0 10px; background:#0f172a; color:#fff; z-index:4; }
.pdf-viewer-toolbar strong { margin-right:auto; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pdf-viewer-toolbar button { border:1px solid #475569; background:#1e293b; color:#fff; border-radius:5px; padding:5px 9px; }
#pdfFrame { flex:1; width:100%; height:100%; border:0; background:#fff; transform-origin:0 0; }
.pdf-writing-layer { position:absolute; left:0; right:0; top:42px; bottom:0; pointer-events:none; z-index:5; overflow:hidden; }
.pdf-writing-layer.active { pointer-events:auto; cursor:crosshair; }
.pdf-writing-layer canvas { width:100%; height:100%; display:block; touch-action:none; }
@media (max-width: 900px) {
  .header-tools { flex-wrap:wrap; }
  .board-toolbar { overflow-x:auto; }
  .tool-button { min-width:40px; min-height:40px; }
  .eraser-cursor { border-width:3px; }
}
@media (max-width: 600px) {
  .app-header { min-height:58px; }
  .brand-text p { display:none; }
  .brand-text h1 { font-size:16px; }
  .header-tools .control-label { font-size:10px; }
  .page-tools { font-size:11px; }
}
.stroke-size-preview{position:absolute;display:none;pointer-events:none;transform:translate(-50%,-50%);border:2px solid #2563eb;border-radius:50%;background:rgba(37,99,235,.08);z-index:110;box-sizing:border-box;}
.pdf-writing-layer.active + * { pointer-events:none; }

/* Interaction routing: objects are transparent to pen/highlighter/eraser so
   writing can continue directly over images, shapes and formulas. Objects
   become interactive only in Select mode. */
.board-object-layer.select-mode { pointer-events: auto; }
.board-object-layer:not(.select-mode) { pointer-events: none; }
.board-object-layer:not(.select-mode) .board-object { pointer-events: none; }
.board-object-layer.select-mode .board-object { pointer-events: auto; }
.stroke-size-preview { z-index: 999; border-width: 2px; }
.stroke-size-preview.eraser-preview { border-color: #ef4444; background: rgba(239,68,68,.08); }
#whiteboardContainer { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#whiteboard { will-change: transform; }
.board-object-layer { will-change: transform; }

/* Board-only zoom: the workspace chrome/panels remain fixed. */
.whiteboard-container.zoomed { overflow: auto; }
.whiteboard-container.zoomed #whiteboard,
.whiteboard-container.zoomed #boardObjectLayer { transform-origin: 0 0; }
#whiteboard, #boardObjectLayer { transform-origin: 0 0; }


/* Final board zoom model: panels/toolbars remain fixed; only the writing stage zooms. */
#whiteboardContainer { position: relative; overflow: hidden; }
#whiteboardContainer > #whiteboard, #whiteboardContainer > #boardObjectLayer {
  transform-origin: 0 0;
  max-width: none;
  max-height: none;
}
#boardObjectLayer { pointer-events: none; }
#boardObjectLayer.select-mode { pointer-events: auto; }
.object-resize { cursor: nwse-resize; }

/* FINAL BOARD-ONLY ZOOM MODEL */
#whiteboardContainer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#whiteboardContainer > #whiteboard,
#whiteboardContainer > #boardObjectLayer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  max-width: none !important;
  max-height: none !important;
}
#whiteboardContainer > #boardObjectLayer { z-index: 30; }
#whiteboardContainer > #eraserCursor { z-index: 100; }
#whiteboardContainer.zoomed { overflow: auto; }
/* Keep the eraser indicator in screen/UI coordinates, never inside zoom. */
.eraser-cursor { z-index: 1000 !important; pointer-events: none !important; }
/* A single visible eraser indicator: the dedicated cursor owns this job. */
.stroke-size-preview.eraser-preview { display: none !important; }

/* === FINAL STABLE BOARD STAGE === */
#whiteboardContainer { position:relative; overflow:hidden; }
#whiteboardContainer > #whiteboard,
#whiteboardContainer > #boardObjectLayer { position:absolute; left:0; top:0; transform-origin:0 0; max-width:none !important; max-height:none !important; }
#whiteboardContainer > #whiteboard { z-index:10; }
#whiteboardContainer > #boardObjectLayer { z-index:30; inset:auto; pointer-events:none; overflow:visible; }
#whiteboardContainer > #boardObjectLayer.select-mode { pointer-events:auto; }
.stroke-size-preview { pointer-events:none !important; transform:translate(-50%,-50%); z-index:1100; }
.stroke-size-preview.eraser-preview { display:none !important; }
.eraser-cursor { z-index:1200 !important; pointer-events:none !important; transform:translate(-50%,-50%); }
.object-controls { pointer-events:none; }
.board-object.selected .object-controls { pointer-events:none; }
.object-delete,.object-resize { pointer-events:auto; }
.board-object { touch-action:none; }

/* PDF editable annotation layer and sticker palette */
.pdf-object-layer{position:absolute;inset:42px 0 0 0;z-index:8;pointer-events:none;overflow:hidden;}
.pdf-writing-layer.active .pdf-object-layer{pointer-events:auto;}
.pdf-object{position:absolute;box-sizing:border-box;border:1px dashed transparent;background:rgba(255,255,255,.88);border-radius:6px;pointer-events:auto;touch-action:none;}
.pdf-object.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.16);}
.pdf-object-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pdf-object canvas{width:100%;height:100%;display:block;}
.pdf-formula .pdf-object-content{display:block;padding:8px;}
.pdf-formula-title{font-size:11px;font-weight:700;color:#64748b;margin-bottom:4px;}
.pdf-formula-expression{font-size:21px;text-align:center;}
.pdf-object-delete{position:absolute;right:-10px;top:-10px;width:22px;height:22px;border:0;border-radius:50%;background:#ef4444;color:white;line-height:20px;cursor:pointer;}
.pdf-object-resize{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#fff;border:2px solid #2563eb;border-radius:3px;cursor:nwse-resize;}
.sticker-palette{position:fixed;z-index:5000;display:grid;grid-template-columns:repeat(6,42px);gap:6px;max-height:360px;overflow:auto;padding:8px;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.sticker-palette button{width:42px;height:42px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:8px;font-size:24px;cursor:pointer;}
.sticker-palette button:hover{transform:scale(1.08);}

/* PDF annotation layer: one stable coordinate system above the PDF iframe. */
.pdf-writing-layer { position:absolute; left:0; right:0; top:42px; bottom:0; pointer-events:none; z-index:20; overflow:hidden; }
.pdf-writing-layer.active { pointer-events:auto; }
.pdf-writing-layer .pdf-ink-canvas,
.pdf-writing-layer .pdf-shape-preview { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.pdf-writing-layer .pdf-ink-canvas { z-index:1; }
.pdf-writing-layer .pdf-shape-preview { z-index:2; }
.pdf-writing-layer .pdf-object-layer { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }
.pdf-writing-layer.active .pdf-object-layer { pointer-events:none; }
.pdf-writing-layer.active .pdf-object-layer .pdf-object { pointer-events:auto; }
.pdf-object { position:absolute; box-sizing:border-box; border:1px dashed transparent; background:rgba(255,255,255,.82); border-radius:6px; touch-action:none; }
.pdf-object.selected { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.16); }
.pdf-object-content { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pdf-object-content canvas { width:100%; height:100%; display:block; }
.pdf-formula .pdf-object-content { display:block; padding:8px; }
.pdf-formula-title { font-size:11px; font-weight:700; color:#64748b; margin-bottom:4px; }
.pdf-formula-expression { font-size:21px; text-align:center; }
.pdf-object-delete { position:absolute; right:-10px; top:-10px; width:22px; height:22px; border:0; border-radius:50%; background:#ef4444; color:#fff; line-height:20px; cursor:pointer; }
.pdf-object-resize { position:absolute; right:-7px; bottom:-7px; width:14px; height:14px; border:2px solid #2563eb; background:#fff; border-radius:3px; cursor:nwse-resize; }

/* =====================================================
   FINAL STABLE TEXT / PDF ANNOTATION UI
===================================================== */
.text-object-editor,
.pdf-text-editor {
  width:100%; height:100%; box-sizing:border-box; resize:none;
  border:0; outline:0; padding:12px; margin:0;
  background:rgba(255,255,255,.96); color:#111827;
  font:20px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;
  white-space:pre-wrap; overflow:auto;
}
.text-object-editor:focus,
.pdf-text-editor:focus { box-shadow:inset 0 0 0 2px #2563eb; }
.pdf-sticker-content { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;line-height:1; }
.pdf-page-controls { display:flex;align-items:center;gap:5px; }
.pdf-page-controls input { width:48px; height:28px; box-sizing:border-box; text-align:center; border:1px solid #64748b; border-radius:5px; background:#fff; color:#111827; }
.pdf-page-controls span { min-width:70px; text-align:center; font-size:12px; }
.pdf-viewer-toolbar { flex-wrap:nowrap; }
@media (max-width:700px) {
  .pdf-viewer-toolbar { overflow-x:auto; }
  .pdf-viewer-toolbar strong { min-width:90px; }
  .pdf-page-controls span { display:none; }
}

/* PDF export/print: keep the PDF page and annotation layer together. */
@media print {
  body.pdf-printing * { visibility:hidden !important; }
  body.pdf-printing #pdfViewer,
  body.pdf-printing #pdfViewer *,
  body.pdf-printing #pdfViewer iframe,
  body.pdf-printing #pdfWritingLayer,
  body.pdf-printing #pdfWritingLayer * { visibility:visible !important; }
  body.pdf-printing #pdfViewer { position:fixed !important; inset:0 !important; display:block !important; background:#fff !important; }
  body.pdf-printing .pdf-viewer-toolbar { display:none !important; }
  body.pdf-printing #pdfFrame { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; }
  body.pdf-printing .pdf-writing-layer { top:0 !important; bottom:0 !important; }
  body.pdf-printing .pdf-object-delete, body.pdf-printing .pdf-object-resize { display:none !important; }
  body.pdf-printing .pdf-object { border:0 !important; background:transparent !important; box-shadow:none !important; }
}

/* Easy object editing: only the selected object is active; other board
   objects remain visually present but cannot be moved accidentally. */
.board-object { cursor: default; }
.board-object.selected { cursor: move; }
.board-object.selected .object-resize {
  width: 20px; height: 20px; right: -10px; bottom: -10px;
  border-width: 2px; z-index: 20; touch-action: none;
}
.board-object.selected .object-delete {
  min-width: 26px; min-height: 26px; z-index: 21; touch-action: manipulation;
}
.text-object-editor { cursor: text; }

/* FINAL OBJECT PLACEMENT SAFEGUARD */
#boardObjectLayer { pointer-events:none; }
#boardObjectLayer.select-mode { pointer-events:auto; }
#boardObjectLayer .board-object { pointer-events:none; }
#boardObjectLayer.select-mode .board-object { pointer-events:auto; }
#boardObjectLayer:not(.select-mode) .object-controls { pointer-events:none !important; }


/* FINAL TABLET/STYLUS FIXES */
#whiteboardContainer, #whiteboard {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none !important;
}
.stroke-size-preview {
  display: none;
  position: absolute;
  pointer-events: none !important;
  border: 2px solid #2563eb;
  border-radius: 50%;
  background: rgba(37,99,235,.08);
  box-sizing: border-box;
  transform: translate(-50%,-50%);
  z-index: 2000 !important;
}
.stroke-size-preview.eraser-preview { display: none !important; }
.eraser-cursor {
  display: none;
  position: absolute;
  pointer-events: none !important;
  border: 2px solid #ef4444;
  border-radius: 50%;
  background: rgba(239,68,68,.08);
  transform: translate(-50%,-50%);
  z-index: 2100 !important;
}


/* FINAL MULTI-DEVICE + CURSOR FIX */
.stroke-size-preview {
  display: block !important;
  min-width: 8px; min-height: 8px;
}
.stroke-size-preview.eraser-preview { display: none !important; }
.eraser-cursor {
  pointer-events: none !important;
}
#whiteboardContainer, #whiteboardContainer * {
  -webkit-tap-highlight-color: transparent;
}