/* 各个弹层：信件、语音收藏、时间线、生理期。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  /* ── 弹层壳（reading/period/letters/activity/voice 面板共用；#profilePanel 已合并进主菜单，
     但这套 class 是共享的模态框骨架，不能跟着删）── */
  .profile-panel{
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform .34s var(--ease-soft);
    will-change: transform;
  }
  /* 只滑不淡：页面本身是不透明的，边滑边淡会让底下的主页面在半路透出来 */
  .profile-panel.open{ transform: none; pointer-events: auto; }
  /* own wallpaper layer so the chat behind is fully covered, theme-matched */
  .profile-page{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image: var(--wall-default);
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .profile-page::before{
    content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
  }
  .profile-topbar{
    position: relative; z-index:1;
    flex: 0 0 auto;
    display:flex; align-items:center; gap:10px;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) var(--side-pad) 0;
    border-bottom: 1px solid var(--hairline);
  }
  .profile-back{
    width:40px; height:40px; flex:none;
    border:0; border-radius:50%; padding:0; margin-left:-6px;
    background: transparent; color: var(--text);
    display:grid; place-items:center; cursor:pointer;
    transition: transform .15s ease;
  }
  .profile-back:active{ transform: scale(.9); }
  .profile-back svg{ width:24px; height:24px; display:block; }
  .profile-scroll{
    position: relative; z-index:1;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px var(--side-pad) calc(30px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:24px;
  }
  .profile-scroll::-webkit-scrollbar{ width:0; height:0; }

  /* ── 信件 ── */
  .write-row{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  .write-btn{
    flex:1 1 auto; padding:11px; border-radius:12px; cursor:pointer;
    background: var(--card-bg); border:1px solid var(--card-line);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--card-shadow);
    font-family: var(--font-cn); font-size:13.5px; color: var(--text);
    transition: background .15s var(--ease-soft), opacity .15s var(--ease-soft);
  }
  .write-btn:active{ opacity:.7; }
  .write-btn:disabled{ opacity:.55; cursor:default; }
  .write-status{
    font-size:11.5px; color: var(--text-faint); text-align:center; margin-top:8px; min-height:14px;
  }
  .letters{ display:flex; flex-direction:column; gap:10px; }
  .letter{
    border-radius:14px;
    background: var(--card-bg);
    border:1px solid var(--card-line);
    box-shadow: var(--card-shadow);
    overflow:hidden;
  }
  .letter-head{
    display:flex; align-items:flex-start; gap:10px;
    width:100%; padding:14px 16px; cursor:pointer;
    border:0; background:none; text-align:left;
  }
  .letter-copy{ flex:1 1 auto; min-width:0; }
  .letter-date{
    font-family: var(--font-en), var(--font-cn); font-weight:500; font-size:13px;
    letter-spacing:.03em; color: var(--text-faint); margin-bottom:5px;
  }
  .letter-preview{
    font-family: var(--font-cn); font-size:13.5px; line-height:1.6; color: var(--text-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-height:22px;
    transition: max-height .3s var(--ease-soft), opacity .2s ease;
  }
  .letter.open .letter-preview{ max-height:0; opacity:0; }
  .letter-chev{
    flex:none; width:14px; height:14px; margin-top:3px; color: var(--text-faint);
    transition: transform .25s var(--ease-soft);
  }
  .letter.open .letter-chev{ transform: rotate(90deg); }
  .letter-body{
    display:grid; grid-template-rows:0fr; opacity:0;
    transition: grid-template-rows .34s var(--ease-soft), opacity .26s ease;
  }
  .letter.open .letter-body{ grid-template-rows:1fr; opacity:1; }
  .letter-body-clip{ min-height:0; overflow:hidden; }
  .letter-body-in{
    padding:0 16px 18px; padding-left:calc(16px + 10px + 14px);
    font-family: var(--font-cn); font-size:14.5px; line-height:1.95; color: var(--text);
    white-space:pre-wrap;
  }
  .letter-body-in::first-letter{
    font-family: var(--font-en), var(--font-cn); font-style:italic; font-size:1.5em;
    color: var(--accent);
  }
  .panel-empty{
    text-align:center; padding:60px 20px 0;
    font-family: var(--font-en), var(--font-cn); font-style:italic; font-size:14px;
    color: var(--text-faint);
  }

  /* ── 语音（收藏列表；播放按钮/文字本体跟聊天气泡共用 .voice-msg，这里只包一层卡片壳）── */
  .voice-fav-list{ display:flex; flex-direction:column; gap:10px; }
  .voice-fav-card{
    border-radius:14px;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    border:1px solid var(--card-line);
    box-shadow: var(--card-shadow);
    padding:13px 14px;
  }
  .voice-fav-date{
    font-family: var(--font-en), var(--font-cn); font-weight:500; font-size:12.5px;
    letter-spacing:.03em; color: var(--text-faint); margin-bottom:9px;
  }
  .voice-fav-card.removing{
    opacity:0; transform:translateX(8px) scale(.98);
    transition: opacity .25s var(--ease-soft), transform .25s var(--ease-soft);
  }

  /* ── 时间线（月历用的 .period-cal-day 圆点跟生理期日历共用，这里只加外层玻璃壳）── */
  .cal-panel{
    border-radius:16px; padding:14px 14px 8px;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border:1px solid var(--card-line);
    box-shadow: var(--card-shadow);
    margin-bottom:20px;
  }
  .cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .cal-nav button{
    border:0; background:none; color: var(--text-faint); cursor:pointer;
    width:26px; height:26px; display:grid; place-items:center; padding:0;
    transition: color .15s var(--ease-soft);
  }
  .cal-nav button svg{ width:15px; height:15px; display:block; }
  .cal-nav-title{
    font-family: var(--font-en), var(--font-cn); font-weight:500; font-size:15px;
    letter-spacing:.04em; color: var(--text);
  }
  .day-head{
    font-family: var(--font-en), var(--font-cn); font-weight:500; font-size:14px;
    color: var(--text-soft); margin:0 2px 12px;
  }
  .entries{ display:flex; flex-direction:column; gap:9px; }
  .entry{
    display:flex; gap:11px;
    padding:11px 13px; border-radius:12px;
    background: rgba(255,255,255,.46); border:1px solid rgba(255,255,255,.4);
    border-left:2.5px solid var(--dot-color, var(--accent));
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  }
  .entry-time{
    flex:none; width:38px; padding-top:1px;
    font-family: var(--font-en), var(--font-cn); font-size:12.5px; color: var(--text-faint);
  }
  .entry-mid{ flex:1 1 auto; min-width:0; }
  .entry-tags{ display:flex; align-items:center; gap:6px; margin-bottom:3px; flex-wrap:wrap; }
  .entry-type{ font-size:11px; color: var(--dot-color, var(--accent)); }
  .entry-loc{
    font-size:10.5px; color: var(--dot-color, var(--accent)); padding:1px 7px; border-radius:6px;
    background: color-mix(in srgb, var(--dot-color, var(--accent)) 12%, transparent);
  }
  .entry-replied{ font-size:10.5px; color: var(--text-faint); }
  .entry-replied.pending{ color: var(--dot-color, var(--accent)); }
  .entry-summary{ font-family: var(--font-cn); font-size:13.5px; line-height:1.6; color: var(--text); white-space:pre-wrap; }

  /* ── 生理期（日历跟月相罗盘同一个 accent 色相，深浅表示阶段，不再另起五色系统）── */
  .period-hero{
    border-radius:18px; padding:20px 20px 18px;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border:1px solid var(--card-line);
    box-shadow: var(--card-shadow);
    margin-bottom:14px;
  }
  .period-hero-phase{ font-family: var(--font-cn); font-weight:500; font-size:22px; color: var(--text); margin-bottom:4px; }
  .period-hero-day{ font-size:12.5px; color: var(--text-faint); margin-bottom:12px; }
  .period-hero-sub{ font-family: var(--font-cn); font-size:13.5px; line-height:1.65; color: var(--text-soft); }
  .stats{ display:flex; gap:8px; margin-bottom:20px; }
  .period-stat-card{
    flex:1 1 0; min-width:0; padding:11px 12px;
    border-radius:14px;
    background: var(--card-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    border:1px solid var(--card-line);
    box-shadow: var(--card-shadow);
  }
  .psc-label{ font-size:10px; letter-spacing:.1em; color: var(--text-faint); }
  .psc-val{ font-family: var(--font-cn); font-weight:500; font-size:15px; color: var(--accent); margin-top:4px; line-height:1.3; }
  .cal-legend{
    display:flex; align-items:center; justify-content:center; gap:14px;
    padding:10px 0 2px; font-size:10.5px; color: var(--text-faint);
  }
  .cal-legend i{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
  .period-hint{ text-align:center; font-size:11.5px; color: var(--text-faint); padding:10px 0 4px; }
  .period-cal-day{ background: var(--phase-bg, transparent); }
  /* 生理期日历：铺满整行的圆角方块(时间线也用 .period-cal-day，但那边还是圆点，所以这里都限定在 #periodCalGrid 里)。
     推测阶段是罗盘那支蓝的深浅；她自己标过的经期天用灰粉，跟 app 里"我们留下的痕迹"同一个色 */
  #periodBody, #activityScroll{ gap:0; padding:18px 20px 28px; }
  /* 时间线日历：只读，小圆点表示那天发生过什么；选中那天用实心灰粉(全 app 统一的选中色) */
  #activityCalGrid{ display:grid; grid-template-columns:repeat(7, 1fr); }
  #activityCalGrid .cal-wd{ text-align:center; font-size:10.5px; color:var(--text-faint); padding:4px 0 8px; }
  #activityCalGrid .period-cal-cell{ width:auto; padding:0; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
  #activityCalGrid .period-cal-day{
    width:30px; height:30px; font-family:var(--font-en); font-size:14px; color:#6E7684;
    transition:background .15s var(--ease-soft), color .15s var(--ease-soft);
  }
  #activityCalGrid .period-cal-day:hover{ background:rgba(255,255,255,.35); }
  #activityCalGrid .period-cal-day.today{ box-shadow:none; color:#5A7BAA; font-weight:600; }
  #activityCalGrid .period-cal-day.selected{ box-shadow:none; background:#BDA0A1; color:#fff; font-weight:600; }
  #activityCalGrid .period-cal-day.has-entries::after{ width:3.5px; height:3.5px; bottom:2px; }
  #activityCalGrid .period-cal-day.selected::after{ display:none; }
  #periodBody .cal-panel{ margin-bottom:0; }
  #periodCalGrid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
  #periodCalGrid .cal-wd{ text-align:center; font-size:10.5px; color:var(--text-faint); padding:4px 0 8px; }
  #periodCalGrid .period-cal-cell{ width:auto; padding:0; aspect-ratio:1; display:flex; align-items:stretch; }
  #periodCalGrid .period-cal-day{
    width:100%; height:100%; border-radius:7px; display:grid; place-items:center;
    font-family:var(--font-en); font-size:14px; color:#6E7684;
    background:var(--phase-bg, rgba(120,132,160,.06));
    transition:background .15s var(--ease-soft);
  }
  #periodCalGrid .period-cal-day.today{ box-shadow:inset 0 0 0 1.5px #5A7BAA; font-weight:600; color:var(--text); }
  #periodCalGrid .period-cal-day.marked{ background:color-mix(in srgb, #BDA0A1 62%, #fff); color:#7E5E60; font-weight:600; }
  #periodCalGrid .period-cal-day.marked.today{ box-shadow:inset 0 0 0 1.5px #8A6A6A; }
  .cal-nav-title .num, .psc-val .num, .psc-sub .num{ font-family:var(--font-en); font-size:16px; }
  .psc-sub .num{ font-size:11px; }
  .psc-sub{ font-family:var(--font-cn); font-size:10px; font-weight:400; color:var(--text-faint); margin-top:2px; }

  /* segmented control */
  /* 跟"保存"/"选择图片"(.settings-btn/.settings-file-label)同一套描边按钮语言。
     margin-left:auto——这一行只有它一个控件，没有别的元素跟它 space-between，
     不加这个会贴在最左边，跟"保存"/"选择图片"那两行的按钮对不齐。 */
  .segmented{ display:flex; gap:7px; margin-left:auto; }
  .segmented button{
    flex:none; border:1px solid var(--accent); background:none; color: var(--accent);
    border-radius:8px; padding:7px 11px;
    font-family: var(--font-cn); font-size:11px;
    letter-spacing:0; white-space:nowrap; cursor:pointer;
    transition: background .2s ease, color .2s ease;
  }
  .segmented button.active{
    /* 选中色：页面底部那道藕粉。底色本来就是上蓝下粉，选中跟着粉走，不另造一个色 */
    background: #BDA0A1;
    color: #fff;
    border-color: #BDA0A1;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 10px rgba(189,160,161,.35);
  }

  /* 小提示(已复制/已删除/重启中…)：2026-10-03 从模板的深色药丸换成跟全站一样的柔玻璃，
     前面一粒晕开的小点(跟此刻面板的底色一家)：平常灰粉，出错(失败/超过…)灰蓝。挂在 body 上，不在 .app 里，颜色写死 */
  .toast{
    position: fixed; left:50%; bottom: calc(96px + env(safe-area-inset-bottom));
    transform: translate(-50%, 8px); z-index:300;
    display:inline-flex; align-items:center; gap:10px; max-width:calc(100vw - 48px);
    background: rgba(255,255,255,.80);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    border:1px solid rgba(255,255,255,.75);
    color:#4E5A6C; font-family: var(--font-cn); font-size:13.5px; letter-spacing:.06em; line-height:1.5;
    padding:9px 18px 9px 15px; border-radius:999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(60,72,100,.14);
    opacity:0; pointer-events:none;
    transition: opacity .26s var(--ease-soft), transform .26s var(--ease-soft);
  }
  .toast::before{
    content:""; flex:none; width:6px; height:6px; border-radius:50%;
    background:#BDA0A1; box-shadow:0 0 0 3px rgba(189,160,161,.18), 0 0 8px 1px rgba(189,160,161,.25);
  }
  .toast.warn::before{ background:#8B99A8; box-shadow:0 0 0 3px rgba(139,153,168,.18), 0 0 8px 1px rgba(139,153,168,.25); }
  .toast.show{ opacity:1; transform: translate(-50%, 0); }

  @media (max-width: 520px){
    :root{
      --side-pad: 16px;
      --header-h: 56px;
      --avatar-size: 32px;
    }
    .new-divider{ font-size: 12px; margin: 14px 0 10px; }
  }
  @media (max-width: 360px){
    .app{ --side-pad: 16px; }
    .topbar{ padding-left: 16px; padding-right: 16px; }
    .bubble{ max-width: 85%; }
  }

  /* 自己的确认框/输入框(confirm-dialog.js)：替换浏览器自带的灰白弹窗。跟"此刻"抽屉同一套柔玻璃，
     确定是灰粉实心，危险的(删除)确定是灰蓝描边，不用红——红太吓人 */
  .soft-dialog{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:24px; }
  .soft-dialog.show{ display:flex; }
  .soft-dialog .sd-scrim{ position:absolute; inset:0; background:rgba(40,46,60,.22); opacity:0; transition:opacity .22s var(--ease-soft); }
  .soft-dialog .sd-card{
    position:relative; width:min(320px, 100%);
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(24px) saturate(1.5); backdrop-filter:blur(24px) saturate(1.5);
    border:1px solid rgba(255,255,255,.8); border-radius:20px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 18px 48px rgba(50,60,90,.20);
    padding:24px 22px 18px; text-align:center;
    opacity:0; transform:translateY(10px) scale(.98);
    transition:opacity .22s var(--ease-soft), transform .22s var(--ease-soft);
  }
  .soft-dialog.open .sd-scrim{ opacity:1; }
  .soft-dialog.open .sd-card{ opacity:1; transform:none; }
  .soft-dialog .sd-msg{ font-family:var(--font-cn); font-size:15.5px; line-height:1.6; letter-spacing:.04em; color:#3F4656; }
  .soft-dialog .sd-sub{ margin-top:6px; font-family:var(--font-cn); font-size:12.5px; line-height:1.7; color:#9A9AA8; letter-spacing:.03em; }
  .soft-dialog .sd-input{
    display:block; width:100%; margin-top:16px; padding:10px 12px; box-sizing:border-box;
    font-family:var(--font-cn); font-size:14px; color:#3F4656;
    background:rgba(255,255,255,.7); border:1px solid rgba(189,160,161,.45); border-radius:12px; outline:none;
  }
  .soft-dialog .sd-input:focus{ border-color:#BDA0A1; box-shadow:0 0 0 3px rgba(189,160,161,.18); }
  .soft-dialog .sd-input[hidden], .soft-dialog .sd-sub[hidden]{ display:none; }
  .soft-dialog .sd-btns{ display:flex; gap:10px; margin-top:20px; }
  .soft-dialog .sd-btns button{
    flex:1 1 0; padding:10px 0; border-radius:12px; cursor:pointer;
    font-family:var(--font-cn); font-size:14px; letter-spacing:.08em;
    -webkit-tap-highlight-color:transparent; transition:background .18s ease, transform .12s ease;
  }
  .soft-dialog .sd-btns button:active{ transform:scale(.97); }
  .soft-dialog .sd-cancel{ background:rgba(255,255,255,.6); border:1px solid rgba(60,72,100,.12); color:#6E7484; }
  .soft-dialog .sd-ok{
    background:#BDA0A1; border:1px solid #BDA0A1; color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 10px rgba(189,160,161,.35);
  }
  .soft-dialog.danger .sd-ok{ background:rgba(255,255,255,.6); border-color:#8B99A8; color:#5E6B7C; box-shadow:none; }