body { background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .nav-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2.75rem; padding-top: var(--status-bar-height); background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 0.9375rem; padding-top: var(--status-bar-height); /* Ensure padding top includes status bar */ box-sizing: border-box; z-index: 100; border-bottom: 0.03125rem solid #f5f5f5; } .nav-placeholder { height: calc(2.75rem + var(--status-bar-height)); } .back-icon { width: 1.25rem; height: 1.25rem; } .nav-title { font-size: 1.0625rem; font-weight: bold; color: #333; } .nav-right { width: 1.25rem; display: flex; justify-content: flex-end; } .more-dots { display: flex; gap: 0.125rem; } .dot { width: 0.1875rem; height: 0.1875rem; background-color: #333; border-radius: 50%; } .message-list { padding: 0 0.9375rem; } .message-item { display: flex; align-items: center; padding: 0.9375rem 0; border-bottom: 0.03125rem solid #f5f5f5; } .icon-wrapper { position: relative; margin-right: 0.9375rem; } .msg-icon { width: 3rem; height: 3rem; border-radius: 50%; } .red-dot-badge { position: absolute; top: 0; right: 0; width: 0.5rem; height: 0.5rem; background-color: #FF3B30; border-radius: 50%; border: 0.0625rem solid #fff; } .content-wrapper { flex: 1; display: flex; flex-direction: column; } .top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3125rem; } .msg-title { font-size: 0.875rem; font-weight: bold; color: #333; } .msg-time { font-size: 0.75rem; color: #999; } .msg-preview { font-size: 0.8125rem; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 15.625rem; }