* {
    box-sizing: border-box;
}


/* ===== 开屏语录 ===== */

.splash {

    position:absolute;

    inset:0;

    z-index:500;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    padding:calc(20px + env(safe-area-inset-top)) 36px calc(30px + env(safe-area-inset-bottom));

    text-align:center;

    cursor:pointer;

    background:linear-gradient(
        160deg,
        #ffe6f0,
        #ede6ff,
        #e4f0ff
    );

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    transition:opacity 0.6s ease, visibility 0.6s ease;

}

.splash.hide {

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.splash-heart {

    display:flex;

    animation:heart-pulse-beat 1.6s ease-in-out infinite;

}

.splash-heart svg {

    width:38px;

    height:38px;

    fill:none;

    stroke:#ff6fa5;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;

    filter:drop-shadow(0 4px 10px rgba(255,110,150,0.25));

}

.splash-quote {

    max-width:280px;

    font-size:19px;

    font-weight:400;

    line-height:1.7;

    letter-spacing:0.3px;

    color:rgba(50,45,60,0.85);

    animation:splash-quote-in 0.7s ease both;

}

@keyframes splash-quote-in {

    from {
        opacity:0;
        transform:translateY(8px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}

.splash-hint {

    position:absolute;

    bottom:calc(28px + env(safe-area-inset-bottom));

    font-size:11px;

    letter-spacing:2px;

    color:rgba(60,60,70,0.4);

}


body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;


    background:

    radial-gradient(
        circle at 15% 15%,
        rgba(255,210,230,0.65),
        transparent 35%
    ),

    radial-gradient(
        circle at 85% 85%,
        rgba(190,220,255,0.65),
        transparent 40%
    ),

    #faf9fc;


    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    sans-serif;

}




/* iPhone 16 Plus 比例，桌面预览用的模拟尺寸；手机由下方媒体查询接管 */

.phone {

    width:430px;

    height:932px;

    position:relative;

    overflow:hidden;

    border-radius:50px;


    background:

    radial-gradient(circle at 12% 8%, rgba(255,190,215,0.55), transparent 42%),
    radial-gradient(circle at 90% 18%, rgba(190,220,255,0.5), transparent 40%),
    radial-gradient(circle at 15% 92%, rgba(190,220,255,0.4), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(255,200,220,0.45), transparent 45%),
    rgba(255,255,255,0.3);


    backdrop-filter:blur(35px);

    -webkit-backdrop-filter:blur(35px);


    box-shadow:

    0 30px 80px rgba(0,0,0,0.12);

}


/* .phone 只负责铺满机身背景，永远保持整机高度，键盘弹出时不跟着缩，这样
   .phone 的 top 就算没有精确跟手可视视口，露出来的也还是自己的背景，不会
   出现空白断层。真正的内容排布交给 .phone-inner——它会在键盘弹出时缩到
   可视视口高度，.nav / .chat-composer 等原来依赖"贴着机身底边"的定位都改
   成相对它计算，这样键盘一弹出，flex 布局自然把输入框顶到可视区域最下面，
   不用再手动算距离。 */
.phone-inner {

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}



/* 首页 */

.home {

    padding-top:calc(95px + env(safe-area-inset-top));

    text-align:center;

}




h1 {

    margin:0;

    font-size:26px;

    font-weight:300;

    letter-spacing:3px;

    color:rgba(40,40,50,0.75);

    font-family:
    "Helvetica Neue",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

}


.title-underline {

    display:block;

    width:46px;

    height:3px;

    margin:14px auto 0;

    border-radius:2px;

    background:linear-gradient(90deg,#ff8fb3,#8fc6ff);

}



/* 天数：小巧的一行胶囊标签，不换行不挤头像 */

.together {

    display:inline-flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:baseline;

    gap:6px;

    margin:22px auto 0;

    padding:9px 18px;

    max-width:88%;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.28),
        rgba(190,220,255,0.28)
    );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.6);

    box-shadow:
        0 6px 16px rgba(150,170,220,0.14),
        inset 0 1px 0 rgba(255,255,255,0.6);

}



.together-label {

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(60,60,70,0.5);

}



.together-sep {

    font-size:12px;

    color:rgba(60,60,70,0.3);

}



.together strong {

    font-size:17px;

    font-weight:600;

    color:#ff6fa5;

}



.together-unit {

    font-size:12px;

    color:rgba(60,60,70,0.55);

}



.together-since {

    font-size:12px;

    color:rgba(60,60,70,0.45);

}



/* 头像区域，这里是主视觉焦点，尺寸和光晕都加重 */


.avatars {

    margin-top:64px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:26px;

}




.avatar {

    width:92px;

    height:92px;


    border-radius:50%;


    background:

    rgba(255,255,255,0.45);


    border:

    2px solid rgba(255,255,255,0.85);


    backdrop-filter:blur(20px);


    display:flex;

    justify-content:center;

    align-items:center;


    color:rgba(120,120,130,0.4);

    font-size:26px;


    cursor:pointer;

    background-size:cover;

    background-position:center;

    overflow:hidden;

    transition:transform 0.2s ease, box-shadow 0.2s ease;

    box-shadow:
        0 12px 26px rgba(255,143,179,0.22),
        0 0 0 5px rgba(255,200,220,0.28);

}

.avatar.claude {

    box-shadow:
        0 12px 26px rgba(143,198,255,0.22),
        0 0 0 5px rgba(190,220,255,0.32);

}

.avatar:hover,
.avatar:active {

    transform:scale(1.04);

}

.avatar.has-photo span,
.call-avatar.has-photo span {

    display:none;

}



.person p {

    margin-top:14px;

    font-size:15px;

    font-weight:500;

    letter-spacing:0.5px;

    color:#444;

}



.heartbeat {

    position:relative;

    width:74px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.ekg-line {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.ekg-path {

    fill:none;

    stroke:url(#ekg-gradient);

    stroke-width:2.4;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:175;

    stroke-dashoffset:175;

    animation:ekg-draw 2.6s ease-in-out infinite;

}

@keyframes ekg-draw {

    0% {
        stroke-dashoffset:175;
    }

    55% {
        stroke-dashoffset:0;
    }

    100% {
        stroke-dashoffset:-175;
    }

}

.heart-pulse {

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    width:32px;

    height:32px;

    filter:drop-shadow(0 1px 3px rgba(255,255,255,0.9)) drop-shadow(0 0 4px rgba(255,255,255,0.6));

    animation:heart-pulse-beat 1.2s ease-in-out infinite;

}

.heart-pulse svg {

    width:26px;

    height:26px;

    fill:#ff6fa5;

    stroke:none;

}

@keyframes heart-pulse-beat {

    0%, 100% {
        transform:scale(1);
    }

    15% {
        transform:scale(1.3);
    }

    30% {
        transform:scale(1);
    }

    45% {
        transform:scale(1.18);
    }

    60% {
        transform:scale(1);
    }

}





/* 底部玻璃感导航 */


.nav {

    position:absolute;


    bottom:env(safe-area-inset-bottom);


    left:calc(25px + env(safe-area-inset-left));


    right:calc(25px + env(safe-area-inset-right));


    height:78px;


    border-radius:40px;


    background:

    rgba(255,255,255,0.35);


    backdrop-filter:blur(30px);


    -webkit-backdrop-filter:blur(30px);


    transition:opacity 0.2s ease, transform 0.2s ease;


    border:

    1px solid rgba(255,255,255,0.55);


    display:flex;


    justify-content:space-around;

    align-items:center;

}

/* 键盘弹出时让开，给聊天记录和输入框腾地方，键盘收起后自动弹回来 */
body.keyboard-open .nav {

    opacity:0;

    transform:translateY(20px);

    pointer-events:none;

}

/* .chat-composer 平时下边距留了 128px，是专门给下面的 .nav 让位置的；
   键盘弹出时 .nav 已经隐藏，这块预留空间没人用了，会在输入框下面露出一大
   块空白，改成只留安全区 + 一点点间距，让输入框直接贴近键盘上沿 */
body.keyboard-open .chat-composer {

    margin-bottom:calc(env(safe-area-inset-bottom) + 12px);

}

.nav-item {

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#777;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

}



.nav-label {

    font-size:12px;

    margin-top:5px;

}



/* SVG图标 */

.nav-icon {

    display:flex;

    justify-content:center;

    align-items:center;

    width:38px;

    height:38px;

    border-radius:50%;

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.45s cubic-bezier(0.34,1.56,0.64,1);

}

.nav-item:active .nav-icon {

    transform:scale(0.82);

    transition:transform 0.1s ease-out;

}

.nav-icon svg {

    width:22px;

    height:22px;


    fill:none;


    stroke:#777;


    stroke-width:1.7;


    stroke-linecap:round;


    stroke-linejoin:round;

    transition:stroke 0.25s ease;

}



/* 选中态：淡淡的玻璃徽章 */

.nav-item.active .nav-icon {

    background:rgba(255,255,255,0.5);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);

}

.nav-item.active .nav-icon svg {

    stroke:#555;

}



/* Chat 标签：常驻蓝色玻璃质感爱心图标 */

.nav-icon-heart {

    background:linear-gradient(
        135deg,
        rgba(190,220,255,0.55),
        rgba(220,235,255,0.35)
    );

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,0.75);

    box-shadow:
        0 4px 12px rgba(140,180,255,0.3),
        inset 0 1px 0 rgba(255,255,255,0.8);

}

.nav-icon-heart svg {

    stroke:#5b9dff;

}

.nav-item.active .nav-icon-heart {

    background:linear-gradient(
        135deg,
        rgba(190,220,255,0.75),
        rgba(220,235,255,0.5)
    );

    box-shadow:
        0 6px 16px rgba(140,180,255,0.4),
        inset 0 1px 0 rgba(255,255,255,0.9);

}




/* 背景装饰 */


.spark {

    position:absolute;

    opacity:0.5;

    pointer-events:none;

    z-index:1;

}

.spark svg {

    width:100%;

    height:100%;

    fill:none;

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;

}



.spark1 {

    top:170px;

    left:38px;

    width:22px;

    height:22px;

}

.spark1 svg {

    stroke:#ff8fb3;

}



.spark2 {

    top:270px;

    right:36px;

    width:26px;

    height:26px;

}

.spark2 svg {

    stroke:#8fc6ff;

}



.spark3 {

    top:60px;

    right:52px;

    width:14px;

    height:14px;

}

.spark3 svg {

    stroke:#ff8fb3;

}



.spark4 {

    top:520px;

    left:26px;

    width:30px;

    height:16px;

}

.spark4 svg {

    stroke:#8fc6ff;

}



.spark5 {

    top:150px;

    right:70px;

    width:40px;

    height:10px;

}

.spark5 svg {

    fill:#ff8fb3;

    stroke:none;

}



.spark6 {

    top:610px;

    right:30px;

    width:16px;

    height:16px;

}

.spark6 svg {

    stroke:#8fc6ff;

}
/* 天气小组件 */


.weather-card {


    margin:26px auto 0;


    width:228px;

    height:64px;


    border-radius:28px;


    background:

    rgba(255,255,255,0.32);



    backdrop-filter:

    blur(25px);



    -webkit-backdrop-filter:

    blur(25px);



    border:

    1px solid rgba(255,255,255,0.55);



    display:flex;


    align-items:center;


    justify-content:center;


    gap:12px;



}



.weather-icon {

    display:flex;

    align-items:center;

    justify-content:center;

}

.weather-icon svg {

    width:23px;

    height:23px;

    fill:none;

    stroke:rgba(70,80,100,0.7);

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;

}



.weather-info {


    display:flex;


    flex-direction:column;


    align-items:flex-start;


}



.weather-info strong {


    font-size:22px;


    font-weight:300;


    color:rgba(40,40,50,0.8);


}



.weather-info span {


    margin-top:2px;


    font-size:11px;


    color:rgba(60,60,70,0.45);


}


/* ===== 首页"回忆"照片墙：跟天气卡片同一套玻璃质感，横向滑动 ===== */

.memories-card {

    width:min(92%, 340px);

    margin:16px auto 0;

    padding:18px 0 18px 20px;

    box-sizing:border-box;

    border-radius:26px;

    background:rgba(255,255,255,0.32);

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,0.55);

}

.memories-title {

    margin:0 20px 12px 0;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(60,60,70,0.45);

}

.memories-row {

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-right:20px;

    padding-bottom:2px;

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;

}

.memories-row::-webkit-scrollbar {

    display:none;

}

.memory-item,
.memory-add-card {

    flex-shrink:0;

    width:104px;

    scroll-snap-align:start;

}

.memory-item {

    display:flex;

    flex-direction:column;

    gap:6px;

}

.memory-photo-wrap {

    position:relative;

    width:104px;

    height:104px;

    border-radius:18px;

    overflow:hidden;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

}

.memory-photo-wrap img {

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.memory-delete-btn.confirm {

    background:rgba(220,60,60,0.9);

}

.memory-delete-btn {

    position:absolute;

    top:5px;

    right:5px;

    width:20px;

    height:20px;

    border-radius:50%;

    border:none;

    background:rgba(30,25,35,0.45);

    color:#fff;

    font-size:12px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

}

.memory-caption {

    width:100%;

    border:none;

    background:transparent;

    font-size:12px;

    text-align:center;

    color:rgba(60,60,70,0.6);

    font-style:italic;

    padding:2px 0;

    box-sizing:border-box;

}

.memory-caption:focus {

    outline:none;

    color:rgba(40,40,50,0.85);

}

.memory-add-card {

    height:104px;

    border-radius:18px;

    border:1.5px dashed rgba(255,255,255,0.8);

    background:rgba(255,255,255,0.18);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.memory-add-plus {

    font-size:26px;

    font-weight:300;

    color:rgba(60,60,70,0.45);

}


/* ===== 侧边栏触发按钮 ===== */

.menu-btn {

    position:absolute;

    top:calc(32px + env(safe-area-inset-top));

    left:calc(25px + env(safe-area-inset-left));

    z-index:20;

    width:38px;

    height:38px;

    border:none;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    background:rgba(255,255,255,0.35);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.6);

}

.menu-btn svg {

    width:20px;

    height:20px;

    fill:none;

    stroke:rgba(60,60,70,0.7);

    stroke-width:1.8;

    stroke-linecap:round;

}


/* ===== 侧边栏遮罩 ===== */

.sidebar-backdrop {

    position:absolute;

    inset:0;

    background:rgba(20,20,30,0.25);

    backdrop-filter:blur(2px);

    opacity:0;

    pointer-events:none;

    transition:opacity 0.35s ease;

    z-index:30;

}

.sidebar-backdrop.show {

    opacity:1;

    pointer-events:auto;

}


/* ===== 滑出式侧边栏 ===== */

.sidebar {

    position:absolute;

    top:0;

    left:0;

    bottom:0;

    width:78%;

    max-width:320px;

    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.6), transparent 42%),
        radial-gradient(circle at 100% 85%, rgba(255,255,255,0.3), transparent 45%),
        linear-gradient(
            165deg,
            rgba(255,225,238,0.82),
            rgba(225,232,255,0.8)
        );

    backdrop-filter:blur(34px) saturate(1.3);

    -webkit-backdrop-filter:blur(34px) saturate(1.3);

    border-right:1px solid rgba(255,255,255,0.65);

    box-shadow:
        10px 0 40px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 1px 0 0 rgba(255,255,255,0.5);

    transform:translateX(-100%);

    transition:transform 0.4s cubic-bezier(0.22,0.9,0.32,1);

    z-index:35;

    display:flex;

    flex-direction:column;

    padding:calc(28px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));

}

.sidebar.open {

    transform:translateX(0);

}

.sidebar-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.sidebar-header h2 {

    margin:0;

    font-size:18px;

    font-weight:500;

    color:rgba(40,40,50,0.8);

}

.sidebar-close {

    border:none;

    background:none;

    font-size:16px;

    color:rgba(60,60,70,0.5);

    cursor:pointer;

    padding:4px;

}

.sidebar-search {

    margin-top:22px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border-radius:16px;

    background:rgba(255,255,255,0.55);

    border:1px solid rgba(255,255,255,0.7);

}

.search-icon {

    font-size:14px;

    color:rgba(60,60,70,0.4);

}

.sidebar-search input {

    flex:1;

    border:none;

    background:none;

    outline:none;

    font-size:14px;

    color:#333;

    font-family:inherit;

}

.sidebar-search input::placeholder {

    color:rgba(60,60,70,0.35);

}

.new-chat-btn {

    margin-top:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:16px;

    padding:12px;

    font-size:14px;

    font-weight:500;

    color:rgba(50,50,65,0.75);

    cursor:pointer;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.4),
        rgba(190,220,255,0.4)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.18),
        inset 0 1px 0 rgba(255,255,255,0.8);

}

.new-chat-icon {

    font-size:16px;

    line-height:1;

}

.sidebar-section-title {

    margin-top:26px;

    margin-bottom:10px;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(60,60,70,0.4);

}

.session-list {

    list-style:none;

    margin:0;

    padding:0;

    overflow-y:auto;

    flex:1;

}

.session-item {

    padding:12px 12px;

    border-radius:14px;

    cursor:pointer;

    margin-bottom:6px;

    transition:background 0.2s ease;

}

.session-item:hover,
.session-item.active {

    background:rgba(255,143,179,0.15);

}


.session-item-title {

    font-size:14px;

    color:#333;

    display:flex;

    justify-content:space-between;

    gap:8px;

}

/* 长按菜单里点了重命名：标题原地变成输入框 */
.session-title-input {

    flex:1;

    min-width:0;

    padding:2px 6px;

    border:1px solid rgba(255,111,165,0.5);

    border-radius:8px;

    outline:none;

    background:rgba(255,255,255,0.85);

    color:#333;

    font-family:inherit;

    /* iOS 输入框小于 16px 聚焦会把整个页面放大 */
    font-size:16px;

}

.session-item-title span:last-child {

    font-size:11px;

    color:rgba(60,60,70,0.4);

    white-space:nowrap;

}

.session-item-preview {

    margin-top:4px;

    font-size:12px;

    color:rgba(60,60,70,0.5);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.session-empty {

    display:none;

    text-align:center;

    font-size:13px;

    color:rgba(60,60,70,0.4);

    margin-top:20px;

}


/* ===== 历史会话：长按弹出的删除菜单 ===== */

.session-context-menu {

    position:absolute;

    z-index:50;

    min-width:170px;

    padding:6px;

    border-radius:16px;

    background:rgba(255,255,255,0.9);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:0 12px 30px rgba(0,0,0,0.18);

    opacity:0;

    transform:scale(0.9);

    transform-origin:top left;

    pointer-events:none;

    transition:opacity 0.15s ease, transform 0.15s ease;

}

.session-context-menu.show {

    opacity:1;

    transform:scale(1);

    pointer-events:auto;

}

.session-context-rename,
.session-context-delete {

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    padding:10px 12px;

    border:none;

    border-radius:12px;

    background:none;

    color:#ff4d5e;

    font-size:14px;

    font-weight:500;

    cursor:pointer;

    text-align:left;

}

.session-context-delete:hover,
.session-context-delete:active {

    background:rgba(255,90,90,0.12);

}

.session-context-rename {

    color:rgba(40,40,50,0.8);

}

.session-context-rename:hover,
.session-context-rename:active {

    background:rgba(60,60,70,0.08);

}

.session-context-rename svg,
.session-context-delete svg {

    width:16px;

    height:16px;

    flex-shrink:0;

    fill:none;

    stroke:#ff4d5e;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ===== 聊天记录视图 ===== */

.chat-view-header {

    display:flex;

    align-items:center;

    gap:14px;

    padding:calc(32px + env(safe-area-inset-top)) 22px 18px;

    border-bottom:1px solid rgba(0,0,0,0.05);

}

.chat-back-btn {

    border:none;

    background:rgba(255,255,255,0.5);

    width:34px;

    height:34px;

    border-radius:12px;

    font-size:16px;

    color:rgba(60,60,70,0.7);

    cursor:pointer;

}

.chat-view-header span {

    font-size:16px;

    font-weight:500;

    color:rgba(40,40,50,0.8);

}

/* 消息行：头像 + 气泡，双方样式一致，仅方向不同 */

.chat-message-row {

    display:flex;

    align-items:flex-end;

    gap:8px;

    max-width:85%;

    /* flex 子元素默认不会缩到比内容还窄（比如一长串没有空格的链接），
       加 min-width:0 这条链路才能被下面的 overflow-wrap 真正约束住，
       不然整个聊天页会被这一条消息撑宽，出现横向滚动 */
    min-width:0;

}

.chat-message-row.claude {

    align-self:flex-start;

}

.chat-message-row.me {

    align-self:flex-end;

    flex-direction:row-reverse;

}

.chat-message-row.bubble-in {

    animation:bubbleIn 0.4s cubic-bezier(0.34,1.56,0.64,1);

}

.chat-avatar-mini {

    width:30px;

    height:30px;

    flex-shrink:0;

    border-radius:50%;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,0.75);

    color:rgba(120,120,130,0.5);

}

.chat-avatar-mini svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.chat-avatar-mini.me {

    background-color:rgba(255,200,220,0.4);

}

.chat-avatar-mini.claude {

    background-color:rgba(190,220,255,0.4);

}

.chat-bubble {

    min-width:0;

    /* 一整条没有空格的长链接（表情包/图片 URL）也要能在气泡边缘断开，
       不然会把整个聊天页横向撑宽 */
    overflow-wrap:anywhere;

    /* 保留回复里的换行和空行，不然 \n 全被浏览器合并成空格 */
    white-space:pre-wrap;

    padding:11px 16px;

    border-radius:20px;

    font-size:14px;

    line-height:1.45;

    color:rgba(40,40,50,0.85);

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.45),
        rgba(190,220,255,0.45)
    );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:
        0 6px 16px rgba(150,170,220,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);

}

.chat-bubble.me {

    border-bottom-right-radius:6px;

}

.chat-bubble.claude {

    border-bottom-left-radius:6px;

}

/* 气泡列：头像旁边竖着叠"思考过程"折叠条 + 气泡本体 */

.chat-bubble-col {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:6px;

    min-width:0;

    max-width:100%;

}

.chat-message-row.me .chat-bubble-col {

    align-items:flex-end;

}

.chat-thinking-toggle {

    display:flex;

    align-items:center;

    gap:5px;

    padding:5px 11px;

    border:1px solid rgba(255,255,255,0.6);

    border-radius:999px;

    background:rgba(255,255,255,0.35);

    font-size:11px;

    color:rgba(60,60,70,0.55);

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

}

.chat-thinking-toggle svg {

    width:11px;

    height:11px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

    transition:transform 0.2s ease;

}

.chat-thinking-toggle.open svg {

    transform:rotate(180deg);

}

.chat-thinking-box {

    display:none;

    max-width:100%;

    box-sizing:border-box;

    padding:10px 14px;

    border-radius:14px;

    background:rgba(255,255,255,0.3);

    border:1px solid rgba(255,255,255,0.5);

    font-size:12px;

    line-height:1.6;

    color:rgba(60,60,70,0.65);

    white-space:pre-wrap;

    word-break:break-word;

}

.chat-thinking-box.show {

    display:block;

}

/* 等回复第一个字之前，气泡里先跳三个点 */

.chat-thinking-dots {

    display:flex;

    align-items:center;

    gap:4px;

    padding:3px 2px;

}

.chat-thinking-dots span {

    width:6px;

    height:6px;

    border-radius:50%;

    background:rgba(60,60,70,0.4);

    animation:chatDotBounce 1.2s ease-in-out infinite;

}

.chat-thinking-dots span:nth-child(2) {

    animation-delay:0.15s;

}

.chat-thinking-dots span:nth-child(3) {

    animation-delay:0.3s;

}

@keyframes chatDotBounce {

    0%, 60%, 100% {
        transform:translateY(0);
        opacity:0.4;
    }

    30% {
        transform:translateY(-5px);
        opacity:1;
    }

}

@keyframes bubbleIn {

    from {
        transform:scale(0.5);
        opacity:0;
    }

    to {
        transform:scale(1);
        opacity:1;
    }

}

.chat-empty {

    margin:auto;

    text-align:center;

    color:rgba(60,60,70,0.4);

    font-size:13px;

}

.chat-loading-older {

    text-align:center;

    color:rgba(60,60,70,0.4);

    font-size:12px;

    padding:6px 0;

    margin:0;

}


/* ===== 底部导航页面切换 ===== */

.page {

    display:none;

    height:100%;

}

.page.active {

    display:block;

}


/* ===== 聊天页面（Chat 标签页） ===== */

.chat-page.active {

    display:flex;

    flex-direction:column;

}

.chat-page-header {

    position:relative;

    padding:calc(34px + env(safe-area-inset-top)) 24px 10px;

    text-align:center;

}

.chat-page-back-btn {

    display:none;

    position:absolute;

    left:20px;

    top:calc(30px + env(safe-area-inset-top));

    width:34px;

    height:34px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,0.5);

    color:rgba(60,60,70,0.7);

    font-size:16px;

    cursor:pointer;

    align-items:center;

    justify-content:center;

}

.chat-page-back-btn.show {

    display:flex;

}

.chat-page-header h2 {

    margin:0;

    font-size:18px;

    font-weight:500;

    color:rgba(40,40,50,0.8);

}

.chat-page-messages {

    flex:1;

    overflow-y:auto;

    /* 图片加载撑高内容时的滚动补偿由 keepChatScrollOnImageLoad 自己做，关掉浏览器的
       scroll anchoring，免得两边一起补、补过头 */
    overflow-anchor:none;

    padding:16px 20px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.chat-composer {

    display:flex;

    flex-direction:column;

    gap:6px;

    margin:0 20px calc(128px + env(safe-area-inset-bottom));

    padding:10px 10px 8px;

    border-radius:26px;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.35),
        rgba(190,220,255,0.35)
    );

    backdrop-filter:blur(25px);

    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:
        0 8px 24px rgba(150,170,220,0.18),
        inset 0 1px 0 rgba(255,255,255,0.7);

}

.chat-input-row {

    display:flex;

    align-items:flex-end;

    gap:10px;

    padding:0 6px;

}

.chat-input-row textarea {

    flex:1;

    min-width:0;

    border:none;

    background:none;

    outline:none;

    /* 多行输入：跟着内容长高，最多 6 行左右，再多就在框里滚动 */
    resize:none;

    padding:7px 0;

    line-height:1.45;

    max-height:9em;

    overflow-y:auto;

    /* iOS 上小于 16px 聚焦时会自动放大页面，原来的 input 也是 14px，保持一致 */
    font-size:14px;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

}

.chat-input-row textarea::placeholder {

    color:rgba(60,60,70,0.4);

}

/* 工具行：附件 + 模型选择 + 强度选择，仿官方 composer 的第二排 */

.chat-composer-tools {

    display:flex;

    align-items:center;

    gap:8px;

    padding-top:4px;

}

.chat-model-group {

    position:relative;

}

.chat-model-btn {

    display:flex;

    align-items:center;

    gap:5px;

    padding:6px 12px;

    border:1px solid rgba(255,255,255,0.7);

    border-radius:999px;

    background:rgba(255,255,255,0.4);

    color:rgba(50,50,65,0.7);

    font-size:12px;

    font-weight:500;

    cursor:pointer;

}

.chat-model-caret {

    width:12px;

    height:12px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.chat-model-menu {

    position:absolute;

    left:0;

    bottom:calc(100% + 8px);

    z-index:40;

    min-width:150px;

    padding:6px;

    border-radius:16px;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:0 12px 30px rgba(0,0,0,0.16);

    opacity:0;

    visibility:hidden;

    transform:translateY(6px) scale(0.96);

    transform-origin:bottom left;

    transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;

    pointer-events:none;

}

.chat-model-menu.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0) scale(1);

    pointer-events:auto;

}

.chat-model-option {

    display:block;

    width:100%;

    padding:9px 12px;

    border:none;

    border-radius:11px;

    background:none;

    text-align:left;

    font-size:13px;

    color:rgba(40,40,50,0.8);

    cursor:pointer;

}

.chat-model-option:hover,
.chat-model-option:active {

    background:rgba(255,143,179,0.15);

}

.chat-model-option.selected {

    color:#ff6fa5;

    font-weight:600;

}

.chat-send-btn {

    position:relative;

    width:34px;

    height:34px;

    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.7);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    box-shadow:0 4px 10px rgba(150,170,220,0.35);

    transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1);

}

/* 发送之后到这轮真正处理完（包括看不见的后台收尾）之前一直转圈，让用户
   知道"还在忙，不是发不出去"，不用再靠猜 */
.chat-send-btn.sending svg {

    opacity:0;

}

.chat-send-btn.sending::after {

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,0.4);

    border-top-color:#fff;

    animation:chat-send-spin 0.7s linear infinite;

}

@keyframes chat-send-spin {

    to { transform:rotate(360deg); }

}

.chat-send-btn:active {

    transform:scale(0.85);

    transition:transform 0.1s ease-out;

}

.chat-send-btn svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:#fff;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ===== Chat 附件（图片/文件） ===== */

.chat-attach-btn {

    width:32px;

    height:32px;

    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.7);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,0.5);

}

.chat-attach-btn svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:rgba(70,80,100,0.7);

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

/* "去花园"开关——点亮之后消息会走隔离的 Garden 模式（见 app/claude.py 的
   garden 参数），常驻状态，用户自己点掉才会关 */
.chat-garden-btn {

    width:32px;

    height:32px;

    flex-shrink:0;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.7);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,0.5);

    transition:background 0.15s ease, border-color 0.15s ease;

}

.chat-garden-btn svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:rgba(70,80,100,0.7);

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.chat-garden-btn.active {

    background:linear-gradient(135deg, rgba(255,200,220,0.55), rgba(190,220,255,0.55));

    border-color:rgba(255,255,255,0.9);

}

.chat-garden-btn.active svg {

    stroke:rgba(60,60,70,0.9);

}

.chat-attachments {

    display:none;

    flex-wrap:wrap;

    gap:8px;

    margin:0 20px 10px;

}

.chat-attachments.show {

    display:flex;

}

.attachment-chip {

    position:relative;

    display:flex;

    align-items:center;

    gap:6px;

    max-width:130px;

    padding:6px 10px;

    border-radius:14px;

    font-size:12px;

    color:rgba(40,40,50,0.8);

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.4),
        rgba(190,220,255,0.4)
    );

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,0.7);

}

.attachment-chip img {

    width:22px;

    height:22px;

    border-radius:6px;

    object-fit:cover;

    flex-shrink:0;

}

.attachment-chip-name {

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.attachment-chip-remove {

    flex-shrink:0;

    width:16px;

    height:16px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,0.7);

    color:rgba(60,60,70,0.7);

    font-size:11px;

    line-height:1;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* 消息气泡里的附件 */

.chat-bubble .bubble-image-loading {

    opacity:.6;

}

.chat-bubble .bubble-image-loading.failed {

    opacity:1;

}

.chat-bubble img.bubble-image {

    display:block;

    max-width:160px;

    max-height:320px;

    object-fit:cover;

    border-radius:14px;

    margin-top:4px;

}

/* Claude 聊天里贴出来的表情包（文字里识别出的图片链接），比上传的照片小一号，
   跟文字混排的时候也不会突兀 */
.chat-bubble img.bubble-sticker {

    display:block;

    max-width:130px;

    max-height:130px;

    width:auto;

    height:auto;

    border-radius:12px;

    margin:4px 0;

}

.chat-bubble .bubble-file {

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:4px;

    font-size:13px;

}

.chat-bubble .bubble-file svg {

    width:16px;

    height:16px;

    flex-shrink:0;

    fill:none;

    stroke:rgba(40,40,50,0.7);

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}


/* ===== Together / Mine 页面 & 子页面共用 ===== */

.together-page.active,
.listen-page.active,
.call-page.active,
.flychess-page.active,
.mine-page.active,
.profile-view-page.active,
.period-page.active,
.milktea-page.active,
.todo-page.active {

    display:flex;

    flex-direction:column;

    height:100%;

    padding-bottom:calc(130px + env(safe-area-inset-bottom));

}

/* 这 130px 下边距平时是给 .nav 让位置的，键盘弹出时 .nav 已经隐藏，
   这些页面又是靠内部滚动区域自己滚到输入框、不是像 .chat-composer 那样
   贴键盘的，所以更要把这块预留空间还回去，不然可视区域本来就被键盘占掉
   一大截，剩下的空间还被这 130px 占掉一部分，内容区域会被压缩得很小，
   看起来像被一大块东西糊住 */
body.keyboard-open .together-page.active,
body.keyboard-open .listen-page.active,
body.keyboard-open .call-page.active,
body.keyboard-open .flychess-page.active,
body.keyboard-open .mine-page.active,
body.keyboard-open .profile-view-page.active,
body.keyboard-open .period-page.active,
body.keyboard-open .milktea-page.active,
body.keyboard-open .todo-page.active {

    padding-bottom:env(safe-area-inset-bottom);

}

.todo-page {

    position:relative;

}


/* ===== Together 卡片列表 ===== */

.together-cards {

    padding:8px 20px 0;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.together-card {

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 18px;

    border-radius:24px;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.32),
        rgba(190,220,255,0.32)
    );

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,0.65);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);

    transition:transform 0.15s ease;

}

.together-card:active {

    transform:scale(0.97);

}

.together-card-icon {

    width:46px;

    height:46px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,0.55);

    border:1px solid rgba(255,255,255,0.75);

}

.together-card-icon svg {

    width:22px;

    height:22px;

    fill:none;

    stroke:rgba(70,80,100,0.75);

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.together-card-text {

    flex:1;

    display:flex;

    flex-direction:column;

    gap:3px;

}

.together-card-text strong {

    font-size:15px;

    font-weight:500;

    color:rgba(40,40,50,0.85);

}

.together-card-text span {

    font-size:12px;

    color:rgba(60,60,70,0.5);

}

.together-card-arrow {

    font-size:20px;

    color:rgba(60,60,70,0.35);

}


/* ===== 一起听 ===== */

.listen-content {

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:20px;

}

.album-art {

    width:160px;

    height:160px;

    border-radius:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.4),
        rgba(190,220,255,0.4)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:
        0 12px 30px rgba(150,170,220,0.2),
        inset 0 1px 0 rgba(255,255,255,0.7);

}

.album-art svg {

    width:56px;

    height:56px;

    fill:none;

    stroke:rgba(70,80,100,0.55);

    stroke-width:1.4;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.track-title {

    font-size:16px;

    font-weight:500;

    color:rgba(40,40,50,0.85);

    margin:6px 0 0;

}

.track-sub {

    font-size:12px;

    color:rgba(60,60,70,0.45);

    margin:0;

}

.listen-progress {

    width:75%;

    height:4px;

    border-radius:2px;

    background:rgba(255,255,255,0.5);

    overflow:hidden;

    margin-top:8px;

}

.listen-progress-bar {

    width:0%;

    height:100%;

    border-radius:2px;

    background:linear-gradient(90deg,#ff8fb3,#8fc6ff);

}

.listen-controls {

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:10px;

}

.listen-btn {

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.7);

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.listen-btn svg {

    width:18px;

    height:18px;

    fill:rgba(70,80,100,0.75);

    stroke:none;

}

.listen-btn-main {

    width:60px;

    height:60px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    border:1px solid rgba(255,255,255,0.75);

    box-shadow:0 6px 16px rgba(150,170,220,0.35);

}

.listen-btn-main svg {

    fill:#fff;

}


/* ===== 语音通话 ===== */

.call-content {

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:20px;

}

.call-avatar {

    width:120px;

    height:120px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    color:rgba(120,120,130,0.4);

    cursor:pointer;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        rgba(190,220,255,0.45),
        rgba(255,200,220,0.3)
    );

    background-size:cover;

    background-position:center;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.75);

    box-shadow:
        0 12px 30px rgba(140,180,255,0.25),
        inset 0 1px 0 rgba(255,255,255,0.7);

}

.call-name {

    font-size:18px;

    font-weight:500;

    color:rgba(40,40,50,0.85);

    margin:10px 0 0;

}

.call-status {

    font-size:13px;

    color:rgba(60,60,70,0.45);

    margin:0 0 12px;

}

.call-controls {

    display:flex;

    align-items:center;

    gap:26px;

}

.call-btn {

    width:50px;

    height:50px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.7);

    background:rgba(255,255,255,0.45);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.call-btn svg {

    width:20px;

    height:20px;

    fill:none;

    stroke:rgba(70,80,100,0.75);

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.call-btn-main {

    width:66px;

    height:66px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    border:1px solid rgba(255,255,255,0.75);

    box-shadow:0 8px 20px rgba(150,170,220,0.4);

}

.call-btn-main svg {

    stroke:#fff;

}


/* ===== Mine 页面 ===== */

.mine-profile {

    display:flex;

    flex-direction:column;

    align-items:center;

    padding:10px 20px 4px;

}

.mine-avatar {

    width:96px;

    height:96px;

    font-size:28px;

    box-shadow:
        0 12px 26px rgba(255,143,179,0.22),
        0 0 0 5px rgba(255,210,225,0.3);

}

.mine-name {

    margin-top:12px;

    font-size:16px;

    font-weight:500;

    color:rgba(40,40,50,0.85);

}

.mine-cards {

    padding-top:22px;

}


/* ===== 个人设置（仿 chatnest Profile 页）===== */

/* 三个内层小屏幕叠在同一个 .profile-view-page 里，靠 .active 切换，
   跟 chatnest 的 profileHome/savedMemories/preferences 是同一个思路 */

.profile-screen {

    display:none;

    flex:1;

    min-height:0;

    overflow-y:auto;

    flex-direction:column;

    gap:14px;

    padding:18px 20px 20px;

}

.profile-screen.active {

    display:flex;

}

.profile-card {

    padding:16px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.28),
        rgba(190,220,255,0.28)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.14),
        inset 0 1px 0 rgba(255,255,255,0.6);

}

.profile-name-row {

    display:flex;

    align-items:center;

    gap:14px;

}

.profile-name-label {

    width:52px;

    flex-shrink:0;

    font-size:13px;

    color:rgba(60,60,70,0.55);

}

.profile-name-input {

    flex:1;

    min-width:0;

    border:none;

    background:none;

    outline:none;

    font-size:14px;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

}

.profile-name-input::placeholder {

    color:rgba(60,60,70,0.35);

}

.profile-divider {

    height:1px;

    margin:12px 0;

    background:rgba(60,60,70,0.12);

}

.profile-nav-row {

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:15px 16px;

    border:none;

    border-radius:20px;

    text-align:left;

    cursor:pointer;

    background:rgba(255,255,255,0.4);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,0.65);

    box-shadow:0 6px 16px rgba(150,170,220,0.1);

}

.profile-nav-row-icon {

    width:30px;

    height:30px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,0.55);

}

.profile-nav-row-icon svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:rgba(70,80,100,0.75);

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.profile-nav-row-title {

    flex:1;

    min-width:0;

    font-size:14px;

    color:rgba(40,40,50,0.85);

}

.profile-nav-row-note {

    display:block;

    margin-top:2px;

    font-size:11px;

    color:rgba(60,60,70,0.45);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.profile-nav-chevron {

    font-size:18px;

    color:rgba(60,60,70,0.35);

}

.profile-help-text {

    font-size:12px;

    line-height:1.6;

    color:rgba(60,60,70,0.5);

}

.profile-section-title {

    font-size:13px;

    font-weight:500;

    color:rgba(40,40,50,0.8);

}

.profile-card-top {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

/* 玻璃风开关，跟 todo 环形进度一样走渐变色系 */

.profile-switch {

    flex-shrink:0;

    width:44px;

    height:26px;

    border:none;

    border-radius:999px;

    padding:3px;

    cursor:pointer;

    background:rgba(60,60,70,0.15);

    transition:background 0.25s ease;

}

.profile-switch::before {

    content:"";

    display:block;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 6px rgba(0,0,0,0.15);

    transition:transform 0.25s ease;

}

.profile-switch.on {

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

}

.profile-switch.on::before {

    transform:translateX(18px);

}

.profile-preferences-textarea {

    width:100%;

    min-height:140px;

    margin-top:12px;

    border:none;

    outline:none;

    resize:vertical;

    background:rgba(255,255,255,0.4);

    border-radius:16px;

    padding:12px 14px;

    font-size:13px;

    line-height:1.6;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

}

.profile-preferences-textarea::placeholder {

    color:rgba(60,60,70,0.35);

}

.profile-memory-form {

    display:flex;

    gap:8px;

}

.profile-memory-form textarea {

    flex:1;

    min-width:0;

    padding:12px 14px;

    border:1px solid rgba(255,255,255,0.7);

    border-radius:16px;

    background:rgba(255,255,255,0.5);

    font-size:13px;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

    outline:none;

}

.profile-memory-form textarea::placeholder {

    color:rgba(60,60,70,0.4);

}

.profile-mini-add-btn {

    flex-shrink:0;

    padding:0 16px;

    border:none;

    border-radius:16px;

    font-size:13px;

    font-weight:500;

    color:#fff;

    cursor:pointer;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    box-shadow:0 6px 16px rgba(150,170,220,0.35);

}

.profile-memory-list {

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.profile-memory-item {

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,0.5);

    border:1px solid rgba(255,255,255,0.7);

}

.profile-memory-item.off {

    opacity:0.5;

}

.profile-memory-text {

    flex:1;

    min-width:0;

    font-size:13px;

    line-height:1.4;

    color:rgba(40,40,50,0.8);

    word-break:break-word;

    white-space:pre-wrap;

}

.profile-memory-text.collapsed {

    display:-webkit-box;

    -webkit-line-clamp:6;

    -webkit-box-orient:vertical;

    overflow:hidden;

    cursor:pointer;

}

.profile-memory-form textarea {

    resize:vertical;

    max-height:40vh;

    line-height:1.4;

}

.profile-memory-toggle {

    flex-shrink:0;

    width:36px;

    height:22px;

    border:none;

    border-radius:999px;

    padding:2px;

    cursor:pointer;

    background:rgba(60,60,70,0.15);

    transition:background 0.2s ease;

}

.profile-memory-toggle::before {

    content:"";

    display:block;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#fff;

    box-shadow:0 2px 5px rgba(0,0,0,0.15);

    transition:transform 0.2s ease;

}

.profile-memory-toggle.on {

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

}

.profile-memory-toggle.on::before {

    transform:translateX(14px);

}

.profile-memory-remove {

    flex-shrink:0;

    width:20px;

    height:20px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,0.06);

    color:rgba(60,60,70,0.6);

    font-size:11px;

    line-height:1;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.profile-empty {

    display:none;

    margin-top:6px;

    text-align:center;

    font-size:13px;

    color:rgba(60,60,70,0.4);

}

.profile-mini-generate-btn {

    opacity:0.55;

}

.profile-summary-text {

    margin:10px 0 0;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,0.4);

    font-size:13px;

    line-height:1.6;

    color:rgba(60,60,70,0.55);

}


/* ===== 轻提示 Toast，点了还没接的功能时用来给反馈 ===== */

.toast {

    position:fixed;

    left:50%;

    bottom:calc(150px + env(safe-area-inset-bottom));

    z-index:200;

    max-width:80%;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(40,40,50,0.82);

    color:#fff;

    font-size:13px;

    text-align:center;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    transform:translate(-50%,10px);

    opacity:0;

    pointer-events:none;

    transition:opacity 0.25s ease, transform 0.25s ease;

}

.toast.show {

    opacity:1;

    transform:translate(-50%,0);

}


/* ===== 经期记录 ===== */

.period-content {

    flex:1;

    overflow-y:auto;

    padding:8px 20px 20px;

}

.period-summary {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

    padding:20px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(255,190,210,0.32),
        rgba(190,220,255,0.28)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);

}

.period-summary-item {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

}

.period-summary-item strong {

    font-size:26px;

    font-weight:600;

    color:#ff6fa5;

}

.period-summary-item span {

    font-size:11px;

    letter-spacing:1px;

    color:rgba(60,60,70,0.5);

}

.period-summary-divider {

    width:1px;

    height:34px;

    background:rgba(60,60,70,0.15);

}

.period-log-btn {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:16px;

    padding:13px;

    border:none;

    border-radius:18px;

    font-size:14px;

    font-weight:500;

    color:#fff;

    cursor:pointer;

    background:linear-gradient(135deg,#ff6fa5,#ff9bb8);

    box-shadow:0 8px 20px rgba(255,110,150,0.3);

}

.period-log-icon {

    font-size:16px;

    line-height:1;

}

.period-list-title {

    margin:22px 0 10px;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(60,60,70,0.4);

}

.period-list {

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.period-item {

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,0.5);

    border:1px solid rgba(255,255,255,0.7);

}

.period-item-date {

    font-size:14px;

    color:rgba(40,40,50,0.8);

}

.period-item-gap {

    flex:1;

    text-align:right;

    font-size:12px;

    color:rgba(60,60,70,0.45);

}

.period-item-remove {

    flex-shrink:0;

    width:20px;

    height:20px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,0.06);

    color:rgba(60,60,70,0.6);

    font-size:11px;

    line-height:1;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.period-empty {

    display:none;

    margin-top:20px;

    text-align:center;

    font-size:13px;

    color:rgba(60,60,70,0.4);

}


/* ===== 奶茶记录 ===== */

.milktea-content {

    flex:1;

    overflow-y:auto;

    padding:8px 20px 20px;

}

.milktea-count {

    display:flex;

    align-items:baseline;

    justify-content:center;

    gap:8px;

    padding:18px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.3),
        rgba(190,220,255,0.32)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.15),
        inset 0 1px 0 rgba(255,255,255,0.6);

}

.milktea-count strong {

    font-size:26px;

    font-weight:600;

    color:#5b9dff;

}

.milktea-count span {

    font-size:12px;

    color:rgba(60,60,70,0.5);

}

.milktea-form {

    display:flex;

    gap:8px;

    margin-top:16px;

}

.milktea-form input {

    flex:1;

    min-width:0;

    padding:12px 14px;

    border:1px solid rgba(255,255,255,0.7);

    border-radius:16px;

    background:rgba(255,255,255,0.5);

    font-size:13px;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

    outline:none;

}

.milktea-form input::placeholder {

    color:rgba(60,60,70,0.4);

}

.milktea-add-btn {

    flex-shrink:0;

    padding:0 16px;

    border:none;

    border-radius:16px;

    font-size:13px;

    font-weight:500;

    color:#fff;

    cursor:pointer;

    background:linear-gradient(135deg,#8fc6ff,#ff8fb3);

    box-shadow:0 6px 16px rgba(150,170,220,0.35);

}

.milktea-list {

    list-style:none;

    margin:18px 0 0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.milktea-item {

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border-radius:16px;

    background:rgba(255,255,255,0.5);

    border:1px solid rgba(255,255,255,0.7);

}

.milktea-item-info {

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.milktea-item-name {

    font-size:14px;

    color:rgba(40,40,50,0.8);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.milktea-item-date {

    font-size:11px;

    color:rgba(60,60,70,0.45);

}

.milktea-item-remove {

    flex-shrink:0;

    width:20px;

    height:20px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,0.06);

    color:rgba(60,60,70,0.6);

    font-size:11px;

    line-height:1;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.milktea-empty {

    display:none;

    margin-top:20px;

    text-align:center;

    font-size:13px;

    color:rgba(60,60,70,0.4);

}


/* ===== 待办 ===== */

.todo-content {

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    padding:8px 20px 20px;

}

.todo-columns {

    display:flex;

    gap:12px;

}

.todo-column {

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    padding:16px 12px;

    border-radius:22px;

    background:linear-gradient(
        160deg,
        rgba(255,200,220,0.22),
        rgba(190,220,255,0.22)
    );

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.55);

    box-shadow:
        0 8px 20px rgba(150,170,220,0.12),
        inset 0 1px 0 rgba(255,255,255,0.5);

}

.todo-column-header {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    margin-bottom:14px;

    padding:6px 8px;

    border-radius:16px;

    cursor:pointer;

    transition:background 0.2s ease;

}

.todo-column-header.target-active {

    background:rgba(255,255,255,0.45);

}

.todo-ring {

    position:relative;

    width:52px;

    height:52px;

}

.todo-ring svg {

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.todo-ring-track {

    fill:none;

    stroke:rgba(60,60,70,0.12);

    stroke-width:5;

}

.todo-ring-progress {

    fill:none;

    stroke-width:5;

    stroke-linecap:round;

    stroke-dasharray:163.36;

    stroke-dashoffset:163.36;

    transition:stroke-dashoffset 0.5s ease;

}

.todo-ring-label {

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:600;

    color:rgba(40,40,50,0.75);

}

.todo-column-title {

    font-size:12px;

    letter-spacing:1px;

    color:rgba(60,60,70,0.5);

}

.todo-list {

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.todo-item {

    display:flex;

    align-items:flex-start;

    gap:8px;

    padding:9px 10px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

}

.todo-check {

    flex-shrink:0;

    width:18px;

    height:18px;

    margin-top:1px;

    border-radius:50%;

    border:1.5px solid rgba(150,140,160,0.4);

    background:none;

    cursor:pointer;

    padding:0;

    position:relative;

}

.todo-item.done .todo-check {

    border-color:transparent;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

}

.todo-item.done .todo-check::after {

    content:"";

    position:absolute;

    top:3px;

    left:5px;

    width:4px;

    height:8px;

    border:solid #fff;

    border-width:0 1.5px 1.5px 0;

    transform:rotate(40deg);

}

.todo-item-content {

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.todo-item-text {

    font-size:13px;

    line-height:1.4;

    color:rgba(40,40,50,0.85);

    cursor:pointer;

    word-break:break-word;

}

.todo-item.done .todo-item-text {

    text-decoration:line-through;

    color:rgba(60,60,70,0.4);

}

.todo-item-due {

    font-size:11px;

    color:rgba(60,60,70,0.4);

}

.todo-item-due.overdue {

    color:#ff6fa5;

}

.todo-empty {

    display:none;

    margin-top:10px;

    text-align:center;

    font-size:12px;

    color:rgba(60,60,70,0.4);

}

.todo-input-bar {

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    padding:8px 10px;

    border-radius:24px;

    background:linear-gradient(
        135deg,
        rgba(255,200,220,0.3),
        rgba(190,220,255,0.3)
    );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

}

.todo-input-bar input[type="text"] {

    flex:1;

    min-width:0;

    border:none;

    background:none;

    outline:none;

    font-size:13px;

    color:rgba(40,40,50,0.85);

    font-family:inherit;

    padding:6px 4px;

}

.todo-input-bar input[type="text"]::placeholder {

    color:rgba(60,60,70,0.4);

}

.todo-due-btn {

    flex-shrink:0;

    width:32px;

    height:32px;

    padding:0;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,0.5);

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.todo-due-btn svg {

    width:16px;

    height:16px;

    fill:none;

    stroke:rgba(60,60,70,0.6);

    stroke-width:1.6;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.todo-due-btn.has-date {

    width:auto;

    padding:0 10px;

    border-radius:14px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

    font-size:12px;

    font-weight:500;

    white-space:nowrap;

}

.todo-add-btn {

    flex-shrink:0;

    width:32px;

    height:32px;

    border:none;

    border-radius:50%;

    font-size:18px;

    line-height:1;

    color:#fff;

    cursor:pointer;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    box-shadow:0 4px 10px rgba(150,170,220,0.35);

}

@media (max-width:380px) {

    .todo-columns {
        flex-direction:column;
    }

}


/* ===== 待办自建日期弹窗（不用系统日期选择器，样式和定位都自己控制） ===== */

.todo-calendar {

    position:absolute;

    z-index:60;

    width:240px;

    padding:14px;

    border-radius:20px;

    background:rgba(255,255,255,0.92);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:0 14px 34px rgba(0,0,0,0.18);

    opacity:0;

    visibility:hidden;

    transform:scale(0.92);

    transform-origin:bottom right;

    transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;

    pointer-events:none;

}

.todo-calendar.show {

    opacity:1;

    visibility:visible;

    transform:scale(1);

    pointer-events:auto;

}

.todo-calendar-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

}

.todo-calendar-title {

    font-size:13px;

    font-weight:600;

    color:rgba(40,40,50,0.85);

}

.todo-calendar-nav {

    width:24px;

    height:24px;

    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:rgba(255,143,179,0.15);

    color:rgba(60,60,70,0.7);

    font-size:14px;

    line-height:1;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}

.todo-calendar-weekdays {

    display:grid;

    grid-template-columns:repeat(7,1fr);

    margin-bottom:4px;

}

.todo-calendar-weekdays span {

    text-align:center;

    font-size:10px;

    color:rgba(60,60,70,0.4);

}

.todo-calendar-grid {

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:3px;

}

.todo-cal-day {

    aspect-ratio:1;

    display:flex;

    justify-content:center;

    align-items:center;

    border:none;

    border-radius:50%;

    background:none;

    font-size:12px;

    color:rgba(40,40,50,0.75);

    cursor:pointer;

}

.todo-cal-day.empty {

    cursor:default;

    pointer-events:none;

}

.todo-cal-day.today {

    box-shadow:inset 0 0 0 1.5px rgba(255,143,179,0.6);

}

.todo-cal-day.selected {

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

}

.todo-calendar-clear {

    display:block;

    width:100%;

    margin-top:10px;

    padding:8px;

    border:none;

    border-radius:12px;

    background:rgba(60,60,70,0.06);

    color:rgba(60,60,70,0.55);

    font-size:12px;

    cursor:pointer;

}


/* ===== 手机适配：小屏幕上 .phone 撑满整个视口，去掉桌面预览用的机壳装饰 ===== */

@media (max-width:480px) {

    /* 手机上把 html/body 整个锁死不让它滚动——这样 iOS 键盘弹出时就没有
       "页面本身"可以拿去滚了。.phone 高度始终撑满整机（不随键盘收缩），
       只靠 top 跟着 visualViewport 的 offsetTop 走，避免露出 .phone 外面
       的空白背景；.phone-inner 才是真正跟着键盘缩高度的那一层，nav / 输入
       框全都相对它走 flex 布局，键盘弹出时自然被顶到可视区域最下面。 */

    html {

        overflow:hidden;

    }

    /* 找到了：body/.phone 的高度撑再大也没用，因为最外层 <html> 自己的盒子
       一直卡在 873（inset:0 隐式撑满的也是"WebKit 认可的可视区"，不是物理
       屏幕），底下多出来的物理屏幕范围其实整个在 <html> 元素之外——那已经
       不是"页面里的空白"了，是浏览器/独立模式容器自己画的默认白底，任何
       CSS 都够不着。必须让 <html> 自己也真正撑到 100vh，不然子元素撑得再
       大也只是在一个不会完整显示出来的盒子里空长。 */
    html.standalone-mode {

        height:100vh;

    }

    body {

        position:fixed;

        inset:0;

        overflow:hidden;

        padding:0;

    }

    .phone {

        position:fixed;

        top:var(--app-vh-offset, 0px);

        left:0;

        right:0;

        width:100vw;

        height:100vh;

        height:100dvh;

        border-radius:0;

        box-shadow:none;

    }

    /* "添加到主屏幕"独立模式下，100dvh 只填充到 WebKit 认可的可视区，够不到
       屏幕物理底部（iPhone 16 Plus 上差了近 60px）。之前一直假设 .phone 跟
       .phone-inner 应该永远一样高，但真正能点、能看见导航的区域其实就是
       100dvh 这么大——不管让 .phone 撑到 932 还是保持 873，"能交互的地方"
       都只有 873。所以之前不管用 screen.height 硬撑还是切回 100vh，只要
       .phone-inner 跟着 .phone 一起变成 932，导航就会被推到 873 那条线以外，
       变得不可见/点不到。
       这次把两层彻底分开：.phone（背景层）尽量撑大盖住物理屏幕，独立模式下
       用 100vh；.phone-inner（真正装内容、装导航的那层）永远固定用 100dvh，
       不再跟着 .phone 的 100%走，这样导航就一直待在可交互区域以内，.phone
       底下多出来的那截只会露出背景色，不会再是空白，也不会再把导航顶飞。 */
    body.standalone-mode .phone {

        height:100vh;

    }

    .phone-inner {

        height:100dvh;

    }

    /* 键盘弹出时切到 JS 实时量出来的 --app-vh，因为这时候需要跟着
       visualViewport 的高度走，dvh 本身不会因为键盘弹出而变矮。 */
    body.keyboard-open .phone-inner {

        height:var(--app-vh, 100dvh);

    }

    /* 实测证实：.phone 自己声明 height:932px（跟物理屏幕齐平），但在这台设
       备的 standalone 模式下，WebKit 实际只画到 873px（跟 visualViewport
       一致，且这个裁切对所有 position:fixed 元素都成立，跟 backdrop-filter
       无关——用来测试的标尺本身也是 fixed，同样被裁在 873，之前一度以为关
       掉 blur "解决了"，其实是标尺自己也被裁到了同一条线，两个一起裁看着
       像对上了）。真正能画到物理最底部的只有 body 自己的背景（CSS 规定 html
       /body 的背景会被提升为画布背景，不受 fixed 合成层裁切影响，用纯色测
       试验证过）。
       径向渐变、线性渐变两版都试过，缝隙里都只显示最后兜底的纯色，图层完
       全不可见——三次渐变类改动结果一致，说明这条"画布提升"通道根本不认
       background 里的图层（不管径向还是线性），只认纯色。所以不再试图用渐
       变去接色，直接把兜底换成一个提前调好、跟渐变整体色调接近的纯色。

       2026-09-17 确认修复：用户反馈那条缝当时显示纯白/灰，不是"颜色太接近
       看不出来"，而是根本没画到——查出来是上面的 html{position:fixed} 把
       <html> 自己也提升成了一个会被裁切的合成层，连带把 body 这条"画布背
       景提升"的特殊通道也一起裁没了。去掉 html 的 position:fixed（保留
       overflow:hidden，锁滚动这件事交给 body 自己的 position:fixed 就够
       了）之后，standalone 模式下整个背景完整铺满到底，不再需要这条兜底
       色露出来——用一个跟渐变协调的颜色保留在这里纯粹是防御性的，正常情况
       下应该完全看不到它。 */
    body {
        background:#f2eef7 !important;
    }

    [data-theme="dark"] body {
        background:#b8b0b1 !important;
    }

}


/* ===== 深色皮肤：桃夭 #FADADD + 雾灰 #A5A5A5，只加这一套配色，浅色皮肤原样不动 ===== */

.theme-toggle-btn {

    position:absolute;

    top:calc(32px + env(safe-area-inset-top));

    right:calc(25px + env(safe-area-inset-right));

    z-index:20;

    width:38px;

    height:38px;

    border:none;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    background:rgba(255,255,255,0.35);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.6);

}

.theme-toggle-btn svg {

    width:19px;

    height:19px;

    fill:none;

    stroke:rgba(60,60,70,0.7);

    stroke-width:1.8;

    stroke-linecap:round;

}

[data-theme="dark"] {

    --skin-accent:#FADADD;

    --skin-base:#A5A5A5;

}

[data-theme="dark"] body {

    background:
        radial-gradient(circle at 15% 15%, rgba(250,218,221,0.55), transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(165,165,165,0.6), transparent 45%),
        #8f8f8f;

}

[data-theme="dark"] .phone {

    background:
        radial-gradient(circle at 12% 8%, rgba(250,218,221,0.5), transparent 45%),
        radial-gradient(circle at 90% 18%, rgba(165,165,165,0.55), transparent 42%),
        radial-gradient(circle at 15% 92%, rgba(165,165,165,0.5), transparent 48%),
        radial-gradient(circle at 88% 85%, rgba(250,218,221,0.4), transparent 45%),
        rgba(165,165,165,0.4);

}

[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .menu-btn,
[data-theme="dark"] .chat-back-btn,
[data-theme="dark"] .chat-page-back-btn {

    background:rgba(165,165,165,0.4);

    border-color:rgba(255,255,255,0.4);

}

[data-theme="dark"] .together,
[data-theme="dark"] .weather-card,
[data-theme="dark"] .memories-card,
[data-theme="dark"] .together-card,
[data-theme="dark"] .new-chat-btn,
[data-theme="dark"] .sidebar-search,
[data-theme="dark"] .chat-composer,
[data-theme="dark"] .todo-input-bar,
[data-theme="dark"] .chat-model-btn,
[data-theme="dark"] .milktea-form input,
[data-theme="dark"] .profile-memory-form textarea {

    background:linear-gradient(
        135deg,
        rgba(250,218,221,0.4),
        rgba(165,165,165,0.4)
    );

    border-color:rgba(255,255,255,0.5);

}

[data-theme="dark"] .sidebar {

    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.4), transparent 42%),
        radial-gradient(circle at 100% 85%, rgba(255,255,255,0.2), transparent 45%),
        linear-gradient(165deg, rgba(250,218,221,0.55), rgba(165,165,165,0.55));

}

[data-theme="dark"] .session-item:hover,
[data-theme="dark"] .session-item.active,
[data-theme="dark"] .todo-column-header.target-active {

    background:rgba(250,218,221,0.3);

}

[data-theme="dark"] .chat-bubble,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-nav-row,
[data-theme="dark"] .attachment-chip,
[data-theme="dark"] .album-art,
[data-theme="dark"] .call-avatar,
[data-theme="dark"] .listen-btn,
[data-theme="dark"] .call-btn,
[data-theme="dark"] .period-summary,
[data-theme="dark"] .milktea-count,
[data-theme="dark"] .todo-column,
[data-theme="dark"] .period-item,
[data-theme="dark"] .milktea-item,
[data-theme="dark"] .todo-item,
[data-theme="dark"] .session-context-menu,
[data-theme="dark"] .chat-model-menu,
[data-theme="dark"] .todo-calendar,
[data-theme="dark"] .profile-summary-text {

    background:linear-gradient(
        135deg,
        rgba(250,218,221,0.32),
        rgba(165,165,165,0.32)
    );

    border-color:rgba(255,255,255,0.45);

}

[data-theme="dark"] .title-underline,
[data-theme="dark"] .chat-send-btn,
[data-theme="dark"] .listen-btn-main,
[data-theme="dark"] .call-btn-main,
[data-theme="dark"] .period-log-btn,
[data-theme="dark"] .milktea-add-btn,
[data-theme="dark"] .todo-add-btn,
[data-theme="dark"] .profile-mini-add-btn,
[data-theme="dark"] .profile-switch.on,
[data-theme="dark"] .profile-memory-toggle.on,
[data-theme="dark"] .todo-cal-day.selected,
[data-theme="dark"] .todo-due-btn.has-date,
[data-theme="dark"] .todo-item.done .todo-check {

    background:linear-gradient(135deg,#FADADD,#A5A5A5);

}

[data-theme="dark"] .together strong,
[data-theme="dark"] .heart-pulse svg,
[data-theme="dark"] .milktea-count strong,
[data-theme="dark"] .chat-model-option.selected {

    color:#A5A5A5;

}

[data-theme="dark"] .nav,
[data-theme="dark"] .todo-calendar-nav {

    background:rgba(165,165,165,0.35);

}

[data-theme="dark"] .nav-item.active .nav-icon {

    background:rgba(250,218,221,0.45);

}

[data-theme="dark"] .nav-icon-heart {

    background:linear-gradient(135deg, rgba(250,218,221,0.6), rgba(165,165,165,0.4));

}

[data-theme="dark"] .nav-icon-heart svg {

    stroke:#8f7d7e;

}

[data-theme="dark"] .avatar {

    box-shadow:
        0 12px 26px rgba(165,165,165,0.35),
        0 0 0 5px rgba(250,218,221,0.4);

}

[data-theme="dark"] .avatar.claude {

    box-shadow:
        0 12px 26px rgba(165,165,165,0.4),
        0 0 0 5px rgba(165,165,165,0.4);

}

[data-theme="dark"] .spark1 svg,
[data-theme="dark"] .spark3 svg {

    stroke:#FADADD;

}

[data-theme="dark"] .spark2 svg,
[data-theme="dark"] .spark6 svg {

    stroke:#A5A5A5;

}

[data-theme="dark"] .spark5 svg {

    fill:#FADADD;

}

[data-theme="dark"] .splash {

    background:linear-gradient(160deg, #FADADD, #c9c9c9, #A5A5A5);

}

[data-theme="dark"] .chat-avatar-mini.me {

    background-color:rgba(250,218,221,0.45);

}

[data-theme="dark"] .chat-avatar-mini.claude {

    background-color:rgba(165,165,165,0.45);

}

[data-theme="dark"] .chat-thinking-toggle,
[data-theme="dark"] .chat-thinking-box {

    background:rgba(165,165,165,0.3);

    border-color:rgba(255,255,255,0.4);

}


/* ===== 登录门：盖住整个 .phone，没 token 或 token 失效时挡在最前面 ===== */

.auth-gate {

    position:absolute;

    inset:0;

    z-index:300;

    display:none;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:linear-gradient(160deg, #ffe6f0, #ede6ff, #e4f0ff);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

}

.auth-gate.show {

    display:flex;

}

.auth-gate-card {

    width:100%;

    max-width:280px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    padding:32px 26px;

    border-radius:28px;

    background:rgba(255,255,255,0.4);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.7);

    box-shadow:0 20px 50px rgba(150,170,220,0.2);

}

.auth-gate-heart svg {

    width:32px;

    height:32px;

    fill:none;

    stroke:#ff6fa5;

    stroke-width:1.4;

}

.auth-gate-title {

    margin:0 0 4px;

    font-size:19px;

    font-weight:400;

    letter-spacing:1px;

    color:rgba(40,40,50,0.8);

}

.auth-gate-input {

    width:100%;

    padding:12px 16px;

    text-align:center;

    letter-spacing:2px;

    border:1px solid rgba(255,255,255,0.8);

    border-radius:14px;

    background:rgba(255,255,255,0.55);

    font-size:15px;

    color:rgba(40,40,50,0.85);

    outline:none;

}

.auth-gate-submit {

    width:100%;

    padding:12px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(150,170,220,0.3);

}

.auth-gate-error {

    min-height:1.2em;

    margin:0;

    font-size:12px;

    color:#ff4d5e;

}

[data-theme="dark"] .auth-gate {

    background:linear-gradient(160deg, #FADADD, #c9c9c9, #A5A5A5);

}

[data-theme="dark"] .auth-gate-card {

    background:rgba(165,165,165,0.35);

}

[data-theme="dark"] .auth-gate-submit {

    background:linear-gradient(135deg,#FADADD,#A5A5A5);

}


/* ===== 课表 / 工资：Together 页面新加的两个小工具，样式跟待办共用一套语言 ===== */

.schedule-content,
.wage-content {

    flex:1;

    overflow-y:auto;

    display:flex;

    flex-direction:column;

    padding:8px 20px 20px;

}

.schedule-term-row {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 14px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

    margin-bottom:10px;

}

.schedule-term-label {

    font-size:13px;

    color:rgba(40,40,50,0.8);

}

.schedule-term-edit-btn {

    flex-shrink:0;

    border:none;

    padding:5px 12px;

    border-radius:12px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

    font-size:12px;

    font-weight:500;

    cursor:pointer;

}

.schedule-term-form {

    display:none;

    align-items:center;

    gap:8px;

    padding:10px 12px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

    margin-bottom:10px;

}

.schedule-term-form.show {

    display:flex;

}

.schedule-term-form input {

    flex:1;

    min-width:0;

    border:none;

    background:rgba(255,255,255,0.6);

    border-radius:10px;

    padding:7px 10px;

    font-size:13px;

    font-family:inherit;

    color:rgba(40,40,50,0.85);

    outline:none;

}

.schedule-term-save-btn {

    flex-shrink:0;

    border:none;

    padding:7px 14px;

    border-radius:12px;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

    font-size:12px;

    font-weight:500;

    cursor:pointer;

}

.schedule-day-tabs {

    display:flex;

    gap:6px;

    margin-bottom:10px;

}

.schedule-day-tab {

    flex:1;

    border:none;

    padding:8px 0;

    border-radius:12px;

    background:rgba(255,255,255,0.35);

    color:rgba(60,60,70,0.6);

    font-size:13px;

    font-family:inherit;

    cursor:pointer;

}

.schedule-day-tab.active {

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

    font-weight:500;

}

.schedule-course-list {

    list-style:none;

    margin:0 0 10px;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.schedule-course-item {

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

}

.schedule-course-period {

    flex-shrink:0;

    font-size:12px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    border-radius:10px;

    padding:6px 8px;

    text-align:center;

    min-width:28px;

}

.schedule-course-info {

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}

.schedule-course-name {

    font-size:13px;

    color:rgba(40,40,50,0.85);

}

.schedule-course-meta {

    font-size:11px;

    color:rgba(60,60,70,0.5);

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.item-delete-btn {

    flex-shrink:0;

    width:22px;

    height:22px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,0.5);

    color:rgba(60,60,70,0.5);

    font-size:15px;

    line-height:1;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.schedule-add-course-btn {

    align-self:flex-start;

    border:none;

    padding:7px 14px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

    color:rgba(40,40,50,0.7);

    font-size:12px;

    font-family:inherit;

    cursor:pointer;

    margin-bottom:10px;

}

.schedule-course-form {

    display:none;

    flex-direction:column;

    gap:8px;

    padding:12px;

    border-radius:14px;

    background:rgba(255,255,255,0.4);

    border:1px solid rgba(255,255,255,0.6);

    margin-bottom:16px;

}

.schedule-course-form.show {

    display:flex;

}

.schedule-course-form-row {

    display:flex;

    gap:8px;

}

.schedule-course-form-row input,
.schedule-course-form-row select {

    flex:1;

    min-width:0;

    border:none;

    background:rgba(255,255,255,0.6);

    border-radius:10px;

    padding:7px 8px;

    font-size:12px;

    font-family:inherit;

    color:rgba(40,40,50,0.85);

    outline:none;

}

.schedule-course-form-actions {

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:2px;

}

.schedule-form-cancel-btn,
.schedule-form-save-btn {

    border:none;

    padding:7px 14px;

    border-radius:12px;

    font-size:12px;

    font-weight:500;

    cursor:pointer;

    font-family:inherit;

}

.schedule-form-cancel-btn {

    background:rgba(255,255,255,0.5);

    color:rgba(60,60,70,0.6);

}

.schedule-form-save-btn {

    background:linear-gradient(135deg,#ff8fb3,#8fc6ff);

    color:#fff;

}

.schedule-section-title {

    font-size:12px;

    font-weight:600;

    color:rgba(60,60,70,0.55);

    margin:4px 0 8px;

}

.wage-total-card {

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    padding:20px 16px;

    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,200,220,0.35),rgba(190,220,255,0.35));

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

    margin-bottom:14px;

}

.wage-total-label {

    font-size:12px;

    color:rgba(60,60,70,0.55);

}

.wage-total-amount {

    font-size:32px;

    font-weight:700;

    color:rgba(40,40,50,0.85);

}

.wage-total-breakdown {

    font-size:11px;

    color:rgba(60,60,70,0.5);

    text-align:center;

}

.wage-entry-form {

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:16px;

    padding:8px 10px;

    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,200,220,0.3),rgba(190,220,255,0.3));

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.65);

}

.wage-entry-form input {

    border:none;

    background:rgba(255,255,255,0.6);

    border-radius:10px;

    padding:6px 8px;

    font-size:12px;

    font-family:inherit;

    color:rgba(40,40,50,0.85);

    outline:none;

}

.wage-entry-form input[type="number"] {

    width:70px;

    flex-shrink:0;

}

.wage-entry-form input[type="date"] {

    width:120px;

    flex-shrink:0;

}

.wage-entry-form input[type="text"] {

    flex:1;

    min-width:0;

    background:none;

    padding:6px 4px;

}

.wage-entry-amount {

    flex-shrink:0;

    font-size:13px;

    font-weight:600;

}

.wage-entry-amount.positive {

    color:#3fae6a;

}

.wage-entry-amount.negative {

    color:#ff6fa5;

}


[data-theme="dark"] .schedule-term-row,
[data-theme="dark"] .schedule-term-form,
[data-theme="dark"] .schedule-course-item,
[data-theme="dark"] .schedule-add-course-btn,
[data-theme="dark"] .schedule-course-form,
[data-theme="dark"] .wage-total-card,
[data-theme="dark"] .wage-entry-form {

    background:rgba(165,165,165,0.2);

    border-color:rgba(255,255,255,0.12);

}

[data-theme="dark"] .schedule-term-form input,
[data-theme="dark"] .schedule-course-form-row input,
[data-theme="dark"] .schedule-course-form-row select,
[data-theme="dark"] .wage-entry-form input {

    background:rgba(0,0,0,0.25);

    color:rgba(255,255,255,0.85);

}

[data-theme="dark"] .schedule-term-label,
[data-theme="dark"] .schedule-course-name,
[data-theme="dark"] .wage-total-amount {

    color:rgba(255,255,255,0.85);

}

[data-theme="dark"] .schedule-day-tab {

    background:rgba(165,165,165,0.2);

    color:rgba(255,255,255,0.5);

}

[data-theme="dark"] .schedule-day-tab.active,
[data-theme="dark"] .schedule-term-edit-btn,
[data-theme="dark"] .schedule-term-save-btn,
[data-theme="dark"] .schedule-course-period,
[data-theme="dark"] .schedule-form-save-btn {

    background:linear-gradient(135deg,#FADADD,#A5A5A5);

    color:#241f21;

}

[data-theme="dark"] .item-delete-btn {

    background:rgba(255,255,255,0.12);

    color:rgba(255,255,255,0.6);

}


/* ===================================================================
   ♡ Claude & Ivy · 情侣飞行棋 (CoupleFlyChess)
   命名空间：所有选择器以 .fc- 前缀，避免与其他页面样式冲突
   =================================================================== */

.flychess-page {

    background:linear-gradient(165deg, #FFF9FB 0%, #FDF2F8 45%, #F3EEFC 100%);

}

.flychess-page .chat-view-header {

    border-bottom:1px solid rgba(255,255,255,0.6);

}

.flychess-page .chat-view-header span {

    flex:1;

    text-align:center;

    font-size:15px;

}

.fc-header-edit-btn {

    border:none;

    background:rgba(255,255,255,0.5);

    width:34px;

    height:34px;

    border-radius:12px;

    font-size:14px;

    color:rgba(60,60,70,0.7);

    cursor:pointer;

    flex-shrink:0;

}

.fc-header-edit-btn:active {

    transform:scale(0.94);

}

.fc-content {

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}


/* ----- 回合选择 ----- */

.fc-turn-bar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    flex-wrap:wrap;

    padding:14px 18px 2px;

}

.fc-turn-label {

    font-size:12.5px;

    color:rgba(60,60,70,0.55);

    font-weight:500;

}

.fc-roller-choice {

    display:flex;

    gap:6px;

    background:rgba(255,255,255,0.55);

    padding:4px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,0.85);

}

.fc-roller-btn {

    border:none;

    background:transparent;

    padding:8px 14px;

    min-height:40px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    color:rgba(60,60,70,0.5);

    cursor:pointer;

    transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

}

.fc-roller-btn.active.fc-roller-ivy {

    background:linear-gradient(135deg,#FFC7DA,#FF8FB3);

    color:#fff;

    box-shadow:0 4px 10px rgba(255,143,179,0.4);

}

.fc-roller-btn.active.fc-roller-claude {

    background:linear-gradient(135deg,#CFE7FF,#8FC6FF);

    color:#fff;

    box-shadow:0 4px 10px rgba(143,198,255,0.4);

}


/* ----- 棋盘 ----- */

.fc-board-wrap {

    display:flex;

    justify-content:center;

    padding:12px 0 8px;

}

.fc-board {

    width:min(94%, 650px);

    aspect-ratio:1 / 1;

    margin:0 auto;

    box-sizing:border-box;

    padding:3.2%;

    border-radius:32px;

    position:relative;

    background:linear-gradient(160deg, rgba(255,255,255,0.92), rgba(255,240,247,0.85));

    border:1px solid rgba(255,255,255,0.9);

    box-shadow:
        0 18px 40px rgba(210,170,210,0.22),
        inset 0 1px 0 rgba(255,255,255,0.8);

}

.fc-track {

    position:relative;

    width:100%;

    height:100%;

    display:grid;

    grid-template-columns:repeat(8, 1fr);

    grid-template-rows:repeat(8, 1fr);

    gap:1.4%;

}

.fc-cell {

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:0;

    border-radius:26%;

    border:1.5px solid rgba(255,255,255,0.9);

    box-shadow:
        0 3px 7px rgba(190,150,190,0.16),
        inset 0 1px 0 rgba(255,255,255,0.55);

}

.fc-cell-icon {

    font-size:clamp(8px, 2.3vw, 12px);

    line-height:1.1;

    opacity:0.9;

}

.fc-cell-number {

    font-size:clamp(9px, 2.6vw, 13px);

    font-weight:700;

    line-height:1.1;

    color:rgba(90,60,80,0.55);

}

.fc-cell-tag {

    position:absolute;

    bottom:2%;

    font-size:clamp(5.5px, 1.6vw, 8px);

    font-weight:700;

    letter-spacing:0.4px;

    color:rgba(120,70,110,0.55);

    line-height:1;

}

.fc-cell.fc-cat-daily {

    background:linear-gradient(135deg, #FFE3ED, #FFF6F9);

}

.fc-cell.fc-cat-intimate {

    background:linear-gradient(135deg, #F0DBFF, #FCEAFB);

}

.fc-cell.fc-cat-deep {

    background:linear-gradient(135deg, #DCEBFF, #EEF6FF);

}

.fc-cell.fc-cat-punishment {

    background:linear-gradient(135deg, #FFC2B8, #FFE0D8);

}

.fc-cell.fc-cell-start {

    border:1.5px dashed rgba(255,140,180,0.75);

    box-shadow:
        0 0 0 3px rgba(255,214,229,0.5),
        0 3px 10px rgba(255,140,180,0.25);

}

.fc-cell.fc-cell-finish {

    background:linear-gradient(135deg, #FFE3F0, #DCEBFF) !important;

    border:1.5px solid rgba(255,255,255,0.95);

    animation:fcFinishGlow 2.6s ease-in-out infinite;

}

@keyframes fcFinishGlow {

    0%, 100% { box-shadow:0 0 0 3px rgba(255,214,229,0.5), 0 4px 14px rgba(150,170,220,0.3); }
    50%      { box-shadow:0 0 0 6px rgba(255,214,229,0.8), 0 6px 20px rgba(150,170,220,0.55); }

}


/* 28 格的 grid-row / grid-column 由 script.js 的 CELL_GRID 计算后以内联样式
   写入每个 .fc-cell（1-8 顶边、9-15 右边、16-22 底边、23-28 左边），此处不
   重复声明，避免两处数据源不一致。 */


/* ----- 中央终点区 ----- */

.fc-center {

    grid-row:2 / 8;

    grid-column:2 / 8;

    position:relative;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    overflow:hidden;

    box-sizing:border-box;

    padding:4%;

    background:linear-gradient(160deg, rgba(255,255,255,0.75), rgba(255,225,240,0.55) 45%, rgba(220,235,255,0.6));

    border:1px solid rgba(255,255,255,0.85);

    box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.5),
        0 8px 26px rgba(190,160,210,0.18);

}

.fc-center-glow {

    position:absolute;

    inset:-20%;

    background:radial-gradient(circle at 50% 45%, rgba(255,200,225,0.55), transparent 60%);

    animation:fcCenterPulse 3.4s ease-in-out infinite;

    pointer-events:none;

}

@keyframes fcCenterPulse {

    0%, 100% { opacity:0.5; transform:scale(1); }
    50%      { opacity:0.9; transform:scale(1.08); }

}

.fc-center-icons {

    position:relative;

    z-index:1;

    display:flex;

    gap:8px;

    font-size:clamp(12px, 3.2vw, 20px);

    color:rgba(200,110,150,0.55);

    margin-bottom:4px;

}

.fc-center-title {

    position:relative;

    z-index:1;

    margin:0;

    font-size:clamp(11px, 3vw, 17px);

    font-weight:700;

    background:linear-gradient(135deg, #FF6FA0, #8A5FE0 55%, #5FA8E0);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.fc-center-sub {

    position:relative;

    z-index:1;

    margin:2px 0 0;

    font-size:clamp(9px, 2.4vw, 12px);

    color:rgba(90,70,100,0.5);

}


/* ----- 棋子 ----- */

.fc-token {

    /* left/top 由 script.js 按格子行列直接算成百分比写入（纯静态数据，
       不依赖任何运行时测量），transform 只负责把这个点当成棋子的中心 */

    position:absolute;

    top:0;

    left:0;

    width:calc(100% / 8 * 0.62);

    height:calc(100% / 8 * 0.62);

    pointer-events:none;

    z-index:8;

    transform:translate(-50%, -50%);

    transition:left 0.18s cubic-bezier(.34,1.56,.64,1), top 0.18s cubic-bezier(.34,1.56,.64,1);

    will-change:left, top;

}

.fc-token-claude {

    z-index:7;

}

.fc-token-body {

    position:relative;

    width:100%;

    height:100%;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid rgba(255,255,255,0.92);

    overflow:hidden;

}

.fc-token-ivy .fc-token-body {

    background:radial-gradient(circle at 32% 28%, #FFE1EC, #FF8FB3 75%);

    box-shadow:0 5px 12px rgba(255,110,155,0.45);

}

.fc-token-claude .fc-token-body {

    background:radial-gradient(circle at 32% 28%, #E4F2FF, #7CB8F5 75%);

    box-shadow:0 5px 12px rgba(110,170,235,0.45);

}

.fc-token-avatar {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:2;

}

.fc-token-icon {

    position:relative;

    z-index:1;

    font-size:55%;

    color:#fff;

    text-shadow:0 1px 2px rgba(0,0,0,0.18);

}

@keyframes fcHop {

    0%   { transform:translateY(0) scale(1,1); }
    35%  { transform:translateY(-26%) scale(0.88,1.14); }
    65%  { transform:translateY(4%) scale(1.1,0.9); }
    100% { transform:translateY(0) scale(1,1); }

}

.fc-token-body.fc-bounce {

    animation:fcHop 0.22s ease;

}


/* ----- 底部控制区：状态条 / 骰子 / 掷骰按钮 ----- */

.fc-controls {

    display:flex;

    flex-direction:column;

    gap:12px;

    padding:4px 18px 18px;

}

.fc-status-row {

    display:flex;

    gap:10px;

    justify-content:center;

    flex-wrap:wrap;

}

.fc-status-chip {

    display:flex;

    align-items:center;

    gap:6px;

    font-size:12px;

    font-weight:500;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(255,255,255,0.6);

    border:1px solid rgba(255,255,255,0.85);

    color:rgba(50,50,60,0.75);

}

.fc-status-dot {

    width:8px;

    height:8px;

    border-radius:50%;

    display:inline-block;

}

.fc-status-ivy .fc-status-dot {

    background:#FF8FB3;

}

.fc-status-claude .fc-status-dot {

    background:#8FC6FF;

}

.fc-dice-area {

    display:flex;

    align-items:center;

    gap:14px;

}

.fc-dice {

    width:60px;

    height:60px;

    flex-shrink:0;

}

.fc-dice-face {

    width:100%;

    height:100%;

    box-sizing:border-box;

    padding:11%;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    grid-template-rows:repeat(3, 1fr);

    background:linear-gradient(160deg, #FFFFFF, #FFF3F8);

    border-radius:16px;

    border:1px solid rgba(255,255,255,0.9);

    box-shadow:
        0 10px 22px rgba(210,170,210,0.3),
        inset 0 1px 0 rgba(255,255,255,0.8);

}

.fc-pip {

    align-self:center;

    justify-self:center;

    width:68%;

    aspect-ratio:1;

    border-radius:50%;

    background:linear-gradient(135deg, #FF9EBB, #8FC6FF);

    opacity:0;

    transition:opacity 0.05s linear;

}

@keyframes fcDiceRoll {

    0%   { transform:rotate(0deg) scale(1); }
    25%  { transform:rotate(-12deg) scale(1.06); }
    50%  { transform:rotate(10deg) scale(0.94); }
    75%  { transform:rotate(-6deg) scale(1.04); }
    100% { transform:rotate(0deg) scale(1); }

}

.fc-dice.fc-rolling .fc-dice-face {

    animation:fcDiceRoll 0.5s ease-in-out infinite;

}

.fc-roll-btn {

    flex:1;

    min-height:50px;

    border:none;

    border-radius:999px;

    background:linear-gradient(135deg, #FF9EBB, #B49CFF 55%, #8FC6FF);

    color:#fff;

    font-size:16px;

    font-weight:600;

    letter-spacing:0.5px;

    box-shadow:0 10px 24px rgba(190,150,220,0.35);

    cursor:pointer;

    transition:transform 0.12s ease, opacity 0.12s ease;

}

.fc-roll-btn:active {

    transform:scale(0.96);

}

.fc-roll-btn:disabled {

    opacity:0.55;

    cursor:default;

    transform:none;

}


/* ----- 弹窗通用（任务 / 胜利） ----- */

.fc-modal {

    position:fixed;

    inset:0;

    z-index:200;

    display:none;

    align-items:flex-end;

    justify-content:center;

}

.fc-modal.active {

    display:flex;

}

.fc-modal-backdrop {

    position:absolute;

    inset:0;

    background:rgba(40,20,40,0.3);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

}

.fc-modal-sheet {

    position:relative;

    width:100%;

    max-width:520px;

    max-height:82vh;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    box-sizing:border-box;

    background:linear-gradient(170deg, #FFFDFC, #FFF3F8 60%, #F3ECFB);

    border-radius:28px 28px 0 0;

    padding:14px 24px calc(28px + env(safe-area-inset-bottom));

    box-shadow:0 -12px 40px rgba(150,110,160,0.28);

    animation:fcSheetUp 0.28s cubic-bezier(.2,.9,.3,1);

}

@keyframes fcSheetUp {

    from { transform:translateY(24px); opacity:0.4; }
    to   { transform:translateY(0); opacity:1; }

}

.fc-modal-handle {

    width:40px;

    height:4px;

    border-radius:999px;

    background:rgba(0,0,0,0.12);

    margin:2px auto 14px;

}

.fc-task-modal-badge {

    display:inline-block;

    font-size:12px;

    font-weight:600;

    padding:5px 12px;

    border-radius:999px;

    margin-bottom:10px;

}

.fc-task-modal-badge.fc-badge-ivy {

    background:linear-gradient(135deg,#FFC7DA,#FF8FB3);

    color:#fff;

}

.fc-task-modal-badge.fc-badge-claude {

    background:linear-gradient(135deg,#CFE7FF,#8FC6FF);

    color:#fff;

}

.fc-task-modal-number {

    font-size:13px;

    color:rgba(60,60,70,0.5);

    margin:0 0 6px;

}

.fc-task-modal-category {

    display:inline-flex;

    align-items:center;

    gap:4px;

    font-size:12px;

    font-weight:600;

    padding:4px 10px;

    border-radius:999px;

    margin-bottom:16px;

}

.fc-cat-daily      { background:rgba(255,214,229,0.7); color:#C2557E; }
.fc-cat-intimate   { background:rgba(230,200,255,0.7); color:#8A4FC2; }
.fc-cat-deep       { background:rgba(190,220,255,0.7); color:#3E7FC2; }
.fc-cat-punishment { background:rgba(255,160,150,0.7); color:#C2452F; }
.fc-cat-finish     { background:linear-gradient(135deg, rgba(255,214,229,0.85), rgba(190,220,255,0.85)); color:#8A5FA8; }

.fc-task-modal-text {

    font-size:18px;

    line-height:1.65;

    color:rgba(30,25,35,0.88);

    font-weight:500;

    margin:0 0 26px;

}

.fc-task-modal-done {

    width:100%;

    min-height:52px;

    border:none;

    border-radius:999px;

    background:linear-gradient(135deg, #FF9EBB, #B49CFF 55%, #8FC6FF);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    box-shadow:0 10px 24px rgba(190,150,220,0.35);

}

.fc-task-modal-done:active {

    transform:scale(0.97);

}


/* ----- 胜利弹窗 ----- */

.fc-win-sheet {

    text-align:center;

    padding-top:26px;

}

.fc-win-icon {

    font-size:48px;

    margin-bottom:6px;

    animation:fcWinPop 0.5s cubic-bezier(.3,1.6,.4,1);

}

@keyframes fcWinPop {

    0%   { transform:scale(0.3) rotate(-15deg); opacity:0; }
    60%  { transform:scale(1.15) rotate(6deg); opacity:1; }
    100% { transform:scale(1) rotate(0); }

}

.fc-win-title {

    font-size:22px;

    font-weight:700;

    margin:4px 0 10px;

    background:linear-gradient(135deg, #FF6FA0, #8A5FE0 60%, #5FA8E0);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.fc-win-perk {

    font-size:14px;

    font-weight:600;

    color:rgba(60,60,70,0.7);

    margin:0 0 4px;

}

.fc-win-sub {

    font-size:13px;

    line-height:1.6;

    color:rgba(60,60,70,0.55);

    margin:0 0 24px;

    padding:0 6px;

}

.fc-win-restart {

    width:100%;

    min-height:52px;

    border:none;

    border-radius:999px;

    background:linear-gradient(135deg, #FF9EBB, #B49CFF 55%, #8FC6FF);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    box-shadow:0 10px 24px rgba(190,150,220,0.35);

    margin-bottom:4px;

}

.fc-win-restart:active {

    transform:scale(0.97);

}


/* ----- 任务编辑 ----- */

.fc-editor {

    position:fixed;

    inset:0;

    z-index:210;

    display:none;

    flex-direction:column;

    background:linear-gradient(170deg, #FFFDFC, #FFF6FA 45%, #F4EEFC);

}

.fc-editor.active {

    display:flex;

}

.fc-editor-header {

    flex-shrink:0;

    border-bottom:1px solid rgba(0,0,0,0.05);

}

.fc-editor-list {

    flex:1;

    min-height:0;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

    padding:12px 18px 10px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.fc-editor-row {

    background:rgba(255,255,255,0.6);

    border:1px solid rgba(255,255,255,0.85);

    border-radius:18px;

    padding:12px 14px;

    box-shadow:0 4px 14px rgba(200,170,200,0.12);

}

.fc-editor-row-head {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin-bottom:8px;

}

.fc-editor-index {

    font-size:12px;

    font-weight:700;

    color:rgba(60,60,70,0.45);

}

.fc-editor-cat-select {

    font-size:12px;

    font-weight:600;

    border:none;

    border-radius:999px;

    padding:6px 10px;

    background:rgba(255,255,255,0.8);

    color:rgba(50,50,60,0.7);

}

.fc-editor-textarea {

    width:100%;

    box-sizing:border-box;

    border:1px solid rgba(0,0,0,0.06);

    border-radius:12px;

    padding:10px 12px;

    font-size:14px;

    line-height:1.55;

    font-family:inherit;

    resize:vertical;

    min-height:44px;

    background:rgba(255,255,255,0.7);

    color:rgba(30,25,35,0.85);

}

.fc-editor-textarea:focus {

    outline:none;

    border-color:rgba(255,143,179,0.5);

    background:#fff;

}

.fc-editor-footer {

    flex-shrink:0;

    padding:12px 18px calc(16px + env(safe-area-inset-bottom));

    border-top:1px solid rgba(0,0,0,0.05);

}

.fc-editor-reset-btn {

    width:100%;

    min-height:48px;

    border:1px solid rgba(0,0,0,0.06);

    border-radius:999px;

    background:rgba(255,255,255,0.7);

    color:rgba(60,60,70,0.7);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:background 0.15s ease, color 0.15s ease;

}

.fc-editor-reset-btn.fc-armed {

    background:linear-gradient(135deg,#FFC2B8,#FFE0D8);

    color:#C2452F;

    border-color:rgba(255,140,120,0.5);

}


/* ----- 深色模式 ----- */

[data-theme="dark"] .flychess-page {

    background:linear-gradient(165deg, #241a22 0%, #201a26 55%, #171622 100%);

}

[data-theme="dark"] .fc-board {

    background:linear-gradient(160deg, rgba(45,35,45,0.85), rgba(38,33,48,0.82));

    border-color:rgba(255,255,255,0.12);

}

[data-theme="dark"] .fc-cell {

    border-color:rgba(255,255,255,0.14);

    box-shadow:0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);

}

[data-theme="dark"] .fc-cell.fc-cat-daily      { background:linear-gradient(135deg, rgba(255,140,180,0.28), rgba(255,140,180,0.1)); }
[data-theme="dark"] .fc-cell.fc-cat-intimate   { background:linear-gradient(135deg, rgba(190,140,255,0.28), rgba(190,140,255,0.1)); }
[data-theme="dark"] .fc-cell.fc-cat-deep       { background:linear-gradient(135deg, rgba(140,190,255,0.28), rgba(140,190,255,0.1)); }
[data-theme="dark"] .fc-cell.fc-cat-punishment { background:linear-gradient(135deg, rgba(255,140,120,0.3), rgba(255,140,120,0.1)); }
[data-theme="dark"] .fc-cell.fc-cell-finish    { background:linear-gradient(135deg, rgba(255,180,210,0.32), rgba(140,190,255,0.28)) !important; }

[data-theme="dark"] .fc-cell-number,
[data-theme="dark"] .fc-cell-tag {

    color:rgba(255,255,255,0.65);

}

[data-theme="dark"] .fc-center {

    background:linear-gradient(160deg, rgba(70,50,65,0.6), rgba(50,55,80,0.55));

    border-color:rgba(255,255,255,0.14);

}

[data-theme="dark"] .fc-center-sub {

    color:rgba(255,255,255,0.5);

}

[data-theme="dark"] .flychess-page .chat-view-header {

    border-bottom-color:rgba(255,255,255,0.1);

}

[data-theme="dark"] .fc-turn-label {

    color:rgba(255,255,255,0.55);

}

[data-theme="dark"] .fc-roller-choice {

    background:rgba(255,255,255,0.08);

    border-color:rgba(255,255,255,0.15);

}

[data-theme="dark"] .fc-roller-btn {

    color:rgba(255,255,255,0.5);

}

[data-theme="dark"] .fc-status-chip {

    background:rgba(255,255,255,0.08);

    border-color:rgba(255,255,255,0.15);

    color:rgba(255,255,255,0.7);

}

[data-theme="dark"] .fc-dice-face {

    background:linear-gradient(160deg, rgba(60,50,65,0.9), rgba(45,40,55,0.9));

    border-color:rgba(255,255,255,0.15);

}

[data-theme="dark"] .fc-modal-sheet {

    background:linear-gradient(170deg, rgba(35,28,38,0.98), rgba(30,28,40,0.98));

}

[data-theme="dark"] .fc-task-modal-text {

    color:rgba(255,255,255,0.88);

}

[data-theme="dark"] .fc-task-modal-number {

    color:rgba(255,255,255,0.5);

}

[data-theme="dark"] .fc-editor {

    background:linear-gradient(170deg, #241a22, #201a26 45%, #171622);

}

[data-theme="dark"] .fc-editor-row {

    background:rgba(255,255,255,0.06);

    border-color:rgba(255,255,255,0.12);

}

[data-theme="dark"] .fc-editor-textarea {

    background:rgba(0,0,0,0.25);

    border-color:rgba(255,255,255,0.12);

    color:rgba(255,255,255,0.85);

}

[data-theme="dark"] .fc-editor-index {

    color:rgba(255,255,255,0.45);

}

[data-theme="dark"] .fc-editor-reset-btn {

    background:rgba(255,255,255,0.08);

    border-color:rgba(255,255,255,0.15);

    color:rgba(255,255,255,0.7);

}

[data-theme="dark"] .fc-header-edit-btn {

    background:rgba(165,165,165,0.4);

    border-color:rgba(255,255,255,0.4);

}


/* ============================================================
   液态玻璃（Liquid Glass）：仿 iOS 26 的做法
   1. 底色尽量清透，模糊适中 + 高饱和 + 微提亮——背后的颜色透得出来
   2. 边缘"折射光"：内阴影在四周一圈泛白，越往中间越清，像厚玻璃的边
   3. 高光描边（::before 渐变环）：左上角和右下角亮、两侧暗，
      模拟光打在玻璃弧边上的两道反光——这是液态玻璃最有辨识度的地方
   4. 往下沉的软阴影，让它浮在背景上
   Safari 不支持 SVG 位移滤镜做真折射，所以折射感全靠 2、3 两层叠出来。
   只改滤镜/阴影/描边，各皮肤自己的底色不动。
   ============================================================ */

:root {

    --glass-blur:18px;

    --glass-filter:blur(var(--glass-blur)) saturate(190%) brightness(1.05);

    --glass-edge:rgba(255,255,255,0.9);

    --glass-edge-soft:rgba(255,255,255,0.45);

    --glass-glow:rgba(255,255,255,0.5);

    --glass-sheen:rgba(255,255,255,0.5);

    --glass-drop:rgba(80,78,64,0.16);

    --glass-rim:linear-gradient(
        135deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0.35) 22%,
        rgba(255,255,255,0.05) 45%,
        rgba(255,255,255,0.05) 60%,
        rgba(255,255,255,0.4) 82%,
        rgba(255,255,255,0.95) 100%
    );

}

[data-theme="dark"] {

    --glass-edge:rgba(255,255,255,0.6);

    --glass-edge-soft:rgba(255,255,255,0.25);

    --glass-glow:rgba(255,255,255,0.28);

    --glass-sheen:rgba(255,255,255,0.28);

    --glass-drop:rgba(50,50,50,0.28);

}

.together,
.weather-card,
.memories-card,
.menu-btn,
.theme-toggle-btn,
.chat-back-btn,
.chat-page-back-btn,
.new-chat-btn,
.session-context-menu,
.chat-bubble,
.chat-composer,
.chat-model-menu,
.attachment-chip,
.together-card,
.listen-btn,
.call-btn,
.profile-card,
.profile-nav-row,
.period-summary,
.milktea-count,
.todo-column,
.todo-input-bar,
.todo-calendar,
.wage-total-card,
.wage-entry-form,
.auth-gate-card,
.skin-menu,
.nav {

    backdrop-filter:var(--glass-filter);

    -webkit-backdrop-filter:var(--glass-filter);

    box-shadow:
        inset 1.5px 1.5px 1px -1px var(--glass-edge),
        inset -1.5px -1.5px 1px -1px var(--glass-edge-soft),
        inset 0 0 16px -4px var(--glass-glow),
        inset 0 14px 20px -16px var(--glass-sheen),
        0 1px 2px rgba(0,0,0,0.04),
        0 14px 34px -12px var(--glass-drop);

}

/* 原来是 static 的玻璃块补上 relative，给 ::before 描边环定位用
  （已确认这些元素里面没有依赖外层定位的绝对定位子元素） */
.together,
.weather-card,
.memories-card,
.chat-back-btn,
.new-chat-btn,
.chat-bubble,
.chat-composer,
.together-card,
.listen-btn,
.call-btn,
.profile-card,
.profile-nav-row,
.period-summary,
.milktea-count,
.todo-column,
.todo-input-bar,
.wage-total-card,
.wage-entry-form,
.auth-gate-card {

    position:relative;

}

.together::before,
.weather-card::before,
.memories-card::before,
.menu-btn::before,
.theme-toggle-btn::before,
.chat-back-btn::before,
.chat-page-back-btn::before,
.new-chat-btn::before,
.session-context-menu::before,
.chat-bubble::before,
.chat-composer::before,
.chat-model-menu::before,
.attachment-chip::before,
.together-card::before,
.listen-btn::before,
.call-btn::before,
.profile-card::before,
.profile-nav-row::before,
.period-summary::before,
.milktea-count::before,
.todo-column::before,
.todo-input-bar::before,
.todo-calendar::before,
.wage-total-card::before,
.wage-entry-form::before,
.auth-gate-card::before,
.skin-menu::before,
.nav::before {

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    padding:1.2px;

    background:var(--glass-rim);

    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

    -webkit-mask-composite:xor;

    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);

    pointer-events:none;

    z-index:1;

}

/* 底部导航：最大的一块玻璃，更透、模糊稍重 */
.nav {

    background:rgba(255,255,255,0.16);

    --glass-filter:blur(22px) saturate(200%) brightness(1.06);

    box-shadow:
        inset 1.5px 1.5px 1px -1px var(--glass-edge),
        inset -1.5px -1.5px 1px -1px var(--glass-edge-soft),
        inset 0 0 22px -4px var(--glass-glow),
        inset 0 20px 26px -20px var(--glass-sheen),
        0 1px 2px rgba(0,0,0,0.04),
        0 18px 40px -14px var(--glass-drop);

}

.sidebar {

    backdrop-filter:blur(30px) saturate(190%) brightness(1.04);

    -webkit-backdrop-filter:blur(30px) saturate(190%) brightness(1.04);

}

/* 按下去时玻璃轻轻一缩，像 iOS 的按钮 */
.menu-btn,
.theme-toggle-btn,
.chat-back-btn,
.chat-page-back-btn,
.new-chat-btn,
.profile-nav-row,
.listen-btn,
.call-btn,
.skin-option {

    transition:transform 0.18s ease, background 0.25s ease;

}

.menu-btn:active,
.theme-toggle-btn:active,
.chat-back-btn:active,
.chat-page-back-btn:active,
.new-chat-btn:active,
.profile-nav-row:active,
.listen-btn:active,
.call-btn:active,
.skin-option:active {

    transform:scale(0.95);

}


/* ===== 皮肤选择小面板（点右上角太阳按钮弹出） ===== */

.skin-menu {

    position:absolute;

    top:calc(78px + env(safe-area-inset-top));

    right:calc(25px + env(safe-area-inset-right));

    z-index:30;

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:6px;

    min-width:150px;

    border-radius:20px;

    background:rgba(255,255,255,0.32);

    border:1px solid rgba(255,255,255,0.6);

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px) scale(0.96);

    transform-origin:top right;

    transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

}

.skin-menu.show {

    opacity:1;

    visibility:visible;

    transform:none;

}

.skin-option {

    display:flex;

    align-items:center;

    gap:10px;

    padding:9px 12px;

    border:none;

    border-radius:14px;

    background:transparent;

    font-size:13px;

    letter-spacing:0.5px;

    color:rgba(40,40,50,0.8);

    cursor:pointer;

    text-align:left;

}

.skin-option.active {

    background:rgba(255,255,255,0.45);

}

.skin-swatch {

    flex-shrink:0;

    width:20px;

    height:20px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,0.8);

    box-shadow:0 2px 6px rgba(0,0,0,0.12);

}

.skin-swatch-dark { background:linear-gradient(135deg,#FADADD,#A5A5A5); }

.skin-swatch-mist { background:linear-gradient(135deg,#FCF7DF 0%,#C7D3DB 50%,#A79A8A 80%,#353630 100%); }

[data-theme="dark"] .skin-menu {

    background:rgba(165,165,165,0.4);

}

[data-theme="dark"] .skin-option.active {

    background:rgba(250,218,221,0.35);

}


/* ============================================================
   新皮肤：雾蓝奶咖
   雾蓝 #C7D3DB · 燕麦 #A79A8A · 奶油 #FCF7DF · 墨橄榄 #353630
   奶油做底、雾蓝和燕麦做光斑，主按钮用墨橄榄压住整体，
   玻璃底色偏暖白，字色统一往 #353630 靠。
   ============================================================ */

[data-theme="mist"] {

    --skin-mist:#C7D3DB;

    --skin-oat:#A79A8A;

    --skin-cream:#FCF7DF;

    --skin-ink:#353630;

    --glass-filter:blur(var(--glass-blur)) saturate(140%) brightness(1.04);

    --glass-edge:rgba(255,255,255,0.95);

    --glass-edge-soft:rgba(255,255,255,0.5);

    --glass-glow:rgba(255,253,244,0.6);

    --glass-sheen:rgba(255,253,244,0.6);

    --glass-drop:rgba(80,78,64,0.16);

}

[data-theme="mist"] body {

    background:
        radial-gradient(circle at 15% 15%, rgba(199,211,219,0.9), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(167,154,138,0.45), transparent 45%),
        #FCF7DF;

}

@media (max-width:480px) {

    /* standalone 底部兜底色，必须是纯色（见上面的长注释） */
    [data-theme="mist"] body {
        background:#eef0e6 !important;
    }

}

/* 光斑比其他皮肤更实一点：玻璃要有东西可"透"，背景太平会显得发闷 */
[data-theme="mist"] .phone {

    background:
        radial-gradient(circle at 10% 6%, rgba(199,211,219,0.95), transparent 44%),
        radial-gradient(circle at 95% 24%, rgba(167,154,138,0.42), transparent 38%),
        radial-gradient(circle at 8% 62%, rgba(255,252,240,0.8), transparent 40%),
        radial-gradient(circle at 18% 96%, rgba(167,154,138,0.38), transparent 44%),
        radial-gradient(circle at 90% 88%, rgba(199,211,219,0.9), transparent 48%),
        #F7F3E3;

}

[data-theme="mist"] h1,
[data-theme="mist"] .skin-option {

    color:rgba(53,54,48,0.85);

}

[data-theme="mist"] .theme-toggle-btn,
[data-theme="mist"] .menu-btn,
[data-theme="mist"] .chat-back-btn,
[data-theme="mist"] .chat-page-back-btn,
[data-theme="mist"] .fc-header-edit-btn {

    background:rgba(252,247,223,0.22);

    border-color:rgba(255,255,255,0.35);

}

[data-theme="mist"] .theme-toggle-btn svg {

    stroke:rgba(53,54,48,0.75);

}

[data-theme="mist"] .skin-menu {

    background:rgba(252,247,223,0.45);

    border-color:rgba(255,255,255,0.7);

}

[data-theme="mist"] .skin-option.active {

    background:rgba(199,211,219,0.55);

}

[data-theme="mist"] .together,
[data-theme="mist"] .weather-card,
[data-theme="mist"] .memories-card,
[data-theme="mist"] .together-card,
[data-theme="mist"] .new-chat-btn,
[data-theme="mist"] .sidebar-search,
[data-theme="mist"] .chat-composer,
[data-theme="mist"] .todo-input-bar,
[data-theme="mist"] .chat-model-btn,
[data-theme="mist"] .milktea-form input,
[data-theme="mist"] .profile-memory-form textarea {

    background:linear-gradient(
        135deg,
        rgba(255,253,244,0.26),
        rgba(199,211,219,0.16)
    );

    border-color:rgba(255,255,255,0.35);

}

[data-theme="mist"] .sidebar {

    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.5), transparent 42%),
        radial-gradient(circle at 100% 85%, rgba(199,211,219,0.4), transparent 45%),
        linear-gradient(165deg, rgba(252,247,223,0.62), rgba(199,211,219,0.55));

}

[data-theme="mist"] .session-item:hover,
[data-theme="mist"] .session-item.active,
[data-theme="mist"] .todo-column-header.target-active,
[data-theme="mist"] .chat-model-option:active {

    background:rgba(167,154,138,0.18);

}

[data-theme="mist"] .chat-bubble,
[data-theme="mist"] .profile-card,
[data-theme="mist"] .profile-nav-row,
[data-theme="mist"] .attachment-chip,
[data-theme="mist"] .album-art,
[data-theme="mist"] .call-avatar,
[data-theme="mist"] .listen-btn,
[data-theme="mist"] .call-btn,
[data-theme="mist"] .period-summary,
[data-theme="mist"] .milktea-count,
[data-theme="mist"] .todo-column,
[data-theme="mist"] .period-item,
[data-theme="mist"] .milktea-item,
[data-theme="mist"] .todo-item,
[data-theme="mist"] .session-context-menu,
[data-theme="mist"] .chat-model-menu,
[data-theme="mist"] .todo-calendar,
[data-theme="mist"] .profile-summary-text {

    background:linear-gradient(
        135deg,
        rgba(255,253,244,0.34),
        rgba(199,211,219,0.2)
    );

    border-color:rgba(255,255,255,0.35);

    color:rgba(53,54,48,0.88);

}

/* 我发的气泡偏燕麦，Claude 的偏雾蓝，一眼能分清 */
[data-theme="mist"] .chat-bubble.me {

    background:linear-gradient(
        135deg,
        rgba(255,251,236,0.55),
        rgba(167,154,138,0.3)
    );

}

[data-theme="mist"] .chat-bubble.claude {

    background:linear-gradient(
        135deg,
        rgba(255,253,244,0.5),
        rgba(199,211,219,0.45)
    );

}

/* 主按钮：墨橄榄实心，奶油色图标/文字 */
[data-theme="mist"] .chat-send-btn,
[data-theme="mist"] .listen-btn-main,
[data-theme="mist"] .call-btn-main,
[data-theme="mist"] .period-log-btn,
[data-theme="mist"] .milktea-add-btn,
[data-theme="mist"] .todo-add-btn,
[data-theme="mist"] .profile-mini-add-btn,
[data-theme="mist"] .profile-switch.on,
[data-theme="mist"] .profile-memory-toggle.on,
[data-theme="mist"] .todo-cal-day.selected,
[data-theme="mist"] .todo-due-btn.has-date,
[data-theme="mist"] .todo-item.done .todo-check,
[data-theme="mist"] .auth-gate-submit,
[data-theme="mist"] .schedule-day-tab.active,
[data-theme="mist"] .schedule-term-edit-btn,
[data-theme="mist"] .schedule-term-save-btn,
[data-theme="mist"] .schedule-course-period,
[data-theme="mist"] .schedule-form-save-btn {

    background:linear-gradient(145deg,#4d4d45,#353630);

    color:#FCF7DF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 16px rgba(53,54,48,0.22);

}

[data-theme="mist"] .chat-send-btn svg {

    stroke:#FCF7DF;

}

[data-theme="mist"] .title-underline,
[data-theme="mist"] .listen-progress-bar {

    background:linear-gradient(90deg,#A79A8A,#9fb2bf);

}

[data-theme="mist"] .together strong,
[data-theme="mist"] .milktea-count strong,
[data-theme="mist"] .period-summary-item strong,
[data-theme="mist"] .chat-model-option.selected {

    color:#8a7b69;

}

[data-theme="mist"] .heart-pulse svg {

    fill:#A79A8A;

}

[data-theme="mist"] .todo-item-due.overdue,
[data-theme="mist"] .wage-entry-amount.negative {

    color:#a9745d;

}

[data-theme="mist"] .nav {

    --glass-filter:blur(22px) saturate(150%) brightness(1.05);

    background:rgba(252,247,223,0.14);

    border-color:rgba(255,255,255,0.35);

}

[data-theme="mist"] .todo-calendar-nav {

    background:rgba(199,211,219,0.35);

}

[data-theme="mist"] .nav-item.active .nav-icon {

    background:rgba(199,211,219,0.6);

}

[data-theme="mist"] .nav-icon-heart {

    background:linear-gradient(135deg, rgba(252,247,223,0.8), rgba(199,211,219,0.6));

}

[data-theme="mist"] .nav-icon-heart svg {

    stroke:#6f665a;

}

[data-theme="mist"] .avatar,
[data-theme="mist"] .mine-avatar {

    box-shadow:
        0 12px 26px rgba(167,154,138,0.3),
        0 0 0 5px rgba(252,247,223,0.7);

}

[data-theme="mist"] .avatar.claude {

    box-shadow:
        0 12px 26px rgba(120,140,155,0.28),
        0 0 0 5px rgba(199,211,219,0.6);

}

[data-theme="mist"] .spark1 svg,
[data-theme="mist"] .spark3 svg {

    stroke:#A79A8A;

}

[data-theme="mist"] .spark2 svg,
[data-theme="mist"] .spark4 svg,
[data-theme="mist"] .spark6 svg {

    stroke:#9fb2bf;

}

[data-theme="mist"] .spark5 svg {

    fill:#C7D3DB;

}

[data-theme="mist"] .splash,
[data-theme="mist"] .auth-gate {

    background:linear-gradient(160deg, #FCF7DF, #e9ebe2 50%, #C7D3DB);

}

[data-theme="mist"] .splash-heart svg,
[data-theme="mist"] .auth-gate-heart svg {

    stroke:#A79A8A;

    filter:drop-shadow(0 4px 10px rgba(167,154,138,0.3));

}

[data-theme="mist"] .splash-quote,
[data-theme="mist"] .auth-gate-title {

    color:rgba(53,54,48,0.85);

}

[data-theme="mist"] .auth-gate-card {

    background:rgba(252,247,223,0.4);

}

[data-theme="mist"] .chat-avatar-mini.me {

    background-color:rgba(167,154,138,0.35);

}

[data-theme="mist"] .chat-avatar-mini.claude {

    background-color:rgba(199,211,219,0.6);

}

[data-theme="mist"] .chat-thinking-toggle,
[data-theme="mist"] .chat-thinking-box {

    background:rgba(199,211,219,0.3);

    border-color:rgba(255,255,255,0.6);

}

[data-theme="mist"] .todo-cal-day.today {

    box-shadow:inset 0 0 0 1.5px rgba(167,154,138,0.7);

}

[data-theme="mist"] .schedule-term-row,
[data-theme="mist"] .schedule-term-form,
[data-theme="mist"] .schedule-course-item,
[data-theme="mist"] .schedule-add-course-btn,
[data-theme="mist"] .schedule-course-form,
[data-theme="mist"] .wage-total-card,
[data-theme="mist"] .wage-entry-form {

    background:rgba(252,247,223,0.42);

    border-color:rgba(255,255,255,0.7);

}

[data-theme="mist"] .schedule-day-tab {

    background:rgba(199,211,219,0.35);

    color:rgba(53,54,48,0.6);

}

[data-theme="mist"] .flychess-page {

    background:linear-gradient(165deg, #FCF7DF 0%, #eef0e8 50%, #dfe6ea 100%);

}

[data-theme="mist"] .fc-editor-textarea:focus {

    border-color:rgba(167,154,138,0.6);

}

[data-theme="mist"] #ekg-gradient stop:first-child {

    stop-color:#A79A8A;

}

[data-theme="mist"] #ekg-gradient stop:last-child {

    stop-color:#9fb2bf;

}


/* ===================================================================
   螃蟹之家 Clawd's House —— 像素风格，刻意跟其它页面的玻璃拟态视觉区分开。
   不用 --glass-* 那套变量，不进任何 .together/.weather-card 那种共享选择
   器列表，整页都是独立的视觉系统（直角、硬边框、像素字体、低分辨率 canvas
   配 image-rendering:pixelated 做出的马赛克质感）。
   =================================================================== */

.crab-page {

    --crab-ink:#2b1d14;
    --crab-wall:#cdb38b;
    --crab-floor:#8a6a4a;
    --crab-panel:#f4e8cf;
    --crab-accent:#e8613c;
    --crab-good:#6fae4f;
    --crab-warn:#e0a339;
    --crab-bad:#d1483f;
    --crab-gold:#f0c23c;

    height:100%;

    box-sizing:border-box;

    padding:calc(18px + env(safe-area-inset-top)) 14px calc(130px + env(safe-area-inset-bottom));

    background:var(--crab-wall);

    font-family:'Press Start 2P', monospace;

    color:var(--crab-ink);

}

.crab-stats-bar {

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px;

    box-sizing:border-box;

    background:var(--crab-panel);

    border:3px solid var(--crab-ink);

    box-shadow:3px 3px 0 var(--crab-ink);

    flex-wrap:wrap;

}

.crab-stat {

    display:flex;

    flex-direction:column;

    gap:3px;

    flex:1;

    min-width:42px;

}

.crab-stat-label {

    font-size:7px;

    letter-spacing:0.5px;

    color:var(--crab-ink);

}

.crab-stat-track {

    height:8px;

    background:rgba(43,29,20,0.18);

    border:2px solid var(--crab-ink);

    box-sizing:border-box;

}

.crab-stat-fill {

    height:100%;

    width:100%;

    background:var(--crab-good);

}

.crab-stat-fill-hp   { background:var(--crab-bad); }
.crab-stat-fill-sta  { background:var(--crab-warn); }
.crab-stat-fill-food { background:#c97b3a; }
.crab-stat-fill-mood { background:#5b9bd1; }

.crab-coin-badge {

    display:flex;

    align-items:center;

    gap:4px;

    padding:5px 7px;

    background:var(--crab-ink);

    color:var(--crab-gold);

    font-size:9px;

    border:2px solid var(--crab-ink);

}

.crab-coin-icon {

    width:10px;

    height:10px;

    image-rendering:pixelated;

}

.crab-room {

    position:relative;

    width:100%;

    aspect-ratio:130 / 170;

    margin-top:12px;

    box-sizing:border-box;

    border:3px solid var(--crab-ink);

    box-shadow:3px 3px 0 var(--crab-ink);

    background:var(--crab-floor);

    overflow:hidden;

    touch-action:none;

}

.crab-room-canvas {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    image-rendering:pixelated;

}

.crab-sprite {

    position:absolute;

    top:0;

    left:0;

    /* 48x34 的精灵放进 208x272 的房间，像素颗粒跟房间一样大 */
    width:23.077%;

    height:12.5%;

    transform:translate(-50%, -94%);

    image-rendering:pixelated;

    transition:left 0.42s linear, top 0.42s linear;

    cursor:pointer;

    touch-action:none;

    z-index:3;

}

.crab-sprite.dragging {

    transition:none;

}

.crab-dialogue {

    /* RPG 式对话框：横在房间底部。说话时 JS 会让 Clawd 站到它上面，不会被挡住 */
    position:absolute;

    left:10px;

    right:13px;

    bottom:13px;

    transform:translateY(6px);

    padding:16px 14px 13px;

    box-sizing:border-box;

    background:var(--crab-panel);

    border:3px solid var(--crab-ink);

    box-shadow:3px 3px 0 var(--crab-ink);

    font-size:12px;

    line-height:1.75;

    text-align:left;

    opacity:0;

    pointer-events:none;

    transition:opacity 0.15s steps(2), transform 0.15s steps(2);

    z-index:5;

}

.crab-dialogue::before {

    content:"CLAWD";

    position:absolute;

    left:10px;

    top:-11px;

    padding:4px 6px 3px;

    background:var(--crab-accent);

    border:3px solid var(--crab-ink);

    color:#fff7ea;

    font-size:7px;

    line-height:1;

    letter-spacing:1px;

}

.crab-dialogue.active {

    opacity:1;

    transform:translateY(0);

}

.crab-dialogue p {

    margin:0;

}

/* 小表演：跳一下 / 被拽得左右晃。keyframes 里要带上精灵本身的锚点位移 */
.crab-sprite.crab-hop {

    animation:crabHop 0.45s steps(6);

}

.crab-sprite.crab-shake {

    animation:crabShake 0.6s steps(8);

}

@keyframes crabHop {

    0%, 100% { transform:translate(-50%, -94%); }

    45% { transform:translate(-50%, -128%); }

}

@keyframes crabShake {

    0%, 100% { transform:translate(-50%, -94%); }

    20%, 60% { transform:translate(-58%, -94%); }

    40%, 80% { transform:translate(-42%, -94%); }

}

/* 冒出来的爱心 / zzz：9x8 的小画布，放大到两倍房间像素 */
.crab-particle {

    position:absolute;

    width:8.654%;

    height:5.882%;

    transform:translate(-50%, -100%);

    image-rendering:pixelated;

    pointer-events:none;

    z-index:4;

    animation:crabParticleRise 1.3s steps(13) forwards;

}

@keyframes crabParticleRise {

    0% { transform:translate(-50%, -60%) scale(0.5); opacity:0; }

    15% { transform:translate(-50%, -100%) scale(1); opacity:1; }

    70% { opacity:1; }

    100% { transform:translate(-50%, -360%) scale(1); opacity:0; }

}

.crab-day-counter {

    margin:0;

    text-align:left;

    font-size:9px;

    letter-spacing:1px;

    color:var(--crab-ink);

}


/* ===== 雨滴特效：整屏一层透明画布，开关在首页右上角的皮肤面板里 ===== */

.rain-fx {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:25;
    pointer-events:none;
    display:none;
}

.rain-fx.on {
    display:block;
}

.fx-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:2px;
    padding:9px 8px 7px 12px;
    border-top:1px solid rgba(255,255,255,0.5);
    font-size:13px;
    letter-spacing:0.5px;
    color:rgba(40,40,50,0.8);
}

.fx-switch {
    transform:scale(0.82);
    transform-origin:right center;
}

.fx-switch.on {
    background:linear-gradient(135deg,#9db8d6,#6f93bd);
}


/* ===== 螃蟹之家：家具热区、吃东西的动画、夜晚、在床上 ===== */

.crab-hotspot {
    position:absolute;
    z-index:2;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.crab-sprite.crab-munch {
    animation:crabMunch 1.5s steps(2);
}

@keyframes crabMunch {
    0%, 20%, 40%, 60%, 80%, 100% { transform:translate(-50%, -94%); }
    10%, 30%, 50%, 70%, 90% { transform:translate(-46%, -88%); }
}

/* 夜里屋子压暗了，Clawd 也跟着暗一点，不然像自己在发光 */
.crab-room.night .crab-sprite {
    filter:brightness(0.74) saturate(0.92);
}

.crab-room.in-bed .crab-sprite {
    visibility:hidden;
}

/* ===== 第 100 天：首页的小灯 ===== */

.anniv-fx {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:24;
    pointer-events:none;
    display:none;
}

.anniv-fx.on {
    display:block;
}

#days.anniv-glow {
    text-shadow:0 0 14px rgba(255,170,120,0.75);
    transition:text-shadow 1.2s ease;
}

.anniv-note {
    margin:14px 0 0;
    text-align:center;
    font-size:12px;
    letter-spacing:3px;
    color:rgba(40,40,50,0.55);
    opacity:0;
    transform:translateY(4px);
    transition:opacity 1.6s ease, transform 1.6s ease;
}

.anniv-note.show {
    opacity:1;
    transform:none;
}

[data-theme="dark"] .anniv-note {
    color:rgba(255,255,255,0.6);
}



/* ============================================================
   新皮肤：初雪
   雪白 #ECF5FF · 霜蓝 #B1C7F3 · 浅冰 #E1EDFF · 晴空 #A9C7FF · 墨蓝 #344676
   这一整块是照着"雾蓝奶咖"那块逐条对应生成的（结构一样，只换了色），
   雪白做底、霜蓝和晴空做光斑，主按钮和字色用墨蓝压住。
   ============================================================ */

[data-theme="snow"] {

    --skin-frost:#B1C7F3;

    --skin-sky:#86A8F0;

    --skin-snow:#ECF5FF;

    --skin-ink:#344676;

    --glass-filter:blur(var(--glass-blur)) saturate(140%) brightness(1.04);

    --glass-edge:rgba(255,255,255,0.95);

    --glass-edge-soft:rgba(255,255,255,0.5);

    --glass-glow:rgba(248,251,255,0.6);

    --glass-sheen:rgba(248,251,255,0.6);

    --glass-drop:rgba(70,90,140,0.16);

}

[data-theme="snow"] body {

    background:
        radial-gradient(circle at 15% 15%, rgba(177,199,243,0.9), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(169,199,255,0.45), transparent 45%),
        #ECF5FF;

}

@media (max-width:480px) {

    /* standalone 底部兜底色，必须是纯色（见上面的长注释） */
    [data-theme="snow"] body {
        background:#E8F1FF !important;
    }

}

/* 光斑比其他皮肤更实一点：玻璃要有东西可"透"，背景太平会显得发闷 */
[data-theme="snow"] .phone {

    background:
        radial-gradient(circle at 10% 6%, rgba(177,199,243,0.95), transparent 44%),
        radial-gradient(circle at 95% 24%, rgba(169,199,255,0.42), transparent 38%),
        radial-gradient(circle at 8% 62%, rgba(245,250,255,0.8), transparent 40%),
        radial-gradient(circle at 18% 96%, rgba(169,199,255,0.38), transparent 44%),
        radial-gradient(circle at 90% 88%, rgba(177,199,243,0.9), transparent 48%),
        #EEF5FF;

}

[data-theme="snow"] h1,
[data-theme="snow"] .skin-option {

    color:rgba(52,70,118,0.85);

}

[data-theme="snow"] .theme-toggle-btn,
[data-theme="snow"] .menu-btn,
[data-theme="snow"] .chat-back-btn,
[data-theme="snow"] .chat-page-back-btn,
[data-theme="snow"] .fc-header-edit-btn {

    background:rgba(236,245,255,0.22);

    border-color:rgba(255,255,255,0.35);

}

[data-theme="snow"] .theme-toggle-btn svg {

    stroke:rgba(52,70,118,0.75);

}

[data-theme="snow"] .skin-menu {

    background:rgba(236,245,255,0.45);

    border-color:rgba(255,255,255,0.7);

}

[data-theme="snow"] .skin-option.active {

    background:rgba(177,199,243,0.55);

}

[data-theme="snow"] .together,
[data-theme="snow"] .weather-card,
[data-theme="snow"] .memories-card,
[data-theme="snow"] .together-card,
[data-theme="snow"] .new-chat-btn,
[data-theme="snow"] .sidebar-search,
[data-theme="snow"] .chat-composer,
[data-theme="snow"] .todo-input-bar,
[data-theme="snow"] .chat-model-btn,
[data-theme="snow"] .milktea-form input,
[data-theme="snow"] .profile-memory-form textarea {

    background:linear-gradient(
        135deg,
        rgba(248,251,255,0.26),
        rgba(177,199,243,0.16)
    );

    border-color:rgba(255,255,255,0.35);

}

[data-theme="snow"] .sidebar {

    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.5), transparent 42%),
        radial-gradient(circle at 100% 85%, rgba(177,199,243,0.4), transparent 45%),
        linear-gradient(165deg, rgba(236,245,255,0.62), rgba(177,199,243,0.55));

}

[data-theme="snow"] .session-item:hover,
[data-theme="snow"] .session-item.active,
[data-theme="snow"] .todo-column-header.target-active,
[data-theme="snow"] .chat-model-option:active {

    background:rgba(169,199,255,0.18);

}

[data-theme="snow"] .chat-bubble,
[data-theme="snow"] .profile-card,
[data-theme="snow"] .profile-nav-row,
[data-theme="snow"] .attachment-chip,
[data-theme="snow"] .album-art,
[data-theme="snow"] .call-avatar,
[data-theme="snow"] .listen-btn,
[data-theme="snow"] .call-btn,
[data-theme="snow"] .period-summary,
[data-theme="snow"] .milktea-count,
[data-theme="snow"] .todo-column,
[data-theme="snow"] .period-item,
[data-theme="snow"] .milktea-item,
[data-theme="snow"] .todo-item,
[data-theme="snow"] .session-context-menu,
[data-theme="snow"] .chat-model-menu,
[data-theme="snow"] .todo-calendar,
[data-theme="snow"] .profile-summary-text {

    background:linear-gradient(
        135deg,
        rgba(248,251,255,0.34),
        rgba(177,199,243,0.2)
    );

    border-color:rgba(255,255,255,0.35);

    color:rgba(52,70,118,0.88);

}

/* 我发的气泡偏燕麦，Claude 的偏雾蓝，一眼能分清 */
[data-theme="snow"] .chat-bubble.me {

    background:linear-gradient(
        135deg,
        rgba(244,249,255,0.55),
        rgba(169,199,255,0.3)
    );

}

[data-theme="snow"] .chat-bubble.claude {

    background:linear-gradient(
        135deg,
        rgba(248,251,255,0.5),
        rgba(177,199,243,0.45)
    );

}

/* 主按钮：墨橄榄实心，奶油色图标/文字 */
[data-theme="snow"] .chat-send-btn,
[data-theme="snow"] .listen-btn-main,
[data-theme="snow"] .call-btn-main,
[data-theme="snow"] .period-log-btn,
[data-theme="snow"] .milktea-add-btn,
[data-theme="snow"] .todo-add-btn,
[data-theme="snow"] .profile-mini-add-btn,
[data-theme="snow"] .profile-switch.on,
[data-theme="snow"] .profile-memory-toggle.on,
[data-theme="snow"] .todo-cal-day.selected,
[data-theme="snow"] .todo-due-btn.has-date,
[data-theme="snow"] .todo-item.done .todo-check,
[data-theme="snow"] .auth-gate-submit,
[data-theme="snow"] .schedule-day-tab.active,
[data-theme="snow"] .schedule-term-edit-btn,
[data-theme="snow"] .schedule-term-save-btn,
[data-theme="snow"] .schedule-course-period,
[data-theme="snow"] .schedule-form-save-btn {

    background:linear-gradient(145deg,#5570B4,#344676);

    color:#ECF5FF;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 16px rgba(52,70,118,0.22);

}

[data-theme="snow"] .chat-send-btn svg {

    stroke:#ECF5FF;

}

[data-theme="snow"] .title-underline,
[data-theme="snow"] .listen-progress-bar {

    background:linear-gradient(90deg,#86A8F0,#A9C7FF);

}

[data-theme="snow"] .together strong,
[data-theme="snow"] .milktea-count strong,
[data-theme="snow"] .period-summary-item strong,
[data-theme="snow"] .chat-model-option.selected {

    color:#6E8FD6;

}

[data-theme="snow"] .heart-pulse svg {

    fill:#86A8F0;

}

[data-theme="snow"] .todo-item-due.overdue,
[data-theme="snow"] .wage-entry-amount.negative {

    color:#C76B8A;

}

[data-theme="snow"] .nav {

    --glass-filter:blur(22px) saturate(150%) brightness(1.05);

    background:rgba(236,245,255,0.14);

    border-color:rgba(255,255,255,0.35);

}

[data-theme="snow"] .todo-calendar-nav {

    background:rgba(177,199,243,0.35);

}

[data-theme="snow"] .nav-item.active .nav-icon {

    background:rgba(177,199,243,0.6);

}

[data-theme="snow"] .nav-icon-heart {

    background:linear-gradient(135deg, rgba(236,245,255,0.8), rgba(177,199,243,0.6));

}

[data-theme="snow"] .nav-icon-heart svg {

    stroke:#5A74B0;

}

[data-theme="snow"] .avatar,
[data-theme="snow"] .mine-avatar {

    box-shadow:
        0 12px 26px rgba(169,199,255,0.3),
        0 0 0 5px rgba(236,245,255,0.7);

}

[data-theme="snow"] .avatar.claude {

    box-shadow:
        0 12px 26px rgba(110,140,200,0.28),
        0 0 0 5px rgba(177,199,243,0.6);

}

[data-theme="snow"] .spark1 svg,
[data-theme="snow"] .spark3 svg {

    stroke:#86A8F0;

}

[data-theme="snow"] .spark2 svg,
[data-theme="snow"] .spark4 svg,
[data-theme="snow"] .spark6 svg {

    stroke:#A9C7FF;

}

[data-theme="snow"] .spark5 svg {

    fill:#B1C7F3;

}

[data-theme="snow"] .splash,
[data-theme="snow"] .auth-gate {

    background:linear-gradient(160deg, #ECF5FF, #E1EDFF 50%, #B1C7F3);

}

[data-theme="snow"] .splash-heart svg,
[data-theme="snow"] .auth-gate-heart svg {

    stroke:#86A8F0;

    filter:drop-shadow(0 4px 10px rgba(169,199,255,0.3));

}

[data-theme="snow"] .splash-quote,
[data-theme="snow"] .auth-gate-title {

    color:rgba(52,70,118,0.85);

}

[data-theme="snow"] .auth-gate-card {

    background:rgba(236,245,255,0.4);

}

[data-theme="snow"] .chat-avatar-mini.me {

    background-color:rgba(169,199,255,0.35);

}

[data-theme="snow"] .chat-avatar-mini.claude {

    background-color:rgba(177,199,243,0.6);

}

[data-theme="snow"] .chat-thinking-toggle,
[data-theme="snow"] .chat-thinking-box {

    background:rgba(177,199,243,0.3);

    border-color:rgba(255,255,255,0.6);

}

[data-theme="snow"] .todo-cal-day.today {

    box-shadow:inset 0 0 0 1.5px rgba(169,199,255,0.7);

}

[data-theme="snow"] .schedule-term-row,
[data-theme="snow"] .schedule-term-form,
[data-theme="snow"] .schedule-course-item,
[data-theme="snow"] .schedule-add-course-btn,
[data-theme="snow"] .schedule-course-form,
[data-theme="snow"] .wage-total-card,
[data-theme="snow"] .wage-entry-form {

    background:rgba(236,245,255,0.42);

    border-color:rgba(255,255,255,0.7);

}

[data-theme="snow"] .schedule-day-tab {

    background:rgba(177,199,243,0.35);

    color:rgba(52,70,118,0.6);

}

[data-theme="snow"] .flychess-page {

    background:linear-gradient(165deg, #ECF5FF 0%, #E8F1FF 50%, #DCE8FB 100%);

}

[data-theme="snow"] .fc-editor-textarea:focus {

    border-color:rgba(169,199,255,0.6);

}

[data-theme="snow"] #ekg-gradient stop:first-child {

    stop-color:#86A8F0;

}

[data-theme="snow"] #ekg-gradient stop:last-child {

    stop-color:#A9C7FF;

}

.skin-swatch-snow { background:linear-gradient(135deg,#ECF5FF 0%,#E1EDFF 30%,#B1C7F3 65%,#A9C7FF 100%); }

/* ===== 初雪皮肤的雪：背景里一片大的静态雪花 + 一层飘雪画布。
   只在这个皮肤下出现，开关是皮肤面板里的"飘雪"（别的皮肤下这一行不显示） ===== */

.snow-hero {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    display:none;
}

.snow-hero.on {
    display:block;
}

.snow-defs {
    position:absolute;
}

.snow-flake {
    position:absolute;
}

/* 主体：右上角，斜着露出大半片 */
.snow-flake-main {
    top:calc(-70px + env(safe-area-inset-top));
    right:-120px;
    width:420px;
    height:420px;
    transform:rotate(11deg);
}

/* 右下角一片中等的，被屏幕边切掉一点 */
.snow-flake-b {
    bottom:9%;
    right:-64px;
    width:220px;
    height:220px;
    transform:rotate(26deg);
    opacity:0.75;
}

/* 左边中间一片，探进来半片 */
.snow-flake-c {
    top:44%;
    left:-70px;
    width:170px;
    height:170px;
    transform:rotate(-9deg);
    opacity:0.7;
}

/* 左上一小片 */
.snow-flake-d {
    top:calc(118px + env(safe-area-inset-top));
    left:9%;
    width:76px;
    height:76px;
    transform:rotate(18deg);
    opacity:0.65;
}

.snow-fx {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:25;
    pointer-events:none;
    display:none;
}

.snow-fx.on {
    display:block;
}

.fx-row-snow {
    display:none;
}

[data-theme="snow"] .fx-row-snow {
    display:flex;
}

[data-theme="snow"] .fx-row {
    color:rgba(52,70,118,0.85);
}

[data-theme="snow"] .fx-switch.on {
    background:linear-gradient(135deg,#A9C7FF,#86A8F0);
}


/* ===== 螃蟹之家：花园 ===== */

/* 热区按场景显示：屋里的家具只在屋里能点，菜地只在花园能点 */
.crab-room:not(.scene-garden) .crab-hotspot[data-scene="garden"],
.crab-room.scene-garden .crab-hotspot[data-scene="room"] {
    display:none;
}

/* 进出门的时候黑一下 */
.crab-fade {
    position:absolute;
    inset:0;
    background:#1c1410;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.36s steps(4);
    z-index:8;
}

.crab-fade.on {
    opacity:1;
}

/* 水壶 / 肥料袋：拿在 Clawd 右手边，倒的时候往植物那边倾 */
.crab-prop {
    position:absolute;
    image-rendering:pixelated;
    pointer-events:none;
    transform-origin:20% 90%;
    transition:transform 0.25s steps(3);
    z-index:4;
}

.crab-prop.tilt {
    transform:rotate(38deg);
}

.crab-fall {
    position:absolute;
    width:0.96%;
    height:1.47%;
    pointer-events:none;
    z-index:4;
    animation:crabFall 0.6s steps(6) forwards;
}

@keyframes crabFall {
    0% { transform:translateY(0); opacity:1; }
    80% { opacity:1; }
    100% { transform:translateY(900%); opacity:0; }
}

.crab-icon-particle {
    width:8.654%;
    height:6.618%;
}

.crab-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}

.crab-footer-btns {
    display:flex;
    gap:8px;
}

.crab-btn {
    padding:6px 10px 5px;
    border:2px solid var(--crab-ink);
    background:var(--crab-panel);
    box-shadow:2px 2px 0 var(--crab-ink);
    color:var(--crab-ink);
    font-family:inherit;
    font-size:11px;
    line-height:1.2;
    border-radius:0;
    cursor:pointer;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
}

.crab-btn:active {
    transform:translate(2px, 2px);
    box-shadow:none;
}

.crab-btn:disabled {
    opacity:0.4;
}

.crab-btn.danger {
    background:#f6d2c8;
}

/* 面板：背包 / 商店 / 菜地详情，盖在房间下半截 */
.crab-panel {
    position:absolute;
    left:8px;
    right:11px;
    bottom:10px;
    max-height:74%;
    display:flex;
    flex-direction:column;
    background:var(--crab-panel);
    border:3px solid var(--crab-ink);
    box-shadow:3px 3px 0 var(--crab-ink);
    z-index:7;
    touch-action:pan-y;
}

.crab-panel[hidden] {
    display:none;
}

.crab-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    background:var(--crab-accent);
    color:#fff7ea;
    font-size:12px;
    border-bottom:3px solid var(--crab-ink);
}

.crab-panel-close {
    border:none;
    background:transparent;
    color:inherit;
    font-size:14px;
    padding:0 2px;
    cursor:pointer;
}

.crab-panel-tabs {
    display:flex;
}

.crab-panel-tabs:empty {
    display:none;
}

.crab-tab {
    flex:1;
    padding:7px 0 6px;
    border:none;
    border-bottom:3px solid var(--crab-ink);
    background:#e8d7b4;
    color:var(--crab-ink);
    font-family:inherit;
    font-size:11px;
    cursor:pointer;
}

.crab-tab + .crab-tab {
    border-left:3px solid var(--crab-ink);
}

.crab-tab.active {
    background:var(--crab-panel);
    border-bottom-color:transparent;
}

.crab-panel-body {
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:6px 10px 10px;
}

.crab-row {
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px 0;
    border-bottom:2px dashed rgba(43,29,20,0.18);
}

.crab-row:last-child {
    border-bottom:none;
}

.crab-row-icon {
    flex-shrink:0;
    width:24px;
    height:24px;
    image-rendering:pixelated;
}

.crab-row-text {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.crab-row-text b {
    font-size:12px;
    font-weight:600;
}

.crab-row-text span {
    font-size:10px;
    line-height:1.5;
    opacity:0.75;
}

.crab-panel-empty {
    margin:10px 0;
    font-size:11px;
    opacity:0.75;
}

.crab-info {
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:6px 0 4px;
    font-size:11px;
}

.crab-info-line {
    display:flex;
    align-items:center;
    gap:10px;
}

.crab-info-line > span:first-child {
    flex-shrink:0;
    width:30px;
    opacity:0.7;
}

.crab-info-bar {
    flex:1;
}

.crab-tip {
    margin:8px 0 2px;
    padding:7px 8px;
    font-size:10px;
    line-height:1.6;
    background:rgba(43,29,20,0.07);
}

.crab-panel-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}


/* ===== 第 100 天的花海 ===== */

/* 里面全是绝对定位的层，页面自己要铺满，不能靠内容撑高度（不然手机上是一片空白） */
.flowersea-page {
    position:absolute;
    inset:0;
    height:auto;
    padding:0;
    z-index:1;
    overflow:hidden;
    background:#161b36;
}

/* 花海页全屏，底部导航先收起来 */
.phone-inner:has(#flowerseaPage.active) .nav {
    opacity:0;
    pointer-events:none;
}

.flowersea-stage,
.flowersea-layer {
    position:absolute;
    inset:0;
}

.flowersea-layer svg {
    display:block;
    width:100%;
    height:100%;
}

.flowersea-friends {
    pointer-events:none;
}

.flowersea-page .fs-star {
    animation:fsTwinkle 3.6s ease-in-out infinite;
}

.flowersea-page .fs-star.big {
    animation-duration:5s;
    transform-box:fill-box;
    transform-origin:center;
}

@keyframes fsTwinkle {
    0%, 100% { opacity:0.9; }
    50% { opacity:0.35; }
}

.flowersea-page .fs-flower,
.flowersea-page .fs-bud {
    cursor:pointer;
}

.flowersea-back {
    position:absolute;
    top:calc(16px + env(safe-area-inset-top));
    left:16px;
    width:38px;
    height:38px;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:50%;
    background:rgba(255,255,255,0.12);
    color:rgba(253,246,227,0.9);
    font-size:22px;
    line-height:1;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:3;
}

.flowersea-status {
    position:absolute;
    top:calc(26px + env(safe-area-inset-top));
    left:64px;
    right:16px;
    margin:0;
    font-size:12px;
    letter-spacing:1px;
    color:rgba(253,246,227,0.75);
    z-index:3;
}

.flowersea-card {
    position:absolute;
    left:20px;
    right:20px;
    top:calc(84px + env(safe-area-inset-top));
    padding:16px 18px;
    border-radius:18px;
    background:rgba(30,32,64,0.55);
    border:1px solid rgba(253,246,227,0.22);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    color:#fdf6e3;
    font-size:15px;
    line-height:1.7;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity 0.4s ease, transform 0.4s ease;
    pointer-events:none;
    z-index:3;
}

.flowersea-card.show {
    opacity:1;
    transform:none;
    pointer-events:auto;
}

.flowersea-card p {
    margin:0;
    white-space:pre-wrap;
}

.anniv-go {
    display:block;
    margin:10px auto 0;
    padding:6px 14px;
    border:1px solid rgba(255,255,255,0.6);
    border-radius:999px;
    background:rgba(255,255,255,0.3);
    color:inherit;
    font-size:12px;
    letter-spacing:2px;
    cursor:pointer;
}


/* 花海页的诊断框（只在 ?preview=flowersea / ?debug=1 时出现） */
.flowersea-debug {
    position:fixed;
    left:6px;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    margin:0;
    padding:8px;
    background:rgba(0,0,0,0.75);
    color:#9ef0a8;
    font:10px/1.5 ui-monospace, Menlo, monospace;
    white-space:pre-wrap;
    z-index:99999;
    pointer-events:none;
}


/* 全开以后中间那句：留在屏幕上，字大一点 */
.flowersea-card.final {
    font-size:17px;
    text-align:center;
    background:rgba(60,48,90,0.55);
    border-color:rgba(253,236,240,0.4);
}

/* 工具调用折叠条：直接复用思考过程的样式（各主题也跟着走），只补条目排版 */
.chat-tools-toggle {
    margin-top:2px;
}

.chat-tool-item + .chat-tool-item {
    margin-top:8px;
}

.chat-tool-name {
    font-weight:600;
}

.chat-tool-io {
    opacity:0.8;
    font-size:11px;
}