/* JoyJoy contextual bot help + scroll-to-top + bot sidebar direction controls, v3 */
.jj-bot-help-float{
  --jj-help-accent:#32c5ff;
  --jj-help-accent-strong:#149fd1;
  --jj-help-bottom:18px;
  --jj-help-right:18px;
  position:fixed;
  right:calc(var(--jj-help-right) + env(safe-area-inset-right,0px));
  bottom:calc(var(--jj-help-bottom) + env(safe-area-inset-bottom,0px));
  z-index:10016;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--jj-help-accent) 72%,#fff);
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--jj-help-accent) 96%,#fff 4%),var(--jj-help-accent-strong));
  color:#fff!important;
  text-decoration:none!important;
  font:900 20px/1 "Nunito","Segoe UI",Arial,sans-serif;
  box-shadow:0 10px 28px color-mix(in srgb,var(--jj-help-accent) 28%,transparent),0 2px 8px rgba(15,23,42,.16);
  cursor:pointer;
  isolation:isolate;
  transform:translateZ(0);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .16s ease,visibility .16s ease,bottom .18s ease;
}
.jj-bot-help-float::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  pointer-events:none;
}
.jj-bot-help-float::after{
  content:attr(data-help-label);
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(5px);
  min-width:max-content;
  max-width:min(230px,calc(100vw - 90px));
  padding:8px 10px;
  border:1px solid var(--account-border,#d7e2ef);
  border-radius:10px;
  background:var(--account-surface,#fff);
  color:var(--account-text,#18243a);
  box-shadow:0 8px 24px rgba(15,23,42,.13);
  font:800 12px/1.25 "Nunito","Segoe UI",Arial,sans-serif;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.jj-bot-help-float:hover,.jj-bot-help-float:focus-visible{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 34px color-mix(in srgb,var(--jj-help-accent) 36%,transparent),0 3px 10px rgba(15,23,42,.18);
  filter:saturate(1.05);
  outline:3px solid color-mix(in srgb,var(--jj-help-accent) 22%,transparent);
  outline-offset:3px;
}
.jj-bot-help-float:hover::after,.jj-bot-help-float:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}
.jj-bot-help-float[data-bot="tunetune"]{--jj-help-accent:#32c5ff;--jj-help-accent-strong:#168fc5}
.jj-bot-help-float[data-bot="shieldy"]{--jj-help-accent:#2da44e;--jj-help-accent-strong:#21843e}
.jj-bot-help-float[data-bot="gamey"]{--jj-help-accent:#e84d8a;--jj-help-accent-strong:#c92f6c}
.jj-bot-help-float[data-mobile-keyboard="1"],
.jj-bot-help-float[data-modal-obscured="1"]{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#quick-link-box{scroll-margin-top:96px;scroll-margin-bottom:120px}
#quick-link-box.jj-context-target-pulse{
  position:relative;
  animation:jjContextTargetPulse 1.65s ease 2;
  border-color:color-mix(in srgb,var(--account-accent,#32c5ff) 68%,var(--account-border,#d7e2ef))!important;
}
#quick-link-box.jj-context-target-pulse::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:2px solid color-mix(in srgb,var(--account-accent,#32c5ff) 35%,transparent);
  border-radius:inherit;
  pointer-events:none;
  animation:jjContextRing 1.65s ease 2;
}
@keyframes jjContextTargetPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--account-accent,#32c5ff) 0%,transparent)}
  45%{box-shadow:0 0 0 7px color-mix(in srgb,var(--account-accent,#32c5ff) 13%,transparent)}
}
@keyframes jjContextRing{
  0%{opacity:.9;transform:scale(.985)}
  70%,100%{opacity:0;transform:scale(1.025)}
}

@media (max-width:820px){
  .jj-bot-help-float{
    --jj-help-bottom:14px;
    --jj-help-right:12px;
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    border-radius:16px;
    font-size:22px;
    box-shadow:0 9px 25px color-mix(in srgb,var(--jj-help-accent) 27%,transparent),0 2px 7px rgba(15,23,42,.16);
  }
  .jj-bot-help-float::before{inset:5px;border-radius:12px}
  .jj-bot-help-float::after{display:none}
  #quick-link-box{scroll-margin-top:78px;scroll-margin-bottom:150px}
}
@media (max-width:430px){
  .jj-bot-help-float{
    --jj-help-right:10px;
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    border-radius:15px;
    font-size:21px;
  }
}
@media (max-height:520px) and (orientation:landscape){
  .jj-bot-help-float{--jj-help-bottom:10px;--jj-help-right:10px;width:44px;height:44px;min-width:44px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .jj-bot-help-float,#quick-link-box.jj-context-target-pulse,#quick-link-box.jj-context-target-pulse::after{transition:none!important;animation:none!important}
}


/* ===== v3: bot-coloured scroll-to-top control ===== */
.jj-bot-top-float{
  --jj-help-accent:#32c5ff;
  --jj-help-accent-strong:#149fd1;
  --jj-help-bottom:18px;
  --jj-help-right:18px;
  position:fixed;
  right:calc(var(--jj-help-right) + env(safe-area-inset-right,0px) + 54px);
  bottom:calc(var(--jj-help-bottom) + env(safe-area-inset-bottom,0px));
  z-index:10015;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--jj-help-accent) 76%,#fff);
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--jj-help-accent) 96%,#fff 4%),var(--jj-help-accent-strong));
  color:#fff!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--jj-help-accent) 28%,transparent),0 2px 8px rgba(15,23,42,.16);
  cursor:pointer;
  isolation:isolate;
  transform:translateY(8px) scale(.94);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:transform .2s cubic-bezier(.2,.78,.2,1),box-shadow .18s ease,filter .18s ease,opacity .16s ease,visibility .16s ease,bottom .18s ease;
}
.jj-bot-top-float::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  pointer-events:none;
}
.jj-bot-top-float::after{
  content:attr(data-top-label);
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(5px);
  min-width:max-content;
  padding:8px 10px;
  border:1px solid var(--account-border,#d7e2ef);
  border-radius:10px;
  background:var(--account-surface,#fff);
  color:var(--account-text,#18243a);
  box-shadow:0 8px 24px rgba(15,23,42,.13);
  font:800 12px/1.25 "Nunito","Segoe UI",Arial,sans-serif;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.jj-bot-top-float.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.jj-bot-top-float:hover,.jj-bot-top-float:focus-visible{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 14px 34px color-mix(in srgb,var(--jj-help-accent) 36%,transparent),0 3px 10px rgba(15,23,42,.18);
  filter:saturate(1.08);
  outline:3px solid color-mix(in srgb,var(--jj-help-accent) 22%,transparent);
  outline-offset:3px;
}
.jj-bot-top-float:hover::after,.jj-bot-top-float:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}
.jj-bot-top-float svg{
  position:relative;
  z-index:1;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.35;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .18s ease;
}
.jj-bot-top-float:hover svg,.jj-bot-top-float:focus-visible svg{animation:jjTopArrowNudge .62s cubic-bezier(.2,.78,.2,1)}
@keyframes jjTopArrowNudge{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
.jj-bot-top-float[data-bot="tunetune"]{--jj-help-accent:#32c5ff;--jj-help-accent-strong:#168fc5}
.jj-bot-top-float[data-bot="shieldy"]{--jj-help-accent:#2da44e;--jj-help-accent-strong:#21843e}
.jj-bot-top-float[data-bot="gamey"]{--jj-help-accent:#e84d8a;--jj-help-accent-strong:#c92f6c}
.jj-bot-top-float[data-mobile-keyboard="1"],
.jj-bot-top-float[data-modal-obscured="1"]{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ===== v3.1: restrained bot-coloured sidebar expand/collapse button ===== */
#panel-bot-control[data-active-bot="tunetune"]{--jj-sidebar-toggle-accent:#32c5ff;--jj-sidebar-toggle-strong:#168fc5}
#panel-bot-control[data-active-bot="shieldy"]{--jj-sidebar-toggle-accent:#2da44e;--jj-sidebar-toggle-strong:#21843e}
#panel-bot-control[data-active-bot="gamey"]{--jj-sidebar-toggle-accent:#e84d8a;--jj-sidebar-toggle-strong:#c92f6c}
#panel-bot-control .bot-sidebar-collapse{
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  flex:0 0 42px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 44%,var(--account-border,#d7e2ef))!important;
  border-radius:11px!important;
  background:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 14%,var(--account-surface-soft,#f4f7fb))!important;
  color:var(--jj-sidebar-toggle-strong,#168fc5)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-size:0!important;
  line-height:1!important;
  transform:none!important;
  filter:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
html[data-theme="dark"] #panel-bot-control .bot-sidebar-collapse{
  background:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 16%,var(--account-surface-soft,#121d30))!important;
  border-color:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 42%,var(--account-border,#2f405d))!important;
  color:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 82%,#fff)!important;
}
#panel-bot-control .bot-sidebar-collapse::before{
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  width:auto;
  height:auto;
  display:block;
  margin:0;
  padding:0;
  text-align:center;
  font:1000 28px/1 "Nunito","Segoe UI",Arial,sans-serif;
  letter-spacing:0;
  color:currentColor;
  transform:translate(-50%,-53%);
  animation:none!important;
  will-change:transform;
  pointer-events:none;
}
#panel-bot-control #bot-management-workspace.is-sidebar-collapsed .bot-sidebar-collapse::before{content:"›"}
#panel-bot-control #bot-management-workspace:not(.is-sidebar-collapsed) .bot-sidebar-collapse::before{content:"‹"}
#panel-bot-control .bot-sidebar-collapse::after{content:none!important;display:none!important}
#panel-bot-control .bot-sidebar-collapse:hover,
#panel-bot-control .bot-sidebar-collapse:focus-visible{
  background:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 22%,var(--account-surface-soft,#f4f7fb))!important;
  border-color:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 62%,var(--account-border,#d7e2ef))!important;
  color:var(--jj-sidebar-toggle-strong,#168fc5)!important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 13%,transparent)!important;
  transform:translateY(-1px)!important;
  filter:none!important;
  outline:2px solid color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 12%,transparent)!important;
  outline-offset:2px!important;
}
html[data-theme="dark"] #panel-bot-control .bot-sidebar-collapse:hover,
html[data-theme="dark"] #panel-bot-control .bot-sidebar-collapse:focus-visible{
  background:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 23%,var(--account-surface-soft,#121d30))!important;
  color:color-mix(in srgb,var(--jj-sidebar-toggle-accent,#32c5ff) 88%,#fff)!important;
}
#panel-bot-control #bot-management-workspace.is-sidebar-collapsed .bot-sidebar-collapse:hover::before,
#panel-bot-control #bot-management-workspace.is-sidebar-collapsed .bot-sidebar-collapse:focus-visible::before{
  animation:jjSidebarArrowRightHover .44s cubic-bezier(.2,.78,.2,1) 1!important;
}
#panel-bot-control #bot-management-workspace:not(.is-sidebar-collapsed) .bot-sidebar-collapse:hover::before,
#panel-bot-control #bot-management-workspace:not(.is-sidebar-collapsed) .bot-sidebar-collapse:focus-visible::before{
  animation:jjSidebarArrowLeftHover .44s cubic-bezier(.2,.78,.2,1) 1!important;
}
#panel-bot-control .bot-sidebar-collapse:active{
  transform:translateY(0) scale(.97)!important;
  box-shadow:none!important;
}
@keyframes jjSidebarArrowRightHover{
  0%,100%{transform:translate(-50%,-53%)}
  50%{transform:translate(calc(-50% + 3px),-53%)}
}
@keyframes jjSidebarArrowLeftHover{
  0%,100%{transform:translate(-50%,-53%)}
  50%{transform:translate(calc(-50% - 3px),-53%)}
}

@media (max-width:820px){
  .jj-bot-top-float{
    --jj-help-bottom:14px;
    --jj-help-right:12px;
    right:calc(var(--jj-help-right) + env(safe-area-inset-right,0px) + 58px);
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
    border-radius:16px;
  }
  .jj-bot-top-float::before{inset:5px;border-radius:12px}
  .jj-bot-top-float::after{display:none}
}
@media (max-width:430px){
  .jj-bot-top-float{
    --jj-help-right:10px;
    right:calc(var(--jj-help-right) + env(safe-area-inset-right,0px) + 56px);
    width:46px;
    height:46px;
    min-width:46px;
    min-height:46px;
    border-radius:15px;
  }
}
@media (max-height:520px) and (orientation:landscape){
  .jj-bot-top-float{--jj-help-bottom:10px;--jj-help-right:10px;width:44px;height:44px;min-width:44px;min-height:44px;right:calc(var(--jj-help-right) + env(safe-area-inset-right,0px) + 54px)}
}
@media (prefers-reduced-motion:reduce){
  .jj-bot-top-float,#panel-bot-control .bot-sidebar-collapse,#panel-bot-control .bot-sidebar-collapse::before{transition:none!important;animation:none!important}
}