/* ===================================================================
   annotate.css — TANSINH Bookshelf annotation bundle (v1, Jul 15 2026)
   Styles for the drawing menu, overlay canvas, and text tool.
   Matches the reader's warm paper theme (same tones as the note badge).
   =================================================================== */

/* The old pencil note badge is replaced by the annotation menu button.
   (The Note feature itself still lives inside the new menu.) */
.note-badge { display: none !important; }

/* ---------- overlay canvas (full screen, above the reader) ---------- */
.anno-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9990;              /* above content, below the menu + note popup */
  pointer-events: none;       /* JS turns this on while a tool is active */
  touch-action: none;
}

/* ---------- floating menu button (same spot as the old pencil) ---------- */
.anno-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9996;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #faf5e8;
  border: 1px solid #d4c9a8;
  color: #9a7a24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  transition: all 0.2s ease, bottom 0.3s ease;
}
.anno-fab:hover {
  background: #f3ead4;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  border-color: #b8a47a;
}
.anno-fab:active { transform: translateY(1px); }
/* a tool is active — the button turns deep brown and shows the tool's icon */
.anno-fab--live {
  background: #8b7348;
  border-color: #6b5a38;
  color: #fff;
}
.anno-fab--live:hover { background: #6b5a38; }
.anno-fab--open { border-color: #b8a47a; }

/* ---------- the compact tool menu ---------- */
.anno-menu {
  position: fixed;
  bottom: 74px;
  right: 20px;
  z-index: 9999;
  width: 244px;
  background: #faf8f4;
  border: 1.5px solid #d4c9a8;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition: all 0.2s ease, bottom 0.3s ease;
}
.anno-menu--open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* tool tiles: icon square + tiny label, 4 per row */
.anno-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.anno-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 2px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: #6b5a38;
  font-family: inherit;
}
.anno-tool i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f3ead4;
  color: #9a7a24;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: all 0.15s ease;
}
.anno-tool span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.anno-tool:hover { background: #f3ead4; }
.anno-tool:hover i { background: #ead9b5; }
.anno-tool--on {
  background: #8b7348;
  border-color: #6b5a38;
  color: #fff;
}
.anno-tool--on i { background: rgba(255,255,255,0.18); color: #fff; }
.anno-tool--on:hover { background: #6b5a38; }
/* the laser tile keeps its red dot so it's easy to spot */
.anno-tool[data-tool="laser"] i { color: #e11d48; }
.anno-tool--on[data-tool="laser"] i { color: #ffb3b3; }

.anno-divider {
  height: 1px;
  background: #e7dcc2;
  margin: 8px 2px;
}

/* colour swatches */
.anno-swatches {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 2px 0;
}
.anno-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.anno-swatch:hover { transform: scale(1.15); }
.anno-swatch--on {
  box-shadow: 0 0 0 2px #faf8f4, 0 0 0 4px #8b7348;
  transform: scale(1.1);
}

/* bottom action row: undo / clear / note */
.anno-actions {
  display: flex;
  gap: 5px;
}
.anno-act {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: #6b5a38;
  font-family: inherit;
  position: relative;
}
.anno-act i { font-size: 13px; }
.anno-act span { font-size: 9.5px; font-weight: 600; white-space: nowrap; }
.anno-act:hover { background: #f3ead4; }
.anno-act--danger { color: #a34a3a; }
.anno-act--danger:hover { background: #f5e0da; }
/* small dot on "Ghi chú" when this lesson already has a note */
.anno-act--hasnote::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b7348;
  border: 1.5px solid #faf8f4;
}

/* ---------- text tool: floating input + size control ---------- */
.anno-textbox {
  position: fixed;
  z-index: 10001;
  background: transparent;
  border: 1.5px dashed #b8a47a;
  border-radius: 6px;
  padding: 2px 6px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  outline: none;
  min-width: 60px;
}
.anno-textbox::placeholder { color: #b8a888; font-weight: 500; }
.anno-sizer {
  position: fixed;
  z-index: 10001;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #faf8f4;
  border: 1px solid #d4c9a8;
  border-radius: 8px;
  padding: 2px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.anno-sizer__b {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: #f3ead4;
  color: #6b5a38;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.anno-sizer__b:hover { background: #ead9b5; }
.anno-sizer__v {
  font-size: 11px;
  font-weight: 600;
  color: #6b5a38;
  min-width: 36px;
  text-align: center;
}

/* ---------- follow the same "push up" rules as the old badge ---------- */
body.wwhp-active .anno-fab  { bottom: 96px; }
body.wwhp-active .anno-menu { bottom: 150px; }

@media (max-width: 768px) {
  .anno-fab {
    bottom: 23px;
    right: 14px;
    width: 42px;
    height: 42px;
    font-size: 15px;
  }
  .anno-menu {
    bottom: 72px;
    right: 14px;
    width: min(244px, calc(100vw - 28px));
  }
  body.wwhp-active .anno-fab  { bottom: 104px; }
  body.wwhp-active .anno-menu { bottom: 152px; }
}

/* ---- Select-mark tool (Tô chọn) ---------------------------------
   While it's on: the live selection is tinted like the marker
   (colour follows the chosen swatch) instead of the blue default,
   and the lesson shows a text cursor so it's clear the tool is on. */
body.anno-marking #rdrLessonBody ::selection {
  background: var(--anno-mark-sel, rgba(240, 196, 83, 0.35));
}
body.anno-marking #rdrLessonBody {
  cursor: text;
}

/* ---- Docked quick bar (Samsung-Edge style, right screen edge) ------
   Loads with the reader: every tool one click away. The » button
   tucks it into a small edge handle; the handle brings it back.
   The open/closed choice is remembered per device. */
.anno-side {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 7px;
  background: #faf8f4;
  border: 1.5px solid #d4c9a8;
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  scrollbar-width: none;              /* keep the slim bar clean */
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.anno-side::-webkit-scrollbar { display: none; }
.anno-side--hidden {
  transform: translateY(-50%) translateX(calc(100% + 18px));
  opacity: 0;
  pointer-events: none;
}

.anno-side__b {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f3ead4;
  color: #9a7a24;
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 0 0 auto;
  position: relative;
  padding: 0;
}
.anno-side__b:hover { background: #ead9b5; }
.anno-side__b--on {
  background: #8b7348;
  border-color: #6b5a38;
  color: #fff;
}
.anno-side__b--on:hover { background: #6b5a38; }
/* the laser keeps its red dot here too */
.anno-side__tool[data-tool="laser"] { color: #e11d48; }
.anno-side__b--on[data-tool="laser"] { color: #ffb3b3; }
.anno-side__b--danger { color: #a34a3a; }
.anno-side__b--danger:hover { background: #f5e0da; }
/* small dot on the note button when this lesson already has a note */
.anno-side__b--hasnote::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b7348;
  border: 1.5px solid #faf8f4;
}
/* the » tuck-away button is quieter than the tools */
.anno-side__hide {
  background: transparent;
  color: #b8a47a;
  height: 22px;
}
.anno-side__hide:hover { background: #f3ead4; color: #6b5a38; }

.anno-side__div {
  width: 26px;
  height: 1px;
  background: #e7dcc2;
  margin: 4px 0;
  flex: 0 0 auto;
}
.anno-side__c {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer;
  padding: 0;
  margin: 1px 0;
  flex: 0 0 auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.anno-side__c:hover { transform: scale(1.15); }
.anno-side__c--on {
  box-shadow: 0 0 0 2px #faf8f4, 0 0 0 4px #8b7348;
  transform: scale(1.08);
}

/* the little edge handle shown while the bar is tucked away */
.anno-side-handle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9995;
  width: 17px;
  height: 62px;
  border: 1.5px solid #d4c9a8;
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: #faf5e8;
  color: #9a7a24;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  box-shadow: -3px 3px 12px rgba(0,0,0,0.10);
  opacity: 0.6;
  transition: opacity 0.2s ease, width 0.2s ease;
  padding: 0;
}
.anno-side-handle--show { display: flex; }
.anno-side-handle:hover { opacity: 1; width: 22px; }

/* smaller screens / short laptops: slimmer buttons so the bar fits */
@media (max-width: 768px), (max-height: 740px) {
  .anno-side { gap: 2px; padding: 5px 4px; right: 6px; }
  .anno-side__b { width: 29px; height: 29px; font-size: 12px; border-radius: 8px; }
  .anno-side__c { width: 15px; height: 15px; }
}

/* ===================================================================
   COLOUR FLYOUT (Jul 17 2026) — the bar shows ONE palette button now;
   hovering it (or tapping, on touch) opens this small box of swatches.
   The old inline swatches were removed from the bar. The box is
   position:fixed and placed by JS (the bar scrolls, and a scrolling
   box would clip anything poking out of it).
   =================================================================== */
.anno-side__cdot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e11d48;                 /* repainted live to the colour in use */
  border: 2px solid rgba(0,0,0,0.12);
}
.anno-cfly {
  position: fixed;
  transform: translateY(-50%);
  z-index: 9996;
  display: none;
  grid-template-columns: repeat(5, auto);
  gap: 8px;
  padding: 10px 11px;
  background: #faf8f4;
  border: 1.5px solid #d4c9a8;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
}
.anno-cfly--open { display: grid; }
.anno-cfly .anno-side__c { margin: 0; }
@media (max-width: 768px), (max-height: 740px) {
  .anno-side__cdot { width: 14px; height: 14px; }
  .anno-cfly { gap: 7px; padding: 8px 9px; }
}

/* ===================================================================
   HOVER CARD (Jul 17 2026) — point at any button on the bar and a
   small card pops out: tool name, what it does, and a tiny animated
   example. Body-level + fixed, placed by JS (same reason as the
   colour box: the bar scrolls). pointer-events:none so it can never
   swallow the mouse. Hidden on touch screens (no hover there).
   =================================================================== */
.anno-tip {
  position: fixed;
  transform: translateY(-50%);
  z-index: 9997;
  display: none;
  width: 212px;
  padding: 10px 12px 11px;
  background: #faf8f4;
  border: 1.5px solid #d4c9a8;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.14);
  pointer-events: none;
}
.anno-tip--open { display: block; }
.anno-tip__name { font-weight: 700; font-size: 13px; color: #6b5a38; margin-bottom: 2px; }
.anno-tip__text { font-size: 12px; color: #8a7a55; line-height: 1.45; }
.anno-tip__demo {
  margin-top: 8px;
  padding: 6px;
  background: #fffdf8;
  border: 1px solid #eee3c8;
  border-radius: 8px;
}
.anno-tip__demo svg { display: block; width: 100%; height: 46px; }
.anno-tip__demo svg text { font-family: "DM Sans", Inter, system-ui, sans-serif; }

/* the little animations inside the example */
@keyframes annoTipDraw { 0% { stroke-dashoffset: 300; } 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.anno-tip__demo .tipdraw { stroke-dasharray: 300; animation: annoTipDraw 2.4s ease-in-out infinite; }
@keyframes annoTipFade { 0% { opacity: 0; } 12% { opacity: 1; } 58% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
.anno-tip__demo .tipfade { animation: annoTipFade 2.8s ease-in-out infinite; }
@keyframes annoTipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.anno-tip__demo .tippulse { animation: annoTipPulse 1.1s ease-in-out infinite; }
@keyframes annoTipBlink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.anno-tip__demo .tipblink { animation: annoTipBlink 1s steps(1, end) infinite; }

/* touch screens have no hover — never show the card there */
@media (hover: none) {
  .anno-tip { display: none !important; }
}

/* the hover card slowly dissolves 2 s after it appears (see showTipFor) */
.anno-tip--fading { opacity: 0; transition: opacity 0.8s ease; }

/* reading switches on the bar (Tra từ / Word Wise / ENG Dict) */
.anno-side__rt--on { background: #8b7348; border-color: #6b5a38; color: #fff; }
.anno-side__rt--on:hover { background: #6b5a38; }
.anno-side__rt--dim { opacity: 0.45; }

/* the bar already scrolls by itself when taller than the screen
   (wheel or finger-drag); this stops that scroll leaking to the page */
.anno-side { overscroll-behavior: contain; }


/* ===================================================================
   TEMP (Jul 17 2026): mobile de-clutter — hide the drawing tool bar,
   its edge handle, and (with them) the Ghi chú note button on phones.
   The reading switches it carried already live in the sidebar's
   "Tùy chỉnh chế độ Đọc" panel. Notes are desktop-only for now.
   Delete this whole block to bring the bar back on mobile.
   =================================================================== */
@media (max-width: 768px) {
  .anno-side,
  .anno-side-handle { display: none !important; }
}


/* ---- shortcut-key chip + line in the hover card (Jul 17 2026) ---- */
.anno-tip__key {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #6b5a38;
  background: #f3ead4;
  border: 1px solid #d4c9a8;
  border-bottom-width: 2px;
  border-radius: 6px;
  vertical-align: 1px;
}
.anno-tip__short {
  margin-top: 6px;
  font-size: 11.5px;
  color: #8b7348;
}
.anno-tip__short b { color: #6b5a38; }