/* ===== Scribble Overlay — teaching annotation ===== */

/* Floating pen toggle */
.scribble-toggle{
  position:fixed;bottom:24px;right:24px;z-index:500;
  width:48px;height:48px;border-radius:50%;
  background:var(--surface,#fff);border:1.5px solid var(--border,rgba(0,0,0,0.1));
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s ease;
  color:var(--text-secondary,#5f5f63);
}
.scribble-toggle:hover{
  transform:translateY(-2px);box-shadow:0 6px 22px rgba(0,0,0,0.16);
  border-color:var(--border-strong,rgba(0,0,0,0.2));
}
.scribble-toggle.active{
  background:#f97316;color:#fff;border-color:#f97316;
  box-shadow:0 4px 18px rgba(249,115,22,0.35);
}
.scribble-toggle svg{width:22px;height:22px}

/* Toolbar */
.scribble-toolbar{
  position:fixed;bottom:82px;right:24px;z-index:500;
  display:flex;flex-direction:column;gap:4px;
  background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,0.1));
  border-radius:14px;padding:8px;
  box-shadow:0 8px 28px rgba(0,0,0,0.14);
  animation:stb-in .2s ease;
  align-items:center;
}
@keyframes stb-in{from{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:none}}
.scribble-toolbar.hidden{display:none}

.stb-btn{
  width:38px;height:38px;border-radius:10px;border:none;
  background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary,#5f5f63);
  transition:all .15s ease;
}
.stb-btn:hover{background:var(--surface-2,#fafafa);color:var(--text-primary,#1d1d1f)}
.stb-btn.active{background:#f97316;color:#fff}
.stb-btn svg{width:18px;height:18px}

/* Divider between sections */
.stb-divider{
  width:28px;height:1px;
  background:var(--border,rgba(0,0,0,0.1));
  margin:2px 0;
}

/* Color swatches */
.stb-colors{
  display:flex;gap:6px;padding:4px 0;
}
.stb-color{
  width:22px;height:22px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:all .15s ease;
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}
.stb-color:hover{transform:scale(1.15)}
.stb-color.active{border-color:var(--text-primary,#1d1d1f);transform:scale(1.15)}

/* Size slider */
.stb-size{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;
  width:38px;
}
.stb-size input[type=range]{
  writing-mode:vertical-lr;direction:rtl;
  width:20px;height:60px;
  accent-color:#f97316;
  cursor:pointer;
}
.stb-size-val{
  font-size:10px;font-weight:700;
  color:var(--text-tertiary,#86868b);
  font-variant-numeric:tabular-nums;
}

/* Canvas overlay */
.scribble-canvas{
  position:absolute;z-index:50;
  pointer-events:auto;
  cursor:crosshair;
  touch-action:none;
}
.scribble-canvas.hidden{display:none;pointer-events:none}

/* Dark mode adjustments */
@media(max-width:768px){
  .scribble-toggle{
    background:var(--surface,#1c1c1e);border-color:var(--border,rgba(255,255,255,0.08));
    box-shadow:0 4px 16px rgba(0,0,0,0.4);
  }
  .scribble-toolbar{
    background:var(--surface,#1c1c1e);border-color:var(--border,rgba(255,255,255,0.08));
    box-shadow:0 8px 28px rgba(0,0,0,0.5);
  }
  .stb-btn:hover{background:var(--surface-2,#2c2c2e)}
  .stb-color.active{border-color:#fff}
  .scribble-toggle{bottom:16px;right:16px;width:44px;height:44px}
  .scribble-toolbar{bottom:70px;right:16px}
}