/* ================= 记忆：时间轴 + 增删改 =================
   极简时间轴风格：左侧日期（大数字 day + 小号月份）、中间一条细竖线（用
   .mem-day-entries 的 border-left 实现，天然跟当天内容等高，不需要用 JS
   算高度）、右侧按时间段 + 标题 + 摘要堆叠，不做卡片、不用大块白色背景块，
   颜色全部直接用 style.css 里已有的 --text-1/--text-2/--bg-1/--bg-2/--line
   变量，深色模式跟着 style.css 的 body.dark-mode 规则自动切换，这里不用
   重复写一份深色配色。

   编辑/删除确认弹层、新增记忆表单、Toast、Tab、按钮这几块是 my-themes.css /
   theme-center.css / official-themes.css 里已经有的同一套视觉语言（.mt-overlay
   /.mt-alert/.mt-modal/.tc-btn/.oft-toast），但这个项目"不共享模块"是一贯
   写法（各主题相关文件都是各自维护一份，不互相 import），这里同样不去 <link>
   那三个文件（避免引入大量无关规则、增加冲突面），而是照着同一套视觉规范在
   本文件内单独完整实现一份，只用 style.css 里已经存在的公共变量
   （--bg-0/--radius-md/--radius-pill/--shadow-lift/--shadow-soft/--spring/
   --accent），效果跟日记页等保持一致。 */

.mem-content{
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overflow-x:hidden;
    padding:4px 18px 48px;
    background:var(--bg-1);
}

.mem-empty{
    padding:80px 20px;
    text-align:center;
    font-size:14px;
    line-height:1.6;
    color:var(--text-2);
}

.mem-day-group{
    display:flex;
    align-items:stretch;
    gap:12px;
    padding:22px 0;
    max-width:100%;
}

.mem-day-group + .mem-day-group{
    border-top:1px solid var(--line);
}

.mem-day-date{
    flex:0 0 auto;
    width:40px;
    padding-top:1px;
    text-align:right;
}

.mem-day-num{
    display:block;
    font-size:26px;
    font-weight:700;
    color:var(--text-1);
    line-height:1.1;
    letter-spacing:-.5px;
    font-variant-numeric:tabular-nums;
}

.mem-day-month{
    display:block;
    font-size:11px;
    color:var(--text-2);
    margin-top:4px;
}

.mem-day-entries{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-left:16px;
    border-left:1px solid var(--line);
}

.mem-entry{
    min-width:0;
    max-width:100%;
}

.mem-entry-title{
    font-size:15px;
    font-weight:600;
    color:var(--text-1);
    line-height:1.5;
    word-break:break-word;
    overflow-wrap:break-word;
}

.mem-entry-period{
    font-weight:600;
    color:var(--text-1);
}

.mem-entry-summary{
    margin-top:4px;
    font-size:13px;
    color:var(--text-2);
    line-height:1.75;
    word-break:break-word;
    overflow-wrap:break-word;
    white-space:pre-wrap;
}

/* 手机端优先：iPhone 常见宽度（375~390px）下，日期列 + 竖线 + 内边距加起来
   大概占 90px，剩下的空间给摘要文字自动换行，整个 .app-shell 本身已经有
   overflow:hidden（见 style.css），这里再加一层 overflow-x:hidden 双重保险，
   确保不会出现横向滚动条。 */
@media (max-width:400px){
    .mem-content{
        padding-left:14px;
        padding-right:14px;
    }
    .mem-day-date{
        width:36px;
    }
    .mem-day-num{
        font-size:24px;
    }
}

/* ================= 线上/线下 Tab（含"未分类"）=================
   贴在顶部导航条下面、内容区上面，四个 tab 横向平铺：全部/线上/线下/未分类。
   "未分类"专门给这次改动之前生成、从没记录过渠道的旧记忆用（channel 是
   null），不替旧数据编造历史归属，允许用户在编辑时手动指定。故意没有"清空
   全部/删除全部线上/删除全部线下"这类按钮——用户明确要求禁止。 */
.mem-tabs{
    flex-shrink:0;
    display:flex;
    gap:6px;
    padding:10px 18px 4px;
    background:var(--bg-1);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

.mem-tab{
    flex:0 0 auto;
    border:none;
    background:var(--bg-2);
    color:var(--text-2);
    font-size:13px;
    font-weight:600;
    padding:7px 14px;
    border-radius:var(--radius-pill);
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}

.mem-tab.is-active{
    background:var(--accent);
    color:#fff;
}

/* ================= 每条记忆的渠道标签 + 编辑/删除操作 ================= */

.mem-entry-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.mem-entry-title-wrap{
    min-width:0;
    flex:1 1 auto;
}

.mem-entry-channel{
    flex:0 0 auto;
    font-size:11px;
    font-weight:600;
    padding:2px 8px;
    border-radius:var(--radius-pill);
    color:var(--text-2);
    background:var(--bg-2);
    white-space:nowrap;
    margin-top:1px;
}

.mem-entry-channel-online{
    color:#2f7ce0;
    background:rgba(47,124,224,.12);
}

.mem-entry-channel-offline{
    color:#d9822b;
    background:rgba(217,130,43,.14);
}

.mem-entry-actions{
    margin-top:8px;
    display:flex;
    gap:14px;
}

.mem-entry-action{
    border:none;
    background:none;
    padding:0;
    font-size:12.5px;
    font-weight:600;
    color:var(--text-2);
    cursor:pointer;
}

.mem-entry-action-danger{
    color:#d9534f;
}

/* ================= 新增记忆悬浮按钮 ================= */

.mem-fab{
    position:fixed;
    right:20px;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px));
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    font-size:26px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-lift);
    cursor:pointer;
    z-index:40;
    transition:transform .2s var(--spring);
}

.mem-fab:active{
    transform:scale(.92);
}

/* ================= 弹层公共外壳（编辑/新增表单 + 删除确认）=================
   跟 my-themes.css 的 .mt-overlay/.mt-alert/.mt-modal 是同一套视觉规范，
   这里按项目"各文件各自维护一份、不共享模块"的写法单独实现，只依赖
   style.css 已有的公共变量，不 <link> my-themes.css。 */

.mt-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,16,14,0);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:60;
    transition:background .2s ease;
}

.mt-overlay.is-open{
    background:rgba(20,16,14,.32);
}

.mt-alert{
    width:100%;
    max-width:300px;
    background:var(--bg-0);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lift);
    padding:20px 18px;
    transform:scale(.92);
    opacity:0;
    transition:transform .2s var(--spring),opacity .2s ease;
}

.mt-overlay.is-open .mt-alert{
    transform:scale(1);
    opacity:1;
}

.mt-alert-text{
    font-size:14px;
    line-height:1.6;
    color:var(--text-1);
    text-align:center;
    margin-bottom:16px;
}

.mt-alert-actions{
    display:flex;
    gap:10px;
}

.mt-alert-btn{
    flex:1;
    border:none;
    border-radius:var(--radius-pill);
    padding:10px 0;
    font-size:14px;
    font-weight:600;
    background:var(--bg-2);
    color:var(--text-1);
    cursor:pointer;
}

.mt-alert-btn-danger{
    background:#d9534f;
    color:#fff;
}

.mt-modal{
    width:100%;
    max-width:340px;
    max-height:82vh;
    overflow-y:auto;
    background:var(--bg-0);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lift);
    padding:20px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
    transform:scale(.92);
    opacity:0;
    transition:transform .2s var(--spring),opacity .2s ease;
}

.mt-overlay.is-open .mt-modal{
    transform:scale(1);
    opacity:1;
}

.mt-modal-title{
    font-size:15.5px;
    font-weight:700;
    color:var(--text-1);
}

.mt-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.mt-field-label{
    font-size:12px;
    color:var(--text-2);
}

.mt-field-input{
    border:none;
    outline:none;
    background:var(--bg-2);
    border-radius:var(--radius-md);
    padding:10px 12px;
    font-size:14px;
    font-family:inherit;
    color:var(--text-1);
    resize:none;
}

textarea.mt-field-input{
    min-height:90px;
    line-height:1.5;
}

select.mt-field-input{
    -webkit-appearance:none;
    appearance:none;
}

.mt-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.tc-btn{
    border:none;
    border-radius:var(--radius-pill);
    padding:10px 22px;
    font-size:14px;
    font-weight:600;
    background:var(--bg-2);
    color:var(--text-1);
    box-shadow:var(--shadow-soft);
    cursor:pointer;
    transition:transform .2s var(--spring),opacity .2s ease;
}

.tc-btn:active{
    transform:scale(.96);
}

.tc-btn-primary{
    background:var(--accent);
    color:#fff;
}

.tc-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
}

/* ================= Toast ================= */

.oft-toast{
    position:fixed;
    left:50%;
    bottom:36px;
    transform:translate(-50%,12px);
    background:rgba(28,28,30,.92);
    color:#fff;
    font-size:13px;
    padding:10px 18px;
    border-radius:var(--radius-pill);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    z-index:70;
    max-width:86%;
    text-align:center;
}

.oft-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}