/* Figma-style click-to-comment, for the static PRD/doc pages on roadmap.flyer.vn.
   Deliberately self-contained: it does not read the host page's --brand or
   theme tokens, because the same script runs across ~140 pages that carry
   three different theme systems (or none at all). One fixed palette instead. */
:root{
  --docc-brand:#7A3FC1;
  --docc-brand-dark:#5c2f95;
  --docc-ink:#1a1320;
  --docc-sub:#6b6275;
  --docc-line:#E7E9EC;
  --docc-card:#ffffff;
  --docc-shadow:0 10px 30px rgba(26,19,32,.16), 0 2px 8px rgba(26,19,32,.08);
  --docc-font:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Open Sans Light, self-hosted for this widget alone: most of the ~140 pages
   this runs on define their own body font and never load Open Sans at all,
   and the site's own copy (index.html) only carries weights 400-700 -- 300
   would just be clamped up to 400 by the browser, silently undoing "light". */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/opensans-300-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/opensans-300-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* Halfway down the right edge. The two corners on that side are already taken
   — the EN/VI switcher sits at the top, the back-to-top button at the bottom —
   and the middle is the one spot that never moves as a page grows or shrinks,
   on every one of the ~140 pages this runs on. Position is pure CSS: no
   measuring of other widgets, so nothing to drift out of sync. */
#docc-dock{
  position:fixed;top:50%;right:16px;transform:translateY(-50%);z-index:9000;
  display:flex;align-items:center;gap:8px;
}
#docc-toggle{
  position:relative;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--docc-card);color:var(--docc-brand);
  box-shadow:var(--docc-shadow);display:grid;place-items:center;flex:none;
  transition:background .15s,color .15s,transform .1s;
}
#docc-toggle:hover{transform:scale(1.06)}
#docc-toggle.on{background:var(--docc-brand);color:#fff}
#docc-toggle .n{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--docc-brand-dark);color:#fff;font-family:var(--docc-font);font-weight:700;font-size:10px;line-height:16px;
  text-align:center;box-shadow:0 0 0 2px var(--docc-card);
}
#docc-toggle.on .n{background:#fff;color:var(--docc-brand)}
#docc-toggle.pulse::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--docc-brand);
  animation:docc-pulse 1.8s ease-out infinite;
}
@keyframes docc-pulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}

html.docc-mode-on body{cursor:default}
html.docc-mode-on [data-docc-cand]{cursor:crosshair}
html.docc-mode-on [data-docc-cand]:hover{
  outline:2px dashed color-mix(in srgb, var(--docc-brand) 55%, transparent);
  outline-offset:3px;border-radius:3px;
}

/* Pins: a small avatar-colored dot glued near where the comment was placed,
   positioned as a percentage inside its anchored block so it survives a
   reflow (resize, EN translation, a different font from /profile) instead of
   drifting to a fixed page pixel. */
.docc-pin{
  position:absolute;z-index:60;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50% 50% 50% 4px;border:2px solid #fff;
  background:var(--docc-brand);color:#fff;font-family:var(--docc-font);font-weight:700;font-size:11px;line-height:22px;
  text-align:center;cursor:pointer;box-shadow:0 2px 6px rgba(26,19,32,.28);
  transition:transform .1s;
}
.docc-pin:hover{transform:scale(1.12)}
.docc-pin.resolved{opacity:.55;filter:grayscale(.4)}

/* The composer/thread popover. Anchored near the click on desktop, a bottom
   sheet on a phone — same reasoning as the board's mobile filter sheet: a
   floating box pinned to a fingertip-sized tap point is not usable there. */
.docc-pop{
  position:absolute;z-index:9100;width:320px;max-width:calc(100vw - 28px);
  background:var(--docc-card);border-radius:14px;box-shadow:var(--docc-shadow);
  color:var(--docc-ink);font-family:var(--docc-font);font-weight:300;font-size:14px;line-height:1.5;
  overflow:hidden;
}
.docc-pop-head{display:flex;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid var(--docc-line)}
.docc-pop-head b{font-size:12.5px;color:var(--docc-sub);flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docc-pop-x{border:0;background:none;color:var(--docc-sub);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;flex:none}
.docc-pop-x:hover{color:var(--docc-ink)}
.docc-thread{max-height:280px;overflow-y:auto;padding:4px 0}
.docc-c{padding:10px 12px;border-bottom:1px solid var(--docc-line)}
.docc-c:last-child{border-bottom:0}
.docc-c-who{display:flex;align-items:baseline;gap:7px;margin-bottom:3px}
.docc-c-name{font-weight:650;font-size:12.5px}
.docc-c-when{font-size:11px;color:var(--docc-sub)}
.docc-c-body{font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.docc-c-body b.docc-mention{color:var(--docc-brand);font-weight:650}
.docc-compose{padding:10px 12px;border-top:1px solid var(--docc-line);position:relative}
.docc-compose textarea{
  width:100%;min-height:56px;resize:vertical;border:1px solid var(--docc-line);border-radius:8px;
  padding:8px 9px;font-family:var(--docc-font);font-weight:300;font-size:13.5px;line-height:1.45;color:var(--docc-ink);box-sizing:border-box;
}
.docc-compose textarea:focus{outline:2px solid color-mix(in srgb, var(--docc-brand) 30%, transparent);border-color:var(--docc-brand)}
.docc-compose-bar{display:flex;align-items:center;gap:8px;margin-top:7px}
.docc-hint{font-size:11px;color:var(--docc-sub);flex:1}
.docc-send{
  border:0;border-radius:7px;background:var(--docc-brand);color:#fff;font-family:var(--docc-font);font-weight:600;font-size:12.5px;line-height:1;
  padding:8px 13px;cursor:pointer;flex:none;
}
.docc-send:hover{background:var(--docc-brand-dark)}
.docc-send:disabled{opacity:.5;cursor:default}
.docc-mentionbox{
  position:absolute;left:12px;right:12px;bottom:100%;margin-bottom:4px;z-index:2;
  background:var(--docc-card);border:1px solid var(--docc-line);border-radius:8px;
  box-shadow:var(--docc-shadow);overflow-y:auto;
  /* Grows upward from the textarea, so on a comment left near the top of a
     page a tall fixed max-height can run off the top of the browser window
     entirely — 45vh keeps it inside the viewport at any scroll position. */
  max-height:min(280px, 45vh);
}
.docc-mentionbox div{padding:7px 10px;font-size:12.5px;cursor:pointer}
.docc-mentionbox div:hover,.docc-mentionbox div.sel{background:color-mix(in srgb, var(--docc-brand) 10%, transparent)}
.docc-mentionbox .em{color:var(--docc-sub);font-size:11px;margin-left:5px}

@media (max-width:720px){
  .docc-pop{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    border-radius:16px 16px 0 0;max-height:78vh;display:flex;flex-direction:column;
  }
  .docc-thread{flex:1}
  #docc-dock{right:12px}
}

.docc-toast{
  position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:9200;
  background:var(--docc-ink);color:#fff;font-family:var(--docc-font);font-weight:300;font-size:13px;line-height:1.4;
  padding:9px 16px;border-radius:99px;box-shadow:var(--docc-shadow);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.docc-toast.show{opacity:1}


/* ---- First-run onboarding: a callout pointing at the dock, then a live demo
   on an actual paragraph. Shown once ever (localStorage), replayable from the
   small "?" button beside the toggle. ---- */
.docc-onboard{
  position:fixed;top:50%;right:104px;transform:translateY(-50%);z-index:9050;
  width:280px;background:var(--docc-card);border-radius:14px;box-shadow:var(--docc-shadow);
  padding:14px 16px;color:var(--docc-ink);font-family:var(--docc-font);font-weight:300;font-size:14px;line-height:1.5;
  text-align:center;
}
.docc-onboard::after{
  content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:8px solid transparent;border-left-color:var(--docc-card);
}
.docc-onboard .icon{
  width:34px;height:34px;border-radius:50%;background:var(--docc-brand-soft,#F5EFFB);color:var(--docc-brand);
  display:grid;place-items:center;margin:0 auto 8px;
}
.docc-onboard b{display:block;font-size:14px;margin-bottom:4px}
.docc-onboard p{margin:0 0 12px;font-size:12.5px;color:var(--docc-sub)}
.docc-onboard-bar{display:flex;gap:8px;justify-content:center}
.docc-onboard-bar button{border-radius:7px;font-family:var(--docc-font);font-weight:600;font-size:12.5px;line-height:1;padding:8px 13px;cursor:pointer;border:0}
.docc-onboard-try{background:var(--docc-brand);color:#fff}
.docc-onboard-try:hover{background:var(--docc-brand-dark)}
.docc-onboard-skip{background:none;color:var(--docc-sub)}
.docc-onboard-skip:hover{color:var(--docc-ink)}

[data-docc-demo]{
  outline:2px solid var(--docc-brand) !important;outline-offset:3px;border-radius:3px;
  animation:docc-demo-glow 1.4s ease-in-out infinite;
}
@keyframes docc-demo-glow{0%,100%{outline-color:color-mix(in srgb, var(--docc-brand) 45%, transparent)}50%{outline-color:var(--docc-brand)}}
.docc-demo-tip{
  position:absolute;z-index:70;background:var(--docc-ink);color:#fff;font-family:var(--docc-font);font-weight:600;font-size:12px;line-height:1.3;
  padding:6px 11px;border-radius:8px;white-space:nowrap;pointer-events:none;
}
.docc-demo-tip::after{
  content:'';position:absolute;left:16px;top:100%;border:6px solid transparent;border-top-color:var(--docc-ink);
}

@media (max-width:720px){
  .docc-onboard{width:auto;left:16px;right:16px;top:auto;bottom:24px;transform:none}
  .docc-onboard::after{display:none}
}