/* Tochat is one app, with a WeChat-inspired layout across both phone themes. */
.home-page { padding-top: 21px; }
.phone-screen.tochat-app { --accent:#111; --app-bg:#f3f3f3; --surface:#fff; --header-bg:#f3f3f3; --secondary:#929292; --line:transparent; --my-bubble:#000; }
.tochat-header { display:flex; align-items:center; justify-content:space-between; min-height:58px; flex-shrink:0; background:transparent; border:0; padding:0 18px; }
.tochat-header h2 { font-size:26px; font-weight:750; letter-spacing:-.8px; text-align:left; margin:0; flex:1; }
.tochat-header>div { display: flex; justify-content: flex-end; }
.tochat-header button { width: 42px; height: 44px; display: grid; place-items: center; color: #242424; }
.tochat-header .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.tochat-app .avatar { border-radius:50%; }
.tochat-list { padding:22px 18px 24px; background:transparent; }
.tochat-app .search-field { border:0; border-radius:28px; background:#fff; margin:0 0 14px; color:#929292; min-height:38px; padding:0 15px; box-shadow:0 4px 20px #00000002; }
.tochat-app .search-field input { font-size: 13px; padding: 8px 0; }
.tochat-app .search-field .icon { width: 15px; height: 15px; }
.tochat-list>.search-field { border:0; margin:0 0 14px; border-radius:28px; min-height:38px; }
.tochat-list>.demo-label { background: #f6f6f6; border-bottom: .5px solid #eee; padding: 7px 0; font-size: 9px; }
.tochat-app .chat-rows { margin:0; background:#fff; border-radius:28px; padding:5px 0; overflow:hidden; box-shadow:0 5px 24px #00000002; }
.tochat-app .chat-row { position:relative; gap:11px; min-height:var(--soft-list-row); height:var(--soft-list-row); padding:9px 14px; border:0; background:transparent; }
.tochat-app .chat-row::after { content:none; }
.tochat-avatar { position: relative; flex-shrink: 0; }
.tochat-avatar>.avatar { width:42px; height:42px; }
.tochat-avatar>.badge { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; min-width: 17px; font-size: 10px; background: #757575; color: #fff; border: 0; }
.tochat-app .row-copy { gap:4px; overflow:hidden; }
.tochat-app .row-copy>b { color:#111; font-size:15px; font-weight:650; }
.tochat-app .row-copy>span { color:#939393; font-size:11px; max-width:none; }
.tochat-app .row-meta { padding:0; gap:6px; min-width:32px; align-self:center; align-items:flex-end; }
.tochat-app .row-meta>time { font-size:9px; color:#999999; font-variant-numeric:tabular-nums; }
.tochat-tabbar { height:var(--soft-nav-height); min-height:var(--soft-nav-height); flex-shrink:0; margin:8px 18px 2px; background:#fff; border:0; border-radius:28px; padding:0 7px; box-shadow:0 4px 24px #00000003; }
.tochat-tabbar>button { color:#a1a1a1; width:25%; min-width:0; min-height:44px; height:44px; gap:0; padding:0; }
.tochat-tabbar .icon { width:22px; height:22px; stroke-width:1.6; }
.tochat-tabbar>button>span { font-size: 10px; }
.tochat-tabbar>.selected { color:#000; }
.tochat-tabbar>.selected>.icon { fill:none; stroke-width:1.6; }
.tochat-app .app-header { background:var(--app-bg); border:0; }
.tochat-app .back-button, .tochat-app .header-actions>button { color: #242424; }
.tochat-app .back-button>span { display: none; }
.tochat-app .bubble { border-radius: 5px; font-size: 14px; line-height: 1.7; max-width: 258px; }
.tochat-app .message { gap: 11px; margin: 18px 0; }
.tochat-app .message>.avatar { width: 38px; height: 38px; border-radius: 5px; }
.tochat-app .me>.bubble { color: #1b1b1b; background: #d0d0d0; border-radius: 5px; }
.tochat-app .photo-bubble { padding: 0; border-radius: 5px; }
.tochat-app .chat-date { color: #b2b2b2; }
.tochat-app .chat-composer { background: #f7f7f7; border-color: #ddd; gap: 8px; }
.tochat-app .chat-composer>input { border: 0; border-radius: 5px; background: #fff; font-size: 14px; }
.tochat-app .chat-composer>.send-button { background: #8b8b8b; border-radius: 6px; }
.tochat-contacts { padding:14px 18px 24px; background:transparent; }
.tochat-contact-tools { background:#fff; border-radius:28px; overflow:hidden; margin:0 0 22px; }
.tochat-contact-tools>button { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 17px; border-bottom: .5px solid #eee; min-height: 59px; text-align: left; }
.tochat-contact-tools b { font-size: 15px; font-weight: 400; }
.contact-tool-icon { width: 37px; height: 37px; border-radius: 5px; color: #fff; display: grid; place-items: center; }
.contact-tool-icon.orange { background: #afafaf; }
.contact-tool-icon.green { background: #a0a0a0; }
.contact-tool-icon>.icon { width: 25px; height: 25px; }
.tochat-contacts .list-section-title { padding: 7px 17px; margin: 0; font-size: 10px; color: #8e8e8e; }
.tochat-app .contact-row { padding:10px 14px; gap:12px; border:0; min-height:64px; border-radius:22px; margin-bottom:5px; }
.tochat-app .contact-row>.avatar { width: 40px; height: 40px; }
.tochat-app .contact-row b { font-size: 15px; color: #202020; font-weight: 400; }
/* Moments keeps a white canvas; the rest of Tochat retains its own layout. */
.phone-screen:is([data-current-page="moments"],[data-current-page="role-moments"]) { --app-bg:#fff; --header-bg:#fff; background:#fff; }
.phone-screen:is([data-current-page="moments"],[data-current-page="role-moments"]) .tochat-header { min-height:48px; padding:0 12px; background:#fff; }
.phone-screen:is([data-current-page="moments"],[data-current-page="role-moments"]) .tochat-header h2 { font-size:17px; font-weight:600; letter-spacing:0; text-align:center; }
.phone-screen:is([data-current-page="moments"],[data-current-page="role-moments"]) .tochat-header>span,
.phone-screen:is([data-current-page="moments"],[data-current-page="role-moments"]) .tochat-header>div { width:42px; flex-shrink:0; }
.tochat-app .moments-scroll { background:#fff; container-type:inline-size; }
.tochat-app .moments-cover { --cover-full-height:390px; position:relative; height:240px; margin-bottom:48px; background:#fff; transition:height 320ms cubic-bezier(.22,1,.36,1); }
@supports (height:1cqw) { .tochat-app .moments-cover { --cover-full-height:max(240px,100cqw); } }
.tochat-app .moments-cover.is-expanded { height:var(--cover-full-height); }
.tochat-app .moments-cover>.moments-cover-profile { position:absolute; right:20px; bottom:-26px; display:flex; flex-direction:row; align-items:center; gap:12px; max-width:calc(100% - 130px); pointer-events:none; }
.tochat-app .moments-cover .avatar { border-radius:7px; width:72px; height:72px; flex-shrink:0; border:3px solid #fff; }
.tochat-app .moments-cover b { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-bottom:27px; color:#171717; font-size:17px; font-weight:600; text-shadow:none; }
.tochat-app .moments-cover:has(>.has-cover) b { color:#fff; text-shadow:0 1px 4px #0009; }
.moments-cover-button { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:hidden; padding:0; border:0; background:#fff; text-align:left; }
/* The image plane never resizes on toggle; only its clipping window grows. */
.moments-cover-button>img { display:block; width:100%; height:var(--cover-full-height); object-fit:cover; object-position:center; }
.moments-cover-change { position:absolute; bottom:12px; right:16px; display:flex; align-items:center; gap:7px; min-height:44px; padding:0 13px; border-radius:6px; color:#303030; background:#f4f4f4; font-size:13px; }
.moments-cover-change .icon { width:16px; height:16px; }
.moments-cover:has(>.has-cover)>.moments-cover-change { color:#fff; background:#0009; }
.moments-cover-change:focus-visible { outline:2px solid #576b95; outline-offset:3px; }
.moments-cover-change:disabled { opacity:.6; cursor:wait; }
.tochat-app .moments-cover>.moments-cover-profile { transition:opacity 160ms ease; }
.tochat-app .moments-cover.is-expanded>.moments-cover-profile { opacity:0; visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .tochat-app .moments-cover,.tochat-app .moments-cover>.moments-cover-profile { transition:none; } }
.moments-cover-button:focus-visible { outline:2px solid #576b95; outline-offset:-4px; }
.moments-cover-button:disabled { cursor:wait; }
.tochat-app .moments-scroll>.demo-label { background:#fff; color:#737373; border:0; text-align:left; font-size:10px; line-height:1.5; padding:2px 20px 14px; }
.tochat-app .moment { padding:18px 20px; gap:12px; border-bottom:1px solid #f0f0f0; }
.tochat-app .moment>.avatar { border-radius:5px; width:40px; height:40px; }
.tochat-app .moment-content { min-width:0; }
.tochat-app .moment-content>b, .tochat-app .moment-replies b { color:#576b95; font-size:15px; font-weight:600; }
.tochat-app .moment-content>p { font-size:15px; color:#171717; line-height:1.65; margin:5px 0 8px; overflow-wrap:anywhere; }
.tochat-app .moment-photo { border-radius:2px; width:min(200px,100%); }
.tochat-app .moment-image-grid { max-width:100%; }
.tochat-app .moment-image-grid>button { border-radius:2px; }
.tochat-app .moment-meta { min-height:36px; margin-top:8px; }
.tochat-app .moment-meta time { font-size:11px; color:#737373; }
.tochat-app .moment-meta button { min-width:36px; min-height:36px; color:#576b95; }
.tochat-app .moment-meta .moment-delete { font-size:11px; }
.tochat-app .moment-replies { background:#f7f7f7; border-radius:2px; }
.tochat-app .moment-replies .likes { color:#576b95; border-color:#e9e9e9; }
.tochat-app .moment-replies>p { color:#333; }
.tochat-me { padding:16px 18px 25px; background:transparent; }
.tochat-me-card { background:#fff; display:flex; align-items:center; gap:15px; padding:22px 18px; width:100%; text-align:left; border-radius:28px; }
.tochat-me-card>.avatar { width: 65px; height: 65px; border-radius: 7px; }
.tochat-me-card>span { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.tochat-me-card b { font-size: 21px; font-weight: 600; color: #171717; }
.tochat-me-card small { font-size: 11px; color: #888; }
.tochat-me-card em { font-size: 10px; color: #999; font-style: normal; line-height: 1.5; overflow-wrap: anywhere; }
.tochat-me-card>.icon { width: 15px; height: 15px; color: #bbb; }
.tochat-account-note { background:transparent; color:#aaa; padding:10px 16px; font-size:9px; }
.tochat-me .group-list { border-radius:28px; margin:18px 0; }
.tochat-me .group-list>button { min-height: 55px; padding: 12px 20px; font-size: 14px; color: #242424; }
.tochat-me .setting-icon { background:none; color:#111; margin-right:6px; }
.tochat-me .setting-icon>.icon { width: 22px; height: 22px; stroke-width: 1.8; }
.tochat-profile-avatar>.avatar { width: 80px; height: 80px; border-radius: 8px; margin: 20px auto; }


/* Shared grayscale tokens: adjust these four values for the next visual pass. */
.phone-screen.soft-app { --app-bg:#f3f3f4; --surface:#fff; --header-bg:#f3f3f4; --accent:#111; --secondary:#939397; --line:transparent; --my-bubble:#000; --soft-list-row:64px; --soft-nav-height:44px; --soft-message-padding:7px; --soft-role-height:88px; color:#111; }
.soft-app .avatar { border-radius:50%; }

.soft-app .primary-button { background:#111; color:#fff; border:0; border-radius:28px; }
.soft-app .secondary-button { color:#111; }
.soft-app .character-form input,.soft-app .character-form textarea,.soft-app .character-form select { background:#fff; color:#222; border:0; border-radius:18px; }
.soft-title { font-size:36px; font-weight:800; letter-spacing:-1.3px; margin:0 6px 20px; color:#080808; }
.soft-metadata { color:#99999d; font-size:9px; letter-spacing:1.2px; margin:0 5px 22px; }
.chat-section>summary { display:flex; align-items:center; gap:7px; list-style:none; cursor:pointer; padding:0 7px; margin-bottom:13px; font-size:17px; font-weight:700; min-height:28px; }
.chat-section>summary::-webkit-details-marker { display:none; }
.chat-section>summary::before { content:'›'; display:inline-block; font-weight:400; width:10px; font-size:22px; }
.chat-section[open]>summary::before { transform:rotate(90deg); }
.chat-section>summary small { font-size:10px; color:#a1a1a5; font-weight:400; margin-left:3px; letter-spacing:.4px; }
.groups-section { margin-top:24px; }
.groups-section>summary small { font-size:8px; margin-left:auto; }
.soft-group-empty { padding:18px; border-radius:28px; background:#fff; font-size:12px; color:#555; }
.soft-group-empty p { font-size:11px; color:#999; line-height:1.6; }
.tochat-app .row-meta .badge { background:#111; color:#fff; font-size:9px; min-width:17px; height:17px; }
.phone-screen.soft-app .screen-navigation { background:var(--app-bg); border:0; }
.phone-screen.soft-app .screen-navigation button::after { background:#111; }
.soft-app .profile-page .tiny-pill { color:#777; background:#e8e8ea; }
.soft-app .role-editor { background:var(--app-bg); }


/* The interface is neutral; user media retains its original color. */
.soft-app { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
.soft-app .soft-title,.soft-app .roles-heading h1 { font-weight:650; letter-spacing:-.6px; }
.soft-app .row-copy>b { font-weight:600; }
.soft-app .soft-metadata { letter-spacing:.2px; font-size:10px; }
.unread-dot { display:block; width:7px; height:7px; min-width:7px; border-radius:50%; background:#ff3b30; flex-shrink:0; }
.tochat-tabbar>button { position:relative; }
.tochat-tabbar>button>.unread-dot { position:absolute; top:8px; left:calc(50% + 8px); }
.app-icon>.unread-dot { position:absolute; top:-2px; right:-2px; width:9px; height:9px; }