/* ===== 手机版侧栏：和电脑一样，左边一列项目、右边一列笔记 =====
   原来手机上把项目那一列改成了横向滑动的标签，这里把它改回竖排。
   必须放在 style.css 之后加载。只在手机宽度(<=760px)生效，电脑端完全不受影响。 */

@media (max-width:760px){
  /* 两栏并排（原来是上下两层） */
  .sidebar-columns{flex-direction:row;gap:0;}

  /* 左栏：项目 */
  .sidebar-col-projects{
    flex:0 0 auto;width:130px;max-width:none;min-width:0;
    margin:0 8px 0 0;padding:0 8px 0 0;
    border-right:1px solid rgba(255,255,255,.08);border-bottom:none;
    flex-direction:column;align-items:stretch;gap:0;
  }
  .sidebar-col-projects .sidebar-section-title{order:0;flex:0 0 auto;padding:8px 8px 6px 8px;font-size:11px;}
  .sidebar-col-projects .sidebar-section-title > span:first-child{display:inline;}   /* 把「项目」两个字找回来 */
  #addProjectBtn{min-width:28px;height:28px;font-size:13px;border-radius:6px;background:transparent;color:var(--sidebar-dim);}

  .sidebar-col-projects .list{
    order:0;flex:1 1 auto;min-width:0;min-height:0;
    flex-direction:column;gap:3px;
    overflow-x:hidden;overflow-y:auto;
    padding:2px 2px calc(32px + env(safe-area-inset-bottom, 0px)) 2px;
    position:relative;          /* 别删：app.js 靠它算「当前项目」的滚动位置 */
    touch-action:pan-y;
    -webkit-mask-image:none;mask-image:none;
  }
  .sidebar-col-projects .list-item{
    flex:0 0 auto;max-width:none;
    min-height:44px;padding:0 8px;border-radius:8px;font-size:13.5px;
    background:transparent;
  }
  .sidebar-col-projects .list-item.active{background:var(--sidebar-active);border-color:var(--sidebar-active-border);}
  .list-item .proj-del-btn{min-width:22px;min-height:22px;margin-right:-4px;}

  /* 右栏：笔记。窄了一些，所以每一行稍微收紧一点，名字才有地方放 */
  .sidebar-col-episodes{flex:1;min-width:0;min-height:0;}
  .ep-row{padding:6px;gap:6px;}
  .ep-toggle{width:24px;}
}

/* 很窄的手机（比如 iPhone SE 一类）：项目那一栏再窄一点 */
@media (max-width:360px){
  .sidebar-col-projects{width:112px;}
  .sidebar-col-projects .list-item{font-size:13px;padding:0 6px;}
}