/* Messages module styles are fully scoped; they do not change host desktop styles. */
.messages-app { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; isolation:isolate; color:#000; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",Arial,sans-serif; }
.messages-app .phone { width:100%; height:100%; max-width:none; }
.app-content:has(.messages-app) { display:block !important; align-items:stretch !important; justify-content:flex-start !important; overflow:hidden !important; color:initial !important; font-size:initial !important; }
.app-content:has(.messages-app) > .messages-app { flex:1 1 auto; }

/* ================= 黑白灰 · 简洁风 ================= */
.messages-app *{ box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }


.messages-app .phone{ position: relative; width: 100%; height: 100%; max-width: 430px; overflow: hidden; overflow: clip; background: #FFFFFF; }
.messages-app .mono{ font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace; }

/* ---------- 顶部标题栏 ---------- */
.messages-app .header{ padding: 58px 20px 10px; display: flex; align-items: flex-end; justify-content: space-between; background: #FFFFFF; }
.messages-app .header h1{ font-size: 52px; line-height: 0.95; font-weight: 800; letter-spacing: -1.8px; }
.messages-app .header .sub{ font-size: 12px; color: #8E8E8E; margin-top: 2px; }
.messages-app .header-actions{ display: flex; align-items: center; gap: 8px; }
.messages-app .ibtn{
    width: 34px; height: 34px; border: none; background: #F2F2F2; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s ease, background 0.15s ease;
}
.messages-app .ibtn:active{ transform: scale(0.9); background: #E6E6E6; }
.messages-app .ibtn svg{ width: 16px; height: 16px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.messages-app .search{ margin: 0 28px 8px; height: 36px; border-radius: 10px; background: #F2F2F2; display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.messages-app .search svg{ width: 14px; height: 14px; stroke: #8E8E8E; stroke-width: 2; fill: none; stroke-linecap: round; flex-shrink: 0; }
.messages-app .search input{ flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: #000; }
.messages-app .search input::placeholder{ color: #8E8E8E; }

/* ---------- 视图（四个标签页） ---------- */
.messages-app .view{ position: absolute; inset: 0; display: none; flex-direction: column; background: #FFFFFF; }
.messages-app .view.on{ display: flex; animation: fade 0.25s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.messages-app .scroll{ flex: 1; overflow-y: auto; padding-bottom: 120px; scrollbar-width: none; }
.messages-app .scroll::-webkit-scrollbar{ display: none; }

/* ---------- 头像（黑白） ---------- */
.messages-app .av{ position: relative; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.messages-app .av img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;  }
.messages-app .av .ini{ font-size: 15px; }
.messages-app .av.xl{ width: 56px; height: 56px; } .messages-app .av.lg{ width: 46px; height: 46px; } .messages-app .av.md{ width: 36px; height: 36px; font-size: 13px; } .messages-app .av.sm{ width: 28px; height: 28px; font-size: 11px; }
.messages-app .av.g1{ background: #1A1A1A; } .messages-app .av.g2{ background: #4A4A4A; } .messages-app .av.g3{ background: #7A7A7A; } .messages-app .av.g4{ background: #A6A6A6; } .messages-app .av.g5{ background: #2E2E2E; }

/* ---------- 聊天列表 ---------- */
.messages-app .row{ display: flex; align-items: center; gap: 12px; margin: 0 12px; padding: 13px 14px; border-radius: 18px; cursor: pointer; position: relative; transition: background 0.15s ease; }
.messages-app .row:active{ background: #F7F7F7; }
.messages-app .row + .row::before{
    content: ""; position: absolute; left: 69px; right: 14px; top: 0; height: 5px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 1.25H10M0 3.75H10' stroke='%23D9D9D9' stroke-width='0.6' fill='none'/%3E%3C/svg%3E") repeat-x 0 0 / 10px 5px;
}
.messages-app .row .info{ flex: 1; min-width: 0; }
.messages-app .row .top{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.messages-app .row .name{ font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .row .time{ font-size: 12px; color: #8E8E8E; flex-shrink: 0; }
.messages-app .row .bottom{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.messages-app .row .preview{ font-size: 13.5px; color: #8E8E8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .row.unread .preview{ color: #000; font-weight: 500; }
.messages-app .badge{ min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #000; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.messages-app .dot-mute{ width: 8px; height: 8px; border-radius: 50%; background: #000; flex-shrink: 0; }
.messages-app .section-label{ padding: 14px 16px 6px; font-size: 12px; font-weight: 600; color: #8E8E8E; letter-spacing: 0.3px; text-transform: uppercase; }
.messages-app .empty{ text-align: center; color: #8E8E8E; font-size: 13px; padding: 40px 0; }

/* ---------- 联系人 (信封角色卡) ---------- */
.messages-app .contact-top{ display: flex; gap: 12px; padding: 4px 16px 14px; }
.messages-app .quick{ flex: 1; height: 58px; border-radius: 12px; background: #F2F2F2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.messages-app .quick:active{ background: #E6E6E6; }
.messages-app .quick svg{ width: 18px; height: 18px; stroke: #000; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.messages-app .contact-grid{ padding: 0 16px 8px; display: grid; grid-template-columns: 1fr; gap: 24px; }

/* 每张信封：竖版，中缝居中，轻微错位倾斜 */
.messages-app .env-wrap{ transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.messages-app .env-wrap:nth-child(4n/**/+1){ transform: rotate(-0.8deg); }
.messages-app .env-wrap:nth-child(4n/**/+2){ transform: rotate(0.6deg); }
.messages-app .env-wrap:nth-child(4n/**/+3){ transform: rotate(0.5deg); }
.messages-app .env-wrap:nth-child(4n/**/+4){ transform: rotate(-0.6deg); }

/* 信封本体：纸面色 */
.messages-app .env{
    position: relative; height: 200px; border-radius: 16px; overflow: hidden;
    background:
        repeating-linear-gradient(172deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 4px),
        #FFFFFF;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.messages-app .env:active{ transform: scale(0.97); box-shadow: none; }

/* 左半：头像（点击进入现有的联系人编辑） */
.messages-app .env-left{
    position: absolute; left: 0; top: 0; bottom: 0; width: 46%; z-index: 2; padding-left: 12%;
    display: flex; align-items: center; justify-content: center;
}
.messages-app .env-left .av.lg{ width: 70px; height: 70px; font-size: 22px; border: 3px solid #FFFFFF; box-shadow: 0 6px 16px rgba(0,0,0,0.14); }
.messages-app .env-left .av img{  }
.messages-app .env-no{
    position: absolute; left: 12px; bottom: 12px;
    font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: #A6A6A6;
}

/* 右半：角色卡，左边缘渐隐进纸面 */
.messages-app .env-right{
    position: absolute; top: 0; bottom: 0; right: 0; left: 42%; z-index: 1; overflow: hidden; background: #161616;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 30%, #000 60%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 30%, #000 60%);
}
.messages-app .env-right.fallback{ background: radial-gradient(120% 80% at 80% 0%, #4a4a4a 0%, #1d1d1d 45%, #0c0c0c 100%); }
.messages-app .env-bg{
    position: absolute; inset: 0; background-size: cover; background-position: center;
    
}
.messages-app .env-wm{
    position: absolute; right: -6px; bottom: 30px; font-size: 110px; line-height: 1; font-weight: 800;
    color: rgba(255,255,255,0.07); letter-spacing: -4px;
}
.messages-app .env-shade{
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0) 80%),
                linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 28%);
}

/* 撒在卡片上的五角星：大小、深浅不一 */
.messages-app .env-stars{ position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.messages-app .env-star{ position: absolute; display: block; }

/* 头像框：外圈实线 + 内圈点线 */
.messages-app .av-frame{ position: relative; padding: 8px; border-radius: 50%; border: 1px solid #111; background: #FFFFFF; }
.messages-app .av-frame::before{ content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px dotted #111; pointer-events: none; }
/* 中缝：竖直虚线 + 曲别针（点曲别针 = 改人设） */
.messages-app .env-seam{
    position: absolute; left: 12%; top: 60px; bottom: 16px; width: 0; z-index: 3;
    border-left: 1px dashed rgba(90,90,90,0.45);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.messages-app .env-clip{
    position: absolute; left: 12%; top: 160px; z-index: 4; width: 53px; height: 93px; padding: 0; border: none; background: none;
    transform: translate(-50%, -50%) rotate(-16deg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.messages-app .env-clip:active{ transform: translate(-50%, -50%) rotate(-16deg) scale(0.9); }
.messages-app .env-clip svg{
    width: 57px; height: 57px; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}

/* 右上角未读 */
.messages-app .cc-badge{
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: #fff; color: #000; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.messages-app .env-badge{ position: absolute; top: 10px; right: 10px; z-index: 2; }

/* 右下角：状态、名字、人设摘要 */
.messages-app .env-info{
    position: absolute; left: 36%; right: 8px; bottom: 12px; z-index: 2;
    display: flex; flex-direction: column; gap: 6px; color: #fff; min-width: 0;
}
.messages-app .cc-status{
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    height: 20px; padding: 0 7px; border-radius: 999px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.1px; color: #fff; white-space: nowrap; overflow: hidden;
}
.messages-app .cc-dot{ width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 6px rgba(46,204,113,0.7); }
.messages-app .cc-dot.offline{ background: #8E8E8E; box-shadow: none; }
.messages-app .cc-name{
    font-size: 17px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.messages-app .cc-preview{
    font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.72);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 添加联系人：一只空信封 */
.messages-app .add-contact-card{
    height: 96px; border-radius: 16px; border: none; background: #F3F3F3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: #8E8E8E; font-size: 12px; font-weight: 600; cursor: pointer;
}
.messages-app .add-contact-card:active{ background: #F0F0F0; border-color: #B0B0B0; }
.messages-app .add-contact-card svg{ width: 20px; height: 20px; stroke: #8E8E8E; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 朋友圈 ---------- */
.messages-app .post{ padding: 14px 16px 12px; border-bottom: 8px solid #F5F5F5; }
.messages-app .post .ph{ display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.messages-app .post .who{ font-size: 15px; font-weight: 600; }
.messages-app .post .when{ font-size: 12px; color: #8E8E8E; margin-top: 1px; }
.messages-app .post .txt{ font-size: 15px; line-height: 1.45; margin-left: 56px; }
.messages-app .post .pics{ margin: 10px 0 0 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 240px; }
.messages-app .post .pic{ aspect-ratio: 1; background: linear-gradient(135deg, #EDEDED, #CFCFCF); border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.messages-app .post .pic svg{ width: 22px; height: 22px; stroke: #8A8A8A; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .post .acts{ margin: 10px 0 0 56px; display: flex; gap: 18px; font-size: 12px; color: #8E8E8E; }
.messages-app .post .acts span{ display: flex; align-items: center; gap: 5px; cursor: pointer; }
.messages-app .post .acts svg{ width: 15px; height: 15px; stroke: #8E8E8E; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .post .acts span.on, .messages-app .post .acts span.on svg{ color: #000; stroke: #000; font-weight: 600; }

/* ---------- 应用 ---------- */
.messages-app .apps-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 10px; padding: 14px 16px; }
.messages-app .app{ display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; }
.messages-app .app:active .tile{ transform: scale(0.92); }
.messages-app .app .tile{ width: 58px; height: 58px; border-radius: 16px; background: #F2F2F2; display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease; }
.messages-app .app .tile svg{ width: 24px; height: 24px; stroke: #000; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .app .tile.dark{ background: #000; } .messages-app .app .tile.dark svg{ stroke: #fff; }
.messages-app .app span{ font-size: 11px; color: #3A3A3A; font-weight: 500; }

/* ---------- 底部：纯色胶囊 + 圆形按钮 ---------- */
.messages-app .tabbar{ position: absolute; left: 16px; right: 16px; bottom: 22px; display: flex; align-items: center; gap: 10px; z-index: 10; transition: opacity 0.3s ease, transform 0.3s ease; }
.messages-app .capsule{ flex: 1; height: 56px; border-radius: 999px; background: #111; display: flex; align-items: center; justify-content: space-around; padding: 0 8px; box-shadow: 0 12px 26px rgba(0,0,0,0.16); }
.messages-app .tab{ width: 46px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: background 0.2s ease, transform 0.15s ease; }
.messages-app .tab:active{ transform: scale(0.92); }
.messages-app .tab.on{ background: rgba(255,255,255,0.14); }
.messages-app .tab svg{ width: 19px; height: 19px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .tab .dot{ position: absolute; top: 9px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid #111; }
.messages-app .fab{ width: 56px; height: 56px; border-radius: 50%; border: none; background: #111; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 26px rgba(0,0,0,0.16); transition: transform 0.15s ease; }
.messages-app .fab:active{ transform: scale(0.9); }
.messages-app .fab svg{ width: 20px; height: 20px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.messages-app .tabbar.hide{ opacity: 0; pointer-events: none; transform: translateY(18px); }

/* ---------- 聊天页（从右滑入） ---------- */
.messages-app .chat{ position: absolute; inset: 0; background: #FFFFFF; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 20; }
.messages-app .chat.open{ opacity: 1; visibility: visible; }
.messages-app .chat-head{ padding: 54px 12px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 0.5px solid #E5E5E5; background: #FFFFFF; }
.messages-app .chat-head .who{ flex: 1; min-width: 0; }
.messages-app .chat-head .who b{ display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .chat-head .who small{ font-size: 11.5px; color: #8E8E8E; }
.messages-app .thread{ flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 3px; background-color: #FFFFFF; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'><g fill='none' stroke='%23000' stroke-opacity='0.06' stroke-width='1' stroke-linecap='round'><circle cx='26' cy='26' r='9'/><circle cx='26' cy='26' r='3.5'/><path d='M96 14l7 7M103 14l-7 7'/><path d='M14 96q6-9 12 0t12 0t12 0'/><rect x='82' y='84' width='11' height='11' rx='2' transform='rotate(18 87.5 89.5)'/><path d='M106 118a7 7 0 0 1 14 0'/><path d='M60 52l4-7 4 7z'/></g><circle cx='66' cy='112' r='1.8' fill='%23000' fill-opacity='0.08'/><circle cx='118' cy='58' r='1.3' fill='%23000' fill-opacity='0.08'/></svg>"); background-size: 132px 132px; scrollbar-width: none; }
.messages-app .thread::-webkit-scrollbar{ display: none; }
.messages-app .day{ align-self: center; font-size: 11px; color: #8E8E8E; margin: 6px 0 10px; }
.messages-app .mrow{ display: flex; align-items: flex-end; gap: 8px; animation: pop 0.25s ease; }
.messages-app .mrow.me{ flex-direction: row-reverse; }
.messages-app .mrow.gap{ margin-top: 10px; }
.messages-app .mrow .sp{ width: 32px; flex-shrink: 0; }
.messages-app .bubble{ max-width: 74%; padding: 9px 13px; font-size: 14.5px; line-height: 1.42; border-radius: 18px; background: #F0F0F0; color: #000; word-break: break-word; }
.messages-app .mrow.me .bubble{ background: #000; color: #fff; border-bottom-right-radius: 6px; }
.messages-app .mrow:not(.me) .bubble{ border-bottom-left-radius: 6px; }
.messages-app .mt{ font-size: 10.5px; color: #A3A3A3; white-space: nowrap; padding-bottom: 2px; }
.messages-app .typing .bubble{ padding: 11px 13px; }
.messages-app .dots{ display: inline-flex; gap: 4px; }
.messages-app .dots i{ width: 5px; height: 5px; border-radius: 50%; background: #9A9A9A; animation: blink 1.1s infinite ease-in-out; }
.messages-app .dots i:nth-child(2){ animation-delay: 0.15s; } .messages-app .dots i:nth-child(3){ animation-delay: 0.3s; }
@keyframes blink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.messages-app .composer{ position: relative; padding: 10px 36px 28px 18px; display: flex; align-items: flex-end; gap: 10px; border-top: none; background: #FFFFFF; }
.messages-app .field{ flex: 1; min-height: 40px; background: #F2F2F2; border: 1px solid #E3E3E3; border-radius: 20px; display: flex; align-items: center; padding: 0 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.messages-app .field textarea{ flex: 1; border: none; outline: none; resize: none; background: transparent; font: inherit; font-size: 14.5px; line-height: 1.35; padding: 8px 0; color: #000; max-height: 100px; }
.messages-app .field textarea::placeholder{ color: #8E8E8E; }
.messages-app .send{ width: 40px; height: 40px; border-radius: 50%; border: none; background: #000; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: 0.3; transition: opacity 0.2s ease, transform 0.15s ease; }
.messages-app .send.ready{ opacity: 1; }
.messages-app .send:active{ transform: scale(0.9); }
.messages-app .send svg{ width: 16px; height: 16px; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 输入框上滑菜单：从输入框下面顶起来 ---------- */
.messages-app .field-wrap{ position: relative; flex: 1; min-width: 0; }
.messages-app .toast{ position: absolute; left: 50%; bottom: 100px; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; background: #111; color: #fff; font-size: 12.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; transition: all 0.3s ease; z-index: 50; white-space: nowrap; }
.messages-app .toast.show{ opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 360px) { .messages-app .header{ padding-left: 18px; padding-right: 18px; } }

/* ---------- 设置页 ---------- */
.messages-app #v-settings .header{ padding: 54px 22px 8px; align-items: center; }
.messages-app #v-settings .header h1{ line-height: 0.95; letter-spacing: -1.8px; }
.messages-app #v-settings .header .sub{ margin-top: 6px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; }
.messages-app #v-settings .scroll{ padding-bottom: 170px; }
.messages-app .settings-profile{
    margin: 10px 18px 22px;
    padding: 24px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 26px;
    background: none;
    border: none;
    position: relative;
}
.messages-app .settings-profile .big-avatar{
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
    border: 4px solid rgba(255,255,255,.9);
}
.messages-app .settings-profile .big-avatar{ position: relative; flex-shrink: 0; }
.messages-app .settings-profile .big-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.messages-app .settings-profile .profile-name{
    margin-top: 13px;
    font-size: 22px;
    font-weight: 700;
}
.messages-app .settings-profile .profile-sub{
    margin-top: 4px;
    font-size: 12px;
    color: #8E8E8E;
}
.messages-app .settings-group{
    margin: 0 18px 16px;
    border-radius: 20px;
    overflow: hidden;
    background: #F5F5F5;
    border: none;
    box-shadow: 0 5px 16px rgba(0,0,0,.025);
}
.messages-app .settings-item{
    position: relative;
    min-height: 62px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
    border-bottom: none;
    cursor: pointer;
}
.messages-app .settings-item:last-child{ border-bottom: none; }
.messages-app .settings-item:active{ background: #E8E8E8; }
.messages-app .settings-item .si-icon{
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #111;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.messages-app .settings-item .si-icon svg{
    width: 16px;
    height: 16px;
    stroke: #fff;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.messages-app .settings-item .si-text{ min-width: 0; }
.messages-app .settings-item .si-title{ font-size: 14px; font-weight: 650; letter-spacing: -.1px; }
.messages-app .settings-item .si-sub{ margin-top: 3px; font-size: 11.5px; color: #8E8E8E; }
.messages-app .settings-item .chev{
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #A0A0A0;
    font-size: 20px; line-height: 1;
}

/* ---------- 身份液态玻璃胶囊 ---------- */
.messages-app .identity-pill{ position: absolute; right: 16px; bottom: 88px; height: 48px; min-width: 148px; padding: 5px 14px 5px 6px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; display: flex; align-items: center; gap: 9px; z-index: 12; cursor: pointer; color: #111; background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(235,235,235,.46)); box-shadow: 0 12px 30px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); transition: transform .18s ease, box-shadow .18s ease; }
.messages-app .identity-pill:active{ transform: scale(.96); }
.messages-app .identity-pill::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 4px; height: 12px; border-radius: 999px; background: rgba(255,255,255,.48); filter: blur(7px); pointer-events: none; }
.messages-app .identity-pill .pill-avatar{ width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; position: relative; }
.messages-app .identity-pill .pill-avatar img{ width: 100%; height: 100%; object-fit: cover;  }
.messages-app .identity-pill .pill-name{ font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .identity-pill .pill-chevron{ margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.messages-app .identity-pill .pill-chevron svg{ width: 18px; height: 18px; fill: none; stroke: #111; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- iOS 风格身份选择弹窗 ---------- */
.messages-app .identity-sheet-backdrop{ position: absolute; inset: 0; z-index: 60; background: rgba(0,0,0,.24); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.messages-app .identity-sheet-backdrop.show{ opacity: 1; pointer-events: auto; }
.messages-app .identity-sheet{ position: absolute; left: 14px; right: 14px; bottom: 14px; border-radius: 28px; padding: 10px; background: rgba(250,250,250,.94); box-shadow: 0 24px 70px rgba(0,0,0,.25); transform: translateY(30px) scale(.98); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.messages-app .identity-sheet-backdrop.show .identity-sheet{ transform: translateY(0) scale(1); }
.messages-app .identity-sheet .sheet-title{ padding: 12px 10px 10px; font-size: 13px; color: #8E8E8E; text-align: center; }
.messages-app .identity-option{ width: 100%; min-height: 62px; padding: 8px 12px; border: 0; border-radius: 18px; background: transparent; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; }
.messages-app .identity-option:active{ background: #EAEAEA; }
.messages-app .identity-option.active{ background: #E9E9E9; }
.messages-app .identity-option .io-avatar{ width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.messages-app .identity-option .io-avatar img{ width: 100%; height: 100%; object-fit: cover;  }
.messages-app .identity-option .io-info{ flex: 1; }
.messages-app .identity-option .io-name{ font-size: 15px; font-weight: 650; }
.messages-app .identity-option .io-sub{ font-size: 11px; color: #8E8E8E; margin-top: 2px; }
.messages-app .identity-option .check{ width: 24px; height: 24px; border-radius: 50%; background: #111; color: #fff; display: none; align-items: center; justify-content: center; font-size: 13px; }
.messages-app .identity-option.active .check{ display: flex; }
.messages-app .identity-cancel{ width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: 18px; background: #E8E8E8; font-size: 14px; font-weight: 650; cursor: pointer; }
.messages-app .identity-cancel:active{ background: #DCDCDC; }
@media (max-width: 360px) { .messages-app .identity-pill{ right: 12px; min-width: 136px; } }

/* ---------- 联系人编辑页 ---------- */
.messages-app .edit-view{
    position: absolute; inset: 0; background: #FFFFFF;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 25;
}
.messages-app .edit-view.open{ opacity: 1; visibility: visible; }
.messages-app .edit-header{
    padding: 54px 16px 10px; display: flex; align-items: center; justify-content: space-between;
    background: #FFFFFF; border-bottom: 0.5px solid #E5E5E5;
}
.messages-app .edit-header .title{ font-size: 15px; font-weight: 600; }
.messages-app .edit-header .action{ font-size: 14px; font-weight: 600; color: #000; background: none; border: none; cursor: pointer; padding: 4px 8px; }
.messages-app .edit-header .action:active{ opacity: 0.5; }

.messages-app .edit-cover{
    position: relative; z-index: 1; flex-shrink: 0;
    position: relative;
    height: 220px;
    background: #111;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.messages-app .edit-cover img{
    width: 100%; height: 100%; object-fit: cover; 
}
.messages-app .edit-cover .placeholder{
    color: rgba(255,255,255,0.6); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.messages-app .edit-cover .placeholder svg{ width: 28px; height: 28px; stroke: rgba(255,255,255,0.6); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .edit-cover .edit-hint{
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 11px; padding: 5px 10px; border-radius: 999px;
    backdrop-filter: blur(10px); display: flex; align-items: center; gap: 5px;
}
.messages-app .edit-cover .edit-hint svg{ width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.messages-app .edit-body{ position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 30px; }

.messages-app .edit-avatar-wrap{
    z-index: 3; flex-shrink: 0;
    position: relative; width: 80px; margin: -40px auto 24px;
}
.messages-app .edit-avatar-wrap .av{
    width: 80px; height: 80px; border-radius: 50%; border: 4px solid #FFFFFF;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); cursor: pointer; font-size: 24px;
}
.messages-app .edit-avatar-wrap .av img{  }
.messages-app .edit-avatar-wrap .edit-pen{
    position: absolute; right: calc(50% - 44px); bottom: 0;
    width: 26px; height: 26px; border-radius: 50%; background: #111; color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #FFFFFF; box-shadow: 0 4px 10px rgba(0,0,0,0.2); cursor: pointer;
}
.messages-app .edit-avatar-wrap .edit-pen svg{ width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.messages-app .edit-field-group{
    background: #F3F3F3; border-radius: 16px; margin-bottom: 24px; overflow: hidden;
}
.messages-app .edit-field-row{
    display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #E2E2E2;
}
.messages-app .edit-field-row:last-child{ border-bottom: none; }
.messages-app .edit-field-row .label{ font-size: 14px; font-weight: 600; color: #000; width: 70px; flex-shrink: 0; }
.messages-app .edit-field-row input{
    flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: #000;
}
.messages-app .edit-field-row .chev{ color: #A0A0A0; font-size: 18px; }

.messages-app .delete-btn{
    width: 100%; height: 50px; border: none; border-radius: 16px;
    background: #F3F3F3; color: #E5342B; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s;
}
.messages-app .delete-btn:active{ background: #E8E8E8; }

/* ---------- 人设与信息编辑页 ---------- */
.messages-app .edit-body.persona-body{ padding-top: 18px; }
.messages-app .persona-hero{ display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }
.messages-app .persona-hero .av{ width: 72px; height: 72px; font-size: 24px; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.messages-app .persona-hero .av img{  }
.messages-app .persona-hero-name{ font-size: 16px; font-weight: 700; margin-top: 6px; }
.messages-app .persona-hero-sub{ font-size: 12px; color: #8E8E8E; }
.messages-app .persona-section-label{ font-size: 12px; font-weight: 600; color: #8E8E8E; padding: 0 4px 8px; letter-spacing: 0.3px; }
.messages-app .edit-field-row.persona-row{ flex-direction: column; align-items: stretch; gap: 8px; }
.messages-app .edit-field-row.persona-row .label{ width: auto; }
.messages-app .persona-body .edit-field-row:not(.persona-row) .label{ width: 84px; }
.messages-app .edit-field-row.persona-row textarea{
    width: 100%; border: none; outline: none; resize: none; background: transparent;
    font-family: inherit; font-size: 14px; line-height: 1.6; color: #000;
}
.messages-app .edit-field-row.persona-row textarea::placeholder{ color: #B0B0B0; }


/* ---------- 右侧剪头按钮 ---------- */
.messages-app .arrow-btn{
    width: 46px; height: 34px; border: none; border-radius: 999px; cursor: pointer; flex-shrink: 0;
    background: linear-gradient(135deg, #111 0%, #3d3d3d 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.messages-app .arrow-btn:active{ transform: scale(.92); }
.messages-app .arrow-btn svg{ width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 侧边栏：界面向右让出细条，内容重新排版，不会被推出屏幕 ---------- */
.messages-app .app-shell{
    position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; background: #FFFFFF; overflow: hidden; overflow: clip;
    transition: left .42s cubic-bezier(.22,1,.36,1);
}
.messages-app .app-shell.pushed{ left: 58px; border-radius: 28px 0 0 28px; box-shadow: none; }
.messages-app .app-shell.pushed .header{ padding-left: 16px; padding-right: 14px; }
.messages-app .app-shell.pushed .header h1{ font-size: 52px; }
.messages-app .app-shell.pushed .header-actions{ gap: 6px; }

.messages-app .side-strip{
    position: absolute; left: 0; top: 0; bottom: 0; width: 58px; z-index: 1; background: #FFFFFF; overflow: hidden;
}

.messages-app .strip-arrow{
    flex-shrink: 0; width: 40px; height: 32px; border: none; border-radius: 999px;
    cursor: pointer; background: linear-gradient(135deg, #111 0%, #3d3d3d 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.messages-app .strip-arrow:active{ transform: scale(.92); }
.messages-app .strip-arrow svg{ width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .strip-accounts{
    position: absolute; left: 0; right: 0; bottom: 28px; max-height: calc(100% - 96px); display: flex; flex-direction: column; align-items: center; gap: 14px;
    overflow-y: auto; scrollbar-width: none;
}
.messages-app .strip-accounts::-webkit-scrollbar{ display: none; }
.messages-app .strip-list{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
.messages-app .strip-acc{
    position: relative; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border: none; background: none; cursor: pointer;
    transition: transform .2s ease;
}
.messages-app .strip-acc .av{ width: 36px; height: 36px; font-size: 12px; transition: box-shadow .2s ease; }
.messages-app .strip-acc .av img{  }
.messages-app .strip-acc:active{ transform: scale(.92); }
.messages-app .strip-acc.sel .av{ box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #000; }
.messages-app .strip-acc.live::after{
    content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
    background: #000; box-shadow: 0 0 0 2.5px #FFFFFF;
}

/* 联系人标题放大（按钮不变）：2倍会被屏幕宽度截断，这里取一行能放下的最大值 */
.messages-app #v-contacts .header h1{ white-space: nowrap; }
.messages-app #v-contacts .header .sub{ font-size: 13px; line-height: 1.2; margin-top: 4px; }

/* 聊天标题区：标题放大两倍，“3 unread”与按钮在下一行（按钮和搜索尺寸不变） */
.messages-app #v-chats .header{ flex-direction: column; align-items: stretch; padding-top: 58px; }
.messages-app #v-chats .header-foot{ display: flex; align-items: flex-start; justify-content: space-between; margin-top: 4px; }
.messages-app #v-chats .header .sub{ font-size: 13px; line-height: 1.2; margin-top: 0; }

/* 聊天列表：搜索栏下面留出间距 */
.messages-app #chatList{ padding-top: 16px; }

/* 右上角：两个按钮 + 已登录胶囊 */
.messages-app .top-tools{ position: absolute; top: 12px; right: 14px; z-index: 70; display: flex; align-items: center; gap: 8px; }
.messages-app .tool-btns{ display: none; gap: 8px; }
.messages-app .top-tools.logged .tool-btns{ display: flex; }
.messages-app .tool-btn{
    width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 16px rgba(0,0,0,.10), inset 0 1px 0 #fff;
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.messages-app .tool-btn:active{ transform: scale(.9); }
.messages-app .tool-btn svg{ width: 17px; height: 17px; stroke: #111; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .account-capsule{
    display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; color: #111; cursor: pointer; max-width: 240px;
    background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.75);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.messages-app .account-capsule.show{ display: flex; }
.messages-app .account-capsule .cap-dot{ width: 7px; height: 7px; border-radius: 50%; background: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.08); flex-shrink: 0; }
.messages-app .account-capsule b{
    font-weight: 800; color: #fff; background: #000; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}

/* 磨砂遮罩 + 浮空的登录内容 */
.messages-app .login-mask{
    position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    background: rgba(246,246,246,.46);
    backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.messages-app .login-mask.show{ opacity: 1; pointer-events: auto; }
.messages-app .mask-hint{
    font-size: 14px; font-weight: 600; color: #111; padding: 12px 20px; border-radius: 999px;
    background: rgba(255,255,255,.8); box-shadow: 0 10px 30px rgba(0,0,0,.08), inset 0 1px 0 #fff;
}
.messages-app .login-mask.picked .mask-hint{ display: none; }
.messages-app .lp{ display: none; flex-direction: column; align-items: center; }
.messages-app .login-mask.picked .lp{ display: flex; animation: lpIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes lpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.messages-app .lp-avatar{ animation: floaty 3.2s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.messages-app .lp-avatar .av{ width: 92px; height: 92px; font-size: 30px; border: 4px solid #fff; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.messages-app .lp-avatar .av img{  }
.messages-app .lp-name{ margin-top: 18px; font-size: 18px; font-weight: 700; text-align: center; }
.messages-app .lp-id{ margin-top: 4px; font-size: 11px; color: #8E8E8E; letter-spacing: .6px; font-family: "SF Mono", Menlo, monospace; }
.messages-app .lp-field{
    margin-top: 26px; width: 210px; height: 46px; border-radius: 999px; padding: 0 20px;
    background: rgba(255,255,255,.92); box-shadow: 0 12px 28px rgba(0,0,0,.10), inset 0 1px 0 #fff;
    display: flex; align-items: center;
}
.messages-app .lp-field input{ flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 14px; color: #000; text-align: center; }
.messages-app .lp-field.shake{ animation: lpshake .4s ease; }
@keyframes lpshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.messages-app .login-btn{
    margin-top: 18px; height: 48px; min-width: 170px; padding: 0 28px; border-radius: 999px; border: none;
    background: #000; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .3px; cursor: pointer;
    box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .15s ease;
}
.messages-app .login-btn:active{ transform: scale(.95); }
.messages-app .acct-body{ padding-top: 6px; }
.messages-app .contact-sig{ display: none; margin: 0 18px 16px; padding: 18px 20px; border-radius: 20px; background: #F3F3F3; }
.messages-app #v-settings.as-contact .contact-sig{ display: block; }
.messages-app #v-settings.as-contact .section-label, .messages-app #v-settings.as-contact .settings-group{ display: none; }
.messages-app .sig-label{ font-size: 12px; font-weight: 600; color: #8E8E8E; letter-spacing: .3px; }
.messages-app .sig-text{ margin-top: 8px; font-size: 15px; line-height: 1.5; color: #000; }
.messages-app .acct-row{ display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 20px; background: #F3F3F3; cursor: pointer; transition: background .15s ease; }
.messages-app .acct-row:active{ background: #E8E8E8; }
.messages-app .acct-row .av{ width: 46px; height: 46px; font-size: 15px; }
.messages-app .acct-info{ flex: 1; min-width: 0; }
.messages-app .acct-name{ font-size: 15px; font-weight: 700; }
.messages-app .acct-id{ margin-top: 2px; font-size: 11px; color: #8E8E8E; font-family: "SF Mono", Menlo, monospace; }
.messages-app .acct-persona{ margin-top: 6px; font-size: 12px; line-height: 1.4; color: #555; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.messages-app .acct-persona.is-none{ color: #B0B0B0; }
.messages-app .acct-chev{ color: #A0A0A0; font-size: 20px; }
.messages-app .direct-link{ margin-top: 12px; padding: 4px 10px; background: none; border: none; color: #8E8E8E; font-size: 12px; letter-spacing: .4px; cursor: pointer; }
.messages-app .direct-link:active{ color: #000; }

/* ---------- 设置头像区：大星星垫底 + 撒星 ---------- */
.messages-app .profile-deco{ position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.messages-app .profile-bigstar{ position: absolute; width: 170px; height: 170px; left: 50%; top: -10px; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0,0,0,.06)); }
.messages-app .pd-star{ position: absolute; display: block; }
.messages-app .settings-profile > .big-avatar, .messages-app .settings-profile > .profile-name, .messages-app .settings-profile > .profile-sub{ position: relative; z-index: 1; }

/* ---------- 输入框：无边框；发送胶囊卡在输入框右边缘，左半在框内 ---------- */
.messages-app .field{ border: none; box-shadow: none; padding: 0 44px 0 14px; }
.messages-app .field-wrap{ position: relative; flex: 1; min-width: 0; }
.messages-app .send-capsule{
    position: absolute; right: -30px; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 60px; height: 34px; border-radius: 999px; background: #000; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
.messages-app .send, .messages-app .pull{ width: 29px; height: 34px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .15s ease, opacity .2s ease; }
.messages-app .send{ opacity: .35; }
.messages-app .send.ready{ opacity: 1; }
.messages-app .send:active, .messages-app .pull:active{ transform: scale(.88); }
.messages-app .send svg, .messages-app .pull svg{ width: 14px; height: 14px; stroke: #fff; stroke-width: 2.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .cap-split{ width: 1px; height: 14px; background: rgba(255,255,255,.35); }

/* ---------- 气泡尾巴：第一条向下、中间竖排、最后一条向上 ---------- */
.messages-app .bubble{ position: relative; }
/* 单条：整个气泡全圆 */
.messages-app .mrow .bubble.g-single{ border-radius: 18px; }
/* 第一条：靠自己一侧的下角是角（朝下） */
.messages-app .mrow.me .bubble.g-head{ border-bottom-right-radius: 3px; }
.messages-app .mrow:not(.me) .bubble.g-head{ border-bottom-left-radius: 3px; }
/* 中间：靠自己一侧竖直平齐 */
.messages-app .mrow.me .bubble.g-mid{ border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.messages-app .mrow:not(.me) .bubble.g-mid{ border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
/* 最后一条：靠自己一侧的上角是角（朝上） */
.messages-app .mrow.me .bubble.g-tail{ border-top-right-radius: 3px; border-bottom-right-radius: 18px; }
.messages-app .mrow:not(.me) .bubble.g-tail{ border-top-left-radius: 3px; border-bottom-left-radius: 18px; }

/* ---------- 聊天室头像：稍微方一点 ---------- */
.messages-app #chatView .av{ border-radius: 50%; }
/* 头像框：黑灰渐变细环 */
.messages-app .avf{
    display: inline-flex; flex-shrink: 0; padding: 2px; border-radius: 50%;
    background: conic-gradient(from 210deg, #000 0deg, #8c8c8c 80deg, #fff 150deg, #000 220deg, #6e6e6e 300deg, #000 360deg);
    box-shadow: 0 3px 10px rgba(0,0,0,.14);
}
.messages-app .avf .av{ box-shadow: 0 0 0 1.5px #fff; }

/* ---------- 液态玻璃按键 ---------- */
.messages-app .glass-btn{
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.7);
    background: linear-gradient(135deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,.55) 100%);
    backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 8px 22px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.95), inset 0 -2px 6px rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.messages-app .glass-btn:active{ transform: scale(.9); }
.messages-app .glass-btn svg{ width: 17px; height: 17px; stroke: #111; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 聊天室顶栏：浅黑色玻璃 */
.messages-app #chatView .glass-btn{
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(135deg, rgba(64,64,68,.82) 0%, rgba(28,28,30,.74) 100%);
    box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.25);
}
.messages-app #chatView .glass-btn svg{ stroke: #fff; }

/* ---------- 切换身份弹窗：半透明黑色（仿 iOS） ---------- */
.messages-app .identity-sheet-backdrop{ background: rgba(0,0,0,.32); }
.messages-app .identity-sheet{
    background: rgba(28,28,30,.74); color: #fff;
    backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 0.5px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.messages-app .identity-sheet .sheet-title{ color: rgba(235,235,245,.6); font-size: 13px; font-weight: 500; }
.messages-app .identity-option{ background: rgba(255,255,255,.07); margin-bottom: 8px; }
.messages-app .identity-option:active{ background: rgba(255,255,255,.14); }
.messages-app .identity-option.active{ background: rgba(255,255,255,.14); }
.messages-app .identity-option .io-avatar{ background: #3a3a3c; }
.messages-app .identity-option .io-name{ color: #fff; }
.messages-app .identity-option .io-sub{ color: rgba(235,235,245,.55); }
.messages-app .identity-option .check{ background: #fff; color: #000; }
.messages-app .identity-cancel{ background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.messages-app .identity-cancel:active{ background: rgba(255,255,255,.22); }

/* 聊天室顶栏按钮：黑色玻璃胶囊（和右上角剪头同一套语言） */
.messages-app #chatView .glass-btn{
    width: 48px; height: 34px; border-radius: 999px; border: none;
    background: linear-gradient(135deg, #2c2c2f 0%, #4b4b4f 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.messages-app #chatView .glass-btn:active{ transform: scale(.92); }
.messages-app #chatView .glass-btn svg{ width: 18px; height: 18px; stroke: #fff; stroke-width: 2; }

/* 聊天室右上角：只留图标 */
.messages-app .gear-btn{ width: 40px; height: 40px; border: none; background: none; box-shadow: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform .15s ease; }
.messages-app .gear-btn:active{ transform: scale(.88); }
.messages-app .gear-btn svg{ width: 24px; height: 24px; stroke: #000; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* 两条消息：角是真正的直角，两个角之间留出间距 */
.messages-app .mrow.grp-head{ margin-bottom: 6px; }

/* 调取键：点击后胶囊变形，图标转成加载状态 */
.messages-app .send-capsule{ transition: width .4s cubic-bezier(.22,1,.36,1); }
.messages-app .send, .messages-app .pull, .messages-app .cap-split{ transition: width .35s cubic-bezier(.22,1,.36,1), opacity .25s ease, transform .15s ease; }
.messages-app .send{ overflow: hidden; }
.messages-app .send-capsule.pulling{ width: 96px; justify-content: center; }
.messages-app .send-capsule.pulling .send{ width: 0; opacity: 0; }
.messages-app .send-capsule.pulling .cap-split{ width: 0; opacity: 0; }
.messages-app .send-capsule.pulling .pull{ width: 64px; }
.messages-app .send-capsule.pulling .pull svg{ animation: pullSpin .9s linear infinite; }
@keyframes pullSpin { to { transform: rotate(360deg); } }

.messages-app .composer{ flex-direction: column; align-items: stretch; }
.messages-app .field-wrap{ flex: none; }
.messages-app .quick-menu{
    display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; gap: 6px;
    height: 0; margin-top: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: height .36s cubic-bezier(.22,1,.36,1), margin-top .36s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.messages-app .quick-menu.show{ height: 98px; margin-top: 14px; opacity: 1; pointer-events: auto; }
.messages-app .quick-item{ border: 0; background: none; color: #111; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; padding: 0; }
.messages-app .quick-item svg{
    width: 54px; height: 54px; padding: 16px; box-sizing: border-box; border-radius: 50%;
    background: #F2F2F2; stroke: #111; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s ease;
}
.messages-app .quick-item:active svg{ transform: scale(.92); }

/* ---------- 聊天列表：每行一个超浅灰底 ---------- */
.messages-app .row{ margin: 0 16px 8px; padding: 9px 12px; background: #F7F7F7; border-radius: 18px; }
.messages-app .row:active{ background: #EFEFEF; }

/* ---------- 搜索栏上方：一横排联系人头像 ---------- */
.messages-app .story-row{ display: flex; gap: 14px; overflow-x: auto; padding: 4px 28px 14px; scrollbar-width: none; }
.messages-app .story-row::-webkit-scrollbar{ display: none; }
.messages-app .story{ flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.messages-app .story .av{ width: 48px; height: 48px; font-size: 15px; }
.messages-app .story .av img{  }
.messages-app .story:active{ transform: scale(.92); }
.messages-app .story.unread .av{ box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #000; }

/* ---------- 参考按钮：玻璃胶囊（聊天室顶栏 + 唤起侧边栏） ---------- */
.messages-app #chatView .glass-btn, .messages-app #chatView .gear-btn, .messages-app .arrow-btn{
    height: 36px; min-width: 44px; width: auto; padding: 0 13px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(0,0,0,0.04);
    backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: all 0.3s ease;
}
.messages-app #chatView .glass-btn svg, .messages-app #chatView .gear-btn svg, .messages-app .arrow-btn svg{
    width: 15px; height: 15px; stroke: #000; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.messages-app #chatView .gear-btn svg{ width: 16px; height: 16px; }
.messages-app #chatView .glass-btn:active, .messages-app #chatView .gear-btn:active, .messages-app .arrow-btn:active{ transform: scale(0.92); background: rgba(0,0,0,0.08); }

/* ---------- 底栏：默认参考材质（深色胶囊 + 透明圆按钮 + 深色圆加号） ---------- */
.messages-app .tab, .messages-app .fab{ -webkit-touch-callout: none; }

/* ================= 外观 2：标签页（无边框）================= */
.messages-app .tab-bar, .messages-app .panel-head{ display: none; }
.messages-app .tab-panel{ display: contents; }

.messages-app .polaroid{
    width: 78px; flex-shrink: 0; padding: 6px 6px 18px; background: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); transform: rotate(-3deg);
}
.messages-app .polaroid .sq{ width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; }
.messages-app .polaroid .sq img{ width: 100%; height: 100%; object-fit: cover;  }
.messages-app .polaroid .cap{ margin-top: 6px; font-size: 8px; letter-spacing: 1px; color: #555; text-align: center; font-family: "SF Mono", Menlo, monospace; }
.messages-app .story-card{
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px;
    background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 16px; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.messages-app .story-card:active{ transform: scale(0.97); background: #FAFAFA; }
.messages-app .profile-card{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.messages-app .pc-label{ font-size: 8px; letter-spacing: 1.5px; color: #A3A3A3; }
.messages-app .pc-name{ font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .pc-id{ font-size: 10px; color: #8E8E8E; font-family: "SF Mono", Menlo, monospace; }
.messages-app .pc-status{ font-size: 10.5px; color: #000; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.messages-app .pc-status i{ width: 6px; height: 6px; border-radius: 50%; background: #000; flex-shrink: 0; }
.messages-app .pc-sig{ font-size: 10px; line-height: 1.35; color: #8E8E8E; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.messages-app .kr-head{ padding: 2px 6px 0; }
.messages-app .kr-title{ font-size: 15px; font-weight: 700; letter-spacing: -0.3px; color: #000; }
.messages-app .kr-sub{ margin-top: 3px; font-size: 11.5px; color: #8E8E8E; }

.messages-app body.theme-tabs #v-chats{ background: #E7E7EA; }
.messages-app body.theme-tabs #v-chats > .header{ display: none; }
.messages-app body.theme-tabs #v-chats .tab-bar{ display: flex; align-items: flex-end; padding: 58px 10px 0 10px; }
.messages-app body.theme-tabs #v-chats .tab-chip{
    display: flex; align-items: center; gap: 8px; padding: 12px 18px 10px 14px;
    background: #FFFFFF; border: none; border-radius: 14px 14px 0 0;
    position: relative; z-index: 1; margin-bottom: -1px;
}
.messages-app body.theme-tabs #v-chats .tab-chip svg{ width: 24px; height: 24px; stroke: #000; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app body.theme-tabs #v-chats .tab-chip h1{ font-size: 52px; line-height: 0.95; font-weight: 800; letter-spacing: -1.8px; }
.messages-app body.theme-tabs #v-chats .tab-panel{
    display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden;
    background: #FFFFFF; border: none; border-radius: 0 16px 0 0; margin: 0 10px;
}
.messages-app body.theme-tabs #v-chats .panel-head{ display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 16px; }
.messages-app body.theme-tabs #v-chats .panel-head .sub{ font-size: 12px; color: #8E8E8E; }
.messages-app body.theme-tabs #v-chats .header-actions{ gap: 6px; }
.messages-app body.theme-tabs #v-chats .story-row{ flex-direction: column; gap: 10px; padding: 10px 16px 12px; overflow: hidden; }
.messages-app body.theme-tabs #v-chats .story-card{ width: 100%; }
.messages-app body.theme-tabs #v-chats .search{ margin: 4px 16px 10px; height: 36px; background: #FFFFFF; border: 1px solid #E2E2E2; }
.messages-app body.theme-tabs #v-chats .scroll{ padding-top: 4px; }
/* 列表头像对齐到资料卡里的头像（10 + 16 + 11 + 6 = 43px） */
.messages-app body.theme-tabs #v-chats .row{ margin: 0 23px 8px; padding: 9px 10px; border-radius: 18px; }

/* ---------- 外观设置页 ---------- */
.messages-app .theme-opt{
    display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 10px;
    border-radius: 20px; background: #F3F3F3; cursor: pointer; transition: background .15s ease;
}
.messages-app .theme-opt:active{ background: #E8E8E8; }
.messages-app .theme-opt.on{ background: #000; color: #fff; }
.messages-app .theme-opt .t-main{ flex: 1; min-width: 0; }
.messages-app .theme-opt .t-name{ font-size: 15px; font-weight: 700; }
.messages-app .theme-opt .t-sub{ margin-top: 3px; font-size: 11.5px; color: #8E8E8E; }
.messages-app .theme-opt.on .t-sub{ color: #BDBDBD; }
.messages-app .theme-opt .t-check{ width: 18px; text-align: center; font-size: 16px; font-weight: 700; }

/* ================= 底栏 · 第 2 种：玻璃胶囊（同侧边栏玻璃按钮）================= */
.messages-app .tabbar.glass .capsule{
    height: 56px; padding: 0 10px; border-radius: 999px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.9);
}
.messages-app .tabbar.glass .tab{ width: 42px; height: 42px; border-radius: 50%; background: transparent; }
.messages-app .tabbar.glass .tab.on{ background: rgba(0,0,0,0.06); }
.messages-app .tabbar.glass .tab:active{ transform: scale(0.9); background: rgba(0,0,0,0.06); }
.messages-app .tabbar.glass .tab svg{ width: 18px; height: 18px; stroke: #111; stroke-width: 2; }
.messages-app .tabbar.glass .fab{
    width: 56px; height: 56px; background: rgba(255,255,255,0.72);
    backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.9);
}
.messages-app .tabbar.glass .fab:active{ background: rgba(0,0,0,0.12); }
.messages-app .tabbar.glass .fab svg{ stroke: #111; }

/* ================= Contacts：文件夹页（黑色）================= */
.messages-app #v-contacts{ background: #000; }
.messages-app #v-contacts .header{
    position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 6;
    width: max-content; padding: 5px 5px 5px 20px; gap: 12px; align-items: center;
    border-radius: 999px; background: rgba(255,255,255,0.14); border: 0.5px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.messages-app #v-contacts .header h1{ font-size: 17px; line-height: 1; font-weight: 700; letter-spacing: -0.2px; color: #FFFFFF; }
.messages-app #v-contacts .header .sub{ margin-top: 2px; font-size: 9px; color: rgba(255,255,255,0.55); letter-spacing: 1px; text-transform: uppercase; }
.messages-app #v-contacts .header-actions{ gap: 6px; }
.messages-app #v-contacts .ibtn{ width: 32px; height: 32px; background: rgba(255,255,255,0.16); }
.messages-app #v-contacts .ibtn:active{ background: rgba(255,255,255,0.28); }
.messages-app #v-contacts .ibtn svg{ stroke: #FFFFFF; }

.messages-app #v-contacts .contact-top{ position: absolute; top: 110px; left: 16px; right: 16px; z-index: 6; display: flex; gap: 8px; padding: 0; }
.messages-app #v-contacts .quick{
    height: 36px; flex-direction: row; gap: 6px; font-size: 12px; color: #FFFFFF;
    border-radius: 999px; background: rgba(255,255,255,0.12); border: 0.5px solid rgba(255,255,255,0.2);
}
.messages-app #v-contacts .quick:active{ background: rgba(255,255,255,0.24); }
.messages-app #v-contacts .quick svg{ stroke: #FFFFFF; width: 14px; height: 14px; }

.messages-app #contactScroll{
    position: absolute; top: 160px; left: 0; right: 0; bottom: 0; padding: 4px 16px 110px;
    overflow-y: auto; scrollbar-width: none;
}
.messages-app #contactScroll::-webkit-scrollbar{ display: none; }
.messages-app #contactGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; }
.messages-app .folder-tile{
    height: 150px; border-radius: 24px; background: #141414; border: 1px solid #242424;
    padding: 16px; display: flex; flex-direction: column; justify-content: space-between;
    color: #FFFFFF; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.messages-app .folder-tile:active{ transform: scale(0.97); background: #1C1C1C; }
.messages-app .folder-tile svg{ width: 26px; height: 26px; stroke: #FFFFFF; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .folder-tile .ft-name{ font-size: 15px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .folder-tile .ft-count{ margin-top: 3px; font-size: 11px; color: #8E8E8E; }
.messages-app .folder-tile.add{ border: 1px dashed #333; background: transparent; align-items: center; justify-content: center; text-align: center; }
.messages-app .folder-tile.add span{ font-size: 30px; line-height: 1; color: #8E8E8E; font-weight: 300; }

/* ================= 卡片：缩短 · 蝴蝶结 · 中缝左移 ================= */
.messages-app .env-deco{
    position: absolute; left: 16px; top: 14px; z-index: 3; pointer-events: none;
    font-size: 12px; letter-spacing: 1px; color: #111; white-space: nowrap;
}

/* ================= 文件夹详情（黑色，卡片逐张切换）================= */
.messages-app #folderDetail, .messages-app #folderPicker, .messages-app #folderNew{ background: #000; color: #FFFFFF; }
.messages-app #folderDetail{ z-index: 22; }
.messages-app #folderPicker, .messages-app #folderNew{ z-index: 23; display: flex; flex-direction: column; }
.messages-app #folderDetail .fd-head{
    position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 6;
    width: max-content; display: flex; align-items: center; gap: 10px; padding: 5px;
    border-radius: 999px; background: rgba(18,18,18,0.82); border: 0.5px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.messages-app .fd-title{ display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 0 6px; }
.messages-app .fd-title b{ font-size: 15px; font-weight: 700; white-space: nowrap; }
.messages-app .fd-title span{ margin-top: 2px; font-size: 9px; color: rgba(255,255,255,0.55); letter-spacing: 1px; text-transform: uppercase; }
.messages-app .fd-btn{
    width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,0.16);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.messages-app .fd-btn:active{ background: rgba(255,255,255,0.28); }
.messages-app .fd-btn svg{ width: 16px; height: 16px; stroke: #FFFFFF; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .fd-text{ border: none; background: none; color: #FFFFFF; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 8px; }
.messages-app .fd-text:active{ opacity: 0.5; }

.messages-app #folderDetail .fd-scroll{ position: absolute; inset: 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.messages-app #folderDetail .fd-scroll::-webkit-scrollbar{ display: none; }
.messages-app #fdCards .env-wrap{
    height: 100vh; height: 100dvh; box-sizing: border-box; padding: 0 14px;
    display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center; scroll-snap-stop: always; transform: none;
}
.messages-app #fdCards .env{ width: 100%; height: 250px; border-radius: 28px; box-shadow: none; }
.messages-app #fdCards .env:active{ box-shadow: none; }
.messages-app #fdCards .fd-empty{
    width: 100%; height: 250px; border-radius: 28px; border: 1px dashed #333; color: #8E8E8E;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 13px;
}
.messages-app #fdCards .fd-empty button{
    height: 36px; padding: 0 16px; border: none; border-radius: 999px; background: #FFFFFF; color: #000;
    font-size: 12px; font-weight: 600; cursor: pointer;
}

/* 成员选择 */
.messages-app .fp-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 54px 18px 12px; border-bottom: 0.5px solid rgba(255,255,255,0.12); }
.messages-app .fp-title{ font-size: 15px; font-weight: 700; }
.messages-app .fp-folder{ flex: 1; font-size: 12px; color: #8E8E8E; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .fp-list{ flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 40px; scrollbar-width: none; }
.messages-app .fp-row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 20px; background: #141414; cursor: pointer; }
.messages-app .fp-row:active{ background: #1C1C1C; }
.messages-app .fp-row.on{ background: #262626; }
.messages-app .fp-info{ flex: 1; min-width: 0; }
.messages-app .fp-name{ font-size: 14px; font-weight: 600; }
.messages-app .fp-sub{ margin-top: 2px; font-size: 11px; color: #8E8E8E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app .fp-check{
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid #444;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.messages-app .fp-row.on .fp-check{ background: #FFFFFF; color: #000; border-color: #FFFFFF; }
.messages-app .fp-empty{ padding: 40px 0; text-align: center; color: #8E8E8E; font-size: 13px; }

/* 新建文件夹 */
.messages-app .fn-body{ padding: 28px 18px; }
.messages-app .fn-input{
    width: 100%; height: 52px; border: none; border-radius: 18px; background: #141414; color: #FFFFFF;
    font-size: 16px; padding: 0 18px; outline: none;
}
.messages-app .fn-input::placeholder{ color: #555; }

/* ================= 半圆轮盘（通讯录底部）================= */
.messages-app .wheel-disk{
    position: absolute; left: 50%; bottom: -410px; width: 560px; height: 560px; transform: translateX(-50%);
    border-radius: 50%; background: #0E0E0E; border-top: 1px solid #262626;
    touch-action: none; user-select: none; -webkit-user-select: none; z-index: 5;
}
.messages-app .wheel-disk::before{
    content: ""; position: absolute; inset: 40px; border-radius: 50%; border: 1px solid #1A1A1A; pointer-events: none;
}
.messages-app .wheel-ring{ position: absolute; inset: 0; }
.messages-app .wheel-item{
    position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    padding: 0; border: none; background: none; border-radius: 50%; cursor: pointer;
}
.messages-app .wheel-item .av{ width: 40px; height: 40px; font-size: 12px; }
.messages-app .wheel-item .av img{  }
.messages-app .wheel-item.sel .av{ box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #FFFFFF; }
.messages-app .wheel-label{
    position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); z-index: 6;
    max-width: 70%; color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.messages-app .fd-arrow{
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 6;
    width: 44px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: rgba(18,18,18,0.82); border: 0.5px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: opacity .25s ease;
}
.messages-app .fd-arrow svg{ width: 16px; height: 16px; stroke: #FFFFFF; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .fd-arrow.up{ top: calc(50% - 168px); }
.messages-app .fd-arrow.down{ top: calc(50% + 140px); }
.messages-app .fd-arrow.up svg{ animation: nudgeUp 1.4s ease-in-out infinite; }
.messages-app .fd-arrow.down svg{ animation: nudgeDown 1.4s ease-in-out infinite; }
.messages-app .fd-arrow.off{ opacity: 0.2; pointer-events: none; }
@keyframes nudgeUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nudgeDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ================= 分步调取页 ================= */
.messages-app #syncPage{ background: #000; color: #FFFFFF; z-index: 80; display: flex; flex-direction: column; }
.messages-app .sync-head{ padding: 58px 22px 14px; display: flex; align-items: flex-end; justify-content: space-between; }
.messages-app .sync-title{ font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -1.2px; }
.messages-app .sync-count{ font-size: 12px; color: #8E8E8E; font-family: "SF Mono", Menlo, monospace; }
.messages-app .sync-list{ flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 24px; scrollbar-width: none; }
.messages-app .sync-list::-webkit-scrollbar{ display: none; }
.messages-app .sync-row{
    display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 8px;
    border-radius: 18px; background: #121212; transition: background .3s ease;
}
.messages-app .sync-row.done{ background: #1C1C1C; }
.messages-app .sr-text{ flex: 1; min-width: 0; }
.messages-app .sr-name{ font-size: 15px; font-weight: 600; color: #6A6A6A; transition: color .3s ease; }
.messages-app .sync-row.loading .sr-name, .messages-app .sync-row.done .sr-name{ color: #FFFFFF; }
.messages-app .sr-en{ margin-top: 2px; font-size: 10px; color: #6A6A6A; letter-spacing: 1px; text-transform: uppercase; font-family: "SF Mono", Menlo, monospace; }
.messages-app .sr-mark{
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid #333;
    display: flex; align-items: center; justify-content: center;
}
.messages-app .sync-row.loading .sr-mark{ border-color: #333; border-top-color: #FFFFFF; animation: syncSpin .8s linear infinite; }
.messages-app .sync-row.done .sr-mark{ background: #FFFFFF; border-color: #FFFFFF; animation: syncPop .32s ease; }
.messages-app .sr-mark svg{ width: 13px; height: 13px; stroke: #000; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes syncSpin { to { transform: rotate(360deg); } }
@keyframes syncPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.messages-app .sync-foot{ padding: 12px 22px 36px; }
.messages-app .sync-done{
    width: 100%; height: 50px; border: none; border-radius: 999px; background: #FFFFFF; color: #000;
    font-size: 15px; font-weight: 600; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.messages-app .sync-done.show{ opacity: 1; pointer-events: auto; }

/* ================= 人设页：圆形玻璃取消键 · 底部完成 ================= */
.messages-app .round-glass{
    width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.7); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: transform .15s ease;
}
.messages-app .round-glass:active{ transform: scale(0.92); }
.messages-app .round-glass svg{ width: 16px; height: 16px; stroke: #111; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.messages-app .persona-foot{ padding: 10px 18px 30px; background: #FFFFFF; }
.messages-app .persona-done{
    width: 100%; height: 50px; border: none; border-radius: 999px; background: #000; color: #FFFFFF;
    font-size: 15px; font-weight: 600; cursor: pointer;
}
.messages-app .persona-done:active{ opacity: 0.8; }

/* ================= 文件夹里：新建联系人（轮盘上方右侧）================= */
.messages-app .fd-newc{
    position: absolute; right: 18px; bottom: 180px; z-index: 6; height: 36px; padding: 0 14px;
    border-radius: 999px; border: 0.5px solid rgba(255,255,255,0.25); background: rgba(18,18,18,0.82);
    color: #FFFFFF; font-size: 12px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.messages-app .fd-newc:active{ background: rgba(255,255,255,0.2); }



/* Contact-ID add-chat sheet */























/* iOS-inspired contact-ID add-chat sheet */
.contact-id-backdrop{position:absolute;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(10,10,10,.42);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;border-radius:inherit}
.contact-id-backdrop.show{opacity:1;visibility:visible;pointer-events:auto}
.contact-id-modal{width:min(100%,390px);max-height:calc(100% - 16px);overflow:auto;box-sizing:border-box;padding:21px 19px 17px;border:1px solid rgba(255,255,255,.78);border-radius:29px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,239,239,.96));color:#171717;box-shadow:0 26px 80px rgba(0,0,0,.28),inset 0 1px 0 #fff;transform:translateY(10px) scale(.975);transition:transform .24s cubic-bezier(.2,.8,.2,1);font-family:inherit}
.contact-id-backdrop.show .contact-id-modal{transform:translateY(0) scale(1)}
.contact-id-grabber{display:none}
.contact-id-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:1px 0 22px}
.contact-id-eyebrow{font-size:9px;letter-spacing:2.2px;font-weight:800;color:#898989;margin-bottom:8px}
.contact-id-modal-head h2{font-size:25px;letter-spacing:-.8px;font-weight:750;margin:0;color:#151515}
.contact-id-modal-head p{font-size:12px;color:#777;margin:7px 0 0;line-height:1.5}
.contact-id-close{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;background:#e7e7e7;color:#3b3b3b;font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer}
.contact-id-label{display:block;font-size:11px;letter-spacing:.4px;color:#666;font-weight:700;margin:0 0 8px 2px}
.contact-id-input-wrap{height:51px;display:flex;align-items:center;gap:11px;padding:0 14px;border:1px solid #dedede;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:inset 0 1px 2px rgba(0,0,0,.025);box-sizing:border-box}
.contact-id-input-wrap:focus-within{border-color:#999;box-shadow:0 0 0 3px rgba(0,0,0,.055)}
.contact-id-input-wrap svg{width:17px;height:17px;fill:none;stroke:#777;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.contact-id-input-wrap input{border:0;outline:0;background:transparent;min-width:0;flex:1;color:#151515;font:500 14px inherit;font-size:14px;letter-spacing:.1px}
.contact-id-input-wrap input::placeholder{color:#aaa}
.contact-id-preview{min-height:86px;box-sizing:border-box;margin-top:13px;padding:13px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.055);display:flex;align-items:center}
.contact-id-preview-empty{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;color:#999;font-size:12px;text-align:center;line-height:1.6;min-height:58px}
.contact-id-not-found{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#ededed;color:#777;font-weight:700}
.contact-id-person{display:flex;align-items:center;gap:12px;width:100%;min-width:0}
.contact-id-person .av{width:49px;height:49px;flex:0 0 49px;border-radius:16px;overflow:hidden}
.contact-id-preview-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.contact-id-preview-info strong{font-size:15px;color:#191919;font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-id-preview-info span{font-size:11px;color:#858585;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-id-preview-info code{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:#777;overflow-wrap:anywhere}
.contact-id-found{font-size:10px;font-weight:700;color:#4c4c4c;background:#ededed;border-radius:999px;padding:6px 8px;white-space:nowrap}
.contact-id-status{font-size:11px;line-height:1.55;color:#888;min-height:18px;margin:10px 2px 14px}
.contact-id-confirm{width:100%;height:51px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:17px;background:#171717;color:#fff;font-size:14px;font-weight:700;letter-spacing:.2px;box-shadow:0 7px 16px rgba(0,0,0,.15);cursor:pointer;transition:transform .15s,opacity .15s}
.contact-id-confirm:active{transform:scale(.985)}
.contact-id-confirm:disabled{background:#d6d6d6;color:#989898;box-shadow:none;cursor:not-allowed}
.contact-id-confirm svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-id-footnote{text-align:center;font-size:10px;color:#aaa;margin-top:12px}
@media(max-width:420px){.contact-id-backdrop{padding:16px}.contact-id-modal{padding:19px 16px 15px;border-radius:26px}}
@media(prefers-reduced-motion:reduce){.contact-id-backdrop,.contact-id-modal{transition:none}}

.messages-app{position:relative}

/* v4: translucent black iOS add-chat flow */
.contact-id-backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%);padding:18px}
.contact-id-modal{width:min(100%,390px);max-height:calc(100% - 12px);overflow:auto;padding:22px 18px 17px;border:1px solid rgba(255,255,255,.17);border-radius:28px;background:linear-gradient(145deg,rgba(40,40,42,.94),rgba(16,16,17,.96));color:#f5f5f7;box-shadow:0 28px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif}
.contact-id-modal-head h2{color:#f7f7f8}.contact-id-modal-head p{color:rgba(255,255,255,.55)}.contact-id-eyebrow{color:rgba(255,255,255,.42)}
.contact-id-close{background:rgba(255,255,255,.1);color:#f5f5f7}
.contact-id-choice{width:100%;display:flex;align-items:center;gap:13px;padding:15px 13px;margin:9px 0;border:1px solid rgba(255,255,255,.1);border-radius:19px;background:rgba(255,255,255,.055);color:#f7f7f8;text-align:left;cursor:pointer;transition:background .16s,transform .16s}
.contact-id-choice:active,.contact-id-direct-row:active{background:rgba(255,255,255,.12);transform:scale(.99)}
.contact-id-choice-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:14px;background:rgba(255,255,255,.11);font-size:25px;font-weight:300;color:#fff}
.contact-id-choice-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.contact-id-choice-copy strong{font-size:14px;font-weight:650}.contact-id-choice-copy small{font-size:11px;color:rgba(255,255,255,.48)}.contact-id-choice-arrow{color:rgba(255,255,255,.45);font-size:19px;white-space:nowrap}
.contact-id-label{color:rgba(255,255,255,.6)}.contact-id-input-wrap{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.13);box-shadow:none}.contact-id-input-wrap:focus-within{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(255,255,255,.05)}.contact-id-input-wrap input{color:#fff}.contact-id-input-wrap input::placeholder{color:rgba(255,255,255,.32)}.contact-id-input-wrap svg{stroke:rgba(255,255,255,.58)}
.contact-id-preview{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.08)}.contact-id-preview-empty{color:rgba(255,255,255,.45)}.contact-id-preview-info strong{color:#fff}.contact-id-preview-info span,.contact-id-preview-info code{color:rgba(255,255,255,.55)}.contact-id-found{background:rgba(255,255,255,.12);color:#eee}.contact-id-status{color:rgba(255,255,255,.5)}.contact-id-confirm{background:#f4f4f5;color:#171717;box-shadow:0 8px 22px rgba(0,0,0,.25)}.contact-id-confirm:disabled{background:rgba(255,255,255,.1);color:rgba(255,255,255,.3)}.contact-id-footnote{color:rgba(255,255,255,.32)}
.contact-id-back-link{display:block;width:100%;margin-top:12px;padding:10px;border:0;background:transparent;color:rgba(255,255,255,.62);font-size:12px;cursor:pointer}
.contact-id-direct-list{display:flex;flex-direction:column;gap:7px;max-height:45vh;overflow:auto}.contact-id-direct-row{width:100%;display:flex;align-items:center;gap:11px;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.045);color:#fff;text-align:left;cursor:pointer}.contact-id-direct-row .av{flex:0 0 43px;width:43px;height:43px;border-radius:14px}.contact-id-direct-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.contact-id-direct-info strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-id-direct-info small{font-size:10px;color:rgba(255,255,255,.52)}.contact-id-direct-info code{font-size:9px;color:rgba(255,255,255,.35);overflow-wrap:anywhere}
@media(max-width:420px){.contact-id-backdrop{padding:14px}.contact-id-modal{padding:20px 15px 15px;border-radius:25px}}

/* ===== 添加聊天弹窗：与设置里 Got it 提示框统一风格（深色毛玻璃 + 白色药丸按钮） ===== */
.contact-id-backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px}
.contact-id-modal{width:min(100%,340px);max-height:calc(100% - 12px);overflow:auto;box-sizing:border-box;padding:22px 20px 20px;border:.5px solid rgba(255,255,255,.22);border-radius:28px;background:rgba(20,20,25,.88);backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);color:#fff;box-shadow:0 25px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:14px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;transform:translateY(8px) scale(.94);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.contact-id-backdrop.show .contact-id-modal{transform:translateY(0) scale(1)}
.cid-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:.5px solid rgba(255,255,255,.09)}
.cid-title-group{display:flex;flex-direction:column;gap:2px;min-width:0}
.cid-title{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.cid-subtitle{font:600 8.5px/1.3 "SF Mono","Menlo","Monaco","Courier New",monospace;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.cid-close{flex:0 0 26px;width:26px;height:26px;padding:0;border:.5px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer}
.cid-body{display:flex;flex-direction:column;gap:10px}
.cid-desc{font-size:13.5px;font-weight:500;letter-spacing:-.1px;text-align:center;color:rgba(255,255,255,.85);margin:6px 0 2px;line-height:1.5}
.cid-option{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;border:.5px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(0,0,0,.35);color:#fff;text-align:left;cursor:pointer;transition:background .16s,transform .16s}
.cid-option:active,.contact-id-direct-row:active{background:rgba(0,0,0,.55);transform:scale(.99)}
.cid-option-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.07);font-size:18px;color:#fff}
.cid-option-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.cid-option-copy strong{font-size:12.5px;font-weight:600}
.cid-option-copy small{font-size:10.5px;color:rgba(255,255,255,.5)}
.cid-option-arrow{color:rgba(255,255,255,.45);font-size:13px;white-space:nowrap}
.cid-footnote{text-align:center;font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.cid-btn{width:100%;height:38px;margin-top:6px;border:0;border-radius:12px;background:#fff;color:#060608;font:700 12px/1 "SF Mono","Menlo","Monaco","Courier New",monospace;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .15s}
.cid-btn:active{transform:scale(.985)}
.cid-btn:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.35);cursor:not-allowed}
.cid-back{display:block;width:100%;padding:6px;border:0;background:transparent;color:rgba(255,255,255,.55);font-size:11.5px;cursor:pointer}

/* ===== 第二轮：添加聊天 / 身份 / 管理我 ===== */
.messages-app .identity-sheet .sheet-title.sheet-title-plane{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:12px 10px 10px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.messages-app .identity-sheet .sheet-title-plane em{ width:100%; text-align:center; font-style:normal; font-family:"SF Mono",Menlo,monospace; font-size:8.5px; font-weight:600; letter-spacing:1px; color:rgba(255,255,255,.4); text-transform:uppercase; }
.messages-app .sheet-title-plane svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .identity-option .io-avatar svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .identity-option .io-avatar span{ font-size:16px; font-weight:600; }
.messages-app .identity-sheet .sheet-body{ display:flex; flex-direction:column; gap:8px; padding:0 2px 2px; }
.messages-app .identity-sheet .cid-desc{ text-align:center; font-size:12.5px; color:rgba(235,235,245,.6); margin:0 0 4px; }
.messages-app .identity-sheet .cid-footnote{ text-align:center; font-size:10px; color:rgba(235,235,245,.4); padding:4px 0; }
.messages-app .identity-sheet .cid-btn{ margin-top:4px; }
.messages-app .identity-sheet .cid-back{ color:rgba(255,255,255,.55); }
.messages-app .acct-remove{ flex-shrink:0; border:0; border-radius:999px; padding:6px 10px; background:rgba(0,0,0,.06); color:#333; font-size:11px; font-weight:600; cursor:pointer; }
.messages-app .acct-add{ width:100%; height:48px; margin-top:6px; border:0; border-radius:18px; background:#111; color:#fff; font-size:14px; font-weight:650; cursor:pointer; }
.messages-app .acct-empty{ padding:14px 16px; margin-bottom:10px; border-radius:18px; background:#F3F3F3; font-size:12px; line-height:1.6; color:#8E8E8E; }
.messages-app .acct-check{ width:24px; height:24px; flex-shrink:0; border-radius:50%; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.messages-app .acct-check.off{ background:transparent; border:1.5px solid #CFCFCF; }
.messages-app .persona-hero-av{ cursor:pointer; }

/* ===== 第三轮：居中弹窗 / 飞机图标 / 资料卡编辑 / 全屏聊天室设置 / 全屏调取 ===== */
.messages-app .identity-sheet-backdrop{ display:flex; align-items:center; justify-content:center; padding:18px; z-index:500; }
.messages-app .identity-sheet{ position:relative; left:auto; right:auto; bottom:auto; width:100%; max-width:330px; }
.messages-app .sheet-title-plane svg{ width:16px; height:16px; fill:#fff; stroke:none; }
.messages-app .identity-option .io-avatar svg{ width:18px; height:18px; fill:#fff; stroke:none; }
.messages-app .pop-text{ text-align:center; font-size:12.5px; line-height:1.6; color:rgba(235,235,245,.7); padding:4px 10px 14px; }
.messages-app .pop-actions{ display:flex; gap:8px; }
.messages-app .pop-actions > button{ flex:1; margin-top:0; }
.messages-app .pc-edit{ cursor:pointer; border-radius:5px; padding:0 3px; margin:0 -3px; }
.messages-app .pc-edit.editing{ background:rgba(128,128,128,.28); border-bottom:1px dashed currentColor; outline:none; }
.messages-app #roomView{ z-index:60; }
.messages-app .room-hero{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 0 10px; }
.messages-app .room-hero .av{ width:76px; height:76px; font-size:24px; }
.messages-app .room-name{ font-size:18px; font-weight:700; }
.messages-app #syncPage{ position:absolute; inset:0; }

/* ===== 第四轮：小太阳提示 / 身份底部弹窗 ===== */
.messages-app .sun-btn{ display:none; width:36px; height:36px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.8); box-shadow:0 6px 16px rgba(0,0,0,.12); align-items:center; justify-content:center; cursor:pointer; }
.messages-app .sun-btn.show{ display:flex; }
.messages-app .sun-btn:active{ transform:scale(.92); }
.messages-app .sun-btn svg{ width:18px; height:18px; fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .sun-btn.spinning svg{ animation:sunSpin 1.1s linear infinite; }
@keyframes sunSpin { to { transform: rotate(360deg); } }
.messages-app .identity-sheet-backdrop.bottom{ align-items:flex-end; justify-content:center; padding:0; }
.messages-app .identity-sheet-backdrop.bottom .identity-sheet{ position:absolute; left:14px; right:14px; bottom:14px; width:auto; max-width:none; }
.messages-app #syncPage{ z-index:60; }

/* ===== 第五轮：调取键（太阳）/ 调取页面重新设计 ===== */
.messages-app .tool-btn.spinning svg{ animation:sunSpin 1.1s linear infinite; }
.messages-app #syncPage{
    z-index:60; color:#fff; box-sizing:border-box; padding:58px 22px 26px; overflow:hidden;
    background: radial-gradient(120% 60% at 50% 0%, #2b2b31 0%, #0d0d10 55%, #000 100%);
}
.messages-app .sync-head{ display:flex; align-items:center; justify-content:space-between; }
.messages-app .sync-title{ font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.75); }
.messages-app .sync-head-right{ display:flex; align-items:center; gap:10px; }
.messages-app .sync-count{ font:600 11px "SF Mono",Menlo,monospace; color:rgba(255,255,255,.5); }
.messages-app .sync-x{ width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; cursor:pointer; }
.messages-app .sync-x svg{ width:13px; height:13px; stroke:#fff; stroke-width:2; fill:none; stroke-linecap:round; }
.messages-app .sync-hero{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:30px 0 22px; }
.messages-app .sync-sun{ width:92px; height:92px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 50px rgba(0,0,0,.55); }
.messages-app .sync-sun svg{ width:46px; height:46px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .sync-sun.spin svg{ animation:sunSpin 1.6s linear infinite; }
.messages-app .sync-hero-title{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
.messages-app .sync-hero-sub{ font-size:12px; color:rgba(255,255,255,.5); }
.messages-app .sync-bar{ height:4px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin:0 2px 18px; }
.messages-app .sync-bar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#ffffff,#bdbdbd); transition:width .45s cubic-bezier(.2,.8,.2,1); }
.messages-app .sync-list{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; scrollbar-width:none; }
.messages-app .sync-list::-webkit-scrollbar{ display:none; }
.messages-app .sync-row{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:18px; background:rgba(255,255,255,.05); border:.5px solid rgba(255,255,255,.08); transition:background .3s, opacity .3s; }
.messages-app .sync-row.pending{ opacity:.42; }
.messages-app .sync-row.loading{ background:rgba(255,255,255,.11); }
.messages-app .sync-row.done{ background:rgba(255,255,255,.06); }
.messages-app .sr-text{ flex:1; min-width:0; }
.messages-app .sr-name{ font-size:14px; font-weight:650; color:#fff; }
.messages-app .sr-en{ margin-top:2px; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.4); }
.messages-app .sr-mark{ width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; }
.messages-app .sync-row.done .sr-mark{ background:#fff; }
.messages-app .sync-row.done .sr-mark svg{ width:13px; height:13px; fill:none; stroke:#000; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .sync-row.loading .sr-mark{ border:2px solid rgba(255,255,255,.2); border-top-color:#fff; animation:sunSpin .8s linear infinite; }
.messages-app .sync-foot{ padding-top:16px; }
.messages-app .sync-done{ width:100%; height:50px; border:0; border-radius:18px; background:#fff; color:#000; font-size:14px; font-weight:700; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s; }
.messages-app .sync-done.show{ opacity:1; pointer-events:auto; }

/* ===== 第六轮：聊天室设置（全屏 · 五角星滑轮）/ 聊天美化 ===== */
.messages-app #roomView{ position:absolute; inset:0; z-index:60; background:#0b0b0d; color:#fff; display:flex; flex-direction:column; box-sizing:border-box; }
.messages-app .room-head{ display:flex; align-items:center; justify-content:space-between; padding:58px 16px 10px; flex:none; }
.messages-app .room-back{ width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; cursor:pointer; }
.messages-app .room-back svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .room-head-title{ font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.72); }
.messages-app .room-head-sp{ width:36px; }
.messages-app .room-body{ flex:1; min-height:0; overflow-y:auto; padding:4px 18px 190px; box-sizing:border-box; scrollbar-width:none; }
.messages-app .room-body::-webkit-scrollbar{ display:none; }
.messages-app .room-hero{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0 20px; }
.messages-app .room-hero .av{ width:84px; height:84px; font-size:26px; box-shadow:0 0 0 4px rgba(255,255,255,.08), 0 16px 40px rgba(0,0,0,.6); }
.messages-app .room-name{ font-size:20px; font-weight:700; letter-spacing:-.3px; }
.messages-app .room-id{ font:600 11px "SF Mono",Menlo,monospace; color:rgba(255,255,255,.45); }
.messages-app .room-status{ margin-top:4px; font-size:11.5px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); }
.messages-app .rp-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.messages-app .rp-stat{ min-width:0; padding:14px; border-radius:20px; background:rgba(255,255,255,.06); display:flex; flex-direction:column; gap:4px; }
.messages-app .rp-stat b{ font-size:18px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messages-app .rp-stat span{ font-size:11px; color:rgba(255,255,255,.45); }
.messages-app .rp-label{ font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin:18px 4px 8px; }
.messages-app .rp-row{ width:100%; display:flex; align-items:center; gap:12px; padding:14px; margin-bottom:8px; border:0; border-radius:18px; background:rgba(255,255,255,.06); color:#fff; text-align:left; cursor:pointer; }
.messages-app .rp-row:active{ background:rgba(255,255,255,.12); }
.messages-app .rp-txt{ flex:1; min-width:0; }
.messages-app .rp-t{ font-size:14px; font-weight:650; }
.messages-app .rp-s{ font-size:11px; color:rgba(255,255,255,.45); margin-top:3px; }
.messages-app .rp-row.danger .rp-t{ color:#ff8c82; }
.messages-app .rp-chev{ color:rgba(255,255,255,.35); font-size:18px; }
.messages-app .rp-quote{ padding:16px; border-radius:20px; background:rgba(255,255,255,.05); font-size:13px; line-height:1.7; color:rgba(255,255,255,.86); white-space:pre-wrap; word-break:break-word; }
.messages-app .rp-kv{ margin-top:10px; border-radius:20px; background:rgba(255,255,255,.04); overflow:hidden; }
.messages-app .rp-kv-row{ display:flex; gap:12px; padding:12px 14px; border-top:.5px solid rgba(255,255,255,.07); font-size:12.5px; }
.messages-app .rp-kv-row:first-child{ border-top:0; }
.messages-app .rp-kv-row span{ flex:none; width:66px; color:rgba(255,255,255,.45); }
.messages-app .rp-kv-row b{ min-width:0; font-weight:500; color:rgba(255,255,255,.9); word-break:break-word; }
.messages-app .rp-preview{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:22px; background:rgba(255,255,255,.04); }
.messages-app .pv-b{ max-width:72%; padding:9px 13px; border-radius:18px; font-size:13px; line-height:1.45; }
.messages-app .pv-b.them{ align-self:flex-start; background:rgba(255,255,255,.12); color:#fff; }
.messages-app .pv-b.me{ align-self:flex-end; background:var(--me-bg,#efeff2); color:var(--me-fg,#111); }
.messages-app .rp-swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.messages-app .rp-sw{ border:0; padding:0; background:none; color:rgba(255,255,255,.7); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.messages-app .rp-sw i{ width:44px; height:44px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.messages-app .rp-sw.on{ color:#fff; font-weight:700; }
.messages-app .rp-sw.on i{ box-shadow:0 0 0 2px #0b0b0d, 0 0 0 3.5px #fff; }
.messages-app .room-dock{ position:absolute; left:14px; right:14px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); padding:12px 12px 8px; border-radius:30px; background:rgba(24,24,28,.8); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:.5px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(0,0,0,.5); box-sizing:border-box; }
.messages-app .room-track{ position:relative; height:54px; border-radius:27px; background:rgba(255,255,255,.08); padding:0 4px; box-sizing:border-box; touch-action:none; --i:0; }
.messages-app .room-thumb{ position:absolute; top:7px; width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.4); left:calc(4px + (100% - 8px) / 3 * var(--i) + (100% - 8px) / 6 - 20px); transition:left .34s cubic-bezier(.2,.8,.2,1); }
.messages-app .room-thumb.drag{ transition:none; }
.messages-app .room-thumb svg{ width:20px; height:20px; fill:#111; }
.messages-app .room-labels{ display:flex; margin-top:4px; }
.messages-app .room-lbl{ flex:1; border:0; padding:6px 0; background:none; font-size:12px; color:rgba(255,255,255,.45); cursor:pointer; }
.messages-app .room-lbl.on{ color:#fff; font-weight:700; }
.messages-app #chatView[data-bg] .thread{ background:transparent; }
.messages-app #chatView[data-bg]{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.messages-app #chatView[data-bubble] .mrow.me .bubble{ background:var(--me-bg); color:var(--me-fg); }

/* ===== 第七轮：聊天设置半透明遮罩 / 五角星滑块 / 预览按钮 / 文字居中 ===== */
.messages-app #roomView{ background:rgba(10,10,12,.5); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); }
.messages-app .room-thumb{ width:40px; height:40px; background:none; box-shadow:none; border-radius:0; }
.messages-app .room-thumb svg{ width:40px; height:40px; fill:#fff; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.messages-app .rp-row-c{ justify-content:center; text-align:center; padding:16px 14px; }
.messages-app .rp-row-c .rp-txt{ flex:none; }
.messages-app .rp-stat{ align-items:center; text-align:center; }
.messages-app .rp-label.rp-center{ text-align:center; margin-left:0; margin-right:0; }
.messages-app .rp-prev-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; margin-bottom:8px; border:0; border-radius:18px; background:rgba(255,255,255,.06); color:#fff; cursor:pointer; }
.messages-app .rp-prev-btn:active{ background:rgba(255,255,255,.12); }
.messages-app .rp-prev-btn .rp-chev{ color:rgba(255,255,255,.4); font-size:18px; transition:transform .25s; }
.messages-app .rp-prev-btn.open .rp-chev{ transform:rotate(90deg); }
.messages-app .rp-preview{ background-color:rgba(255,255,255,.04); margin-bottom:8px; }

/* ===== 第七轮：聊天室设置居中 / 5% 遮罩 / 胖五角星滑轮 / CSS 输入框 ===== */
.messages-app #roomView{ background:rgba(11,11,13,.95); text-align:center; }
.messages-app .room-body{ text-align:center; }
.messages-app .room-status{ display:inline-block; }
.messages-app .rp-row{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; padding:15px 14px; }
.messages-app .rp-t{ width:100%; text-align:center; }
.messages-app .rp-s{ width:100%; text-align:center; }
.messages-app .rp-chev{ display:none; }
.messages-app .rp-stat{ align-items:center; text-align:center; }
.messages-app .rp-quote{ text-align:center; }
.messages-app .rp-kv-row{ flex-direction:column; align-items:center; text-align:center; gap:4px; }
.messages-app .rp-kv-row span{ width:auto; }
.messages-app .rp-kv-row b{ width:100%; text-align:center; }
.messages-app .room-lbl{ text-align:center; }
.messages-app .room-track{ height:56px; }
.messages-app .room-thumb{ top:5px; width:46px; height:46px; left:calc(4px + (100% - 8px) / 3 * var(--i) + (100% - 8px) / 6 - 23px); background:none; box-shadow:none; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); display:grid; place-items:center; }
.messages-app .room-thumb svg{ width:46px; height:46px; }
.messages-app .css-box{ border-radius:20px; background:rgba(255,255,255,.05); padding:12px; text-align:left; }
.messages-app .css-hint{ font-size:11px; line-height:1.6; color:rgba(255,255,255,.5); margin-bottom:8px; }
.messages-app .css-hint code{ font:11px "SF Mono",Menlo,monospace; color:rgba(255,255,255,.85); }
.messages-app .css-input{ width:100%; min-height:150px; box-sizing:border-box; border:0; outline:none; resize:vertical; border-radius:14px; padding:12px; background:rgba(0,0,0,.45); color:#f2f2f5; font:12px/1.6 "SF Mono",Menlo,monospace; text-align:left; }
.messages-app .css-input:focus{ box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.messages-app .css-tpl{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px; }
.messages-app .css-tpl-btn{ border:0; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:12px; cursor:pointer; }
.messages-app .css-actions{ display:flex; gap:10px; margin-top:14px; }
.messages-app .css-actions button{ flex:1; height:46px; border:0; border-radius:16px; font-size:13px; font-weight:700; cursor:pointer; }
.messages-app .css-clear{ background:rgba(255,255,255,.1); color:#fff; }
.messages-app .css-save{ background:#fff; color:#000; }
.messages-app .css-preview-box{ margin:6px 0 12px; border-radius:18px; padding:14px; min-height:160px; box-sizing:border-box; background:#ffffff; display:flex; flex-direction:column; gap:8px; background-size:cover; background-position:center; }.messages-app #appearanceMgr > .edit-header, .messages-app #personaEditor.glass-top > .edit-header {
    position:absolute !important; top:0 !important; left:0 !important; right:0 !important; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    height:auto !important; margin:0 !important; padding:58px 14px 0 !important; box-sizing:border-box;
    background:none !important; border:0 !important; box-shadow:none !important; pointer-events:none;
}.messages-app #appearanceMgr > .edit-header > *, .messages-app #personaEditor.glass-top > .edit-header > * { pointer-events:auto; }.messages-app #appearanceMgr > .edit-header > button, .messages-app #appearanceMgr > .edit-header > .title, .messages-app #personaEditor.glass-top > .edit-header > button, .messages-app #personaEditor.glass-top > .edit-header > .title {
    height:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    padding:0 18px; border-radius:999px; border:.5px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.6); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
    box-shadow:0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
    color:#111; font-size:14px; font-weight:650; white-space:nowrap;
}.messages-app #appearanceMgr > .edit-header > button, .messages-app #personaEditor.glass-top > .edit-header > button { cursor:pointer; }.messages-app #appearanceMgr > .edit-header > button:first-child, .messages-app #personaEditor.glass-top > .edit-header > button:first-child { width:44px; min-width:44px; padding:0; border-radius:50%; }.messages-app #appearanceMgr > .edit-header > button:last-child, .messages-app #personaEditor.glass-top > .edit-header > button:last-child { min-width:76px; border-radius:22px; }
.messages-app #appearanceMgr > .edit-body,
.messages-app #personaEditor.glass-top > .edit-body{ padding-top:118px !important; box-sizing:border-box; }

/* —— 聊天室设置（只影响这个页面）—— */
.messages-app #roomView .room-head{
    position:absolute !important; top:0; left:0; right:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:58px 14px 0; box-sizing:border-box; background:none; border:0; box-shadow:none; pointer-events:none;
}
.messages-app #roomView .room-head > *{ pointer-events:auto; }
.messages-app #roomView .room-head > button, .messages-app #roomView .room-head-title{
    height:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
    padding:0 18px; border-radius:999px; border:.5px solid rgba(255,255,255,.16);
    background:rgba(40,40,46,.62); color:#fff; font-size:14px; font-weight:650; white-space:nowrap;
    box-shadow:0 10px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.messages-app #roomView .room-head > button:first-child{ width:44px; min-width:44px; padding:0; border-radius:50%; }
.messages-app #roomView .room-body{ padding-top:118px !important; box-sizing:border-box; }
.messages-app .room-track{ height:56px; }
.messages-app .room-track::before{
    content:""; position:absolute; top:50%; height:2px; margin-top:-1px; border-radius:2px; background:#fff; pointer-events:none;
    left:calc(4px + (100% - 8px) / 6); right:calc(4px + (100% - 8px) / 6);
}
.messages-app .room-thumb{ top:calc(50% - 11.5px); width:23px; height:23px; left:calc(4px + (100% - 8px) / 3 * var(--i) + (100% - 8px) / 6 - 11.5px); }
.messages-app .room-thumb svg{ width:23px; height:23px; }
.messages-app .rp-row{ padding:8px 14px !important; gap:2px !important; margin-bottom:6px !important; }
.messages-app .rp-stat{ padding:8px 14px !important; }
.messages-app .rp-quote{ padding:10px 14px !important; }
.messages-app .rp-kv-row{ padding:7px 12px !important; }
.messages-app .rp-preview{ padding:10px !important; }
.messages-app .css-box{ padding:10px 12px !important; }
.messages-app .css-input{ min-height:110px !important; }
.messages-app .css-preview-box{ min-height:110px !important; padding:10px !important; }

/* ===== 第十轮：聊天室设置 —— 顶栏与“全部联系人”一致；底部五角星滑轮与通讯录轮盘一致 ===== */
.messages-app #roomView .room-head{
    position:absolute !important; top:54px !important; left:50% !important; right:auto !important; bottom:auto !important;
    transform:translateX(-50%); z-index:6; width:max-content !important; height:auto !important; margin:0 !important;
    display:flex; align-items:center; gap:10px; padding:5px !important; box-sizing:border-box;
    border-radius:999px !important; background:rgba(18,18,18,0.82) !important; border:0.5px solid rgba(255,255,255,0.22) !important;
    backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
    box-shadow:0 8px 24px rgba(0,0,0,0.35) !important;
}
.messages-app #roomView .room-head > .room-back{
    width:32px !important; height:32px !important; min-width:32px !important; padding:0 !important; border:none !important;
    border-radius:50% !important; background:rgba(255,255,255,0.16) !important; box-shadow:none !important;
    display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.messages-app #roomView .room-head > .room-back:active{ background:rgba(255,255,255,0.28) !important; }
.messages-app #roomView .room-head > .room-back svg{ width:16px !important; height:16px !important; stroke:#FFFFFF !important; stroke-width:2 !important; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.messages-app #roomView .room-head > .room-head-title{
    display:flex; flex-direction:column; align-items:center; min-width:120px; padding:0 6px !important; margin:0 !important;
    height:auto !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important;
    font-size:15px !important; font-weight:700 !important; letter-spacing:0 !important; text-transform:none !important; color:#FFFFFF !important;
    backdrop-filter:none; -webkit-backdrop-filter:none; white-space:nowrap;
}
.messages-app #roomView .room-head > .room-head-sp{ display:none !important; }

/* 底部五角星滑轮：与通讯录底部轮盘一致（深色弧形底座、细边框、白色滑块） */
.messages-app .room-dock{
    position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
    padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px)) !important; box-sizing:border-box;
    border-radius:50% 50% 0 0 / 56px 56px 0 0 !important; background:#0E0E0E !important;
    border:0 !important; border-top:1px solid #262626 !important; box-shadow:none !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.messages-app .room-track{
    height:56px !important; border-radius:28px !important; background:transparent !important;
    border:1px solid #1A1A1A !important; box-sizing:border-box !important;
}
.messages-app .room-lbl{ color:#7A7A7A !important; font-size:13px !important; font-weight:600 !important; }
.messages-app .room-lbl.on{ color:#FFFFFF !important; font-weight:600 !important; }

/* ===== 第十一轮：文件夹磨砂玻璃图标 / 聊天室时间控制 / 朋友圈 ===== */
.messages-app .ft-glass{ position:relative; width:64px; height:52px; margin:0 auto; filter:drop-shadow(0 8px 14px rgba(0,0,0,.14)); }
.messages-app .ft-glass svg{ position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; }
.messages-app .ft-avs{ position:absolute; left:6px; right:6px; bottom:5px; display:flex; justify-content:center; }
.messages-app .ft-av{ width:18px; height:18px; margin-left:-6px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px rgba(255,255,255,.9); }
.messages-app .ft-av:first-child{ margin-left:0; }
.messages-app .ft-av .av{ width:18px; height:18px; font-size:8px; }

.messages-app .rt-seg{ display:flex; padding:4px; border-radius:999px; background:rgba(255,255,255,.07); margin:4px 0 10px; }
.messages-app .rt-seg-btn{ flex:1; border:0; background:none; color:rgba(255,255,255,.5); font-size:12px; font-weight:600; padding:8px 0; border-radius:999px; cursor:pointer; }
.messages-app .rt-seg-btn.on{ background:rgba(255,255,255,.16); color:#fff; }
.messages-app .rt-card{ border-radius:20px; background:rgba(255,255,255,.06); padding:10px 14px; }
.messages-app .rt-big{ font:700 22px/1.2 "SF Mono",Menlo,monospace; letter-spacing:.5px; color:#fff; }
.messages-app .rt-sub{ font-size:11px; color:rgba(255,255,255,.5); margin-top:6px; line-height:1.5; }
.messages-app .rt-set{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.messages-app .rt-input{ width:100%; box-sizing:border-box; height:40px; border:0; border-radius:12px; padding:0 10px; background:rgba(0,0,0,.45); color:#fff; color-scheme:dark; font-size:13px; text-align:center; }
.messages-app .rt-save{ height:40px; border:0; border-radius:14px; background:#fff; color:#000; font-size:13px; font-weight:700; cursor:pointer; }

.messages-app #momentsScroll{ padding:0 !important; }
.messages-app .mf-frame{ min-height:100%; box-sizing:border-box; margin-top:6px; background:#EDEDF0; border-radius:26px 26px 0 0; overflow:hidden; padding-bottom:120px; }
.messages-app .mf-cover{ position:relative; height:200px; background:linear-gradient(135deg,#dcdce2,#f5f5f7) center/cover no-repeat; cursor:pointer; }
.messages-app .mf-cover-tip{ position:absolute; right:12px; bottom:10px; font-size:10px; color:rgba(0,0,0,.5); background:rgba(255,255,255,.6); padding:3px 8px; border-radius:999px; }
.messages-app .mf-me{ display:flex; flex-direction:column; align-items:center; }
.messages-app .mf-avatar{ margin-top:-42px; width:84px; height:84px; border-radius:50%; border:3px solid #EDEDF0; box-sizing:border-box; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.15); }
.messages-app .mf-avatar .av{ width:100%; height:100%; font-size:24px; }
.messages-app .mf-name{ margin-top:10px; padding:6px 16px; border-radius:999px; background:rgba(255,255,255,.9); font-size:13px; font-weight:650; box-shadow:0 4px 12px rgba(0,0,0,.06); }
.messages-app .mf-posts{ padding:16px 12px 0; }
.messages-app .mf-card{ background:#fff; border-radius:16px; padding:12px 14px; margin-bottom:10px; }
.messages-app .mf-card-head{ display:flex; align-items:center; gap:10px; }
.messages-app .mf-card-head .av{ width:34px; height:34px; font-size:13px; flex:none; }
.messages-app .mf-card-who{ flex:1; min-width:0; display:flex; flex-direction:column; }
.messages-app .mf-card-who b{ font-size:13px; font-weight:650; }
.messages-app .mf-card-who span{ margin-top:2px; font-size:10.5px; color:#8E8E8E; }
.messages-app .mf-del{ border:0; background:none; font-size:11px; color:#8E8E8E; cursor:pointer; padding:4px; }
.messages-app .mf-card-text{ margin-top:10px; font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:#111; }
.messages-app .mf-empty{ text-align:center; color:#8E8E8E; font-size:12px; padding:40px 0; }
.messages-app .mf-input{ width:100%; min-height:120px; box-sizing:border-box; border:0; outline:none; resize:none; border-radius:16px; padding:12px; background:rgba(255,255,255,.08); color:#fff; font:14px/1.6 -apple-system,BlinkMacSystemFont,sans-serif; margin-bottom:12px; }

/* ===== 第十二轮：朋友圈外框只留无色调边线，内里不填充，横向缩窄 ===== */
.messages-app .mf-frame{
    width:80%; max-width:300px; margin:6px auto 0; padding-bottom:120px;
    background:transparent; border:1px solid #C8C8C8; border-bottom:0; border-radius:26px 26px 0 0; box-sizing:border-box;
}
.messages-app .mf-cover{ background:transparent; }
.messages-app .mf-cover-tip{ background:transparent; color:#8E8E8E; border:1px solid #C8C8C8; }
.messages-app .mf-avatar{ border:0; }

/* ===== 第十三轮：朋友圈外框更淡更宽 / 发朋友圈全屏遮罩 / 文件夹大 SVG 包裹卡片 ===== */
.messages-app .mf-frame{ width:94%; max-width:none; border-color:#E6E6E6; }
.messages-app .mf-cover-tip{ border-color:#E6E6E6; }

.messages-app #fullMask{
    position:absolute; inset:0; z-index:600; display:flex; flex-direction:column; box-sizing:border-box;
    padding:58px 18px calc(22px + env(safe-area-inset-bottom,0px));
    background:rgba(0,0,0,.72); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.messages-app #fullMask.show{ opacity:1; visibility:visible; }
.messages-app #fullMask .fm-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.messages-app .fm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.messages-app .fm-title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#fff; }
.messages-app .fm-title svg{ width:16px; height:16px; fill:#fff; stroke:none; }
.messages-app .fm-x{ width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:20px; line-height:1; cursor:pointer; }
.messages-app #fullMask .mf-input{ flex:1; min-height:0; height:auto; font-size:16px; margin-bottom:0; }
.messages-app .fm-foot{ display:flex; gap:10px; margin-top:12px; }
.messages-app .fm-foot button{ flex:1; height:50px; border:0; border-radius:18px; font-size:14px; font-weight:700; cursor:pointer; }
.messages-app .fm-cancel{ background:rgba(255,255,255,.12); color:#fff; }
.messages-app .fm-ok{ background:#fff; color:#000; }

/* ===== 第十四轮：朋友圈上移 / 白色全屏发布遮罩 / 文件夹卡片 + 磨砂玻璃文件夹 ===== */

/* 朋友圈：背景和头像上移 20px，名字和卡片位置不变 */
.messages-app .mf-frame{ overflow:visible; }
.messages-app .mf-cover{ margin-top:-20px; border-radius:26px 26px 0 0; }

/* ===== 第十五轮：朋友圈名字胶囊 / 发朋友圈重做 / 文件夹白色磨砂 + 标签角 + 叠加卡片 ===== */

/* 朋友圈：名字胶囊卡在头像下面（头像压在胶囊上方） */
.messages-app .mf-avatar{ position:relative; z-index:2; }
.messages-app .mf-name{ position:relative; z-index:1; margin-top:-16px; padding:22px 16px 7px; background:rgba(255,255,255,.92); }
.messages-app .mf-posts{ padding-top:44px !important; }

/* 发朋友圈：白色全屏界面 */
.messages-app #fullMask{
    position:absolute; inset:0; z-index:600; display:flex; flex-direction:column; box-sizing:border-box;
    padding:58px 22px calc(26px + env(safe-area-inset-bottom,0px));
    background:#FFFFFF; backdrop-filter:none; -webkit-backdrop-filter:none;
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.messages-app #fullMask.show{ opacity:1; visibility:visible; }
.messages-app #fullMask .fm-body{ flex:1; min-height:0; display:flex; flex-direction:column; }
.messages-app .mc-top{ display:flex; justify-content:center; margin-bottom:14px; }
.messages-app .mc-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#111; letter-spacing:.2px; }
.messages-app .mc-title svg{ width:16px; height:16px; fill:#111; stroke:none; }
.messages-app .mc-who{ align-self:center; display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px; background:#F4F4F6; }
.messages-app .mc-who .av{ width:30px; height:30px; font-size:12px; }
.messages-app .mc-who-name{ font-size:13px; font-weight:650; color:#111; }
.messages-app .mc-text{
    flex:1; min-height:0; width:100%; box-sizing:border-box; margin-top:22px; padding:4px 2px;
    border:0; outline:none; resize:none; background:transparent; color:#111;
    font:17px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
}
.messages-app .mc-text::placeholder{ color:#B5B5BA; }
.messages-app .mc-count{ align-self:flex-end; margin-top:6px; font:600 11px "SF Mono",Menlo,monospace; color:#A0A0A6; }
.messages-app .mc-line{ height:1px; background:#EDEDF0; margin:14px 0 24px; }

/* 文件夹：恢复上一版的磨砂样式；叠加的成员卡片在磨砂层后面 */
.messages-app .folder-tile{ position:relative !important; overflow:visible !important; margin-top:10px !important; }
.messages-app .folder-tile > svg{ position:relative; z-index:3; }
.messages-app .folder-tile > div:not(.ft-body):not(.ft-tab){ position:relative; z-index:2; }
.messages-app .folder-tile .ft-tab{
    position:absolute; left:10%; top:34%; width:36%; height:16%; box-sizing:border-box; pointer-events:none; z-index:1;
    border-radius:10px 10px 0 0; border:1px solid rgba(255,255,255,.8); border-bottom:0;
    background:rgba(255,255,255,.3); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.messages-app .folder-tile .ft-body{
    position:absolute; left:0; right:0; top:42%; bottom:0; box-sizing:border-box; pointer-events:none; z-index:1;
    border-radius:14px; border:1px solid rgba(255,255,255,.8);
    background:rgba(255,255,255,.3); backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
    box-shadow:0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.messages-app .folder-tile .ft-layer{
    position:absolute; z-index:0; pointer-events:none; border-radius:10px; background:rgba(255,255,255,.7);
    left:calc(18% + var(--k) * 3%); right:calc(18% - var(--k) * 3%); top:calc(50% + var(--k) * 4%); height:34%;
    box-shadow:0 2px 6px rgba(0,0,0,.08); transform:rotate(calc(var(--k) * -2deg));
}

/* 线条图标：白色细线 */
.messages-app .identity-option .io-avatar svg.ico,
.messages-app .sheet-body svg.ico,
.messages-app .identity-sheet svg.ico{ width:18px; height:18px; fill:none !important; stroke:#FFFFFF !important; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* 文件夹：黑色磨砂玻璃；标签和前面都是黑色，里面的成员卡片保留 */
.messages-app .folder-tile .ft-tab{
    background:rgba(18,18,20,.82); border:1px solid rgba(255,255,255,.1); border-bottom:0;
    backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
}
.messages-app .folder-tile .ft-body{
    background:rgba(18,18,20,.82); border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(12px) saturate(140%); -webkit-backdrop-filter:blur(12px) saturate(140%);
    box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}

/* 发朋友圈：底部两个胶囊按钮（与 App 其他弹窗按钮一致） */
.messages-app .mc-actions{ display:flex; gap:12px; margin-top:12px; }
.messages-app .mc-pill{
    flex:1; height:52px; margin:0; padding:0; border:0; border-radius:26px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    font-family:inherit; font-size:16px; font-weight:600; letter-spacing:.2px; cursor:pointer;
    transition:opacity .15s ease, transform .15s ease;
}
.messages-app .mc-pill:active{ opacity:.7; transform:scale(.98); }
.messages-app .mc-cancel{ background:#EDEDF0; color:#111111; }
.messages-app .mc-ok{ background:#111111; color:#FFFFFF; }
.messages-app .mc-ok svg{ width:16px; height:16px; fill:#FFFFFF; stroke:none; }

/* 发朋友圈：底部两个玻璃胶囊。取消 = 原版玻璃胶囊材质；发布 = 黑色磨砂胶囊 */
.messages-app .mc-actions{ display:flex; gap:12px; margin-top:14px; }
.messages-app .mc-pill{
    flex:1; height:52px; margin:0; padding:0; border-radius:999px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:inherit; font-size:16px; font-weight:600; letter-spacing:.3px; cursor:pointer;
    transition:transform .18s ease, opacity .18s ease;
}
.messages-app .mc-pill:active{ transform:scale(.97); opacity:.85; }
.messages-app .mc-cancel{ background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.75); box-shadow:0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%); color:#111111; }
.messages-app .mc-ok{
    background:rgba(18,18,18,0.86); border:0.5px solid rgba(255,255,255,0.22); color:#FFFFFF;
    box-shadow:0 10px 26px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.messages-app .mc-ok svg{ width:17px; height:17px; fill:#FFFFFF; stroke:none; }

/* 发朋友圈：修复文字被挤出、按钮颜色和层级 */
.messages-app .mc-pill{ flex:1 1 0; min-width:0; height:52px; border-radius:26px; font-size:16px; font-weight:600; white-space:nowrap; }
.messages-app .mc-pill svg{ flex:none; }
.messages-app .mc-cancel{ background:#F0F0F3; border:0; color:#111111; box-shadow:inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:none; -webkit-backdrop-filter:none; }
.messages-app .mc-ok{ background:#111111; border:0; color:#FFFFFF; box-shadow:0 10px 22px rgba(0,0,0,.18); backdrop-filter:none; -webkit-backdrop-filter:none; }
.messages-app .mc-ok svg{ width:17px !important; height:17px !important; fill:#FFFFFF; stroke:none; }

/* 发朋友圈：竖向三个按钮，材质与聊天底栏一致（白色磨砂玻璃胶囊） */
.messages-app #fullMask .fm-body{ position:relative; }
.messages-app #fullMask .mc-text{ padding-right:70px !important; }
.messages-app .mc-rail{
    position:absolute; right:14px; bottom:0; display:flex; flex-direction:column; align-items:center; gap:8px;
    width:auto; height:auto; padding:10px 7px; border-radius:999px; box-sizing:border-box;
    background:rgba(255,255,255,0.72); backdrop-filter:blur(12px) saturate(180%); -webkit-backdrop-filter:blur(12px) saturate(180%);
    border:0.5px solid rgba(0,0,0,0.12); border-top:1px solid rgba(0,0,0,0.2);
    box-shadow:0 4px 12px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.9);
}
.messages-app .mc-tab{ width:42px; height:42px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; display:grid; place-items:center; }
.messages-app .mc-tab:active{ background:rgba(0,0,0,0.06); }
.messages-app .mc-tab svg{ width:20px; height:20px; fill:none; stroke:#111111; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mc-fab{ width:46px; height:46px; padding:0; border-radius:50%; border:0; background:#111111; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 14px rgba(0,0,0,0.22); }
.messages-app .mc-fab:active{ transform:scale(.94); }
.messages-app .mc-fab svg{ width:19px !important; height:19px !important; fill:#FFFFFF; stroke:none; transform:translate(1px,-1px); }

/* 朋友圈卡片：重新做，带点赞和评论 */
.messages-app .mf-card{ background:#FFFFFF; border-radius:20px; padding:14px 14px 12px; margin-bottom:12px; box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.05); }
.messages-app .mf-card-head{ display:flex; align-items:center; gap:10px; }
.messages-app .mf-card-head .av{ width:36px; height:36px; font-size:13px; flex:none; }
.messages-app .mf-card-who{ flex:1; min-width:0; display:flex; flex-direction:column; }
.messages-app .mf-card-who b{ font-size:14px; font-weight:650; color:#111; }
.messages-app .mf-card-who span{ margin-top:2px; font-size:11px; color:#8E8E93; }
.messages-app .mf-del{ border:0; background:none; font-size:12px; color:#8E8E93; cursor:pointer; padding:4px 2px; }
.messages-app .mf-card-text{ margin-top:12px; font-size:15px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:#111; }
.messages-app .mf-card-foot{ display:flex; gap:22px; margin-top:12px; padding-top:10px; border-top:1px solid #F0F0F3; }
.messages-app .mf-act{ display:flex; align-items:center; gap:6px; padding:0; border:0; background:none; cursor:pointer; color:#8E8E93; font-size:12px; font-weight:600; }
.messages-app .mf-act svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mf-act.on{ color:#111; }
.messages-app .mf-act.on svg{ fill:#111; stroke:#111; }
.messages-app .mf-cmts{ margin-top:10px; padding:10px 12px; border-radius:14px; background:#F6F6F8; }
.messages-app .mf-cmt-line{ font-size:13px; line-height:1.5; color:#111; }
.messages-app .mf-cmt-line + .mf-cmt-line{ margin-top:4px; }
.messages-app .mf-cmt-line b{ font-weight:650; margin-right:6px; }
.messages-app .mf-cmt-more{ margin-top:6px; padding:0; border:0; background:none; font-size:12px; color:#8E8E93; cursor:pointer; }
.messages-app .mf-cmt-list{ max-height:45vh; overflow:auto; display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.messages-app .mf-cmt-row{ display:flex; gap:10px; align-items:flex-start; }
.messages-app .mf-cmt-row .av{ width:30px; height:30px; font-size:12px; flex:none; }
.messages-app .mf-cmt-row b{ font-size:12px; font-weight:650; color:#FFFFFF; }
.messages-app .mf-cmt-row p{ margin:3px 0 0; font-size:13px; line-height:1.5; color:rgba(255,255,255,0.85); word-break:break-word; }
.messages-app .mf-cmt-empty{ text-align:center; font-size:12px; color:rgba(235,235,245,0.5); padding:12px 0; }
.messages-app .mf-cmt-bar{ display:flex; gap:8px; }
.messages-app .mf-cmt-input{ flex:1; min-width:0; height:44px; border:0; outline:none; border-radius:22px; padding:0 16px; background:rgba(255,255,255,0.1); color:#FFFFFF; font-size:14px; }
.messages-app .mf-cmt-send{ height:44px; padding:0 18px; border:0; border-radius:22px; background:#FFFFFF; color:#000000; font-size:14px; font-weight:700; cursor:pointer; }

/* 发朋友圈按钮：材质与“打开侧边栏”的按钮一致，位置上移、尺寸缩小 */
.messages-app .mc-rail{
    position:absolute; right:14px; bottom:96px; display:flex; flex-direction:column; align-items:center; gap:8px;
    width:auto; height:auto; padding:6px; border-radius:999px; box-sizing:border-box;
    background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.75);
    box-shadow:0 6px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.messages-app .mc-tab{
    width:38px; height:38px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer;
    display:grid; place-items:center; transition:background .15s ease, transform .15s ease;
}
.messages-app .mc-tab:active{ background:rgba(0,0,0,0.06); transform:scale(.94); }
.messages-app .mc-tab svg{ width:18px !important; height:18px !important; fill:none; stroke:#111111; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mc-tab.mc-go svg{ fill:#111111; stroke:none; transform:translate(1px,-1px); }

/* “谁可以看”设置页（覆盖在发朋友圈界面上） */
.messages-app #mcVisPanel{
    position:absolute; inset:0; z-index:5; box-sizing:border-box; background:#FFFFFF;
    padding:58px 22px calc(26px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.messages-app #mcVisPanel.show{ opacity:1; visibility:visible; }
.messages-app .mv-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.messages-app .mv-back{ width:38px; height:38px; padding:0; border:0; border-radius:50%; background:#F2F2F5; display:grid; place-items:center; cursor:pointer; }
.messages-app .mv-back svg{ width:18px; height:18px; fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mv-title{ font-size:16px; font-weight:700; color:#111; }
.messages-app .mv-sp{ width:38px; }
.messages-app .mv-list{ display:flex; flex-direction:column; gap:10px; }
.messages-app .mv-opt{
    width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:20px;
    border:1.5px solid transparent; background:#F4F4F7; cursor:pointer; text-align:left; font-family:inherit;
}
.messages-app .mv-opt.on{ background:#FFFFFF; border-color:#111111; }
.messages-app .mv-ico{ width:40px; height:40px; border-radius:50%; background:#FFFFFF; display:grid; place-items:center; flex:none; box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.messages-app .mv-ico svg{ width:20px; height:20px; fill:none; stroke:#111; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mv-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.messages-app .mv-txt b{ font-size:15px; font-weight:650; color:#111; }
.messages-app .mv-txt small{ font-size:12px; color:#8E8E93; }
.messages-app .mv-check{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid #D1D1D6; }
.messages-app .mv-opt.on .mv-check, .messages-app .mv-person.on .mv-check{ background:#111111; border-color:#111111; }
.messages-app .mv-check svg{ width:13px; height:13px; fill:none; stroke:#FFFFFF; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mv-label{ margin:22px 4px 10px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8E8E93; }
.messages-app .mv-people{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.messages-app .mv-person{ width:100%; display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:18px; border:1.5px solid transparent; background:#F4F4F7; cursor:pointer; font-family:inherit; text-align:left; }
.messages-app .mv-person.on{ background:#FFFFFF; border-color:#111111; }
.messages-app .mv-person .av{ width:34px; height:34px; font-size:12px; flex:none; }
.messages-app .mv-pname{ flex:1; min-width:0; font-size:14px; font-weight:600; color:#111; }
.messages-app .mv-empty{ text-align:center; font-size:13px; color:#8E8E93; padding:24px 0; }
.messages-app .mv-done{ margin-top:14px; height:52px; border:0; border-radius:26px; background:#111111; color:#FFFFFF; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; flex:none; }
.messages-app .mv-done:active{ opacity:.85; }

/* 发朋友圈按钮：完整复制“打开侧边栏”按钮的原版材质（含伪元素） */
/* ---------- 右侧剪头按钮 ---------- */
.messages-app .mc-tab{
    width: 46px; height: 34px; border: none; border-radius: 999px; cursor: pointer; flex-shrink: 0;
    background: linear-gradient(135deg, #111 0%, #3d3d3d 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease;
}
.messages-app .mc-tab:active{ transform: scale(.92); }
.messages-app .mc-tab svg{ width: 20px; height: 20px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* ---------- 参考按钮：玻璃胶囊（聊天室顶栏 + 唤起侧边栏） ---------- */
.messages-app #chatView .glass-btn, .messages-app #chatView .gear-btn, .messages-app .mc-tab{
    height: 36px; min-width: 44px; width: auto; padding: 0 13px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(0,0,0,0.04);
    backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: all 0.3s ease;
}
.messages-app #chatView .glass-btn svg, .messages-app #chatView .gear-btn svg, .messages-app .mc-tab svg{
    width: 15px; height: 15px; stroke: #000; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.messages-app #chatView .glass-btn:active, .messages-app #chatView .gear-btn:active, .messages-app .mc-tab:active{ transform: scale(0.92); background: rgba(0,0,0,0.08); }
.messages-app .mc-rail{
    display: none; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 500; color: #111; cursor: pointer; max-width: 240px;
    background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.75);
    backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.messages-app .mc-rail.show{ display: flex; }
.messages-app .mc-rail .cap-dot{ width: 7px; height: 7px; border-radius: 50%; background: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.08); flex-shrink: 0; }
.messages-app .mc-rail b{
    font-weight: 800; color: #fff; background: #000; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.messages-app .mc-rail{ position:absolute; right:14px; bottom:96px; display:flex; flex-direction:column; align-items:center; gap:8px; width:auto; height:auto; padding:6px; border-radius:999px; box-sizing:border-box; }
.messages-app .mc-tab{ width:38px !important; height:38px !important; min-width:38px; padding:0 !important; border-radius:50% !important; display:grid; place-items:center; }
.messages-app .mc-tab svg{ width:18px !important; height:18px !important; fill:none; stroke:#111111; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .mc-tab.mc-go svg{ fill:#111111; stroke:none; transform:translate(1px,-1px); }

/* 外框：完整使用“打开侧边栏”按钮的玻璃材质；三个按键本身不加玻璃 */
.messages-app .mc-rail{ height: 36px; min-width: 44px; width: auto; padding: 0 13px; border-radius: 999px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0,0,0,0.04); backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%); -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%); border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9); transition: all 0.3s ease; }
.messages-app .mc-tab{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; border:0 !important; }
.messages-app .mc-tab:active{ background:rgba(0,0,0,0.06) !important; }

/* 谁可以看：重新设计（分段切换 + 内容区 + 完成按钮） */
.messages-app #mcVisPanel{ position:absolute; inset:0; z-index:5; box-sizing:border-box; background:#FFFFFF; padding:58px 20px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; }
.messages-app #mcVisPanel.show{ opacity:1; visibility:visible; }
.messages-app .vs-head{ display:flex; align-items:center; justify-content:space-between; height:44px; margin-bottom:18px; }
.messages-app .vs-back{ width:40px; height:40px; padding:0; border:0; border-radius:50%; background:#F2F2F2; display:grid; place-items:center; cursor:pointer; }
.messages-app .vs-back svg{ width:18px; height:18px; fill:none; stroke:#111; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .vs-title{ font-size:17px; font-weight:700; color:#111; letter-spacing:.2px; }
.messages-app .vs-sp{ width:40px; }
.messages-app .vs-seg-wrap{ display:flex; padding:4px; border-radius:999px; background:#F2F2F2; margin-bottom:20px; }
.messages-app .vs-seg{ flex:1; height:38px; padding:0; border:0; border-radius:999px; background:transparent; font-family:inherit; font-size:14px; font-weight:600; color:#888888; cursor:pointer; transition:background .2s ease, color .2s ease; }
.messages-app .vs-seg.on{ background:#FFFFFF; color:#111; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.messages-app .vs-body{ flex:1; min-height:0; overflow-y:auto; }
.messages-app .vs-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:36px 16px; }
.messages-app .vs-hero-ico{ width:84px; height:84px; border-radius:50%; background:#111111; display:grid; place-items:center; margin-bottom:18px; box-shadow:0 14px 30px rgba(0,0,0,0.16); }
.messages-app .vs-hero-ico svg{ width:36px; height:36px; fill:none; stroke:#FFFFFF; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .vs-hero-title{ font-size:18px; font-weight:700; color:#111; }
.messages-app .vs-hero-desc{ margin-top:8px; font-size:13px; line-height:1.6; color:#888888; }
.messages-app .vs-count{ font-size:12px; color:#888888; margin:2px 4px 12px; }
.messages-app .vs-people{ display:flex; flex-direction:column; gap:6px; }
.messages-app .vs-person{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:18px; background:#F5F5F5; font-family:inherit; text-align:left; cursor:pointer; }
.messages-app .vs-person.on{ background:#EFEFEF; }
.messages-app .vs-person .av{ width:38px; height:38px; font-size:13px; flex:none; }
.messages-app .vs-name{ flex:1; min-width:0; font-size:15px; font-weight:600; color:#111; }
.messages-app .vs-check{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid #CCCCCC; }
.messages-app .vs-person.on .vs-check{ background:#111111; border-color:#111111; }
.messages-app .vs-check svg{ width:12px; height:12px; fill:none; stroke:#FFFFFF; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.messages-app .vs-empty{ text-align:center; font-size:13px; color:#888888; padding:28px 0; }
.messages-app .vs-done{ margin-top:14px; height:52px; border:0; border-radius:26px; background:#111111; color:#FFFFFF; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; flex:none; }
.messages-app .vs-done:active{ opacity:.85; }

/* 外框尺寸：玻璃材质取自按钮，但外框要保持竖向胶囊的尺寸 */
.messages-app .mc-rail{ height:auto !important; min-height:0 !important; width:auto !important; min-width:0 !important; padding:6px !important; flex-direction:column !important; display:flex !important; border-radius:999px !important; }

/* 发送按钮：默认就带上点击时的那层灰底 */
.messages-app .mc-tab.mc-go{ background:rgba(0,0,0,0.08) !important; }

/* 照片：选择、预览、移除 */
.messages-app .mc-photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.messages-app .mc-photos:empty{ display:none; }
.messages-app .mc-ph{ position:relative; width:64px; height:64px; border-radius:12px; overflow:hidden; background:#F2F2F2; }
.messages-app .mc-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.messages-app .mc-ph-x{ position:absolute; top:4px; right:4px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,0.6); color:#FFFFFF; font-size:13px; line-height:20px; cursor:pointer; }
.messages-app .mc-ph-add{ width:64px; height:64px; padding:0; border:1.5px dashed #CCCCCC; border-radius:12px; background:transparent; display:grid; place-items:center; cursor:pointer; }
.messages-app .mc-ph-add svg{ width:22px; height:22px; fill:none; stroke:#888888; stroke-width:1.8; stroke-linecap:round; }
.messages-app .mf-imgs{ display:grid; gap:4px; margin-top:10px; border-radius:12px; overflow:hidden; }
.messages-app .mf-imgs.n1{ grid-template-columns:1fr; }
.messages-app .mf-imgs.n2{ grid-template-columns:1fr 1fr; }
.messages-app .mf-imgs.n3{ grid-template-columns:1fr 1fr 1fr; }
.messages-app .mf-img{ width:100%; aspect-ratio:1 / 1; object-fit:cover; display:block; background:#F2F2F2; }
.messages-app .mf-imgs.n1 .mf-img{ aspect-ratio:auto; max-height:320px; }

/* ---------- 设置页名字：可点击自定义（与身份无关，单独保存） ---------- */
.messages-app .settings-profile .profile-name{ cursor: text; border-radius: 8px; padding: 0 6px; }
.messages-app .settings-profile .profile-name.editing{ background: rgba(128,128,128,.22); border-bottom: 1px dashed currentColor; outline: none; }

/* ---------- 资料卡拍立得：可上传照片 ---------- */
.messages-app .polaroid .sq{ cursor: pointer; }
.messages-app .polaroid .sq img{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 资料卡：宽度固定，不再随字体宽度变化（浏览器与手机一致） ---------- */
.messages-app .story-row .kr-head{ flex: 0 0 61px; width: 61px; box-sizing: border-box; }
.messages-app .story-row .story-card{ flex: 0 0 auto; width: 229px; max-width: calc(100% - 75px); }

/* ---------- 聊天消息：只有新消息播放进场动画，重绘不再闪 ---------- */
.messages-app .mrow{ animation: none; }
.messages-app .mrow.mrow-new{ animation: pop 0.25s ease; }

/* ---------- 设置页名字：固定为黑色、无阴影（覆盖全局 .profile-name 的样式） ---------- */
.messages-app .settings-profile .profile-name{ display: block; color: #000; text-shadow: none; letter-spacing: normal; line-height: 1.2; font-weight: 700; }

/* 朋友圈可见范围：只保留 SVG，无黑色圆底 */
.messages-app .vs-hero-ico{ width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; margin-bottom: 0; }
.messages-app .vs-hero-ico svg{ width: 64px; height: 64px; stroke: #8E8E8E; }

/* 信息 · 外观设置页：两个主题按钮与“打开侧边栏”按钮（.arrow-btn）完全一致 */
.messages-app #appearanceMgr .theme-opt{
    margin: 0 18px 10px; padding: 12px 20px; min-height: 44px; box-sizing: border-box;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: all 0.3s ease; color: #000;
}
.messages-app #appearanceMgr .theme-opt:active{ transform: scale(0.92); background: rgba(0,0,0,0.08); }
.messages-app #appearanceMgr .theme-opt.on{ background: rgba(0,0,0,0.08); color: #000; }
.messages-app #appearanceMgr .theme-opt .t-check{ color: #000; }

/* ===== 谁可以看（朋友圈可见度面板）美化 ===== */
.messages-app #mcVisPanel{ background: #FAFAFA; }
.messages-app .vs-head{ margin-bottom: 22px; }
.messages-app .vs-back{ width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; border: 0.5px solid rgba(0,0,0,0.10); box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform .15s ease; }
.messages-app .vs-back:active{ transform: scale(.92); }
.messages-app .vs-title{ font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }

.messages-app .vs-seg-wrap{ padding: 4px; background: #EBEBEB; border-radius: 999px; margin-bottom: 22px; }
.messages-app .vs-seg{ height: 36px; font-size: 14px; font-weight: 600; color: #8A8A8A; letter-spacing: 0.2px; }
.messages-app .vs-seg.on{ background: #111111; color: #FFFFFF; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }

.messages-app .vs-hero{ padding: 44px 16px 36px; }
.messages-app .vs-hero-ico{ width: 116px; height: 116px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 12px 32px rgba(0,0,0,0.07), inset 0 0 0 1px rgba(0,0,0,0.05); display: grid; place-items: center; margin-bottom: 0; }
.messages-app .vs-hero-ico svg{ width: 52px; height: 52px; stroke: #8E8E8E; stroke-width: 1.4; fill: none; }

.messages-app .vs-count{ display: inline-block; font-size: 12px; color: #8A8A8A; background: #EBEBEB; padding: 5px 11px; border-radius: 999px; margin: 0 2px 12px; }
.messages-app .vs-people{ gap: 8px; }
.messages-app .vs-person{ padding: 12px 14px; border-radius: 20px; background: #FFFFFF; border: 1px solid #EEEEEE; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.messages-app .vs-person:active{ transform: scale(.985); }
.messages-app .vs-person.on{ background: #111111; border-color: #111111; box-shadow: 0 8px 20px rgba(0,0,0,0.14); }
.messages-app .vs-person.on .vs-name{ color: #FFFFFF; }
.messages-app .vs-check{ width: 24px; height: 24px; border: 1.5px solid #D2D2D2; background: transparent; }
.messages-app .vs-person.on .vs-check{ background: #FFFFFF; border-color: #FFFFFF; }
.messages-app .vs-person.on .vs-check svg{ stroke: #111111; }
.messages-app .vs-empty{ padding: 40px 0; color: #A0A0A0; }

.messages-app .vs-done{ margin-top: 16px; height: 52px; border-radius: 26px; background: #111111; box-shadow: 0 10px 24px rgba(0,0,0,0.18); font-size: 16px; font-weight: 600; letter-spacing: 0.3px; transition: transform .15s ease; }
.messages-app .vs-done:active{ transform: scale(.98); opacity: 1; }

/* 信息 · 外观设置页：左上角返回（取消）按钮 与 顶部“外观设置”标题 = 打开侧边栏按钮（.arrow-btn）的同款样式 */
.messages-app #appearanceMgr > .edit-header > button:first-child,
.messages-app #appearanceMgr > .edit-header > .title{
    height: 36px; min-width: 44px; width: auto; padding: 0 13px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: rgba(0,0,0,0.04);
    backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9);
    transition: all 0.3s ease; color: #000;
}
.messages-app #appearanceMgr > .edit-header > button:first-child:active{ transform: scale(0.92); background: rgba(0,0,0,0.08); }

/* 发送消息：顺滑地往上推出（仅新消息） */
@keyframes pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.messages-app .mrow.mrow-new{ animation: pop 0.42s cubic-bezier(.22,1,.36,1) both; }

/* 人设页第一区：可折叠，折叠时底部渐隐 */
.messages-app .persona-fold-head{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 4px; border:0; background:none; cursor:pointer; font-family:inherit; }
.messages-app .persona-fold-head .persona-section-label{ display:inline-block; }
.messages-app .pf-chev{ font-size:14px; color:#8E8E8E; transition: transform .3s ease; }
.messages-app .persona-fold.collapsed .pf-chev{ transform: rotate(-90deg); }
.messages-app .persona-fold-body{ max-height: 1400px; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); }
.messages-app .persona-fold.collapsed .persona-fold-body{
    max-height: 70px; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 30%, transparent 100%); mask-image: linear-gradient(#000 30%, transparent 100%);
}

/* 消息条数面板 */
.messages-app .co-field{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin:0 18px 10px; border-radius:18px; background:#F5F5F5; font-size:14px; color:#111; }
.messages-app .co-field input{ width:88px; height:34px; border:0; border-radius:12px; background:#FFFFFF; text-align:center; font-size:15px; font-family:inherit; color:#111; box-shadow: inset 0 0 0 1px #E5E5E5; }
.messages-app .co-tip{ margin:4px 22px 12px; font-size:12px; color:#888; }

/* 聊天设置：一次性发出开关 */
.messages-app .rp-switch{ width: 46px; height: 28px; border-radius: 999px; border: 0; background: #D8D8D8; position: relative; cursor: pointer; transition: background .25s ease; padding: 0; }
.messages-app .rp-switch::after{ content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform .25s ease; }
.messages-app .rp-switch.on{ background: #111111; }
.messages-app .rp-switch.on::after{ transform: translateX(18px); }

/* 聊天设置：消息条数（深色卡片，与聊天室设置其它行一致） */
.messages-app .rp-opt{ margin-bottom:8px; border-radius:20px; background:rgba(255,255,255,.06); overflow:hidden; }
.messages-app .rp-opt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; text-align:left; }
.messages-app .rp-opt-row + .rp-opt-row{ border-top:.5px solid rgba(255,255,255,.08); }
.messages-app .rp-opt-t{ font-size:14px; font-weight:650; color:#fff; }
.messages-app .rp-opt-s{ margin-top:3px; font-size:11px; color:rgba(255,255,255,.45); }
.messages-app .rp-stepper{ display:flex; align-items:center; gap:12px; flex:none; }
.messages-app .rp-step{ width:32px; height:32px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.12); color:#fff; font-size:18px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .2s ease, transform .15s ease; }
.messages-app .rp-step:active{ background:rgba(255,255,255,.24); transform:scale(.92); }
.messages-app .rp-val{ min-width:22px; text-align:center; font-size:17px; font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.messages-app .rp-switch{ width:50px; height:30px; flex:none; border-radius:999px; border:0; padding:0; background:rgba(255,255,255,.16); position:relative; cursor:pointer; transition:background .25s ease; }
.messages-app .rp-switch::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#FFFFFF; box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .25s cubic-bezier(.22,1,.36,1), background .25s ease; }
.messages-app .rp-switch.on{ background:#FFFFFF; }
.messages-app .rp-switch.on::after{ transform:translateX(20px); background:#111111; }

/* 消息条数：数字可直接点击输入 */
.messages-app input.rp-val{ width:64px; height:34px; box-sizing:border-box; border:0; border-radius:12px; padding:0; background:rgba(255,255,255,.1); color:#FFFFFF; font-family:inherit; font-size:16px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; -moz-appearance:textfield; outline:none; }
.messages-app input.rp-val::-webkit-outer-spin-button, .messages-app input.rp-val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.messages-app input.rp-val:focus{ background:rgba(255,255,255,.2); }

/* 聊天室设置页（聊天设置 / 人设设置 / 聊天美化）：背景图 + 半透明遮罩 */
.messages-app #roomView{
    background-color: #0b0b0d;
    background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url("../assets/聊天室设置背景图/shezhibeijing.jpg");
    background-size: cover; background-position: center; background-repeat: no-repeat;
}


/* ===== 聊天室顶栏：下移 35px；头像+名字+状态 为玻璃胶囊（与顶栏按钮同款，无阴影）；顶栏下方渐变消失 ===== */
.messages-app .chat-head{
    position: relative; z-index: 2;
    padding-top: 89px;
    border-bottom: 0;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 62%, rgba(255,255,255,0) 100%);
}
.messages-app .chat-head > button{ flex: 0 0 auto; position: relative; z-index: 3; }
.messages-app .head-capsule{
    flex: 1 1 0; min-width: 0; max-width: 100%; height: 44px; box-sizing: border-box;
    display: flex; align-items: center; gap: 10px; padding: 0 14px 0 5px; border-radius: 999px;
    background: rgba(0,0,0,0.04);
    backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    -webkit-backdrop-filter: url(#lens-refraction) blur(12px) saturate(180%);
    border: 0.5px solid rgba(0,0,0,0.12); border-top: 1px solid rgba(0,0,0,0.2);
    box-shadow: none; overflow: hidden;
}
.messages-app .head-capsule .who{ min-width: 0; }

/* ===== 聊天底栏：渐变消失 ===== */
.messages-app .composer{
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #FFFFFF 42%);
    border-top: 0;
}

/* ===== 聊天室：顶栏上移 20px；顶栏与底栏叠在消息上方，消息从下方滚过去渐隐 ===== */
.messages-app #chatView .chat-head{
    position: absolute; top: 0; left: 0; right: 0; z-index: 5;
    padding: 69px 12px 14px;
    border-bottom: 0;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 40%, rgba(255,255,255,0) 100%);
}
.messages-app #chatView .thread{ padding-top: 140px; padding-bottom: 124px; gap: 4px; }
.messages-app #chatView .composer{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #FFFFFF 46%);
    border-top: 0;
}

/* ===== 气泡：统一间距，字体缩小 ===== */
.messages-app .thread{ gap: 4px; }
.messages-app .mrow.gap{ margin-top: 0; }
.messages-app .mrow.grp-head{ margin-bottom: 0; }
.messages-app .bubble{ font-size: 13px; }

/* ===== 朋友圈：边框顶部完整显示；背景图收紧并渐隐；头像白框无阴影 ===== */
.messages-app .mf-frame{ margin-top: 30px; overflow: visible; }
.messages-app .mf-cover{
    margin-top: 0; height: 170px; border-radius: 25px 25px 0 0; overflow: hidden;
    background-size: cover; background-position: center 35%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.messages-app .mf-cover-tip{ top: 12px; bottom: auto; right: 12px; }
.messages-app .mf-avatar{ border: 4px solid #FFFFFF; box-shadow: none; }

/* ===== 朋友圈：评论区点击后卡片向下展开 ===== */
.messages-app .mf-cmts{ margin-top: 10px; cursor: pointer; }
.messages-app .mf-cmts-open{ cursor: default; animation: mfExpand .3s ease; }
@keyframes mfExpand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.messages-app .mf-cmt-none{ font-size: 12px; color: #8E8E93; padding: 4px 0; }
.messages-app .mf-cmt-more{ display: inline-block; margin-top: 6px; font-size: 12px; color: #8E8E93; }
.messages-app .mf-inline-bar{ display: flex; gap: 8px; margin-top: 12px; }
.messages-app .mf-inline-input{ flex: 1; min-width: 0; height: 38px; border: 0; outline: none; border-radius: 19px; padding: 0 14px; background: #F2F2F5; color: #111; font-size: 13px; font-family: inherit; }
.messages-app .mf-inline-send{ height: 38px; padding: 0 16px; border: 0; border-radius: 19px; background: #111; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ===== 朋友圈：默认背景图；“点击更换背景”点了图片才出现 ===== */
.messages-app .mf-cover{ background-image: url('../assets/朋友圈/朋友圈壁纸.jpg'); }
.messages-app .mf-cover-tip{ opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.messages-app .mf-cover.tip-on .mf-cover-tip{ opacity: 1; pointer-events: auto; }

/* ===== 评论区：无色调，输入框与发送键缩短缩小 ===== */
.messages-app .mf-inline-bar{ margin-top: 8px; gap: 6px; }
.messages-app .mf-inline-input{ height: 30px; font-size: 12px; border-radius: 15px; padding: 0 12px; background: #F0F0F0; }
.messages-app .mf-inline-send{ height: 30px; padding: 0 12px; border-radius: 15px; font-size: 12px; }