/* المسودة — floating draft panel (Phase 1).
   Layering: above the navbar (100) so the workspace is whole wherever it
   is dragged, below the PWA banner (200), pickers (250) and modals (300)
   so critical dialogs always win. Existing tokens only. */

#lub-draft-panel{
  position:fixed;z-index:150;display:none;flex-direction:column;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg,14px);box-shadow:var(--shadow);
  min-width:280px;min-height:180px;max-width:calc(100vw - 16px);
  max-height:calc(100vh - 16px);overflow:hidden;resize:both;
}
#lub-draft-panel.ld-open{display:flex}
#lub-draft-panel.ld-min{
  min-height:0;height:auto !important;resize:none;
}
#lub-draft-panel.ld-min .ld-body{display:none}

.ld-head{
  display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  padding:.5rem .75rem;cursor:move;user-select:none;touch-action:none;
  background:var(--bg2);border-bottom:1px solid var(--border);
}
#lub-draft-panel.ld-min .ld-head{border-bottom:none}
.ld-grip{color:var(--text3);font-size:.8rem;letter-spacing:-2px}
.ld-title{font-weight:700;font-size:.9rem;color:var(--text)}
.ld-status{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.72rem;color:var(--text3);text-align:left;
}
.ld-status.ld-ok{color:var(--accent)}
.ld-status.ld-err{color:var(--danger)}

.ld-btn{
  flex:0 0 auto;width:28px;height:28px;border:1px solid var(--border);
  border-radius:8px;background:var(--card);color:var(--text2);
  font-size:.85rem;line-height:1;cursor:pointer;
}
.ld-btn:hover{background:var(--border);color:var(--text)}
.ld-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.ld-body{flex:1;display:flex;min-height:0}
#ld-text{
  flex:1;width:100%;min-height:0;resize:none;border:none;outline:none;
  background:var(--card);color:var(--text);
  font-family:inherit;font-size:.95rem;line-height:1.9;
  padding:.9rem 1rem;direction:rtl;
}
#ld-text:focus-visible{box-shadow:inset 0 0 0 2px var(--primary)}

.ld-login{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;color:var(--text2);
  font-size:.9rem;padding:1rem;text-align:center;
}
.ld-login-link{color:var(--primary2);font-weight:700;text-decoration:none}
.ld-login-link:hover{text-decoration:underline}

/* ── Mobile bottom sheet (≤640px): full width, two heights, vertical
      gesture on the header; free drag and resize are disabled. ──────── */
@media (max-width: 640px){
  #lub-draft-panel.ld-sheet{
    left:0 !important;right:0 !important;top:auto !important;bottom:0;
    width:100% !important;max-width:100%;height:62vh !important;
    border-radius:16px 16px 0 0;resize:none;
  }
  #lub-draft-panel.ld-sheet.ld-min{height:auto !important}
  #lub-draft-panel.ld-sheet .ld-head{cursor:grab;padding:.6rem .9rem}
  /* Leave the keyboard some room. */
  #lub-draft-panel.ld-sheet #ld-text{font-size:1rem}
}

/* ── Tabs: ✍️ كتابة | 🎨 سبورة ─────────────────────────────────────── */
.ld-tabs{
  display:flex;gap:.35rem;flex:0 0 auto;padding:.4rem .6rem;
  background:var(--bg2);border-bottom:1px solid var(--border);
}
#lub-draft-panel.ld-min .ld-tabs{display:none}
.ld-tab{
  border:1px solid transparent;border-radius:8px;background:none;
  color:var(--text2);font-family:inherit;font-size:.8rem;font-weight:700;
  padding:.25rem .7rem;cursor:pointer;
}
.ld-tab:hover{background:var(--border);color:var(--text)}
.ld-tab.ld-tab-on{background:var(--card);border-color:var(--border);color:var(--text)}
.ld-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.ld-hidden{display:none !important}

/* ── The board: Excalidraw owns everything inside this box ─────────── */
#ld-board{flex:1;min-height:0;min-width:0;position:relative}
#ld-board .excalidraw{--zIndex-canvas:1}
.ld-board-loading{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:100%;color:var(--text3);font-size:.85rem;
}
.ld-board-loading.ld-err{color:var(--danger)}

/* The board needs more room than quick notes: taller sheet on phones. */
@media (max-width: 640px){
  #lub-draft-panel.ld-sheet.ld-board-mode{height:78vh !important}
  #lub-draft-panel.ld-sheet.ld-board-mode.ld-min{height:auto !important}
}