/* 桌面侧栏。
 *
 * 这一版把折叠态整个改掉了。原先折起来剩一条 66px 的图标栏：图标认不出是哪个键，
 * 于是每个键又要挂一枚浮标把名字说回来——最后省下的 180px 换来了一栏谁也读不懂
 * 的记号，和一套只为它存在的悬停逻辑。现在折起来就是收干净：整栏滑走，中栏拿到
 * 全部宽度，标题栏左上角留一颗同样的面板扣子把它叫回来。要么给你一栏读得懂的
 * 目录，要么给你一整片空白，不留中间那一档。 */

/* 折叠态由中栏那颗扣子负责叫回来，这颗按钮只在手机抽屉里还有用途。 */
.history-rail .rail-recents { display: none; }

@media (min-width: 761px) {
  /* 左右内边距只写一次：栏里所有整行元素靠它定边，账号那行、会话那行、
     「最近」那行必须在同一条竖线上起笔。 */
  .history-rail {
    --rail-pad: 12px;
    position: relative;
    z-index: 40;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--rail-pad) 12px;
    /* 没有右边框。侧栏比中栏深一档，交界处是两块纸的明度差，不是一条线——
       通天的竖线是整页上最重的一笔硬边，去掉它，版面立刻松开。 */
    border-right: 0;
    background: var(--sand);
    color: var(--ink);
  }

  /* 品牌行跟中栏标题栏一样高（56px），两栏的第一行因此在同一条水平线上。
     原先 52 对 58，差 6px——读不出层级，只读得出没对齐。 */
  .rail-head {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
  }

  .rail-brand {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    text-decoration: none;
  }

  .rail-brand img { width: 26px; height: 26px; flex: 0 0 auto; }
  .rail-brand > span { min-width: 0; display: grid; }
  /* 产品名是宋体。这是页面上唯一的身份标识，也是除首屏那句话之外唯一一处
     宋体——两处遥相呼应，其余全是黑体：读的、点的、写的。 */
  .rail-brand strong {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: var(--w-strong);
    line-height: 1.2;
    white-space: nowrap;
  }

  .rail-fold {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: #a09a97;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .rail-fold:hover { background: rgb(35 33 30 / 6%); color: var(--ink); }
  /* 面板图标，两个状态用同一个，不旋转。旋转会让人以为图标在描述侧栏当前的
     朝向；侧栏是开是合看它自己就知道，图标只负责说明「这个键管侧栏」。 */
  .rail-fold svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .rail-fold svg path { fill: currentColor; stroke: none; opacity: 0.42; }

  .rail-icon {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .rail-button {
    min-height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: #6b6663;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
  }

  .rail-button:hover,
  .rail-button[aria-expanded="true"] { background: rgb(35 33 30 / 5%); color: var(--ink); }
  .rail-button b { font-size: var(--t-ui); font-weight: var(--w-medium); }

  /* 「新建对话」是这条泳道上最常做的一件事，但它不需要一个描边盒子来提醒你
     它在——盒子只会把它下面所有东西再往下推一截。一行普通的键，墨色比会话
     列表重一档，位置在最上面，够了。 */
  .rail-new {
    margin: 6px 0 2px;
    color: var(--ink);
  }

  .rail-new span { width: 18px; flex: 0 0 auto; display: grid; place-items: center; color: #8a8481; }
  .rail-new:hover span { color: var(--ink); }
  .rail-new span .rail-icon { width: 17px; height: 17px; stroke-width: 1.8; }
  .rail-new b { color: inherit; font-size: var(--t-ui); font-weight: var(--w-medium); }

  /* 「最近」。原先会话列表是直接顶上来的，第一条会话和「新建对话」之间没有
     任何东西说明这是两类内容——一个是动作，一串是历史。 */
  .rail-section {
    margin: 16px 0 2px;
    padding: 0 10px;
    color: #9a9491;
    font-size: var(--t-meta);
    font-weight: var(--w-medium);
  }

  .rail-account { min-width: 0; position: relative; z-index: 70; margin-top: auto; padding-top: 6px; }

  .rail-profile {
    width: 100%;
    min-height: 42px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 140ms ease;
  }

  .rail-profile:hover,
  .rail-profile[aria-expanded="true"] { background: rgb(35 33 30 / 5%); }

  .rail-profile > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #e4ded3;
    color: #6d6764;
    /* 圆圈里是名字的一个字母，是个记号不是一行字，所以不受字阶下限管。 */
    font-size: 11px;
    font-weight: var(--w-strong);
  }

  .rail-profile > div { min-width: 0; display: grid; }
  .rail-profile strong { overflow: hidden; color: #6b6663; font-size: var(--t-label); font-weight: var(--w-medium); text-overflow: ellipsis; white-space: nowrap; }
  .rail-profile:hover strong { color: var(--ink); }

  .rail-account-menu {
    width: 100%;
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: #fff;
    box-shadow: var(--shadow-lift);
  }

  .rail-account-menu > div { display: grid; gap: 2px; padding: 8px 10px 9px; border-bottom: 1px solid #f0ece4; }
  .rail-account-menu > div strong,
  .rail-account-menu > div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-account-menu > div strong { color: #34322f; font-size: var(--t-label); font-weight: var(--w-strong); }
  /* 这一行是登录身份，读者拿它核对「登进来的是不是我」——不能压到 12px 以下。 */
  .rail-account-menu > div span { color: #9a9491; font-size: var(--t-meta); }
  .rail-account-menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

  /* 折起来：整栏滑走。轨道宽度归零负责动画（见 desk.css 的 --rail-w），
     这里负责让它别在 0 宽的轨道里挤成一团，也别留在 Tab 序列里——那一栏
     屏幕上已经没有了，键盘还能走进去是最难查的一类无障碍缺陷。 */
  .rail-layout.is-rail-collapsed .history-rail {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease, visibility 140ms ease;
  }
}

/* 侧栏要画自己不需要问任何人（宽窄存在 localStorage，其余全在静态标签里），
   所以第一帧里它已经在了，转圈退到它右边那一半去。这几个数必须跟 desk.css
   里的 --rail-w 对上，差一像素就是转圈盖住半条边界。 */
@media (min-width: 761px) {
  body.is-booting .loading-screen {
    position: fixed;
    z-index: 60;
    inset: 0 0 0 268px;
    min-height: 0;
    background: var(--paper);
  }

  body.is-booting.is-boot-narrow .loading-screen { left: 0; }
}

@media (min-width: 761px) and (max-width: 980px) {
  body.is-booting .loading-screen { left: 232px; }
  body.is-booting.is-boot-narrow .loading-screen { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rail-fold,
  .rail-button,
  .rail-profile,
  .rail-layout.is-rail-collapsed .history-rail { transition: none; }
}