body{margin:0;background:#000;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:#fff}.app-root{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:12px 0;background:#000}.app-frame{position:relative;width:420px;height:820px;border-radius:28px;border:1px solid #333;background:#050506;overflow:hidden}.chat-screen{display:flex;flex-direction:column;height:100%}.chat-header{display:flex;align-items:center;padding:8px 10px;gap:8px;border-bottom:1px solid #111827}.back-btn{border:none;background:transparent;color:#e5e7eb;font-size:18px}.chat-header-info{flex:1;display:flex;flex-direction:column}.chat-name{font-size:16px;font-weight:600}.chat-status{font-size:11px;color:#10b981}.share-id-label{font-size:10px;color:#9ca3af}.chat-header-actions{display:flex;align-items:center;gap:4px}.share-id-btn{border-radius:999px;border:1px solid #374151;background:#111827;color:#e5e7eb;font-size:10px;padding:4px 8px}.icon-btn{border:none;background:transparent;color:#e5e7eb;font-size:16px}.pair-box{display:flex;align-items:center;gap:4px;margin-top:6px}.pair-input{flex:0 0 70px;border-radius:999px;border:1px solid #374151;background:#020617;color:#e5e7eb;font-size:11px;padding:3px 8px}.pair-submit{border-radius:999px;border:1px solid #1e7ad8;background:#1e7ad8;color:#fff;font-size:11px;padding:3px 8px}.retention-bar{display:flex;align-items:center;gap:6px;font-size:11px;color:#9ca3af;padding:4px 10px}.retention-bar select{background:#111827;border-radius:999px;border:1px solid #374151;color:#e5e7eb;font-size:11px;padding:2px 8px}.message-list{flex:1;padding:8px 12px 60px;overflow-y:auto}.date-divider{text-align:center;font-size:11px;color:#6b7280;margin:8px 0 16px}.message-row{display:flex;margin-bottom:6px}.bubble{max-width:70%;padding:6px 8px 4px;position:relative}.bubble-own{background:#1e7ad8;color:#fff;border-radius:18px 18px 4px}.bubble-other{background:#1f2933;color:#e5e7eb;border-radius:18px 18px 18px 4px}.bubble-text{font-size:13px}.bubble-time{font-size:10px;opacity:.8;text-align:right;margin-top:2px}.file-box{background:#0003;border-radius:12px;padding:6px}.file-name{font-size:11px;color:#d1d5db;margin-bottom:4px}.photo-thumb{display:block;max-width:180px;border-radius:10px}.file-open-btn{display:inline-block;margin-top:4px;font-size:11px;padding:3px 8px;border-radius:999px;background:#111827;color:#e5e7eb}.chat-input-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid #111827;background:#020617}.round-btn{width:32px;height:32px;border-radius:999px;border:none;background:#111827;color:#e5e7eb}.attach-btn{font-size:20px}.send-btn{font-size:16px}.chat-input{flex:1;background:#020617;border-radius:999px;border:1px solid #374151;color:#e5e7eb;font-size:13px;padding:6px 10px}.longpress-menu{position:absolute;left:50%;bottom:70px;transform:translate(-50%);background:#111827;border-radius:12px;border:1px solid #4b5563;padding:8px 10px;display:flex;gap:8px;z-index:10}.longpress-menu button{border-radius:999px;border:1px solid #374151;background:#020617;color:#e5e7eb;font-size:11px;padding:4px 8px}.saved-indicator{position:absolute;right:16px;top:52px;font-size:11px;padding:4px 8px;border-radius:999px;background:#111827;border:1px solid #1e7ad8;color:#e5e7eb}.bottom-nav{margin-top:8px;padding:4px 8px;display:flex;gap:8px;justify-content:center;background:#000;border-top:1px solid #222;width:100%;max-width:420px}.nav-btn{flex:1;max-width:140px;border-radius:999px;border:1px solid #333;background:#111;color:#ddd;font-size:12px;padding:6px 0}.nav-btn.active{background:#1e7ad8;border-color:#1e7ad8;color:#fff}.secret-box-page{background:#050506;height:100%;padding:16px 12px;color:#f5f5f5}.sb-header{margin-bottom:12px}.sb-title{font-size:18px;font-weight:600}.sb-subtitle{font-size:11px;color:#9ca3af;margin-top:2px}.sb-tabs{display:flex;justify-content:space-between;gap:6px;margin:12px 0}.sb-tabs button{flex:1;background:#111;border:1px solid #333;padding:6px 0;border-radius:999px;color:#ddd;font-size:13px}.sb-tabs button.active{background:#1e7ad8;border-color:#1e7ad8;color:#fff}.sb-current-label{font-size:11px;color:#9ca3af;margin-bottom:6px}.sb-content{border-radius:12px;border:1px solid #222;background:#050608;padding:8px;height:calc(100% - 120px);overflow-y:auto}.sb-empty{font-size:12px;color:#9ca3af;text-align:center;padding:24px 8px}.sb-item{background:#111217;border-radius:10px;border:1px solid #262626;padding:8px 10px;margin-bottom:8px}.sb-item-main{font-size:13px;margin-bottom:4px;word-break:break-all}.sb-item-meta{font-size:10px;color:#6b7280}:root{--layer-1: #eef0f4;--layer-2: #f5f6fa;--layer-3: #ffffff;--text-primary: #1c1e21;--text-secondary: #606770;--bubble-own-bg: #0084ff;--bubble-own-text: #ffffff;--bubble-other-bg: #e4e6eb;--bubble-other-text: #050505;--input-bg: #ffffff;--input-border: #ccd0d5;--nav-bg: #ffffff;--nav-active-bg: #0084ff;--nav-active-text: #ffffff;--app-font-size: 16px}[data-theme=dark]{--layer-1: #121212;--layer-2: #1c1e22;--layer-3: #2a2b31;--text-primary: #ffffff;--text-secondary: #a8a8a8;--bubble-own-bg: #0084ff;--bubble-own-text: #ffffff;--bubble-other-bg: #3c3f45;--bubble-other-text: #ffffff;--input-bg: #2e3036;--input-border: #3c3f45;--nav-bg: #2a2b31;--nav-active-bg: #0084ff;--nav-active-text: #ffffff}body{background:var(--layer-1);color:var(--text-primary);font-size:var(--app-font-size)}.chat-screen{display:flex;flex-direction:column;height:100%;background:var(--layer-2)}.message-list{flex:1;overflow-y:auto;padding:16px}.date-divider{text-align:center;color:var(--text-secondary);margin:16px 0;font-size:12px}.message-row{display:flex;margin-bottom:10px}.message-row.own{justify-content:flex-end}.message-row.other{justify-content:flex-start}.bubble{max-width:75%;padding:10px 14px;border-radius:18px;position:relative}.bubble-own{background:var(--bubble-own-bg);color:var(--bubble-own-text);border-bottom-right-radius:4px}.bubble-other{background:var(--bubble-other-bg);color:var(--bubble-other-text);border-bottom-left-radius:4px}.bubble-time{font-size:10px;opacity:.7;margin-top:4px;text-align:right}.retention-bar{padding:8px 16px;font-size:14px;background:var(--layer-3);border-bottom:1px solid var(--input-border)}.saved-indicator{padding:8px 16px;background:var(--layer-3);color:var(--text-secondary);font-size:13px}.app-root{max-width:430px;margin:0 auto}.app-frame{background:var(--layer-2);border-radius:24px;overflow:hidden;min-height:600px;box-shadow:0 10px 30px #00000040}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--layer-3);border-bottom:1px solid var(--input-border)}.chat-header-left{display:flex;align-items:center;gap:8px}.icon-btn{border:none;background:transparent;color:var(--text-primary);cursor:pointer;width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center}.icon-btn.back-btn{font-size:18px}.icon-btn.call-btn.active{background:var(--bubble-own-bg);color:#fff}.avatar-circle{width:32px;height:32px;border-radius:999px;background:var(--bubble-other-bg);display:flex;align-items:center;justify-content:center;font-weight:600}.chat-header-text{display:flex;flex-direction:column}.chat-header-name{font-weight:600}.chat-header-status{font-size:12px;color:var(--text-secondary)}.chat-header-actions{display:flex;align-items:center;gap:6px}.chat-input-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--layer-3);border-top:1px solid var(--input-border)}.chat-input-form{display:flex;align-items:center;flex:1;gap:8px}.chat-input{flex:1;border:1px solid var(--input-border);background:var(--input-bg);padding:10px 14px;border-radius:24px;outline:none}.round-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.attach-btn,.send-btn{background:var(--bubble-own-bg);color:#fff}.camera-btn{background:var(--layer-3);border:1px solid var(--input-border);color:var(--text-primary)}.empty-friends{text-align:center;padding:20px 0}.primary-btn{padding:10px;border-radius:8px;background:var(--bubble-own-bg);color:#fff;border:none;font-size:16px}.secondary-btn{padding:10px;border-radius:8px;background:#444;color:#fff;border:none;font-size:16px}.friend-item{display:flex;align-items:center;padding:10px;background:var(--layer-3);border-radius:8px;gap:12px}.friend-avatar{width:40px;height:40px;border-radius:9999px;background:var(--bubble-other-bg);display:flex;align-items:center;justify-content:center;font-weight:700}.friend-info{display:flex;flex-direction:column}.friend-name{font-weight:700}.friend-lastmsg{font-size:12px;color:var(--text-secondary)}.settings-page{padding:20px;color:var(--text-color);background:var(--bg-color);height:100vh}.settings-header{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:20px}.settings-section{background:#ffffff0f;padding:15px;margin-bottom:20px;border-radius:10px}.settings-section h3{margin-bottom:10px}.settings-section button{padding:8px 14px;margin-right:10px;border-radius:6px;border:none;background:#444;color:#fff}.settings-section button.active{background:#1e90ff}.settings-section select{padding:8px;border-radius:6px;background:#222;border:1px solid #555;color:#fff}.userlist-root{height:100%;display:flex;flex-direction:column}.userlist-header{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(0,0,0,.06)}.userlist-header-left{display:flex;align-items:center;gap:8px}.userlist-avatar{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;background:#3b82f6;color:#fff}.userlist-myinfo{display:flex;flex-direction:column}.userlist-myname{font-size:14px;font-weight:600}.userlist-mystatus{font-size:11px;color:#10b981}.userlist-settings-btn{margin-left:auto;border:none;background:transparent;font-size:20px;cursor:pointer}.userlist-main{flex:1;overflow-y:auto;padding:8px 12px 16px}.userlist-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.userlist-section-header h3{font-size:14px;font-weight:600}.userlist-empty,.userlist-add-friend{border-radius:12px;padding:12px;background:#00000008;margin-top:8px}.userlist-description{font-size:12px;color:#777;margin:4px 0 10px}.userlist-actions{display:flex;flex-direction:column;gap:8px}.userlist-friend-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}.friend-item{display:flex;align-items:center;gap:8px;width:100%;border-radius:12px;padding:8px 10px;border:none;background:#fff;cursor:pointer;text-align:left}.friend-item:hover{background:#f3f4f6}.friend-avatar{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:600;background:#e5edff;color:#1d4ed8}.friend-info{flex:1;min-width:0}.friend-topline{display:flex;align-items:center;justify-content:space-between}.friend-name{font-size:14px;font-weight:600}.friend-lasttime{font-size:11px;color:#999;margin-left:8px}.friend-lastmsg{font-size:12px;color:#666;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-lastmsg-empty{color:#bbb}.userlist-input-row{display:flex;align-items:center;margin-top:8px;gap:8px}.userlist-input-row input{flex:1;padding:6px 8px;border-radius:8px;border:1px solid #ddd;font-size:13px}.userlist-shareinfo{margin-top:16px;border-radius:8px;border:1px solid rgba(0,0,0,.06);padding:8px 12px;font-size:13px}.userlist-shareinfo-exp{font-size:11px;color:#777}