/* ---------- v3.461 顶栏一排按钮收进一个「☰ 全部工具」----------
   461 只改「怎么显示」，不改「怎么搬」：
     1) ☰ 面板改成屏幕正中弹层（和「我的」那套 .phonepop 一致），窄屏 / 手机上一定看得全；
     2) 点「视图 / 导出 / 更多」时，一级清单让位，二级面板同样居中显示，不再左右并排挤到屏外。
   回滚：index.html 摘掉本文件与 topfold.461.js 两行。
*/

/* 入口一出现，顶栏原有的那一排立刻收起来 —— 不等 JS 搬运，避免「先闪一下」 */
#cactions:has(#foldEntry) > *:not(#foldEntry):not(#foldPanel){display:none}

/* 入口：跟 #cactions 里其它单图标按钮同一副骨架 */
#foldEntry{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--line) 90%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--panel) 58%,transparent);
  color:var(--tx);
  flex:0 0 auto;
  transition:box-shadow .14s ease,border-color .14s ease,color .14s ease;
}
#foldEntry:hover{box-shadow:0 2px 10px rgba(20,30,60,.08);color:var(--acc)}
#foldEntry.on{background:var(--acc2);border-color:transparent;color:var(--acc)}
#foldEntry .ico{width:16px;height:16px;flex:0 0 16px;margin:0;opacity:.85}

/* 蒙层：垫在弹层下面，点一下就关（样式跟主程序 #mmask 一致） */
#foldMask{
  position:fixed;
  inset:0;
  z-index:10061;
  background:rgba(10,14,22,.38);
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease;
}
#foldMask.on{opacity:1;pointer-events:auto}

/* 面板：屏幕正中，宽度封顶屏宽，超高内部滚动 —— 不再贴着顶栏往下长 */
#foldPanel{
  position:fixed;
  z-index:10062;
  left:50%;
  top:50%;
  right:auto;
  transform:translate(-50%,-50%);
  width:min(320px,calc(100vw - 24px));
  max-height:min(80vh,640px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 14px 44px rgba(20,30,60,.20),0 2px 8px rgba(20,30,60,.08);
  font-family:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}
#foldPanel.hide{display:none}

/* 搬进来的直按钮 → 变成菜单行 */
#foldPanel > button,
#foldPanel .mgrp > button,
#foldPanel > .mgrp{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  height:36px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  color:var(--tx);
  font-family:inherit;
  font-size:13.5px;
  line-height:1;
  font-weight:400;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  transition:none;
}
#foldPanel > .mgrp{height:auto;padding:0}
#foldPanel > .mgrp > button{height:36px}
#foldPanel > .mgrp > button:hover{background:var(--hov);color:var(--tx)}
#foldPanel > .mgrp > button .arr{margin-left:auto;font-size:9px;color:var(--sub);opacity:.8}
#foldPanel > button:hover,
#foldPanel > .mgrp > button:hover{background:var(--hov);color:var(--tx)}
#foldPanel > button .ico,
#foldPanel > .mgrp > button .ico{
  width:16px;height:16px;flex:0 0 16px;margin:0;opacity:.7;vertical-align:0;
}
#foldPanel > button:hover .ico,
#foldPanel > .mgrp > button:hover .ico{opacity:.95}
#foldPanel > button .mt,
#foldPanel > .mgrp > button .mt{
  flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;
}
/* 危险按钮（删除 / 完成之类）保留红色语义 */
#foldPanel > button.danger,
#foldPanel > button.pri,
#foldPanel > button[data-finish]{color:var(--tx)}
#foldPanel > button.danger:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}

/* 二级面板（视图 / 导出 / 更多）：同样居中，盖住一级清单的位置。
   主程序会往它们身上写 inline transform / left / right，这里全部 !important 压住，
   免得一打开就被主程序按「贴按钮」的老规矩摆到屏幕外去。 */
#foldPanel .mpanel{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  z-index:10063;
  width:min(380px,calc(100vw - 24px));
  max-width:calc(100vw - 24px);
  max-height:min(78vh,620px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  border-radius:12px;
  box-shadow:0 14px 44px rgba(20,30,60,.20),0 2px 8px rgba(20,30,60,.08);
}

/* 二级展开时，一级清单让位：只留那个 .mgrp 的壳，外观交给二级面板自己 */
#foldPanel.sub{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  width:auto;
  max-width:min(430px,calc(100vw - 24px));
  max-height:none;
  overflow:visible;
}
#foldPanel.sub > *{display:none}
#foldPanel.sub > .mgrp.open{display:block}

/* 图标按钮补齐文字后，去掉原来的圆底 */
#foldPanel > button.icononly{
  width:100%;
  border:0;
  background:transparent;
}

/* 手机：整宽，行再高一点好点 */
html.phone #foldPanel{
  width:min(340px,calc(100vw - 22px));
}
html.phone #foldPanel > button,
html.phone #foldPanel > .mgrp > button{height:40px;font-size:14.5px}

/* 屏幕很矮（横屏手机 / 小窗）时，别让弹层顶到边 */
@media (max-height:520px){
  #foldPanel{max-height:calc(100vh - 32px)}
  #foldPanel .mpanel{max-height:calc(100vh - 32px)}
}